Comment lines: Going mobile with the Dojo Toolkit

The Dojo Toolkit is a powerful open source JavaScript™ library that you can use to create rich and varied user interfaces running in a browser. While many developers might think that Dojo only provides widgets for PC browsers, there is in fact an exciting component emerging that enables developers to easily target mobile platforms. This content is part of the IBM WebSphere Developer Technical Journal.

Kevin Haverlock (kbh@us.ibm.com), Software Development, IBM

Kevin Haverlock is a software engineer for IBM in Research Triangle Park, NC. He has worked on various portions of WebSphere Application Server dating back to 5.0. His most recent assignment was the Web 2.0 Feature Pack for WebSphere. Kevin is currently working on web development tooling to help customers enhance their serviceability of WebSphere Application Server.



30 March 2011

Also available in Chinese

Tailoring for a better fit

Dojo Toolkit 1.5 introduced the dojox.mobile project. The project contains reusable components that are themed for mobile devices. Like the rest of Dojo, the project is written in JavaScript and provides widgets for transitioning to and from views, rounded lists, tab containers, headers, and many, many other features.

The dojox.mobile project is exciting because it enables you to better tailor the user experience, given the client connecting to the site. You can imagine an e-commerce site that recognizes a connection from an Android-based browser and easily tailors its appearance to the device. Dojo provides themed UI widgets that appear as if the application is running native to the device. The result is a natural user experience that is tailored to the target device.

Dojo 1.6 expands dojox.mobile with additional controls and an extensive list of test pages that can be used to get you up and running quickly.

Figure 1 shows an example of some of what you can expect in the rich collection of mobile UI components. You will notice that the appearance is what you might expect for a native application running on the device. An iPhone user, for example, would easily recognize the elements as those found within an iPhone or iPad. What is unique is that the UI is presented in the Safari embedded browser and does not run as native code which would have to be installed on the device.

Figure 1. Example UI widgets and actions
Figure 1. Example UI widgets and actions

A closer look

Figure 2 shows the dojox.mobile.Heading control for the iPhone. The heading contains a series of tool bar buttons that are provided with dojox.mobile.ToolBarButton widget. The UI appears within the embedded browser for Safari on the iPhone and represents a typical UI component. While an iPhone is shown here as an example, the same pattern holds true for creating the UI for an Android phone.

Figure 2. dojox.mobile.Heading
Figure 2. dojox.mobile.Heading

Let's take a closer look at the JavaScript code used by dojox.mobile to create the UI in Figure 2. Listing 1 shows a portion of the code for the example above. The complete code listing can be found in Dojo 1.6 under the test directory for dojox.mobile. The file is called test_iPhone-Heading.html.

Listing 1. Example dojox.mobile declaration
...	
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
   minimum-scale=1,user-scalable=no"/>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <title>Heading</title>   
     <link href="../themes/iphone/iphone.css" rel="stylesheet"></link>
     <link href="../themes/domButtons.css" rel="stylesheet"></link>   
  <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: 
	true">
  </script>
  <script language="JavaScript" type="text/javascript">
		dojo.require("dojox.mobile.parser");
		dojo.require("dojox.mobile");
		dojo.require("dojox.mobile.TabBar");
		dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
		dojo.addOnLoad(function(){
			var btn1 = dijit.byId("btn1");
			btn1.connect(btn1.domNode, "onclick", function(){
				alert(this.label + " button was clicked");
			});
		});
  </script>
</head>
...

The two meta tags at the top (name="viewport" and name="apple-mobile-web-app-capable") are unique meta tags that the iPhone’s or iPad’s embedded Safari browser interprets. The viewport tag changes the logical view size when displaying a page. In this case, the initial-scale, maximum-scale, and minimum-scale are all set to the value 1. The value indicates the multiplier and since you don’t want to permit the user to scale the page, the value is set to 1. The user-scalable=no indicates the user cannot zoom in on the page using the iPhone/iPad two finger gesture. The meta tag name="apple-mobile-web-app-capable" specifies the page should run in full screen mode. Apple provides a number of other meta tags that can be used to control the embedded Safari browser. Additional information is provided in the resources below.

