Working with UI frameworks
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.
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
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:
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
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.
- 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:
- 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
A WYSIWYG editor is provided for jQuery Mobile widgets for developer convenience.
By using jQuery Mobile, you can create mobile application screens with a few lines of code
For more information, see http://jquerymobile.com/demos.
Working with Dojo Mobile
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.
- 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
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.
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.
To create custom layers, the full Dojo Toolkit that is part of the Dojo Library project can be used.
- Update the
build-dojo.propertiesfile to indicate where to pick up the Dojo Toolkit files from.
- Update the
dojo.workspaceRootproperty value to pick up the files from another directory in your project, or from another project in your workspace:
- Use the dojo.root property instead if the directory is not in your workspace:
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.▲