PROGRAMMING

AndDevCon Preview: Appmethod Android apps using C++11

Written by J T403 on . Posted in PROGRAMMING

Appmethod is at AnDevCon in Boston this week. For those of you unable to make it in person, I wanted to share some screenshots of using C++ in Appmethod to target Android. In this preview, I will create a new C++ project with Appmethod, write some C++11 code, target Android to build and deploy my natively compiled APK, and run the app. If you are currently subscribing to Appmethod and want to give it a go, contact your local sales representative.

 

Starting a new C++ project:

 

Some C++11 source code to populate a std::string and display on the button::on_click event.

 

APK (Project1) is installed for me by the IDE, just by connecting my Android device and selecting it as the target.

And here is the output from the C++ string concatenation and message box. 

 


HTML5 Builder - DataSnap REST Client Module Tutorial

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies, Inc.

Purpose: This tutorial shows how to create and use a HTML5 Builder DataSnap REST Client Module to access a DataSnap server and call database access functions exposed by the DataSnap server.

Introduction: DataSnap is a technology that enables RAD creation of multi-tier web applications. You can use HTML5 Builder to create client-side web applications that interact with DataSnap. 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.

First 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.

    Add Some Controls

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.

ToolPaletteStandardHighlightedToolPaletteEditHighlighted

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

ToolPaletteLabelHighlightedToolPaletteButtonHighlighted

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.

    Write a Response for a Button Click

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.

WebHelloWorld3

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.

WebHelloWorld4

    Execute your Application

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

In the Code view, open the unit1.php of the WebServerApp project to call the DataSnap server methods.

Add: require_once("ClientModuleUnit1.php");

Hide image

Now, wherever you want to call a DataSnap method in your code:

  1. Include the global variable for the module: global $ClientModuleDataModule1;
  2. Call the method from its ServerMethods1Client property:

$ClientModuleDataModule1->ServerMethods1Client->methodName()

In our Web Client (unit1.php), we will replace the function Button1Click code with this to display the result of the DataSnap call for the function ReverseString to our web client.

function Button1Click($sender, $params)

{

// Prepare to use $ClientModuleDataModule1 global variable.

global $ClientModuleDataModule1;

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

$ds = $ClientModuleDataModule1->ServerMethods1Client->ReverseString($this->eInput->Text);

// Print result in output field.

$this->eOutput->Text = $ds->result;

}

}

We are calling the ReverseString function from the DataSnap Server. The value in our top Edit box is our input. Result gets displayed on the bottom Edit box.

Run the application (F9).

Hide image

    Concluding Remarks

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


HTML5 Builder – How to create a Server Mobile App with InterBas...

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies

    Introduction

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.

    Android Setup

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
Click to see full-sized 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

This mobile app will use an InterBase osCommerce database created from Create_osCommerce.sql, located in Appendix A -How to create the InterBase osCommerce database.

a. If you don't already have InterBase installed from the HTML5 Builder installation, then download and Install the InterBase XE3 Developer Edition from: https://downloads.embarcadero.com/free/interbase

    InterBase XE3 Developer Edition

InterBase XE3 Developer Edition provides all developers the best cross-platform database to build and test database applications for embedded and SME segments. Developers are free to choose the standard connectivity they want, and make use of a mature SQL92 compliant database for their applications. Database Performance monitoring allows the developer to streamline applications for optimal deployment.

Warning: This version of InterBase is licensed for development use only. Deployment Edition must be purchased separately.

b. Follow the steps in Appendix A - How to create the InterBase osCommerce database.


    Part 3. Create a Server Mobile Project

1. Open HTML5 Builder.

You can create a new mobile application from Home > New > HTML5 Builder Projects > Server Mobile Application, or you can add a new Server Mobile Page form to an existing Server Mobile Application from Home > New > HTML5 Builder Projects > Files > Server Mobile Page.

Note: A Server Mobile Application is a web application that runs in a server and is specially designed for mobile devices. You can use any server or client-side web technologies, and built-in support for database interaction and AJAX is provided. Advanced mobile theme features are also available. And once deployed to the server, it can be accessed through a web browser from any device, but it can also be deployed as a standalone application installable in most mobile devices, without any additional code!

