The first step in creating a server web application with HTML5 Builder is designing the user interface. There are many components available by default for creating user interfaces. Move your cursor over to the Tool Palette (the widget in the top-right corner) and expand the Standard category by clicking the plus (+) icon. Then select the Edit component and drop it onto the Designer. An instance of the component will be displayed on the Designer.

Repeat these steps for adding a Label, Button and another Edit component onto the Designer.

Now you should see four components on the Designer. Use the mouse pointer to rearrange the components like this:

Hide image

You can view and change a component’s properties using the Object Inspector and selecting the component on the Designer.

Hide image
Hide image
Hide image

Change the Caption = ‘Execute’ for the Button component.

Change the Caption = “HTML5 Builder DataSnap Web Client” for the Label component.

Change Name = eInput for the top Edit component.

Change Name = eOutput for the botton Edit component.

Note: To change a property of a component, select the component on the Designer (or the drop-down list in the top of the Object Inspector), change the value of the target property and press Enter to apply the change.

For web applications, any response to users’ actions such as button clicks and text field entries can be implemented as a response to an event. In HTML5 Builder, such responses are referred to as event handlers.

For the Button component, the most typical event is a button click. When you double-click the button on the Designer, HTML5 Builder creates skeleton code to implement an event handler for the button click event.

Now you can implement responses between the braces. Let’s implement a response to pass the value from the top Edit box (input) to the bottom Edit box (output).

function Button1Click($sender, $params)

{

// take in input from top Edit box and pass it to the bottom Edit box.

$this->eOutput->Text = $this->eInput->Text;

}

}

Note: In HTML5 Builder, while you are typing code, some hints indicating the kind of parameter you need to specify will appear. Also, hints will indicate the kinds of members that are supported in a given object, that is, the properties and methods of your components.

The implementation of this application is finished, so you can run it. You can click the Run button Hide image
in the main toolbar or press F9.

You will be asked to SAVE the application. Create a new folder, and save the application and project:

Hide image
Hide image

Once you have executed the application, the webpage will be loaded on your default web browser. Enter text in the top Edit and click the Execute button.

Hide image
Hide image

Now that we have a Web Server Application, we’ll add our DataSnap REST Client module.

A DataSnap REST client module is a data module that lets you access a DataSnap server. You can then include that data module in another data module or a webpage to be able to call the functions exposed by the DataSnap server.

Note: If you don’t already have a DataSnap Server, please use either Delphi or C++ Builder and create a new DataSnap REST Application (stand-alone VCL app, http, localhost, port 81, sample server methods, TComponent).

You MUST have your DataSnap Server started before creating the DataSnap REST Client Module.

Hide image

Do: Home >> Other Projects >> Other Files >> DataSnap REST Client

On the New DataSnap REST Client Module dialog, you can fill these properties as needed.

• Set the Protocol to either http (faster) or https (more secure).
• Choose a Programming Language for the module. It can be either PHP or JavaScript. If you choose PHP, the connection will be setup with RPCL components; if you can it to be generated with pure PHP code, just check the Generate pure PHP code option.
• Set the Host and the Port to those used by your DataSnap server.
• You might need to also fill URL Path, Context, User name and Password fields.

For this example, our DataSnap Server (Delphi or C++ Builder created) uses http, localhost, and port 81. We will also use PHP for the language.

Hide image

Click OK.

Hide image

Two files will be added to your Web Server Project, by default: ClientClassUnit1.php and ClientModuleUnit1.php.

The module (ClientModuleUnit1) contains a DSRestConnection component, which will be responsible for the connection with the DataSnap server. It also includes a read method, readServerMethods1Client(), which returns an instance of a class, TServerMethods1. This class is defined in the ClientClassUnit1 file and contains the methods on the DataSnap server you will be able to call from your web client.

    Call DataSnap Methods from Web Client

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder

This tutorial provides step-by-step instructions to create a mobile app connecting to a database using HTML5 Builder, and deploy the app to Android.

We will create a Mobile App to access remote database Category information and drill down on the Sub-Categories.

Part 1 -Install the Android Project Tools on your computer. Use android-setup from HTML5 Builder installation files.

Before you can build your mobile application for Android, you will need to setup the Android SDK and some additional software. HTML5 Builder includes an installation wizard to ease this process. In the folder or CD where you first run the HTML5 Builder installer, you will find this wizard under the name android-setup.exe.

Hide image

Run android-setup.exe and let it guide you through the installation process.

When you run the installer, you will be required to provide administration permissions. Your current user must be the administrator and you must provide administration permissions with it. Do not provide administration permissions through a different user account.

Please see http://docwiki.embarcadero.com/HTML5 Builder/en/Android_Setup for the detail steps for installing the HTML5 Builder Android Project Tools, Java SE Development Kit, Android SDK Tools and Apache Ant.

We will use the current Android 4.1 API 16 for this app. Using the Android SDK Manager, installed here:

"C:\Users\Al Mannarino Mac\AppData\Local\Android\android-sdk\SDK Manager.exe”, add (install) Android 4.1 API 16.

Then add a new AVD for Android 4.1 API 16. From the SDK Manager, use Tools > Manage AVDs > New.

Hide image

expand view>>

At the end, another wizard window will pop up, and will give you the option to reboot. Click Finish to reboot.

Note: You will not be able to build Android applications until you reboot your system.

    Part 2 - Set-up your InterBase database connection to the osCommerce database

    InterBase XE3 Developer Edition

    Part 3. Create a Server Mobile Project

    Part 4 - Connect to InterBase Database using HTML5 Builder

    Configuration

    Help Resources

    See Also

    Part 5 - Deploy to Mobile

    Using Eclipse (Java) IDE and Android Developer’s ToolKit (ADT)

    Hide image

    Hide image

