Use JavaScript toolkits for the user interface

To speed development we can use existing JavaScript UI frameworkss such as jQuery Mobile, Sencha Touch (Deprecated), or Dojo Mobile

Dojo Mobile

Dojo Mobile is an HTML5 open Source mobile JavaScript framework. Dojo Mobile is part of the Dojo Toolkit, developed and maintained by the Dojo Foundation. See http://dojotoolkit.org/. 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 v6.3.0 supports the Dojo Toolkit version 1.10.1, embedded in MobileFirst Studio.

To use Dojo 1.10.1 in MobileFirst Studio v6.3.0, use Eclipse Luna SR1 for Java Developers (Eclipse 4.4.1) or higher. If we 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 creating an IBM MobileFirst hybrid application, we can select Dojo Mobile among several JavaScript toolkit choices. If we select this option, a copy of Dojo Mobile is added in the project, and a Dojo library project is created in the workspace to support advances usages of Dojo Mobile.

See...

• Create a hybrid application that uses Dojo Mobile.
• Create the user interface with the Rich Page Editor.
• Use predefined application templates
• Use Dojo Mobile through the Dojo library project
• Create a globalized MobileFirst application
• Change the Dojo version for MobileFirst projects

jQuery Mobile

jQuery Mobile is a touch-optimized web framework for smartphones and tablets. You need jQuery to run jQuery Mobile. jQuery Core is provided in the MobileFirst library. We 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. 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).

1. Create a MobileFirst project.

2. Right-click the project and select Hybrid Application.

3. Name the application and configure.

4. Browse for the folder where you downloaded...
   jquery.mobile-Version.zip

5. From the populated selection, choose the required jQuery Mobile components...

   jquery.mobile-Version.css	Styling for mobile widgets and framework
   jquery.mobile-Version.js	jQuery mobile framework
   images	Folder of images used by the style sheet for jQuery's built-in icons

For a tutorial on creating hybrid applications using the jQuery Mobile framework, see:

Develop hybrid mobile applications using IBM Rational Application Developer with jQuery Mobile widgets

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 the application, we need the sencha-touch.js, and sencha-touch.css files.

See

• Create Dojo-enabled MobileFirst projects
• Work with the Dojo Library Project that serves Dojo resources
• Change the Dojo version for MobileFirst projects
• Implementing a different version of the Dojo Toolkit
• Change the jQuery version for MobileFirst applications
• Locate Dojo API
  

Parent topic: Develop user interface of hybrid applications