JavaScript mobile Development tutorial

PhoneGap comes with a default application that can be used to showcase the powerful functionality of the SDK. The rest of this tutorial will be dedicated to showing you how to setup this default app for both Android and iPhone.

Building the Default PhoneGap App for Android

To create a workspace for your PhoneGap app on android, go to the "phonegap-android" folder on the command prompt or terminal.

Run the following command:

ruby ./droidgap "[android_sdk_path]" [name] [package_name] "[www]" "[path]"

  • android_sdk_path - Path where you installed the Android SDK.
  • name - The name to give the new application.
  • package_name - The name you want to give to your application.
  • www - The folder from where you want to copy the files of your PhoneGap app. Leave this blank for now.
  • path - The application workspace for your project.

Once this command runs successfully the application workspace will be generated in the path you have given. Then you can open you Eclipse and first choose "New Android Project" and then choose "Create From Existing Source" and select the application work space which was created with the previous command.

This HTML creates the links that are shown as buttons on your mobile device screen. There are onclick handlers attached to these links which call JavaScript functions defined in the same file that are responsible for calling the PhoneGap API to interact with the device native hardware.

The first function to be called in JavaScript is init. This will register our JavaScript function deviceInfo to the PhoneGap event.

Deviceready Event

The deviceready event is fired by PhoneGap when all the SDK components are loded properly. It makes sense then that the JavaScript API's of PhoneGap should be used after this event fires.

You can read more about deviceready in the API documentation.

Device Object

The device object contains basic information about the device the app is running on, like the platform, the version etc. These values can be used to perform device specific checks in your code.

Accelerometer

The first link in the body calls the watchAccel function:

This portion of the API watches and sends notifications about device acceleration at regular intervals. It returns the present acceleration of the device by passing the x, y, and z coordinates to the callBackonSuccess function registered. The x, y, z values can then be used in the application to respond to movement.


You might also like

HTML5 Tutorial - 2 - Creating a Basic Template
HTML5 Tutorial - 2 - Creating a Basic Template
Django Tutorial Web Development with Python Part 14
Django Tutorial Web Development with Python Part 14 ...
GradeStack Education JavaScript Tutorial
Mobile Application (GradeStack Education)
  • Good Content
  • Good UI
  • Smooth Navigation

Q&A

avatar
Which is the best HTML5 Mobile Web Framework?

I was using Sencha Touch. It's a very great framework, but it's only working in WebKit Browsers.