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.
Your new project will then be created with an empty client mobile page (unit1.js), which will be opened on the Design view.
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:
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.
Repeat these steps for adding the MLabel and MButton components onto the Mobile Designer.
Now you should see three components on the Mobile Designer. Use the mouse pointer to rearrange the components as you like.
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.
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.
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.
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:
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.
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.
Click Next.
Fill in Application Setup page:
Click Next.
Select your Android Graphics. For this example, we'll keep the defaults.
Click Next.
Select "Debug" for the Target Destination.
Select a destination folder for the generated Android Java files.
Click Next.
The Android files get created.
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.
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
Verify JAVA_HOME got set correctly:
On HTML5 Builder, click the Refresh button on the Required Programs page, and you should get:
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.
Click Next.
Select Emulator, Android 4.1 API 16
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:
Select Tools > Manage AVDs
Select the Android41API16. Click Start.
Click Launch.
Emulator starts, and UN-LOCK the emulator:
Now, in HTML5 Builder. Click NEXT on the Run your App page.
Click FINISH.
On your Emulator, the app should get loaded automatically, and it should look like this:
CONGRATULATIONS!
Concluding RemarksEmbarcadero’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 |
|
Connect with Us