HTML5 Builder - Client Mobile Application Tutorial

By: Al Mannarino

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

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

Server Response from: ETNASC04