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
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

  • By
    MooTools Zoomer Plugin

    I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is...


  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!