We will then get the first file (unit1.php) of our project opened in the Designer (Design view) and the code from the Code view:

Hide image
Click to see full-sized image Hide image
Click to see full-sized image

As you can see, the Designer for mobile applications includes the possibility to preview different devices and includes backgrounds for them. You can also customize available devices and include your own, just review the documentation about it.

expand view>>

expand view>>

I own an Android Samsung Galaxy SII phone, so I’m going to select that, but you can select whatever device or tablet you wish to use and/or deploy it.

Now, before anything else, we should set a meaningful name for our project and our first file, unit1.php. You can do so from the Project Manager pane, located by Home >> Project Manager.

Hide image

DO: Right-click Project1 >> Save As >> Create new folder called CategoryLookup to save the project >> Save unit1 as main.php. Save Project1 as CategoryLookupProject.

Hide image
Hide image

SAY: We will also change from the Design view >> Object Inspector the Caption property of our MPage container to the name of our application: Category Lookup

Hide image

Design the Mobile Interface

Right now I only care about the main screen, it should be a simple application, as simple as possible, and I want to use it quickly, the less I have to tap the better.

When working with mobile applications, we should be careful when we choose components. My rule is: use a mobile component whenever you can, use other components whenever you have to. This way we both avoid incompatibility issues and leave the door open to use Mobile Theming later (can only be used with mobile components).

In the Designer, on the Tool Palette, expand the Mobile and Mobile Hardware sections and find out there are mobile versions of every component I need for my mobile interface. For example, I’d use a MEdit instead of Edit, MButton instead of Button and MList instead of ListBox. For Mobile Hardware, I have access the Accelerometer, Camera, Geolocation, Mobile Database, etc.

Hide image
Click to see full-sized image Hide image

For my interface, I only need a MList and MLabel.

expand view>>


Do: Drag and drop a MList and MLabel component onto the MPage. Resize and place it so it looks nice. Change MLabel Caption to “osCommerce Category Lookup” and Color to whatever looks nice to you:

Hide image
Click to see full-sized image

A MList is a dynamic list that we can fill up with data, either entered manually or we can set-up a database connection and retrieve the data from a database.

expand view>>

MList allows you to create an ordered or unordered list. Every element on the list can have up to two links, the secondary link will render as an Extra Button. MLists can be nested.  With an MList, we can:

  • Control the Theme and color variation of a MList with the MobileTheme component associated to it.
  • With DividerTheme a MobileTheme can be associated to all the dividers included in the MList
  • ExtraButtonTheme allows you to associate another MobileTheme component to the Extra Button of every element on the list.
  • Change the SystemIcon of the Extra Button to a different icon.
  • Select your own Icon for the Extra Button.
  • Indicate the Type of list: tOrdered or tUnordered
  • With isFiltered we'll add a filter Bar on the top of the list
  • isWrapped wraps the list with a grouped style. 
  • use Items to add elements to the List. Every item has the following attributes:
    • Caption Text to display, HTML are tags allowed.
    • Link Url of the page to load.
    • MList Select a Mlist from a list of the available MLists on the form to include a nested MList.
    • ExtraButtonHint Alternative text for the Extra Button.
    • ExtraButtonLink URL of the Extra Button. 
    • isDivider Will make this element a list divider.
    • CounterValue Numeric input that will display on the right side of the element.
    • Thumbnail Image to use as thumbnail on the right of the element
    • isIcon indicates that the Thumbnail image is an icon and will be displayed in a diferent way.


    Part 4 - Connect to InterBase Database using HTML5 Builder

In HTML5 Builder, using the Data Explorer tab, create a new InterBase connection to your osCommerce database (created from Appendix A).

Data Explorer lets you add database connections, and generate components already setup to work with those databases. You can access it from the Design view of your project:

Hide image

Data Explorer makes developing database applications extremely easy and fast. Once you add a connection to a database, you can browse the whole database from HTML5 Builder, and drag and drop pieces of data from the Data Explorer into the Designer, to generate data-aware components already setup to work with that data.

