Creating Mobile Web Applications with dojox.mobile

By  on  
dojo mobile

I recently was asked to study the Dojo Toolkit's budding mobile solution, dojox.mobile, and create a basic web application using the tools provided.  I hadn't heard of dojox.mobile before but was very excited at the prospect of becoming a skilled mobile developer and maybe even commit patches or new features/widgets for dojox.mobile.

The first thing I did (which I always do when learning about new features within Dojo) is check out the widget tests.  Looking at the various tests, I knew dojox.mobile had a lot going for it.  Over the few weeks of research and experimentation I came to one conclusion: dojox.mobile is awesome.

I've written a series of tutorials about using dojox.mobile to create a simple mobile web application called TweetView.  The first two tutorials have been released, the subsequent tutorials will be released over the coming weeks.

Getting Started with dojox.mobile

Content on the web is evolving at a rapid pace, and the path is quickly moving towards mobile devices. As with many other problems on the web, the Dojo Toolkit has the solution: dojox.mobile. dojox.mobile is a framework of controllers, CSS3-based themes, and device-like widgets that will allow you to effortlessly create intelligent, flexible, and cross-device-compatible mobile web applications. This is the introductory post in a series of posts exploring dojox.mobile. Throughout the series, we will create a powerful Twitter-based web application called TweetView. Before we can get to that, we'll need to learn about why and how to use dojox.mobile.

Introduction to TweetView

The first article in our series, Getting Started with dojox.mobile, detailed the fundamental concepts and usage of the Dojo Toolkit's dojox.mobile library. In the remaining posts in this series, we'll embark on creating our own fully functional dojox.mobile web application called TweetView. This post will focus on familiarizing you with what TweetView is, what we want it to do, and we'll get started on building the mobile application's HTML and CSS layout.

Getting Started with TweetView: Tweets and Mentions

In the previous post, Introduction to TweetView, we introduced the mobile application we will be building with dojox.mobile: TweetView. We built the general layout template for our application and now it's time to make TweetView work. This tutorial will focus specifically on the "Tweets" and "Mentions" views of our application. Before we begin coding our application, let's set up our application file structure and review a few mobile app development concepts.

TweetView: Creating the Settings View

In the previous post, Getting Started with TweetView: Tweets and Mentions, we solidified our mobile application's file structure, reviewed TweetView's goals, and created the Tweets and Mentions views by coding tweetview._ViewMixin and tweetview.TweetView. This tutorial will focus specifically on the "Settings" view of our application: dependencies for the class, how the Settings view ties into the Tweet and Mention views, and coding the Settings view itself.

TweetView: Android, Packaging, and Review

In the previous two posts, Getting Started with TweetView: Tweets and Mentions and TweetView: Creating the Settings View, we created the HTML, CSS, and JavaScript code required to power the TweetView mobile application. This tutorial will focus on implementing an Android theme, leveraging the Dojo build system to keep the application compact for production, and a basic review of the entire dojox.mobile-powered application.

Go check them out!

Recent Features

  • By
    Page Visibility API

    One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back?

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. David

    Excellent tutorial, thanks!

    Just one question, I found the demo doesn’t work in IE8, It report a js error in dojo.js and I can not figour out the cause…

  2. Gordon Tillman

    Howdy David!

    First of all, thanks for the tutorials. I wanted to just point out one minor issue with this tutorial:

    http://dojotoolkit.org/documentation/tutorials/1.6/mobile/tweetview/intro_tweetview/

    When you define djConfig you have it set to parseOnLoad true, but with that setting you receive this error when the page loads:


    Uncaught Error: Tried to register widget with id==tweets but that id is already registered

    I did notice that one loads the demo using the View Demo button on the tutorial page then that value is set to false.

    Thanks!

    –g

  3. Eric

    Great stuff – any plan for Dojo 1.7 update of TweetView, showing use of AMD,etc?

    • Yes sir; TweetView has been rewritten in AMD, tutorials rewritten, and is currently awaiting review.

  4. Matt

    Just poured over your re-written (AMD/1.7) TweetView tutorial — really nice job! Both impressed with Dojox.mobile and your use of it. I found myself really wanting to experiment with it after building along with your tutorial app.

    One spot of confusion for me: trying to modify the ListItem widget within your TweetView.js (updateContent method specifically). I would think that I could add a “moveTo” property when the new ListItem({ moveTo: “otherview” … etc. }) is instantiated. But it does not seem to work like that … I can’t find any good documentation on creating the mobile widgets programmatically? Could you nudge me in the right direction? Best Regards!

    • Matt

      (sorry, I know, bad form replying to myself, but …)
      Figured it out: The innerHTML that was pushing the tweetTemplateString into new ListItem was replacing the widget elements that were being created, so I added dojo/dom-construct to the define array and then was free to use domConstruct.place to append the tweetTemplateString to the item.containerNode.

      Lastly, fired item.startup() to trigger construction of the widget. (is there a better way?)

      I’d love to hear your take on that approach. Seems to work as desired – moveTo arrow inserted and tap wipes to specified view.
      -Matt

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!