+

Search Tips   |   Advanced Search

Work with the Dojo Library Project that serves Dojo resources

IBM MobileFirst Platform Foundation projects that use Dojo contain a small subset of Dojo resources. This subset of Dojo resources is supplemented with resources (that might not be typical within mobile applications) from a separate Dojo library project.

The Dojo library project contains a full distribution of Dojo. This version of Dojo includes both mobile and desktop Dojo resources. We can test the application using any of the widgets from the Dojo library. The Dojo library project contains a full Dojo we can use in a Dojo application. It is provided on an internal server, separate from the MobileFirst application.

A MobileFirst project is initialized with only a minimal set of mobile layers and themes. It contains the Dojo resources that are deployed as part of the MobileFirst application. The Dojo that is contained in the project.is optimized for size and includes only the features required for a basic mobile application.

The Dojo library project provides only the resources that are requested directly by the Dojo loader, such as the JavaScript modules, their template HTML fragments, and associated images. The Dojo library project, running separately on an internal server, provides faster builds, smaller projects, and accurate lists of the Dojo files that the application is requesting. Here is a view of the improved Dojo workflow for application size and development speed:

To demonstrate, here are illustrations that show the start of a new MobileFirst project. After you click Configure JavaScript Libraries, a wizard opens where we must click Add Dojo Toolkit. An extra field in the template is displayed called New Dojo Library.

We can create multiple libraries each for a different version of Dojo. A MobileFirst project is linked to one library. The New Dojo Library feature is where access to the full distribution of Dojo is initiated by linking to the internal server. When we develop the application and test it, this feature supplies the Dojo Library Requests view with all the Dojo files requested during execution of the application. Select the files and move them to the project.

The minimum set of Dojo files provided in a MobileFirst project, are in a www folder in the navigation. It includes these files:

The deviceTheme.js.map file is not provided by the Dojo Library because of the way deviceTheme.js is requested by the main web page. deviceTheme.js is requested by a direct request instead of an asynchronous request. We can obtain this file from /dojoLib/toolkit/dojo/dojox/mobile only if dojoLib is the library project. We must copy the file manually. With this formation, develop mobile pages using Dojox mobile widgets.

We can manually set up more themes. First copy a theme into the www folder, and then set up the project css settings. Dijit widgets require a theme, Dojox widgets each bundle their own theme css.

We can start coding the application. Use any Dojo modules (you no longer need to consider what files to import into the project). In this example, the "DateTextBox" comes from dijit/form but this module and its dependencies are not in the project yet.

The Dojo loader is redirected to an internal server for modules in these packages: Dojo, dijit and Dojox. 

<script scr="worklight/cordova.js"></script>
<script scr="worklight/wljq.js"></script>
<script scr="worklight.js"></script>
<script scr="worklight/checksum.js"></script>
<script scr="worklight/plugins/org.apache.cordova.core.camera/www/ios/CameraPopoverHandle.js"></script>
<script scr="worklight/plugins/org.apache.cordova.core.contacts/www/ios/Contact.js"></script>
<script scr="worklight/plugins/org.apache.cordova.core.contacts/www/ios/contacts.js"></script>
<script scr="worklight/plugins/org.apache.cordova.core.file/www/ios/Entry.js"></script>
<script>windows.$ = window.jQuery = WLJQ;</script>
<script scr="http://192.168.0.100:9988/dojoLib/factory/inventory/iphone/dojo/dojo.js"> type="text/javascript" data-dojo-config=...></script>

Turn on the Provide Missing Dojo Resources function first, this action injects code to redirect the Dojo Loader to the server during the MobileFirst build.

To do this open Dojo Library Requests view and then click Provide Missing Dojo Resources, as illustrated here:

The special view output gives an accurate list of the Dojo files that are requested by the application. We can use this output as a guide to use the Copy to Project or Copy to application actions to copy files from the library into the project.

We must turn off the library and verify all the Dojo files are present in the application. Turn off the server

then, rebuild the environment and deploy (so the injected Dojo loader config is removed) and then run the application again.

We can build the layers that are based on the code that is imported into the project (which is optional).

The IBM MobileFirst Platform Studio tools use the Dojo that is contained in the project.and the associated Dojo Library project. The following MobileFirst Studio tools use the Dojo library content:

Rich Page Editor

The Rich Page Editor displays all of the widgets available in the Dojo library.

We can explore and test various Dojo artifacts. You could run and test the application outside of the Dojo library project. If we test on an external device or emulator, IDE must be running and must have Internet connectivity.

MobileFirst Studio provides the Dojo Library Requests view which shows what resources were requested from the Dojo library project. For example, if we add the dijit.Calendar Dojo widget (that is not part of the mobile layers) to the MobileFirst application HTML page, Rich Page Editor uses the Dojo library to display this widget.

If we run and test the application on a mobile device or use a device emulator, Eclipse must be running to provide Dojo Library resources. To shut down Eclipse and test the application in an environment that is similar to a production environment, we must remove Dojo Library instrumentation. See Remove Dojo library instrumentation.

JavaScript source validation and content assist

Content assist suggests all of the Dojo widgets contained in the Dojo library, or contained within the project. and new widgets we have added to either of these. For example, if we have added our own Dojo widgets in either project, these new widgets will show up on the palette and in content assist.

Mobile Browser Simulator

The Mobile Browser Simulator can run with or without the Dojo library resources. Use the Dojo Library Requests view to turn on and off the Dojo library resources.

Select the Provide Library Resources option to specify you want the Mobile Browser Simulator to use the Dojo library project when it runs. For example, when this option is selected the dijit.Calendar widget is displayed correctly.

While the Mobile Browser Simulator is running, the Dojo Library Requests view shows which resources are served from the Dojo library project, which indicates the particular resources that are requested by the application but are not included as part of the application.

If the missing resources are required by the final MobileFirst application, we must add all of the missing resources to the project. The resources that are logged in the Dojo Library Requests are not available outside of the MobileFirst Studio development environment.

To add the missing resources to the application, the view provides two copy actions.

The Copy to Project action copies selected resources into the project's www folder. Resources here are built into all Dojo-enabled applications in the project, which is useful when the applications use a common module or resource. The Copy to application action copies selected resources into the requesting application's common folder, which is useful when an application uses resources that are unique to that application.

If we disable the Provide Library resources option , the Mobile Browser Simulator does not use the Dojo library project when it runs. The Mobile Browser Simulator uses only the resources contained in the project. For example, when this option is selected, the dijit.Calendar widget is not displayed. When the Mobile Browser Simulator runs in this mode, the preview emulates the mobile device. The preview provides only the resources available to the application when it is deployed to a mobile device. No entries are shown in the Dojo Library Requests view.


Parent topic: Use JavaScript toolkits for the user interface