The EGL Dojo mobile widget library represents a set of commonly used Dojox/mobile widgets that extend the Rich UI widget library. These widgets are available on the palette in the EGL Rich UI editor and can be used with the EGL Rich UI widgets or your own custom widgets.

The Dojo Toolkit is an open source toolkit that contains JavaScript-based widgets provided by the Dojo Foundation. For more information about the Dojo Toolkit,see http://dojotoolkit.org.

Supported Platforms

Currently EGL Dojo mobile widgets support iOS 6.x, Android 2.3.x, Android 4.x, and has to run on a 32 bit RBD. For more details, please refer to the section Configure Render Engine Used by the Visual Editor.

Configure Render Engine Used by the Visual Editor

Since Dojo mobile widgets are an HTML5 JavaScript framework, Internet Explorer before IE9 is not the optimal platform for EGL mobile widgets development. Rational Business Developer V8.5.x default for IE is IE7. Therefore, before using the EGL mobile widgets, please ensure your RBD has been configured to use Mozilla XULRunner as visual editor’s render engine to avoid getting annoying render results.

To configure Mozilla XULRunner as visual editor’s render engine:

Click Windows > Preference to open the preference dialog. Navigate to EGL > Rich UI > Appearance. Locate the Visual Editor Render Engine section in the General tab, then select the Mozilla XULRunner.

Caution:

If you can’t select Mozilla XULRunner as shown in below figure, please ensure you have a 32 bit RBD installed, RBD of 64 bit doesn’t support Mozilla XULRunner. Inside 64 bit RBD, result can only be previewed outside RBD with a HTML5 browser like Chrome, Firefox, Safari, or IE9+.

Setup an EGL mobile web project

To import and use the mobile widgets, you can either do it by creating a new EGL mobile project with the new project wizard or by importing them using the link (EGL Dojo Mobile Widgets Runtime^[1] ).

To create a new EGL mobile project:

Click File > New > EGL Project, type a project name in the new popped EGL Project wizard, select Mobile Project type, and then click Finish .

Caution:

EGL Dojo Mobile Widgets Runtime^[1] is designed to be workable in standalone mode. It has its own Dojo runtime so that it can’t work with EGL Dojo Widgets Runtime^[2] which is targeted to run on desktop browsers and maintained separately. However you can still make it work with EGL Rich UI Widgets Runtime^[3].

Work with Dojo Mobile Sample

The EGL Dojo Mobile Sample^[4] demonstrates the basic usage of EGL Dojo mobile widgets. You are recommended to work with the sample to get familiar with mobile widgets’ features (See figure 4). Lookup the EGL Dojo Mobile Widgets API List^[5] to learn more about some of the features.

Manage Mobile Themes

The Dojo mobile theme can be used in EGL mobile web application. This means when preview a RUI handler containing mobile widgets, manually append a theme parameter to the query parameter in the location bar of the browser will switch the RUI handler to the associated theme. For more information about the theme parameters, see this official link:

http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/deviceTheme.html.

For example, normally an EGL RUI handler preview URL looks like:

http://localhost:5590/pkg/myHandler.html?contextKey=16

When append theme=Android is added to the query parameter list, the RUI handler will load specified Android theme. The resulting URL looks like:

http://localhost:5590/pkg/myHandler.html?contextKey=16&theme=Android

When append theme=iPad is added to the parameter list, the RUI handler will load the specified iPad theme. Currently there are Android, Holodark, BlackBerry, Custom, iPhone, iPad themes defined by Dojo mobile framework. Figure 5 shows two different themes applied to a same EGL RUI handler (Left: Android, Right: iPhone).

Leave it empty will let Dojo mobile framework automatically load themes based on the device it detects.

Tips:

Sometimes you don’t want the theme parameter to appear in the query URL’s parameter list and want to permanently apply a theme, besides inside visual editor’s EGL preview panel it is also not possible to manually add the theme parameter to the request URL in the location bar. Under such circumstances, you can open file:

com.ibm.egl.rui.Dojo.mobile.widgets_x.x.x/WebContents/includeDojo.html.

Locate code snippet below in the editor:

--------------------------------------------------------------

...   

var dojoConfig = {

// Below theme options are available for Dojo mobile widgets(Case-sensitive):

// Android, Holodark, BlackBerry, Custom, iPhone, iPad

// Leave it empty will let Dojo mobile automatically load

// device associated theme

                     mblUserAgent: '',

...

--------------------------------------------------------------

Assisgn the mblUserAgent property to the theme you want to be used. Then the whole EGL mobile web application will switch to this theme permanently during development & after deployment.

Customize EGL Mobile Widgets’ Appearance

EGL has defined a default base class for each EGL mobile widgets in the dom tree.  This class is listed below. It is easy to redefine each mobile widgets’ appearance in your style sheet to meet your layout requirement.

For example, how can I only make mobile buttons in list items to show at the right instead of a left aligned child as the figure below shows.

With the default base class, it is easy to customize this kind of appearance. Lookup the table above, the default base class for list item & button is eglMblListItem & eglMblBtn, so after add the css rules below to the style sheet associated with your RUI handler, refresh the VE, you will find that all mobile buttons inside list items are floated right and buttons outside list items don’t get affected as the above Figure 6(b) shows.

--------------------------------------------------------------

...

.eglMblListItem .eglMblBtn{

       float: right; margin-right: .3em;

}

...

--------------------------------------------------------------

References’ paths in RBD InfoCenter:

[1] EGL Dojo Mobile Widgets Runtime:

Developing > Developing EGL applications > EGL Programmer's Guide > Overview of EGL Rich UI > Developing with the EGL Dojo mobile widgets > Importing EGL Dojo mobile widgets runtime

[2] EGL Dojo Widgets Runtime:

Developing > Developing EGL applications > EGL Programmer's Guide > Overview of EGL Rich UI > Developing with the EGL Dojo widgets > Preparing to use the EGL Dojo widgets > Loading the local Dojo Toolkit into your workspace > Preparing to use the EGL Dojo widgets
 

[3] EGL Rich UI Widgets Runtime:

Samples > EGL > EGL Rich UI technical sample > Get the dependency project

[4] EGL Dojo Mobile Sample:

Developing > Developing EGL applications > EGL Programmer's Guide > Overview of EGL Rich UI > Developing with the EGL Dojo mobile widgets > Importing EGL Dojo mobile widgets sample

[5] EGL Dojo Mobile Widgets API List:

Developing > Developing EGL applications > EGL Language Reference > Applications with user interfaces > Reference to widgets > EGL Dojo mobile widgets