1. Right-click on INTERBASE | Add New Connection | Connection Name = osCommerceXE3

Hide image
Hide image

Click OK.

2. Right-click on the osCommerceXE3 node >> Modify Connection.

3. Enter your connection values for your InterBase instance.

Database Name = C:\Embarcadero\InterBase\examples\database\OSCOMMERCE.gdb

User Name = sysdba Password = masterkey

4. Click Test Connection to verify connection.

Hide image

5. In Data Explorer, expand your "osCommerceXE3" connection and verify you have your tables:

Hide image

6. As an optional feature to explore, right-click on osCommerceXE3 | SQL Window |and select and drag categories and categories_descriptions onto the designer. Look at the "Code" and "Data" tabs.

Hide image
Click to see full-sized image Hide image
Hide image

expand view>>

Note: You have the option to select several background images for mobile devices for Android, iOS, BlackBerry and Windows Phone devices and tablets, plus the option to add a New Device to your project. HTML5 Builder includes many device images located here: C:\Program Files (x86)\Hi5Beta6\repository\images\

Note: It does not matter which background you select, you will get to target Android, iOS, BlackBerry or Windows Phone device from the Wizard for PhoneGap.


We’ll use an Android Samsung Galaxy S II for this project.

Hide image
Hide image

7. Next, to get the data, we'll use a database connection. We'll be using our osCommerceXE3 database. From Data Explorer, drop the categories table onto the mobile device, like this:

Hide image

This adds four components to the page (Database, Table, Datasource and DBRepeater) onto the page.

InterBase is a relational database management system developed by Embarcadero Technologies, the company that is also behind HTML5 Builder.

NOTE: InterBase is already set-up and configured to work with HTML5 Builder, so no changes need to be made to any of these configuration and/or .ini files listed here.


There are different technologies you can use to access InterBase from web applications developed with HTML5 Builder:

PHP PDO Extension

Enable the extension by uncommenting (removing the ; at the beginning) the following line in PHP’s configuration file (php.ini):

;extension=php_pdo_firebird.dll → extension=php_pdo_firebird.dll

    PHP Extension

Enable the extension by uncommenting (removing the ; at the beginning) the following line in PHP’s configuration file (php.ini):

;extension=php_interbase.dll → extension=php_interbase.dll

  • HTML5 Builder’s internal server supports InterBase by default.

    Configuration

Tip: You can use the Data Explorer to configure your InterBase connections the RAD way.

To use a Database component with InterBase, configure it with the following property values:

  • DriverName: ibase.
  • DatabaseName: This should be filled with the database server address and database file path, separated by a colon (:). For example: localhost:C:\Users\User\Desktop\database.gdb.

Then fill the rest of the mandatory properties as required. You can ignore the Host property.

    Help Resources

    Documentation

    Frequently Encountered Problems connecting to InterBase

Undefined service gds_db/tcp

Warning: ibase_pconnect(): Unable to complete network request to host "<host IP>". Failed to locate host machine. Undefined service gds_db/tcp. in […]

The error message above usually indicates that there is no entry of “gds_db 3050/tcp” in the services file on either the client or the server machine1. To fix the issue, add the entry to the file:

  • On Windows: %windir%\system32\drivers\etc\services.
  • On Linux: /etc/services.

gds_db 3050/tcp # InterBase

    See Also

Official website

8. Delete the DBRepeater component. We don't need the DBRepeater for our mobile application. We'll be using a MList to display the data on our mobile device.

9. Add a Query component (from Data Access) onto the page, and set Database = dbosCommerce1, set Active = true.

Hide image

10. On the same Query component, double-click the SQL property and add this SQL:

select * from categories

left join categories_descriptions on

categories_descriptions.categories_id=categories.categories_id

and categories_descriptions.language_id=1

Hide image

This query returns all the categories and their category descriptions for language = English (1).

Click OK.

11. Select the MList component. Set DataSource = dsCATEGORIES1, Set Dataset = Query1

