Formatting Dojo Mobile Data Lists

Although this blog explain hoy to reading JSON Data with Dojo very well, I want to post a step-by-step example that explain how to formatting the data to get different data lists types in your mobile application.

Step 1: Choosing the right data list for your application

Going to Dojo Mobile Showcase you can find a few differents data list types. Remember that to populate data you have to use a RoundRectDataList widget to asociate a store to the list.

So, If you want a classic list data, with a code and description, you can use this kind of data list.

In the other hand, if you have more data I recommend you a result data list like the image in the begining of the articule. I also recommend to look at the testing cases in the local dojo installation: ./dojox/mobile/tests/test_iPhone-ResultList.html

Step 2: Creating or populate the apropiate JSON data file

Whatever the case of your application, you can create a static JSON file or maybe populate one with your favorite technics (.net ashx file is my case). The interesting thing here is to associate each html attribute to a JSON file structure, so that Dojo automatically populate de list data with the formatting style you choose:

Step 3: Create the HTML

Finally, we want to create de HTML for the example. In this case, we use an ItemFileReadStore to generate de store.