Working with UI frameworksimprove this page | report issue
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 covers the following topics:
- Using jQuery in a MobileFirst application
- Working with jQuery Mobile
- Working with Dojo Mobile
- Working with Ionic framework
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, see jQuery.
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
.css files provided by jQuery Mobile.
More style images can optionally be added.
.zipfile or the extracted folder.
- You can then select the required files. Select at least the
imagesfolder and the
- When you create the application, a
jqueryMobilefolder is added to contains these files.
The main HTML file of the application is created with references to the
.jsfiles and 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 only a few lines of code.
For more information, see the jQuery Mobile 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.
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 with 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 the resources from the
www folder are deployed.
build-dojo.xml file stores the configuration that must be deployed to run a basic Dojo Mobile application. You can modify the file to add more layers to deploy with the application.
To create custom layers, you can use the full Dojo Toolkit that is part of the Dojo Library project.
- 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.rootproperty instead if the directory is not in your workspace:
Deploying to a device
When 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.
Working with Ionic framework
The Ionic framework utilizes Angular in order to create a powerful SDK suited to develop rich and robust applications. Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps.
An overview of using the Ionic Framework with MobileFirst Hybrid Mobile Applications.▲
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.