Hide image

11. Set DataMapping on MList to correspond to your database table values to display on the MList, like this:

a. The BaseParentFieldValue = 0 will be the first value (column) to display on our MLIst.

b. Set Caption to be what we want to use for each element on the MList = CATEGORIES_NAME

c. Set idField = CATEGORIES_ID

d. Lastly we will establish the ParentField = PARENT_ID

Hide image
Hide image
Click to see full-sized image

SAVE ALL
12. Run the mobile application (F9). Your MList should display your CATEGORIES values, like this:

expand view>>

Hide image

13. Click on the Hardware category, and you will drill down to its sub-categories, like this:

Hide image
Click to see full-sized image

Congratulations!

expand view>>

NOTE: This sample osCommerce database only has this one level of drill down data, but if it had more, the application would continue to drill down as needed. If you click on any of these sub-categories, you will just get a blank screen, and that's normal expected behavior.

Next, we'll create an Android mobile application.

For our Android mobile application, we cannot put our large InterBase Server database, nor can we process the PHP files on the mobile device, so we'll have our application make some AJAX calls to another application hosted on a server that will provide the data. We will be using the same PHP Apache Server that we just started in step 12.

So the first thing we need to do is tell our main application to use AJAX.

14. Set UseAjax = true on the MPage1 component:

Hide image

15. Next, we'll establish the AJAX URI (UseAjaxUri) that we will connect to and collect the data.

NOTE: For the URI, do not use localhost, use your real IP address, such as the output from running ipconfig, for example:

IPv4 Address. . . . . . . . . . . : 10.1.1.72

For this demo, I'll use the http://192.168.74.131:3572/unit1.php that we have already been using in this example.

Hide image

16. Save ALL.

17. Run the app, and verify you connect to http://192.168.74.131:3571/unit1.php

18. IMPORTANT: Keep your PHP Web Server running (do not close the web window). The mobile apps we create will connect to this running PHP Web Server.

19. Next, we'll use the new "Wizard for PhoneGap" feature to create our Android mobile application.

    Part 5 - Deploy to Mobile

Do: Home >> Deploy to Mobile

Hide image
Click to see full-sized image

This is the “Wizard for PhoneGap”, a tool to help you generate all the files you need to create a native mobile application, based on web technologies. Here we have the option to create an iOS, Android, BlackBerry, Symbian, WebOS or Windows Phone mobile application. This wizard will generate all the files you need to create a native mobile application based on web technologies.

expand view>>

First, select the target device you want to build against.

1. We will select Android. Click Next.

Hide image

2. On the above "Application setup" screen:

The Index page is our unit.php from our current project.

The Application name, we will call MobileServer.

Company name; enter your Company name, for this example I'm using Embarcadero.

Click Next.

Hide image

You can adjust Android Graphics on this next screen, but for this example, we'll just keep the defaults.

Click Next.

If you get this Warnings screen, go back and set UseAjax = True and enter your UseAjaxUri.

Hide image
Click to see full-sized image

Else, you get this next screen:

expand view>>

Hide image

3. Select Debug to run on a simulator, or if you have your real Android device, you can USB connect to your computer and load the app directly to your real device by selecting Release.

a. Choose the destination folder for the generated app.

Click Next.

Hide image

From Home > Deploy to Mobile, you’ll see the results of the export:

Hide image

Hide image

Click Next.

Hide image

Here you have the option to build the app either using the SDK libraries or Phonegap:Build.

For this example, we will use SDK libraries.

Click Next.

Hide image

I have Android 4.1 API 16 emulator installed on my machine, so I’ll select Emulator.

NOTE: To expedite the launch and deploy, please have your emulator already running.

The HTML5 Builder Android set-up should have installed the SDK Manager here: C:\Program Files (x86)\Android\android-sdk

From the SDK Manager, Select Tools > Manage AVDs

Hide image
Click to see full-sized image

expand view>>

Select the Android41API16 emulator >> click Start.

Note: It can take several minutes for the Android Emulator to start…please be patient.

Hide image

Once your emulator is running, and you have OPENed the device,

