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

Aug 2015

Regarding material on this page, enquire for:

For students, teachers, engineers and ego-free programmers.

Delphi HTML5 Builder

Client Web Apps

Graphic-1 HTML5 Builder (h5b) Home page

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

Graphic-2 HTML5 Builder (h5b) Design view


Minimal application - Button on webpage when clicked opens message box using Javascript.

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:
Graphic-3 HTML5 Builder (h5b) list of Project files

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.

Graphic-4 HTML5 Builder (h5b) Code view (Javascript)

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. Double-click the OnClick entry so as to open Code with Javascript function Button1Click() and edit the function as shown. Finally click on Save All (top toolbar) and inspect contents of project files:

Graphic-5 HTML5 Builder (h5b) Project files completed

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:

Button.php

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.
Button.xml.php

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.
Button.js
C. In button.js: Button onclick Javascript function.

Client web apps primarily are to comprise HTML, CSS and Javascript files. But project file button.html (graphic-5) is empty and there is no CSS file. For distribution, necessary to Deploy this client web app.
Graphic-6 HTML5 Builder (h5b) Project Manager
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:
Button project Client files
Button.js
Button.php.js
Button.css
Button.html
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.
B. In button.html the jQuery library is called as type="text/javascript" src="rpcl-bin/jquery/jquery-1.7.1.min.js"> and this refers to the file in component library of HTML5 Builder. Best to replace this with src="http://code.jquery.com/jquery-1.11.3.min.js"> else use the Google Developers Hosted Libraries.
C. In button.html the button onclick event is written as onclick="return Button1Click()" and the javascript function is in button.js.
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.