Using JavaScript toolkits

Learn how to use javascript toolkits such as JQuery, Dojo Mobile, Sencha Touch.

During the development process, you must design and implement the user interface of your application. You can achieve a high level of customization by writing entirely your own CSS style for each component. However, doing so requires a large amount of resources. You can also use existing JavaScript UI frameworks such as jQuery Mobile, Sencha Touch (deprecated. See Deprecated features and API elements), or Dojo Mobile to optimize your development process.

Dojo Mobile

IBM MobileFirst™ Platform Foundation supports Dojo Mobile for building the user interface of your hybrid mobile application. Dojo Mobile is a world class HTML5 open Source mobile JavaScript framework that you can use to develop mobile web and hybrid applications. Dojo Mobile is part of the Dojo Toolkit, which is developed and maintained by the Dojo Foundation. You can find information about Dojo Mobile, including its documentation, at http://dojotoolkit.org/.

You can use Dojo Mobile to develop mobile web applications that have the appearance of the native device on iPhone, iPod Touch, iPad, Android, and BlackBerry touch devices.

IBM MobileFirst Platform Foundation V7.1.0 supports the Dojo Toolkit version 1.10.1, which is embedded in MobileFirst Studio.

Note: To use Dojo 1.10.1 in MobileFirst Studio V7.1.0, you must be using Eclipse Luna SR1 for Java™ Developers (Eclipse 4.4.1) or higher. If you import an existing workspace with a previous version of Dojo, you do not need Eclipse Luna SR1 for Java Developers. This limitation exists only when you create a new project that targets Dojo 1.10.1.

When you create an IBM® MobileFirst hybrid application, you can select Dojo Mobile among several JavaScript toolkit choices. If you select this option, a copy of Dojo Mobile is added in your project, and a Dojo library project is created in your workspace to support advances usages of Dojo Mobile.

With MobileFirst Studio you can do the following tasks:

Create a hybrid application that uses Dojo Mobile. For more information, see Creating Dojo-enabled projects.
Create the user interface of your Dojo Mobile application with the Rich Page Editor, which is a WYSIWYG editor that MobileFirst Studio provides. The Rich Page Editor supports HTML, Dojo Mobile, and JQuery Mobile. For more information, see Rich Page Editor.
Use predefined application templates to speed up the development of your application. For more information, see Mobile patterns.
Use all the power of Dojo Mobile through the Dojo library project. For more information, see Working with the Dojo Library Project that serves Dojo resources.
For information about how to use Dojo to create a globalized MobileFirst application, and how to achieve this process by using Dojo Mobile, see Developing globalized hybrid applications.
For information about how to change Dojo versions that are used by your MobileFirst projects, see Changing the Dojo version of projects.

Sencha Touch

With Sencha Touch, developers can build mobile web applications that have the appearance of the native device on iPhone, Android, and BlackBerry touch devices. Sencha Touch is developed and maintained by Sencha Inc. To download the Sencha Touch package, see http://www.sencha.com/products/touch/. To begin the development of your application, you need the sencha-touch.js, and sencha-touch.css files.

jQuery Mobile

jQuery Mobile is a touch-optimized web framework for smartphones and tablets. You need jQuery to run jQuery Mobile.

Note: jQuery Core is provided in the MobileFirst library.

You can download the required jQuery Mobile components, which are in the .js and .css files, at http://jquerymobile.com/download/. Download the zip file, which has a version number as part of the file name, for example jquery.mobile-1.4.2.zip. New versions of jQuery are released frequently.

Note: The tools require the non-minified version of the scripts (if necessary, replace anything with a "min" segment in the file name with the corresponding "full" file).

Create a MobileFirst project.
Right-click the project and select Hybrid Application.
Name the application and configure.
Browse for the folder where you downloaded the jquery.mobile-Version.zip.

From the populated selection, choose the required jQuery Mobile components, as follows:

jquery.mobile-Version.css, contains all the styling for the mobile widgets and framework
jquery.mobile-Version.js, the jQuery mobile framework
images, which is the whole folder of images that are used by the style sheet for jQuery's built-in icons

If your project is already created, go ahead and create an application.

Note: MobileFirst Studio also provides a WYSIWYG editor that supports HTML, Dojo Mobile, and JQuery Mobile. You can use this editor to create the JQuery Mobile user interface of your application. For more information, see Rich Page Editor.