Creating Mobile Web Applications with

By  on  
dojo mobile

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

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 had a lot going for it.  Over the few weeks of research and experimentation I came to one conclusion: is awesome.

I've written a series of tutorials about using 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

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: 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 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

Introduction to TweetView

The first article in our series, Getting Started with, detailed the fundamental concepts and usage of the Dojo Toolkit's library. In the remaining posts in this series, we'll embark on creating our own fully functional 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 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 application.

Go check them out!

Recent Features

  • 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
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

  • By
    Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...


  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:

    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.



  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 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 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.

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