Hide image

click Next from your HTML5 Builder “Run your app” screen.

NOTE: To open (unlock) the device, slide the Lock from Left to Right, to unlock your Android device. Note: Unlocking your emulator (varies by type of emulator you are using).

You should get:

Hide image

The Android adb server starts, SDK Tools launch, the Andorid project builds and your final Andorid .apk file gets created.

NOTE: If you do not have your Android Emulator running, you will get the message "Waiting for device", like you see in the screen below. If you do not have your emulator already running, the Android Setup should automatically start your Android Emulator, load and run the app.

Compile output:

Hide image

The app should get installed on your emulator, and it should aslo start running, like this:

Hide image

Select a Category and it will drill down to its sub-categories. Very cool!

Congratulations!

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

If you wish, the Java source code created by the Wizard for PhoneGap, and be imported into an Eclipse Java IDE.

Here are the steps:

Hide image
Hide image

Verify project shows you are using Android 4.1 and you do not have any errors:

    Hide image

FIRST, verify your PHP server is running. Run the app in HTML5 Builder and leave the web page running.

Hide image

Second, verify the IP address of the running PHP server, and verify you have the correct value in the UseAjaxUri from your MPage1.

Hide image

Remember, we are using Ajax to connect to the IP address of the PHP server, and that’s how we access the InterBase data remotely.

In the Eclipse (Java) IDE, right-click on project > Run as > Android Application.

Your MobleServer appp gets deployed to your Android emulator, like this:

    Hide image
Click to see full-sized image
expand view>>

Click on the app: Hide image

NOTE: If the app auto-runs at startup, then that’s OK. If you get a “connection error on your assets\www.index.html” file, then click OK. Find the app on the emulator, and click the app. That should resolve the initial “connection error”. Also look at the index.html and verify you have the correct IP and port for your running PHP server. Right-click on the index.html file > Open with > Text editor.

In two places, look for your IP and port:

<div data-role="page" id="MPage1" data-ajax-url="http://192.168.74.131:3572/unit1.php" >

<script>