expand view>>

    Hide image

    Congratulations!

    Part 1 - InterBase Developer Edition Installation

    Part 2 – Setting up InterBase Database

This tutorial shows you how to use the HTML5 Builder CSS3 Animation component to define a series of animation that you can later associate to your controls. HTML5 Builder provides a CSS3 Animations Property Editor where you can visualize your animations as you define them.

For additional details on the Animations, see the HTML5 Builder Help:

http://docwiki.embarcadero.com/HTML5_Builder/en/Animations

1. Create a new Client Web Application

Do: Home > NEW > HTML5 Builder Projects > Client Web Application

Hide image

A Client Web Application is a web application based on client-side web technologies.

Unlike server web applications, client web application do not have to rely on a web server to work, and you can open them in a web browser anywhere, without the need of an Internet connection.

You can still deploy them to a web server, as any other web application, for distribution purposes.

2. Place a Button onto the form

Hide image
Hide image

3. Drop the Animation component onto your form.

Hide image
Hide image
Hide image

4. On the Object Inspector, for the animation component, click on Items – Array

Hide image
Hide image

This opens the CSS3 Animations Editor.

5. Define some animations and name them so it’s easy to identify them later, i.e. if you stick with the defaults, just name your animation rotate, or Rotate360 to easily identify it later on.

Click New Item. You should get a 360 degree Rotation animation.

Set Caption = Rotation360