One of the main advantages of dojox.mobile is the addition of the CSS3 themes for various mobile devices. In other words, select the device you are targeting and pick the correct theme, and Dojo then does the rest. In this example, an iPhone theme is used and therefore you need to load the correct CSS. Additionally, you want to take advantage of predefined buttons that dojox.mobile provides rather than create your own, so you load the domButtons.css as well.

Listing 2
<link href="../themes/iphone/iphone.css" rel="stylesheet"></link>
<link href="../themes/domButtons.css" rel="stylesheet"></link>

If you have programmed with Dojo before, you will recognize the dojo.requires statement in Listing 3. This statement identifies what JavaScript modules the Dojo parser needs to load in order to dynamically create the DOM nodes required to display the UI in the browser.

Listing 3
<script language="JavaScript" type="text/javascript">
       	        dojo.require("dojox.mobile.parser");
       	        dojo.require("dojox.mobile");
       	        dojo.require("dojox.mobile.TabBar");
       	        dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
       	        dojo.addOnLoad(function(){
       			var btn1 = dijit.byId("btn1");
       			btn1.connect(btn1.domNode, "onclick", function(){
       				alert(this.label + " button was clicked");
       			});
       		});
       	</script>

In this case, the dojox.mobile.parser is a scaled-down version of the dojo.parser and is better optimized for mobile devices. The dojox.mobile and dojox.mobile.TabBar are components your page will use.

This line of code might look a little odd because it is a conditional requires statement:

dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

In this case, the Dojo parser checks to see if it is running inside of WebKit, which is the JavaScript engine used by Safari. If it is not, then the parser will load dojox.mobile.compat. The dojox.mobile.compat is a JavaScript module that provides CSS3 features for non-CSS3 browsers. The module enables HTML pages to appear normal when not being used by a compatible browser.

The iPhone style buttons in this simple example are wired together when a user clicks a button with the code in Listing 4.

Listing 4
btn1.connect(btn1.domNode, "onclick", function(){
       				alert(this.label + " button was clicked");
       			});

The action will display a simple alert message when the user clicks the button.

Finally, we get to the meat of the code which is displaying the actually tab bar and the buttons inside. Dojo enables you to easily declare the UI widgets you plan to use directly inside your HTML pages and is often referred to as declarative programming. Figure 3 shows one row of the tab bar which contains four buttons and text. The code is shown in Listing 5.

Figure 3. Tab bar
Figure 3. Tab bar
Listing 5
<h1 dojoType="dojox.mobile.Heading" back="Top" label="Inbox(32)">
    <div dojoType="dojox.mobile.ToolBarButton" 
            class="mblDomButton mblDomButtonSearch_2" 
            style="float:right;"></div>
     <div dojoType="dojox.mobile.ToolBarButton"
            class="mblDomButton  mblDomButtonUpArrow_2" 
            style="float:right;"></div>
     <div dojoType="dojox.mobile.ToolBarButton" 
            class="mblDomButton mblDomButtonDownArrow_2" 
            style="float:right;"></div>
</h1>

In Listing 5, you first declare a dojoType of dojox.mobile.Heading. This is the Heading bar that will contain your buttons. Like all Dojo widgets, when Dojo parses the page and sees the dojoType attribute, it will create the necessary DOM nodes based on the UI widgets that you have selected. In this case, the widget is the dojox.mobile.heading widget. The back="Top" parameter is used as a breadcrumb to return you to a previous page. The other parts of the code contain the buttons that will appear in the heading. This example uses the dojox.mobile.ToolBarButton for the button type. The image representation is contained in the CSS style sheet provided with dojox.mobile. You can also create your own customized buttons as well by using your own style sheet.


Conclusion

The dojox.mobile project is an exciting project within the Dojo community that enables you to create UI representations that appear natural to the mobile device. Certainly, you can easily imagine scenarios in which you can customize the user experience for the mobile device that is viewing your site. The result is a more natural experience for the user.

Resources

Learn

Get products and technologies

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Web development
ArticleID=643635
ArticleTitle=Comment lines: Going mobile with the Dojo Toolkit
publish-date=03302011