Rich Internet Apps:
RAD for the Web
These RAD for the Web pages offer free downloads of docs and code.
RAD for the Web is for web applications from Windows programs on the
web to HTML5 apps in web browsers. Get free collaboration on apps
development. And bespoke apps complete (for eventual fee) - Contact
RAD for the Web.
Samples and Examples - PDF and ZIP file downloads
Regarding material on this page, enquire for:
Web Apps resources, help, advice, for study, learning and
Collaboration in design and origination of Web Apps as teaching
Technical Web Apps for remote or mobile workers.
For students, teachers, engineers and ego-free programmers.
HTML5 Builder > Home > New... In folders tree click HTML5 Builder
Projects then click Client Web Application. Then, under heading Help,
click on Get Started with Client Web Application. This should open in
web browser - Help
page Client Web Application. Under Help Resources there is
Tutorial - Hello World.
Deploy a Client Web App
Minimal application - Button on webpage when clicked opens message box
1. New Project - Double-click on Client Web Application (graphic-1).
This opens Design View of webpage ready for components to be added. At
the outset, click on Save All (top toolbar). In Projects folder open
'button' sub-folder, change file name to button.js and click Save. Then
see Save Project As dialog and change project file name to client web
app.h5bprj, click Save. Project files saved are then:
2. In graphic-2, Standard Button is placed on page and Properties set as
shown - BorderRadius, ButtonType, Caption, Color, Font size. Also the
button width is set to 150 and height set to 50 (to set a property such
as width , select the component on page and click on property name in
Object Inspector, make numeric entry (pixels) and press Enter). And
click outside of the button to select the page, then in Object Inspector
for the page, set GenerateTable false, IsForm false and rename the page
as required (here Name and Caption set to ButtonClick). Press F1 for
help on any selected property in Object Inspector.
3. In graphic-2, to get response to button click, select button on page,
select Events tab in Object Inspector and select OnClick for the button.
function Button1Click() and edit the function as shown. Finally click on
Save All (top toolbar) and inspect contents of project files:
4. There is h5b internal webserver that has access to RPCL library
(C:\Program Files\Embarcadero\HTML5 Builder\5.0\rpcl) so php
(application) files can be run from the IDE (top toolbar - Run with or
without debugging). Here is button.php listing:
A. In button.php: require_once("rpcl/rpcl.inc.php"); sets path to RPCL
and defines use_unit function so that forms, extctrls and stdctrls php files are included.
Then the form is created as a client web page.
B. In button.xml.php: page and button properties are listed, as selected in Object Inspector.
This is a one-way process - make changes in Object Inspector that get listed in xml.php file,
do not make changes by editing xml.php file.
But project file button.html (graphic-5) is empty and there is no CSS file.
For distribution, necessary to Deploy this client web app.
5. Home page Project Manager shows 'button' project selected.
Click on Client Deployment, click Next, choose the destination folder
(for set of files output by deployment process), click Next, let the process complete and click Finish,
then inspect files output:
A. In button.html the input id="Button1" is within div id="Button1_outer".
In the style sheet button.css #Button1 is referenced for style of button and #Button1_outer for positioning.
and this refers to the file in component library of HTML5 Builder. Best to replace this with
else use the Google Developers Hosted Libraries.
D. In button.php.js (for initializing the app) - jQuery document ready function is provided and the button click function is added as (preferred) alternative to button.html onclick event.
E. Given button.css, button.js and button.html in same folder then button.html opens in any web browser either local or called from server.
These files are available for download here.