Set StartColor = BLUE (#0000CC)

Set EndColor = YELLOW (#FFFF00)

Hide image

Click OK, to close the editor.

expand view>>

NOTES: Controls, like the Button we are using in this example, can be animated as a response to client-side events.

We have defined our animation, Rotate360, using an Animation component, and we used it's Items property to define one or a series of animation that we can later associate to our controls, Button.

Next we'll associate the animation to our Button.

The association between an animation and a control is performed in the Animations property of the control that triggers the animation when it is interacted with, as opposed to the control that is actually animated. For example, to animate a Label when a Button is clicked, you would associate the Label with the target animation using the Button’s Animations property. This way, you can get the same event to animate several controls.

6. Select the triggering control, the Button, on the Designer, and from the Object Inspector, double-click the value of the Animations property to open the Animations Editor.

Hide image

Hide image

Notes: It is important to understand that animations are not something that you just trigger on a control. You add an animation to a control, and as a result the animation is triggered on the control. To trigger the animation again, first you need to remove the animation from the control, and then add it back.

expand view>>

Also, you cannot use the same event to add and remove the same animation. If the control had the animation before the event, and it has the animation after the event, it does not matter whether you removed or not the animation during the event. For example, if in the OnClick event of a button you remove an animation and add it back, clicking on the button the first time (when the animation has not yet been added to the button), the animation will work; the following times, since the button has the animation both when the event starts and when the event ends, the animation won’t be triggered. Instead, you must use different events to add and remove the same animation. To get the button to trigger an animation upon click, add the animation during the OnMouseDown event, and remove it during the OnMouseDown event.

Once you understand what it means to add and remove an animation, using the editor is simple.

7. On the Animations Editor, add a JavaScript Event for MouseOver (do this by clicking the + sign on the bottom of the Animations Editor under JavaScript Event Hide image

8. Then click Actions > add > this > Animation 1 – and select the name of your animation (Rotate360) and check it.

Click Preview. Click OK.

Hide image

expand view>>

Notes: You can repeat the steps above as many times as you see fits, the limit is defined by the available events.

To associate the animations to the controls, we followed these steps on the Animations Editor:

1. Add events to the list of JavaScript Events.
2. For each event:
1. Select the event.
2. Add actions to the list of Actions.
3. For each action:
1. Select the type of action: add, remove or toggle (adds the animations if the control does not have it, removes it otherwise).
2. Select the name of the control the animation will be added or removed from. You can use this to select the same control that triggers the action, that whose Animations property you are editing.
3. Select the Animation component that contains the animations that will be added or removed.
4. In the right-side column, under Animations, mark the checkboxes of the target animations (those to be added or removed).

9. Let’s run the web app, and see how the CSS3 styled button looks like.

Do: Run (F9) Hide image

You will be asked to SAVE the files and project. Create a new folder, such as "CSS3AnimationEditor":

Hide image

Hide image

Hide image

Hide image

Assuming your browser supports CSS3 Animation you will see the Button rotate 360 degrees and change color as you MouseOver the button. Very cool!

Hide image

Close the browser. CLOSE ALL in HTML5 Builder.

Note: For an additional Animation example, look at the HTML5 Builder demo located here: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\Components\Animation. It showcases several controls with all the available types of animations associated.

This ends this tutorial. We saw how to use the HTML5 Builder CSS3 Animation component to define one or a series of animation that you can later associate to your controls. HTML5 Builder provides a CSS3 Animations Property Editor where you can visualize your animations as you define them.

This tutorial shows you how to use the HTML5 Canvas component in HTML5 Builder to display 3D images.

This tutorial uses the CanvasPlanets project from: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5

This example’s JavaScript code comes directly from the internet using WebGL.

So what is WebGL?

Previously, if you wanted to do real-time 3D graphics on the web, your only real option was to use a plug-in such as Java or Flash. However, there is currently a push to bring hardware-accelerated graphics to the web called WebGL. WebGL is based on OpenGL ES 2, which means that we’ll need to use shaders. Since WebGL runs inside a web browser, we’ll also need to use JavaScript to control it.

The CanvasPlanets project uses the following third-party libraries:

• webgl-utils.js — for basic initialization of an OpenGL context and rendering on browser request.
• J3DI.js  - which contains general utilities, and 
• J3DIMath.js - which provides matrix functions.

A Canvas is a rectangular area to draw shapes.

To use this component, just define the type of Context you want to use, and use the OnPaint JavaScript event to draw on the canvas.

2d is the only standard Canvas Context currently available. But despite its 2d name there are several available JavaScript libraries, such as WebGL, you can use to draw 3D shapes with the Canvas component.

There is also a global JavaScript variable that will hold the context, so you can draw on the canvas from outside the OnPaint event. That variable is called ComponentName_ctx, where ComponentName is the value of the Name property for the canvas component.

Steps:

1. Open the HTML5 project from C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5

Do: Home > Open > C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5\HTML5.h5bprj

Hide image

Click Open.

expand view>>

If CanvasPlanets.php is not shown in the Designer already, then go to:

Home > Project Manager > double-click the CanvasPlanets.php file.

This opens the file in either the Code or Design view. Select Design view.

Hide image

The project is a web page with a Canvas component.

Do: Click on the Canvas in the Designer, and its Object Inspector says:

Hide image

Context = experimental-webgl

NotSupportedMessage =Your web browser does not supprt the HTML5 canvas element.

This property lets you define an alternative content message to be displayed on the page, instead of the canvas, for web browsers that do not currently support the HTML5 Canvas component.

Do: Switch to the Code view:

In the function PlanetsPageShowHeader, we are including some JavaScript files:

<script type="text/javascript" src="js/webgl-utils.js"></script>

<script type="text/javascript" src="js/webgl-debug.js"></script>

<script type="text/javascript" src="js/J3DI.js"></script>

<script type="text/javascript" src="js/J3DIMath.js"></script>

And the 3D pictures themselves contain all the JavaScript code we see here in the project.

Getting the initWebGL("Canvas") code, line 90, to go to the HTML5 Builder Canvas component is a simple as fixing the reference to the Canvas, and pointing them to the name of our HTML5 Builder Canvas component, in line 190:

function start()

{

var c = $("#Canvas").get()[0];

Then we just start the execution of the JavaScript code from the JavaScript Load event of the Page container (line 233).

function PlanetsPageJSLoad($sender, $params)

{

?>

//begin js

start();

//end

<?php

}

Do: switch to Design view. Select the Page. The Object Inspector shows the OnLoad event:

Hide image
Hide image

Note: Normally, the actual drawing of the canvas is performed on the OnPaint Javascript event, but since there is so much initialization doing on with this application, it was better to start painting the canvas as soon as we load the page, so that’s why we chose to use the Page OnLoad event.

Double-click the event PlanetsPageJSLoad, and it will take you back into the Code for the function PlanetsPageJSLoad.

What’s great about this is its just plain JavaScript code in this project. Nothing else!

Let’s run the app and see the results.

Run (F9) Hide image

You should get this. 3D rotating images of planets Earth and Mars. Very, very cool!

Hide image

This ends this tutorial. We saw how we can display 3D images using the HTML5 Builder Canvas component in 3D mode!

expand view>>

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder

This tutorial shows you how to use the HTML5 Canvas 2d component in HTML5 Builder.

A Canvas is a rectangular area to draw shapes.

To use this component, just define the type of Context you want to use, and use the OnPaint JavaScript event to draw on the canvas.

There is also a global JavaScript variable that will hold the context, so you can draw on the canvas from outside the OnPaint event. That variable is called ComponentName_ctx, where ComponentName is the value of the Name property for the canvas component.

Steps:

1. First we’ll create a new Server Web Application

A server web application is a web application that runs in a web server, allowing you to use both server-side and client-side web technologies, and built-in support for database interaction and AJAX is provided. Advanced interface localization features are also available. Once deployed to the server, it can be accessed through a web browser from any device.

Do: Home > New > HTML5 Builder Projects > Server Web Application.

Your new Web Server Project will then be created with an empty server page (unit1.php), which will be opened on the Design view.

Hide image

2. Drop a HTML5 Canvas on the page.

Do: From the Tool Palette, drop a HTML5 Canvas component on the web page.

Hide image

3. Resize the Canvas to fill the entire page.

Hide image

4. Looking at the properties of the HTML5 Canvas component from the Object Inspector, the most important property is the Context. The Context defines the JavaScript API we will use to draw shapes on the Canvas.

Hide image

2d is the only standard Canvas Context currently available. But despite its 2d name there are several available JavaScript libraries you can use to draw 3D shapes with the Canvas component.

Note: For a Canvas 3D example, using Context=experimental-webgl, please look the CanvasPlanets project in the Demos folder installed with HTML5 Builder located here: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5

Another important property is the NoCanvasSupportedError. This lets you define an alternative content message to be displayed on the page, instead of the canvas, for web browsers that do not currently support the HTML5 Canvas component.

The actual drawing of the canvas is performed on the OnPaint Javascript event.

Hide image

Hide image

The OnPaint event gets the Canvas Context object (2d in lower case), and will use it from that event to draw shapes on the Canvas.

5. Double-click on the OnPaint event,

Hide image

This will take us into the Code editor, to add our JavaScript code for the function HTML5Canvas1JSPaint:

Hide image

6. We’ll add code to get the context (which is on the event parameter), and we’ll also get the Canvas component since it will be really convenient to use for its dimensions.

//begin js

// Get context and canvas component.

context = event;

canvas = $('#Canvas1');

//end

7. Next for drawing, we’ll define a radial gradient. We’ll use its context and create its Radial Gradient. This type of Radial Gradient will be defined by two circles. Each one with X and y coordinates for its center and its radius. We will use concentric circles in this example and place them both on the middle of the canvas. The first circle will have no radius and the second will have half the canvas width as its radius. We code this like this:

// Create the Radial Gradient (background circle).

var gradient = context.createRadialGradient(

canvas.width()/2, canvas.height()/2, 0,

canvas.width()/2, canvas.height()/2, canvas.width()/2);

8. Next, let’s define some colors for the radius.

The Radiant Gradient has a method called addColorStop(float position, string color) which sets the position of the color along the radiant and the color itself. You can specify the color using string color names like ‘yellow’, ‘red’ and ‘black’, etc. We set the colors along the radiant like this:

// Add colors to the Radiant Gradient

gradient.addColorStop(0, 'yellow');

gradient.addColorStop(0.6, 'red');

gradient.addColorStop(1, 'black');

9. Next, we get to use that gradient in the context by setting the context.fillStyle method equal to the gradient, like this:

//Add fillStyle

context.fillStyle = gradient;

10. Next, we use the context to draw a rectangle which takes the whole canvas and uses our gradient, like this:

//Draw the rectangle

context.fillRect(0, 0, canvas.width(), canvas.height());

11. The complete JavaScript code for the function JSPaint looks like this:

//begin js

// Get context and canvas component.

context = event;

canvas = $('#Canvas1');

// Create the Radial Gradient (background circle).

var gradient = context.createRadialGradient(

canvas.width()/2, canvas.height()/2, 0,

canvas.width()/2, canvas.height()/2, canvas.width()/2);

// Add colors to the Radiant Gradient

gradient.addColorStop(0, 'yellow');

gradient.addColorStop(0.6, 'red');

gradient.addColorStop(1, 'black');

//Set the fillStyle and Draw the Rectangle

context.fillStyle = gradient;

context.fillRect(0, 0, canvas.width(), canvas.height());

//end

12. SAVE ALL

Hide image

expand view>>

Hide image

expand view>>

13. Let’s run the app, and see it print the canvas!

Run (F9) Hide image

You should get this. Very cool!

Hide image

14. Close web page.

15. Our $Canvas1 is also a global JavaScript variable that holds the context, so you can draw on the canvas from outside the OnPaint event. That variable is called ComponentName_ctx, where ComponentName is the value of the Name property for the canvas component. So, for our application it’s Canvas1_ctx.

Hide image

Hide image

16. Let’s add a Button, that when clicked by the User, clears the content of the canvas.

Resize the right-side of the canvas, and add a Button, like this:

Hide image
Hide image

17. From the Object Inspector, change the Button’s Caption = CLEAR

Change the ButtonType = Normal

Hide image

18. Use Button’s Javascript OnClick event for our JavaScript code to clear the content of the canvas.

Hide image

19. Well use the name of the global variable, named after the Canvas component with _ctx (Canvas1_ctx) and call its clearRect method and pass in the coordinates of the canvas, like this:

function Button1JSClick($sender, $params)

{

?>

//begin js

Canvas1_ctx.clearRect(0, 0, canvas.width(), canvas.height());

//end

<?php

}

20. Run the app, and click the CLEAR button.

Run (F9) Hide image

The content of the canvas should get cleared when you click the CREAR button:

Hide image

21. This ends this tutorial on how to use the HTML5 Canvas 2d component in HTML5 Builder. For a more detailed Canvas 2d example, please see the CanvasColorCircles project in the Demos directory installed with HTML5 Builder at this location: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\HTML5

Hide image

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder

Using either Delphi XE3 or C++ Builder XE3. For this example, I'll use Delphi XE3.

File > New > Other > Delphi Projects > DataSnap Server > DataSnap REST Application

Hide image

Click OK.

Hide image

Select "Stand-alone VCL application". Click Next.

Hide image
Hide image

Change the HTTP Port to 81, or whatever port you want to use that's available on your machine.

Click 'Test Port" and verify "Test port succeeded". Click OK.

Click Next.

Hide image

Select Server Methods Class, Sample Methods and Sample Web Files. We'll use these Sample Methods to test our DataSnap Server is working corectly.

Click Next.

Hide image

Select TDataModule. This will give us a container for the MySQL connection to connect to our MySQL database.

Click Next.

Hide image

Provide a directory for the project, such as: H5BDataSnapRESTApplication

Click Finish.

Hide image

Our DataSnap REST Application is created!

Run (F9) to test the DataSnap Server.

Hide image
Hide image
Hide image
Hide image

Click Start. Click Open Browser. Click Server Functions. Expand TServerMehods functions. Test ReverseString. Enter Value. Click Execute. Verify Result.

STOP and close the DataSnap Server.

Next, let's open the ServerMethodsUnit and add a connection to our MySQL database. The ServerMethodsUnit is a TDataModule since we chose "TDataModule" as the server methods ancestor class (from the DataSnap Wizard).

Hide image
Hide image
Hide image

From the Tool Palette, add a TSQLConnection to the TDataModule.

Using the Object Inspector, add your connection properties for the InterBase database. I'm using the sample employee.gdb database:

Driver = InterBase

Database = C:\ProgramData\Embarcadero\InterBase\gds_db\examples\database\employee.gdb

UserName = sysdba

Password = masterkey

LoginPrompt = false

Connected = True

Name= cnt1

Hide image

Our DataSnap Server is now connected to our InterBase database! Congratulations!

expand view>>

Next, we'll create a method for the client application to call to access the InterBase data.

Open the code for the ServerMethodsUnit file:

Hide image

Add a public function to GetData from the database. This function takes in a Table Name and a SQL string, and it returns a JSON array, like this:

expand view>>

function GetData(TableName: string; SQL: string): TJSONArray;

Add the Data.DBXJSON unit to the uses clause, for the TJSONArray.

Hide image

Next, let's implement this function. Highlight the GetData function, and Ctrl+Shift+C (gives you function completion).

expand view>>

Hide image

Since this is a query, we'll create a TSQLQuery to execute the SQL query the function will receive, and let's dynamically create the query, get the SQL, and establish the connection to the database, like this:

expand view>>

Hide image

Now that we receive the SQL, let's determine how we will encode the data in our response. The result will be a JSON array, so the array has two objects. The first object will have key as "tablename", and the value of that key will be the names of the fields of the table, like f1name, f2name, ....

expand view>>

The second object should contain the data. The key should be "data" and the data should be an array of rows, and each row should be an array of fields, and the value of the fields should be inside the last array. So this is how we will encode the data in that format.

We will first encode the "tablename" object.

Create variable called "FieldsObj" that's a TJSONObject.

FieldsObj := TJSONObject.Create;

We'll also create a variable FieldNameArray that's a TJSONArray.

FieldNameArray := TJSONArray.Create;

Next, we'll enumerate all the field names.

The For I loop, gives us all the field names from the JSON array.

Lastly, we'll take the FieldsObj and Add Pairs, and the first thing to add is the Table Name we received from the GetData function, and next we'll add the Fields (FieldNameArray). This should give us the data encoded how we want it.

To test, we can create the TJSONArray and add the first FieldsObj element.

Save ALL. Run (F9).

To test our GetData function, START the DataSnap Server, Click the Open Browser, expand the TServerMethods. You will now see our GetData function.

Enter any of the Employee database tables for TableName (such as country). Enter a SQL, such as "select * from country".

Hide image

Click Execute.

Hide image

The Result is an array, and the first object of the array is the tablename "country" (the input TableName we supplied in the GetData function), and the value of the object is all the fields [COUNTRY, CURRENCY], from the table country. EXCELLENT!

expand view>>

STOP and close of the DataSnap Server.

The next step is to create the object for the data.

DataObj : TJSONObject;

DataRows : TJSONArray;

RowFields: TJSONArray;

Next, let's create the DataObj and the DataRows array which is an array of data. And once we create the DataRows array, we can query (qry) through all the rows of data.

DataObj := TJSONObject.Create;

DataRows := TJSONArray.Create;

qry.First

For each row we want the value, so we can re-use the same code for the FieldNameArray.

and we create every row for each value in the array, and display its AsString value.

Once the row is created, we'll add it to our DataRows.

Lastly, we'll add all the rows to our DataObj.

Finally, we get our Results := TJSONArray.Create(FieldsObj, DataObj);

The code for our GetData() function is:

function TServerMethods1.GetData(TableName, SQL: string): TJSONArray;

var

qry: TSQLQuery;

FieldsObj: TJSONObject;

FieldNameArray: TJSONArray;

I: Integer;

DataObj: TJSONObject;

DataRows: TJSONArray;

RowFields: TJSONArray;

begin

qry := TSQLQuery.Create(Self);

qry.SQL.Text := SQL;

qry.SQLConnection := cnt1;

qry.Open;

FieldsObj := TJSONObject.Create;

FieldNameArray := TJSONArray.Create;

for I := 0 to qry.FieldCount - 1 do

FieldNameArray.Add(qry.Fields[I].FieldName);

FieldsObj.AddPair(TableName, FieldNameArray);

DataObj := TJSONObject.Create;

DataRows := TJSONArray.Create;

qry.First;

while not qry.Eof do

begin

RowFields := TJSONArray.Create;

for I := 0 to qry.FieldCount - 1 do

RowFields.Add(qry.Fields[I].AsString);

DataRows.Add(RowFields);

qry.Next;

end;

DataObj.AddPair('data', DataRows);

Result := TJSONArray.Create(FieldsObj, DataObj);

qry.Free;

end;

SAVE ALL. Run (F9). Test the GetData function.

Hide image

An array gets returned. The first object is the "fields" information. The second object is "data", and the value is also an array, and each element of the array is an array of field values. Very cool!

expand view>>

Our DataSnap Server and GetData function is now complete!

NOTE: Keep the DataSnap Server running. You can exit out of Delphi, but keep the DataSnap Server running. The DataSnap server needs to be running to create the DataSnap REST Client module in Part 3.

Next, we'll use HTML5 Builder to create a client web app to invoke the GetData function on the DataSnap Server and return results to the web client.

Using HTML5 Builder, we’ll create a Server Web Application, like this:

Hide image

A server web application is a web application that runs in a web server, allowing you to use both server-side and client-side web technologies, and built-in support for database interaction and AJAX is provided. Advanced interface localization features are also available. Once deployed to the server, it can be accessed through a web browser from any device.

Do: Home > New > HTML5 Builder Projects > Server Web Application.

Your new Web Server Project will then be created with an empty server page (unit1.php), which will be opened on the Design view.

Hide image

A Server Web Application consist mainly of server pages, often along with server data modules and server units, although they might have any type of file. To add new files to your project, use the Project Manager.

The first step in creating a server web application with HTML5 Builder is designing the user interface. There are many components available by default for creating user interfaces. Move your cursor over to the Tool Palette (the widget in the top-right corner) and expand the Standard category by clicking the plus (+) icon. Then select the Edit component and drop it onto the Designer. An instance of the component will be displayed on the Designer.

Repeat these steps for adding three Label, one Button and another Edit component onto the Designer.

Now you should see six components on the Designer. Use the mouse pointer to rearrange the components like this:

Hide image

You can view and change a component’s properties using the Object Inspector and selecting the component on the Designer.

Hide image
Hide image

Hide image
Hide image

Note: To change a property of a component, select the component on the Designer (or the drop-down list in the top of the Object Inspector), change the value of the target property and press Enter to apply the change.

For Button, change the Caption = ‘Get Data’.

For Label1, change the Caption = “HTML5 Builder DataSnap Web Client”.

For Edit1, change Name = eTableName.

For Edit2, change Name = eSqlQuery.

For Label2, change Caption = 'Table Name'. Change Name=lTableName.

For Label3, change Caption = 'SQL Query'. Change Name = lSqlQuery.

Let's run the web page to test it works OK. You can click the Run button Hide image
in the main toolbar or press F9.

You will be asked to SAVE the application. Create a new folder, like "DataSnapWebServerClient" and save the application and project.

Rename unit1.php to main.php.

Save the project, like "DataSnapWebServerClientProject.h5bprj"

Hide image

Hide image

Once you have executed the application, the webpage will be loaded on your default web browser.

Hide image

Now that we have a Web Server Application, we’ll add our DataSnap REST Client module.

A DataSnap REST client module is a data module that lets you access a DataSnap server. You can then include that data module in another data module or a webpage to be able to call the functions exposed by the DataSnap server.

Note: If you don’t already have a DataSnap Server, please use either Delphi or C++ Builder and create a new DataSnap REST Application (stand-alone VCL app, http, localhost, port 81, sample server methods, TComponent).

You MUST have your DataSnap Server started before creating the DataSnap REST Client Module.

Hide image

In HTML5 Builder, Home >> Other Projects >> Other Files >> DataSnap REST Client

On the New DataSnap REST Client Module dialog, you can fill these properties as needed.

• Set the Protocol to either http (faster) or https (more secure).
• Choose a Programming Language for the module. It can be either PHP or JavaScript. If you choose PHP, the connection will be setup with RPCL components; if you want it to be generated with pure PHP code, just check the Generate pure PHP code option.
• Set the Host and the Port to those used by your DataSnap server.
• You might need to also fill URL Path, Context, User name and Password fields.

For this example, our DataSnap Server (Delphi or C++ Builder created) uses http, localhost, and port 81. We will also use PHP for the language.

Hide image

Click OK.

Hide image

Two files will be added to your Web Server Project, by default: ClientClassUnit1.php and ClientModuleUnit1.php.

The module (ClientModuleUnit1) contains a DSRestConnection component, which will be responsible for the connection with the DataSnap server. It also includes a read method, readServerMethods1Client(), which returns an instance of a class, TServerMethods1. This class is defined in the ClientClassUnit1 file and contains the methods on the DataSnap server you will be able to call from your web client.

ClientClassUnit has our GetData() method:

Hide image

ClientModuleUnit has our DSRestConnection method:

Hide image

SAVE ALL in the same folder "DataSnapWebServerClient".

    Call DataSnap Methods from Web Client

For web applications, any response to users’ actions such as button clicks and text field entries can be implemented as a response to an event. In HTML5 Builder, such responses are referred to as event handlers.

For the Button component, the most typical event is a button click.

Double-click the button on the Designer, HTML5 Builder creates skeleton code to implement an event handler for the button click event.

Hide image

Now you can implement responses between the braces.

In our Web Client (main.php), we will code the function bGetDataClick to display the result of the DataSnap call for the function GetData() to our web client.

First, we prepare to use $ClientModuleDataModule1 global variable, by adding:

global $ClientModuleDataModule1;

And then we can call the GetData() method from its ServerMethods1Client property. We will pass the TableName from EditBox (eTableName) and the SQL from EditBox (eSqlQuery) to the GetData() method.

GetData($this->eTableName->Text, $this-eSqlQuery-Text);

Since the results gets returned in a array, we'll declare a new variable called $result to store the return value.

To quickly view the returned results, we'll use the var_dump($result); function.

Our bGetDataClick function looks like this:

function bGetDataClick($sender, $params)

{

// Prepare to use $ClientModuleDataModule1 global variable.

global $ClientModuleDataModule1;

$result = null;

// Run DataSnap ReverseString() method, passing it input field content.

$result = $ClientModuleDataModule1->ServerMethods1Client->GetData($this->eTableName->Text, $this->eSqlQuery->Text)->result;

// Print result using var_dump

var_dump($result);

}

Note: In HTML5 Builder, while you are typing code, some hints indicating the kind of parameter you need to specify will appear. Also, hints will indicate the kinds of members that are supported in a given object, that is, the properties and methods of your components.

Run the application (F9).

The output should be your JSON array, like this:

Hide image

Great!

Next, let's create a function to convert the results to a HTML5 Grid.

function JSONarrayToHTML5Grid($tablename, $jsonArray)

{

$fields = null;

$fields = $jsonArray[0]->$tablename;

$htmlgrid = null;

$htmlgrid = '<table> <tr>';

for($i = 0; $i < count($fields); $i++)

{

$htmlgrid = $htmlgrid . '<td>' . $fields[$i] . '</td>';

}

$htmlgrid = $htmlgrid . '</tr> </table>';

return $htmlgrid;

}

Next, on our main.php form, add a new Label (Label2). We will use the Caption property of the Label to display the database data.

Hide image

We will replace our "var_dump($result);" function with:

// This displays the fieldnames of the TableName

$this->Label2->Caption = $this->JSONarrayToHTML5Grid($this->eTableName->Text, $result);

and to see the border in the display we'll change:

$htmlgrid = '<table> <tr>'; to $htmlgrid = '<table border = 1> <tr>';

Run (F9) the app, and verify you get your fieldnames of the TableName, like this:

Hide image

Lastly, lets add all the data to our output HTML Grid.

expand view>>

To our function JSONarrayToHTML5Grid, add:

$rows = null;

$rowvalues = null;

Next, get all the rows from the JSON array, the second element of our RESULT:

$rows = $jsonArray[1]->data;

Next we need a "for loop" to iterate through all the rows.

The complete function looks like this:

function JSONarrayToHTML5Grid($tablename, $jsonArray)

{

$fields = null;

$fields = $jsonArray[0]->$tablename;

$htmlgrid = null;

$rows = null;

$rowvalues = null;

$htmlgrid = '<table border =1> <tr>';

for($i = 0; $i < count($fields); $i++)

{

$htmlgrid = $htmlgrid . '<td><b>' . $fields[$i] . '</b></td>';

}

$htmlgrid = $htmlgrid . '</tr>';

$rows = $jsonArray[1]->data;

for ($i = 0; $i < count($rows); $i++)

{

$htmlgrid = $htmlgrid . '<tr>';

$rowvalues = $rows[$i];

for ($j = 0; $j < count($rowvalues); $j++)

{

$htmlgrid = $htmlgrid . '<td>' . $rowvalues[$j] . '</td>';

}

$htmlgrid = $htmlgrid . '</tr>';

}

$htmlgrid = $htmlgrid . '</tr>';

return $htmlgrid;

}

Save ALL.

Run (F9).

We see the FieldNames get returned on the first row, and the values are underneath each FieldName. AWESOME!

The function converted a JSON Array to a HTML5 Grid, which is returned from our DataSnap Server.

Some modifications we can make to the output are:

1) Make the fieldnames BOLD with the <b> tag:

$htmlgrid = $htmlgrid . '<td><b>' . $fields[$i] . '</b></td>';

Hide image

expand view>>

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder

This tutorial shows you how to use HTML5 Builder to write your own HTML and JavaScript code or a use an existing template. You will see your code changes live and get a Live Preview of your project. You can design and customize existing HTML5 Builder UI components through CSS3 property and animation editors and embed them in your client page with Live Preview.

1. Create a new Client Web Application

Do: Home > NEW > HTML5 Builder Projects > Client Web Application

Hide image

A Client Web Application is a web application based on client-side web technologies.

Unlike server web applications, client web application do not have to rely on a web server to work, and you can open them in a web browser anywhere, without the need of an Internet connection.

You can still deploy them to a web server, as any other web application, for distribution purposes.

2. Select the Template tab.

Hide image

3. Import a Web Template (use Import Template icon) or Import default HTML template.

Hide image
Import Template Hide image
Import default HTML template.

For this example, we will use the Shinra web template: Shinra is an HTML5 template perfect for corporate, product and services sites. Includes portfolio page layouts. You can download the template from here: http://www.csstemplatesfree.org/shinra.html

We'll use the contact.html web template.

Hide image

Hide image

Click OPEN.

4. SAVE unit1.js

You will be asked to save unit.js. Create a new folder, such as ClientWebAppLiveView

Hide image

Hide image

5. The HTML template and the LiveView will be displayed, like this:

Hide image

6. Toggle the Dev Tools on/off with the toolbar icon. This will or can be used for debugging of your JavaScript code.

Hide image

Hide image

7. For any template you use (mytemplate.zip), extract the files to a folder on your machine, i.e. Desktop and make sure to save all HTML5 Builder project files to the root of that directory.

Hide image

8. Go to the Design tab and place a Button onto the form, apply some CSS3 properties and animations, and a JavaScript On-Click event (see the "HTML5 Builder – HTML5 CSS3 Animations Tutorial" on how to do this).

Hide image

Hide image

9. Save your Button unit1.js as myUnit1.js to the root of the project directory.

10. Go to your Template code (from Template tab), and select the area in your <body> for your web page navigation., where you want to insert your CSS3 Button.

<!DOCTYPE html>

<html>

<head>

<title>Document Title</title>

</head>

<body>

</body>

</html>

11. Start typing <B… your Button1 component will appear in the list through HTML Code Insight.

<h5b:Button id="Button1" />

Hide image

12. Hit enter, and you will see the Button in your Template through the Live Preview. Very cool!

Hide image

13. Save All.

14. Let’s run the web app, and of your browser supports all the animations, border styles and On-Click events, you'll see them working in the Live Preview or when you run the app.

Do: Run (F9) Hide image

Hide image

Do: CLOSE ALL.

This ends this tutorial. We saw how to use HTML5 Builder to write your own HTML and JavaScript code or a use an existing template. We see our code changes live and get a Live Preview of the project. We designed and customized HTML5 Builder UI components through the CSS3 property and animation editors and embed them in our client page with Live Preview.

Embarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder

This tutorial provides step-by-step instructions to create a Client Mobile Application using HTML5 Builder, and deploy the app to Android.

A Client Mobile application is a mobile application based on client-side web technologies and specially designed for mobile devices. Unlike server mobile applications, client mobile application do not have to rely on a web server to work, and you can run them on devices without an Internet connection.

You can still deploy them to a web server, as any other mobile application, for distribution purposes.

STEPS:

You can create a new client mobile application from Home > New > HTML5 Builder Projects > Client Mobile Application.

Hide image

Your new project will then be created with an empty client mobile page (unit1.js), which will be opened on the Design view.

Hide image

The central area of the Design view will be occupied by the Mobile Designer, a graphical mobile page edition tool. You will also note different widgets at the left, right and bottom sides of the Mobile Designer. Those are covered in detail in other pages of the documentation, and we will work with some of them in this tutorial.

For this example, we will create the app for an Android device, so select Samsung Galaxy S II as the background:

Hide image

The first step in creating a client mobile application with HTML5 Builder is designing the user interface. There are many components available by default for creating user interfaces. Move your cursor over to the Tool Palette (the widget in the top-right corner) and expand the Mobile category by clicking the plus (+) icon. Then select the MEdit component and drop it onto the Mobile Designer. An instance of the component will be displayed on the Mobile Designer.

Hide image

Repeat these steps for adding the MLabel and MButton components onto the Mobile Designer.

Hide image

Now you should see three components on the Mobile Designer. Use the mouse pointer to rearrange the components as you like.

Hide image

 You can view and change a component’s properties using the Object Inspector and selecting the component on the Mobile Designer.

Next, visually change the Caption for the MButton component. You can leave the MLabel’s Caption and MEdit’s Text properties empty, since the former will be defined programmatically, and the latter will be entered by the users. You must also change MButton’s ButtonType property to btNormal, so clicking on the button won’t result in the webpage being reloaded.

To change a property of a component, select the component on the Mobile Designer (or the drop-down list in the top of the Object Inspector), change the value of the target property and press Enter to apply the change. In the screenshot above, MButton’s Caption property was changed to "Say Hello", and ButtonType to btNormal.

Hide image

Hide image

For mobile applications, any response to users’ actions such as button clicks and text field entries can be implemented as a response to an event. In HTML5 Builder, such responses are referred to as event handlers.

For the MButton component, the most typical event is a button click. When you double-click the MButton on the Mobile Designer, HTML5 Builder creates skeleton code to implement an event handler for the button click event.

Hide image

Now you can implement responses between the braces. Let’s implement a response to show a message in the MLabel: “Hello, <name entered in the MEdit>!”.

$('#MLabel1').html("Hello, " + $('#MEdit1').val() + "!");

jQuery’s html() method lets you define the content of an element such as a MLabel, while val() allows you to retrieve the value of an input field like an MEdit control. In JavaScript, the quotation marks that must surround string literals are either ' ' or " ". You can also use the plus (+) sign to concatenate strings.

While you are typing code, you will get some hints indicating the kinds of members that are supported in a given object, that is, the properties and methods of the JavaScript (and jQuery) elements representing your components.

Hide image

Hide image

The implementation of this application is finished, so you can run it: click the Run button in the main toolbar or press F9. In order to get results close to those you are going to get when you run your application in an actual device, you should use the Chrome browser, or access to the application remotely from a mobile browser. See Mobile Execution.

You will be asked to SAVE the project:

Hide image

Once you have executed the application, the mobile page with an MEdit and an MButton will be loaded on your default web browser. Enter text in the MEdit and click the Say Hello button.

Hide image

You can deploy your application to any major mobile system as a native application from Home > Deploy to Mobile. Supported platforms are iOS, Android, BlackBerry, Windows Phone, Symbian, and WebOS.

For this example, we will deploy to Android.

Home > Deploy to Mobile

Select Android.

Hide image

Click Next.

Fill in Application Setup page:

Hide image

Click Next.

Select your Android Graphics. For this example, we'll keep the defaults.

Hide image

Click Next.

Select "Debug" for the Target Destination.

Select a destination folder for the generated Android Java files.

Hide image

Click Next.

The Android files get created.

Hide image

Click Next.

NOTE: If your Android Development Environemnt is not configured correctly, you will get a screen like this letting you know which Required Programs cannot be locked or need to be installed.

Hide image

Here we see my JAVA_HOME is not set to a valid JDK location.

I'm using Windows 8, 64-bit. Currently my JAVA_HOME is set to:

JAVA_HOME="C:\Program Files (x86)\Java\jdk1.6.0_26"

Since, I'm running Windows 8 64-bit, I need to use Java 7, so I downloaded and installed C:\Program Files\Java\jdk1.7.0_06,. and

set

JAVA_HOME= C:\Program Files\Java\jdk1.7.0_06

Hide image

Verify JAVA_HOME got set correctly:

Hide image

On HTML5 Builder, click the Refresh button on the Required Programs page, and you should get:

Hide image

Click Next.

Here you have the choice to build using your local SDK or use PhonegapBuild on the internet.

For this example, we will use our local SDK libraries.

Select SDK libraries.

Hide image

Click Next.

Select Emulator, Android 4.1 API 16

Hide image

NOTE: If your Emulator is not already started, please start it now, else it's possible the HTML5 Builder deploy will TIME-OUT, before the Emulator starts.

Start your Android emulator. Use the SDK Manager:

Hide image

Select Tools > Manage AVDs

Hide image

Select the Android41API16. Click Start.

Hide image

Click Launch.

Hide image

Emulator starts, and UN-LOCK the emulator:

Hide image

Now, in HTML5 Builder. Click NEXT on the Run your App page.

Hide image

Hide image

Click FINISH.

On your Emulator, the app should get loaded automatically, and it should look like this:

Hide image

CONGRATULATIONS!