Working with UI frameworks

improve this page | report issue

Overview

Designing and implementing the UI of an application is an important part of the development process.

Writing custom CSS style for each component from scratch can deliver a high level of customization, but also requires a large amount of resources.
Sometimes it is better to use the existing JavaScript™ UI frameworks.

This module describes the development of MobileFirst applications by using two JavaScript UI frameworks: jQuery Mobile and Dojo Mobile using the provided wizards in MobileFirst Studio.

This tutorial will cover the following topics:

  • Using jQuery in a MobileFirst application
  • Working with jQuery Mobile
  • Working with Dojo Mobile

Using jQuery in a MobileFirst application

jQuery is a fast and concise JavaScript framework that simplifies HTML document flow, event handling, animating, and Ajax interactions for rapid web development.

The MobileFirst client-side framework uses the jQuery library for internal functionality. By default, the $ character is assigned to the internal jQuery in the main HTML file of the application, in the HEAD element:

<script>window.$ = window.jQuery = WLJQ;</script>

If the application does not require jQuery, or if you want to use a different version of jQuery, you can remove this line.
For more information about jQuery, see http://jquery.com/.

Working with jQuery Mobile

missing_alt

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

The required jQuery Mobile components are in the .js and .css files provided by jQuery Mobile.
More style images can optionally be added.

  • When creating a new application, the jQuery Mobile files can be added from the "Configure JavaScript Libraries" option. Either the compressed jQuery Mobile .zip file or the extracted folder can be used.
  • The required files can then be selected. At minimum, the images folder and the jquery-mobile-*.css and jquery-mobile-*.js files should be selected.
  • When creating the application, a "jqueryMobile" folder is added that contains these files.
    The main HTML file of the application is created with references to the .css and .js files as well as with a basic jQuery Mobile template.

Basic structure of a screen

The basic structure of a screen in a jQuery Mobile application is as follows:

<div data-role="page"><br />
    <div data-role="header"> ... </div><br />
    <div data-role="content"> ... </div><br />
    <div data-role="footer"> ... </div><br />
</div>
  • The header and footer elements are optional
  • The page is rendered by a jQuery Mobile at run-time
  • All the required styles are automatically applied

WYSIWYG editor

A WYSIWYG editor is provided for jQuery Mobile widgets for developer convenience.
missing_alt

By using jQuery Mobile, you can create mobile application screens with a few lines of code

<div data-role="page">
    <div data-role="header">
        <h2>My Application</h2>
    </div>
    <div data-role="content"> This is the application body </div>
</div>
missing_alt

For more information, see http://jquerymobile.com/demos.

Working with Dojo Mobile

missing_alt

Dojo Mobile can be used to rapidly develop mobile web applications on iPhone, iPod Touch, iPad, Android, and BlackBerry touch devices, with the appearance of the native device.

Dojo Mobile is part of the Dojo Toolkit, which is developed and maintained by the Dojo Foundation.
For more information about the Dojo Toolkit, see the Dojo Toolkit website at http://dojotoolkit.org/documentation/.

MobileFirst Studio includes a Dojo Toolkit package and tools that you can use to develop your mobile web applications.

  • When creating a new application, the Dojo Mobile files can be added from the "Configure JavaScript Libraries" option. Select the Add Dojo Toolkit check box.
  • The project is initialized with mobile-optimized layers and resources. A new Dojo Library project is created that has a full Dojo Toolkit to supplement the mobile layers.

Deployment configuration with Ant

missing_alt

MobileFirst Studio automatically uses the build-dojo.xml file to specify which parts of the Dojo Toolkit package, such as compressed layers and resources, must be deployed with your application.
By default, all of the resources from the www folder are deployed.

Note: The build-dojo.xml
file stores the configuration that must be deployed to run a basic Dojo Mobile application. The file can be modified to add other layers to deploy with the application.

Custom layers

To create custom layers, the full Dojo Toolkit that is part of the Dojo Library project can be used.

  • Update the build-dojo.properties file to indicate where to pick up the Dojo Toolkit files from.
  • Update the dojo.workspaceRoot property value to pick up the files from another directory in your project, or from another project in your workspace: dojo.workspaceRoot=/myProject/dojo
  • Use the dojo.root property instead if the directory is not in your workspace: dojo.root=C\:/dojo

Deploying to a device

When the development is done,the used resources must be in the application (either copied loosely or as layers) to run properly.

To configure the application to use local resources only, toggle the Provide Library Resources action in the console and redeploy.

missing_alt
Last modified on November 09, 2016