Learning Dojo Mobile

It has certainly been awhile since I posted to this blog! I’m resurrecting it to post about a development topic that I hope will become accessibility related. Basically I need to learn Dojo Mobile and I thought I would describe my learning process here.

I worked on Dojo several years ago to make the core widget set, dijit, accessibile. Since then I have been working on another open source project, Apache Cordova. It provides a framework to allow you to build mobile apps using Web technologies and provides device feature access through JavaScript apis. Check it out at cordova.apache.org.

Now I need to relearn Dojo for a possible mobile Web project. Ultimately I’d like to use Cordova to add some device features to that app and wrap it up as a native application. Then, I want to make sure it is fully accessible to people with disabilities on at least the iOS platform. Here is my first dive back into Dojo and Dojo Mobile.

Getting Started

I decided that I did not want to work from a CDN so that meant I needed to download the Dojo source code. Since I used to work with Dojo I still have an eclipse project set up with SVN access. Technically I think I can still commit to Dojo but I wouldn’t dare do that without a code review after being away from the code base for so long! Since there has been some accessibility work done on the dojo mobile widgets I opted to live on the edge and get the lastest source code drop. I can update this if changes that I need get added. The other advantage to working on a local copy of the code is being able to examine the source code itself.

Unless you have a need for a specific fix, download the latest shipped version of dojo here: http://dojotoolkit.org/download/. You want the source version so that you get all of the tests. The tests can be very helpful when you don’t quite “grok” something from the documentation. I got it by SVN but I am happy to see a github option as well. I used git and github for Cordova work and have to admit that I really disliked git at first. Now it is a love / hate relationship – I hate that it is fairly complicated and my brain can’t remember all of the commands but I love that it is so powerful!

As the last part of the setup you will need to set up a web server to test your code. I use the apache server that is built into OS X on my MacBook Pro. I will start with just building a web only version of the app so it doesn’t really matter where the code lives. Once you have the Dojo build downloaded and the code accessible from the web server, check out the Dojo Mobile examples in the dojox/mobile/test directory.

I’m not going to walk through the server setup here. I’ve just provided a few notes about my setup below.

My httpd.conf file has the following alias:
Alias /iSteps /Users/bgibson/Documents/Projects/test/Steps/www

AllowOverride All
Options Indexes FollowSymLinks
Order allow,deny
Allow from all

In the www directory I have the following subdirectories:
dijit
dojo
dojox

These came from the dojo download.
To access the dojox/mobile tests I use the following URL: http://localhost/iSteps/dojox/mobile/tests/. You could also dump your dojo code into a subdirectory of the default web server host location.

The example app is just a simple one for recording steps from a pedometer. It’s hardly necessary in this day and age of Fitbit and other devices with their own apps, but it does utilize basic mobile web features: views, lists, tabbar, storage and more. More on the app in the next post.


About Becka11y

Web Accessibility Consultant with 30+ years in the software industry and 12+ years of direct accessibility innovation.

2 comments:

  1. Well, you’ve given me a bit of motivation. I’ll start working this a little more diligently! I got sidetracked looking into using CSS overflow for scrolling!

  2. I’m excited about learning dojo mobile. there aren’t many tutorials online. when is the next post coming?

Leave a Reply

Your email address will not be published. Required fields are marked *