jQuery(document).ready(function(){

     AjaxCall('http://192.168.74.131:3572/unit1.php');

You should get the first web page:

    Hide image

Select one of the categories and the app will make the Ajax call to your PHP server and access the InterBase data. Very cool!

    Congratulations!

  • spacer
  • Concluding Remarks

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


Appendix A - How to create the InterBase osCommerce database.

    Part 1 - InterBase Developer Edition Installation

Download your platform specific version of InterBase XE from: https://downloads.embarcadero.com/free/interbase

Select either the 32-bit or 64-bit Developer Edition depending on your specific OS platform:

InterBase XE 64-bit Developer Edition for Windows

InterBase XE 32-bit Developer Edition for Windows

Note: The download may email you the Serial Number to Register your product or use the serial number from your HTML5 Builder installation install.htm file located at C:\Program Files (x86)\Embarcadero\HTML5 Builder\5.0\Welcomepage\install.htm.

Run the ib_install.exe from the downloaded InterBase_XE_Win32.zip file.

Hide image

InterBase XE installs on port 3050 with an instance name of gds_db

Hide image

Assuming you don’t have any other versions or instances of InterBase running on your machine, select No for “Would you like to uniquely identify this instance?”.

Hide image

Select “Server and Client”, Documentation and Register

Hide image

Click Next

Hide image
Click to see full-sized image

Enter valid Serial Number and your DN login and password.

expand view>>

Click Register

Hide image

Click Finish.

  1. Verify the two InterBase Services are running (InterBase XE Guardian gds_db and InterBase XE Server gds_db).

Hide image

  1. Run the IBConsole (from C:\Embarcadero\InterBase\bin\IBConsole.exe)

Hide image

The IBConsole is an all-in-one database tool. It combines database administration, interactive SQL and communications testing capabilities in one easy to use application.

From this IBConsole, you can:

  • Manage local and remote servers.
  • Manage server security. Authorize new users, change user passwords, and remove users.
  • Manage server certificates (licenses).
  • Manage databases. Create new databases and set database properties.
  • Backup and restore databases
  • Perform database maintenance. Validate the integrity of a database, repair a corrupted database, sweep a database, and recover “limbo” transactions.
  • Shut down and restart a database
  • Execute SQL
  • View database metadata in DDL script format

IBConsole consists of:

  • A Main Window, the control center of IBConsole
  • An Object View Window, which displays detailed information and database objects
  • SQL Window, which can be used to execute SQL statements and scripts.
  • A Text Viewer, used to display metadata, logfiles, etc.
  • Several Visual Editors, to create and alter database object definitions
  1. Right-click on Local Server – gds_db >> Login (User Name = SYSDBA , Password = masterkey)

Hide image
Click to see full-sized image Hide image

expand view>>

  1. Right-click Databases >> Add >> C:\Embarcadero\InterBase\examples\database\employee.gdb

Hide image
Click to see full-sized image

Login Information (User Name = SYSDBA , Password = masterkey)

expand view>>

Hide image

Click OK.

Hide image
Click to see full-sized image

expand view>>

From the IBConsole, you have access to all your database objects (such as Domains, Tables, Indexes, Views, Stored Procedures, Triggers, External Functions, Generators, Exceptions, Blob Filters, Roles, and User Permissions.

For example, to see all the Stored Procedures for the Employee table, select Stored Procedures.

Right-click on DEPT_BUDGET gives you your options.

Double-click the DEPT_BUDGET procedure to see its properties.

Hide image
Click to see full-sized image

expand view>>

To see the data in a table, select Tables >> double-click Customer >> Data tab

Hide image
Click to see full-sized image

expand view>>

This was a quick overview on how to install InterBase and how to use the IBCosole.

InterBase also includes the Wise Installer to make it easy to embed InterBase with your application, to run the installer in silent mode.

Now that you are familiar with the IBConsole, we'll create the new osCommerce database, tables, indexes and populate the tables with data.

    Part 2 – Setting up InterBase Database

2.1 Create the database

1. First, we’ll create the osCommerce database. This is the file structure within which InterBase will subsequently store both the table structure, indexes etc. (this is called the Metadata), and the data itself (called the Data).

2. To create the database:

  1. Open IBConsole
  2. Click Database >> Create Database…

Hide image
Click to see full-sized image

expand view>>

  1. In File Name, Eenter the Database path name and database name:

C:\Embarcadero\InterBase\examples\database\osCommerce.gdb

Hide image
Hide image

  1. Enter user name (SYSDBA) and password (masterkey). Alias = IB_osCommerce. Check "Use Alias for DB connection". Keep all other default options.
  2. Click OK.
  3. Database Connect User Name (SYSDBA) and Password (masterkey).
  4. Click "Connect".
  5. Your new osCommerce database gets created.

Hide image

2.2 Create the tables

1. Next, we’ll create the table structures. This can be achieved in several ways. The easiest way is to take a simple text file, fill in the table structure, and "import" the structure to InterBase using IBConsole. For this database we’ll use this Create_osCommerce_Tables.sql file.

/* Create_osCommerce_Tables.sql */

/* Create the InterBase tables for the OSCOMMERCE database*/

/* Table: CATEGORIES, Owner: SYSDBA */

CREATE TABLE CATEGORIES ( CATEGORIES_ID INTEGER NOT NULL, PARENT_ID INTEGER NOT NULL );

/* Table: CATEGORIES, Owner: SYSDBA */

CREATE TABLE CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID INTEGER NOT NULL, LANGUAGE_ID INTEGER NOT NULL, CATEGORIES_NAME VARCHAR(32) NOT NULL );

COMMIT;

2. Assure you are logged into your osCommerce database, and it's selected on IBConsole.

We’ll use Tools >> Interactive SQL from the menu bar of the Main Window of the IBConsole to create a new SQL Window.

Hide image
Click to see full-sized image

If the currently selected branch in the connections tree is a connected database or one of its descendants, then the new SQL Window will have a connection established to that database. If you have an external SQL file to load, then use would use Query >> Load Script. For this example, we'll copy and paste the above Create_osCommerce_Tables.sql code into the SQL Window like this:

expand view>>

Hide image
Click to see full-sized image

3. Query >> Execute (or F5 key)

expand view>>

4. Select Tables from your osCommerce database should show you your created databases.

(Note: If you do not see your tables, try disconnect and reconnect to the osCommerce database; right-click Disconnect and Connect).

Hide image

2.3 Create the indexes

Next we’ll create some Indexes. Indexes allow InterBase to locate data (dramatically) more quickly. An index has two key components to it - the field(s) that you will want to search on and whether the field(s) are unique (e.g. a Reference number will probably need to be unique, but you may well need to accommodate several people sharing a birth date or a last name).

2.3.1 Primary key index

Next, we’ll create the tables Primary key indexes. The Primary key index is usually needed on the Field(s) to uniquely identify a record within a table (e.g. the unique reference number given to each record, or a Social Security ID, or a post code and House number/name combination within an Address table). For example the CATEGORIES table has PRIMARY KEY (CATEGORIES_ID) ;

For the indexes we'll use this Create_osCommerce_Indexes.sql file:

/* Create_OSCOMMERCE_Indexes.sql */

/* Create the Indexes for InterBase tables for the OSCOMMERCE database*/

CREATE UNIQUE INDEX CATEGORIES_ID ON CATEGORIES (CATEGORIES_ID) ;

CREATE INDEX LANGUAGE_ID ON CATEGORIES_DESCRIPTIONS (LANGUAGE_ID) ;

COMMIT;

  1. Tools >> Interactive SQL
  2. Copy and Paste the above "Create_osCommerce_Indexes.sql" into the SQL Window.
  3. Query >> Execute (or F5 key)
  4. Select Indexes from osCommerce, and verify your Indexes were created:

Hide image

2.4 Populate the tables

For far we created the database, tables and indexes. Next we want to fill up the database with test data. This can be achieved through the "old-fashioned" technique of manually entering data into the database (such as through a Client application which allows data entry).

A more robust technique is to create a series of SQL commands that insert data to the table within a simple text file, and import the SQL file to InterBase.

The advantages of this approach include the ability (a) to copy, paste and update lines to achieve a methodical selection of all types of data more easily, (b) to re-enter the data whenever you choose to clear all the data from the database and start again and (c) to reuse relevant test data within new database applications in future.

For the data we'll use this Insert_osCommerce_data.sql file:

/* Insert_osCommerce_data.sql */

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (1,0);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (2,0);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (3,0);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (5,1);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (6,1);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (7,1);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (8,1);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (16,1);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (17,1);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (18,2);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (19,2);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (20,2);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (10,3);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (11,3);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (12,3);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (13,3);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (14,3);

INSERT INTO CATEGORIES (CATEGORIES_ID, PARENT_ID) VALUES (15,3);

COMMIT;

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (1,1,'Hardware');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (2,1,'Software');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (3,1,'DVD Movies');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (4,1,'Graphics Cards');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (5,1,'Printers');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (6,1,'Monitors');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (7,1,'Speakers');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (8,1,'Keyboards');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (9,1,'Mice');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (10,1,'Action');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (11,1,'Science Fiction');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (12,1,'Comedy');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (13,1,'Cartoons');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (14,1,'Thriller');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (15,1,'Drama');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (16,1,'Memory');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (17,1,'CDROM Drives');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (18,1,'Simulation');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (19,1,'Action');

INSERT INTO CATEGORIES_DESCRIPTIONS ( CATEGORIES_ID, LANGUAGE_ID, CATEGORIES_NAME ) VALUES (20,1,'Strategy');

COMMIT;

To populate the database using this method:

  1. Tools >> Interactive SQL
  2. Copy and Paste the "Insert_osCommerce_data.sql" file

Hide image
Click to see full-sized image

expand view>>

  1. Query >> Execute (or F5 key)
  2. Select Tables >> double-click CATEGORIES >> Data tab from osCommerce, and verify your data was inserted:

Hide image

Hide image
Click to see full-sized image Hide image
Click to see full-sized image

5. Close out the Data tab.

expand view>>

expand view>>

6. Console | Exit out of theIBConsole.

Congratulations! Your InterBase osCommerce database has been created and populated with data!


HTML5 Builder – HTML5 CSS3 Animations Tutorial

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies, Inc.

    Introduction

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

    STEPS:

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 to see full-sized 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
Click to see full-sized 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
Click to see full-sized 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.

  • spacer

    Concluding Remarks

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


HTML5 Builder – HTML5 Canvas 3D Tutorial

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies, Inc.

    Introduction

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 to see full-sized 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
Click to see full-sized image

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

expand view>>

    Concluding Remarks

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


HTML5 Builder – HTML5 Canvas 2d Tutorial

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies, Inc.

    Introduction

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
Click to see full-sized image

expand view>>

Hide image
Click to see full-sized 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

    Concluding Remarks

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


HTML5 Builder - DataSnap REST Client Module for DataBase Tutorial

Written by Al Mannarino on . Posted in PROGRAMMING

By Embarcadero Technologies, Inc.

Purpose: This tutorial shows how to create and use a HTML5 Builder DataSnap REST Client Module to access a DataSnap server and call database access functions exposed by the DataSnap server to access backend database information and display the data on a HTML5 Grid.

Introduction: DataSnap is a technology that enables RAD creation of multi-tier web applications. You can use HTML5 Builder to create client-side web applications that interact with DataSnap. 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.

This tutorial covers:

1. How to create a DataSnap REST Application Server.

2. How to create a DataSnap Server function to access the backend database. For this example, I'll use the InterBase database, but any supported database will work also.

3. How to create a PHP Client Application using HTML5 Builder.

4. How to display the InterBase data on a HTML5 Grid.

Hide image
Hide image
Click to see full-sized image

expand view>>

    Part 1 - Create the DataSnap REST Application Server.

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
Click to see full-sized 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
Click to see full-sized 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
Click to see full-sized image

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

expand view>>

Hide image
Click to see full-sized 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
Click to see full-sized 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
Click to see full-sized 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
Click to see full-sized 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.

    Part 2 - HTML5 Builder: Create a Server Web Application

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.

    Add Some Controls

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.

ToolPaletteStandardHighlightedToolPaletteEditHighlighted

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

ToolPaletteLabelHighlightedToolPaletteButtonHighlighted

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.

    Execute your Application

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

    Part 3 - DataSnap REST Client module.

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

In the Code view, open the main.php of the WebServerApp project to call the DataSnap server methods.

Add: require_once("ClientModuleUnit1.php");

You can use the Use Unit icon and select the ClientModuleUnit1.php file.

Hide image

This adds the require_once("ClientModuleUnit1.php"); to your main.php file.

Hide image

Now, wherever you want to call a DataSnap method in your code:

  1. Include the global variable for the module: global $ClientModuleDataModule1;
  2. Call the method from its ServerMethods1Client property:

$ClientModuleDataModule1->ServerMethods1Client->methodName()

    Write a Response for a Button Click

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
Click to see full-sized 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
Click to see full-sized image

expand view>>

    Concluding Remarks

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


HTML5 Builder – HTML5 Client Web Application / Live View Tutori...

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies, Inc.

    Introduction

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.

    Steps:

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
Click to see full-sized 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
Click to see full-sized 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
Click to see full-sized 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
Click to see full-sized 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
Click to see full-sized 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.

    Concluding Remarks

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


HTML5 Builder - Client Mobile Application Tutorial

Written by Al Mannarino on . Posted in PROGRAMMING

By Al Mannarino, Embarcadero Technologies, Inc.

    Introduction

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

    Add Some Controls

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

    Write a Response for a Button Click

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

    Test your Application in a Web Browser

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
Click to see full-sized 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

    Deploy your Application

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 to see full-sized image

Click FINISH.

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

Hide image

CONGRATULATIONS!

  • spacer

    Concluding Remarks

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


Check out more tips and tricks in this development video: