Working with UI frameworks
- Using jQuery in a MobileFirst application
- Working with jQuery Mobile
- Working with Dojo Mobile
- Working with Ionic framework
$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 MobilejQuery 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
.cssfiles 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 screenThe 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.
WYSIWYG editorA 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 MobileDojo 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 AntMobileFirst Studio automatically uses the
build-dojo.xmlfile 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
wwwfolder are deployed. Note: The
build-dojo.xmlfile 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.
Custom layersTo 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 deviceWhen 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 frameworkThe 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. ▲
Last modified on November 09, 2016