What’s new in Dojo Mobile 1.8, Part 1: New Widgets

Enhance your mobile application with these new widgets

Dojo Mobile (dojox.mobile) is a Dojo Toolkit package for creating lightweight mobile web applications. Dojo 1.8 (released in August 2012) contains many new Dojo Mobile widgets, widget enhancements, and other new features. This article is the first part of a three-part series of articles, exploring these new features through many code examples. In Part 1, you will learn about the new widgets introduced in Dojo Mobile 1.8, widget-related utility classes, and some modules.

View more content in this series|0Yoshiroh Kamiyama, Software Engineer, IBM

July 30, 2013

• Content

About this series

This series will introduce the new features of Dojo Mobile 1.8. To fully grasp this series, you should be familiar with Dojo Toolkit and its AMD (Asynchronous Module Definition) support.

This series will not introduce the new Dojo Mobile features not included in version 1.8. This series will not introduce non-functional enhancements, such as new device and operating system version support; improvements to performance, accessibility, testability and applicability, and theme updates. For detailed information about all the features of Dojo Mobile, please refer to the reference material at the end of this article.

Dojo Mobile 1.8 introduces many new widgets and modules that can be used in mobile applications. You can enter dijit or dojox package found widgets suitable for mobile applications, but the design of Dojo Mobile widgets only contains limited features to keep their resource footprint as small as possible-and they provide mobile-specific theme.

This article will introduce the new widgets in Dojo Mobile 1.8, widget-related utility classes, and some modules, and will show how to use them. Part 2 introduces new enhancements to existing features, and Part 3 introduces how to use Dojo Mobile data processing functions to customize external content views.

Accordion

Accordion is a container widget that can display a group of sub-panes in a stacked format.

Get Worklight now

Download IBM Worklight Developer Edition 5.0 for free now, the The version never expires! Use the Worklight mobile application platform to develop and test the applications you build with Dojo Mobile.

Usually, dojox.mobile.Pane, dojox.mobile.Container or dojox.mobile.ContentPane is used as a child widget, and Accordion does not require a specific child widget. Accordion supports 3 modes of opening sub-panes: multiple selection, fixed height and single selection. Accordion can have rounded corners, and it can lazily load content modules. Figure 1 shows the actual application of the Accordion widget:

Figure 1. Accordion widget

Multiselect mode

By default, multiple panes in Accordion can be opened at the same time. Listing 1 Instantiate Accordion in multi-select mode:

List 1. Accordion in multiple selection mode

...

In multiple selection mode When you open the sub-pane, the Accordion industry will increase accordingly, as shown in Figure 2:

Figure 2. Accordion widget (multiple selection mode)

Fixed height mode

If you specify fixedHeight:true, as shown in Listing 2, the height of Accordion will remain the same no matter which pane is opened:

List 2. Fixed height mode Accordion

...

Figure 3 shows Accordion in fixed height mode:

Figure 3. Accordion widget (fixed height)

Single selection mode

If you specify singleOpen:true, as shown in Listing 3, then only one pane can be opened at a time:

List 3. Accordion in single-select mode

. ..

In the single selection mode, the height of Accordion changes according to the height of the opened pane, as shown in Figure 4:

< h5 id="fig-single" style="margin:5px 0px 0px;padding:0px;border:0px;font-size:1.166em;vertical-align:baseline;">Figure 4. Accordion widget (single choice)

rounded corners< /h3>

If you specify roundRect:true, as shown in Listing 4 Show, then Accordion will be displayed as rounded corners:

List 4. Accordion with rounded corners

...

Figure 5 An Accordion widget with rounded corners is displayed:

Figure 5. Accordion widget with rounded corners

Lazy loading< /h3>

If you specify in a subpane widget lazy:true, as shown in Listing 5, then all the widgets in the pane will only be loaded when the pane is opened for the first time:

< h5 id="list-lazy" style="margin:5px 0px 0px;padding:0px;border:0px;font-size:1.166em;vertical-align:baseline;">List 5. Lazy loading content widgets

...