Writing your first Sencha Touch application – Part2

Till now we have seen how to create a viewport panel and dock a toolbar on top of the Panel. Lets build the rest of the application. Ok, now we need a List and some contact information that the list will hold.

To create a list we will use the standard Ext.List component class and set properties in its configuration object. This is how to create a list

var contactList = new Ext.List({
                             store: store,
                             itemTpl: itemTemplate,
                             height:"100%"
                        });

A list needs data to display as items and to do so we have the store property. This property defines a Ext.data.Store object that holds the data and the schema that defines the structure of the data. I am using the term schema for the data modelling because it seems to make things familiar to me.

Writing your first Sencha Touch application – Part1

In this tutorial we will build a simple Sencha Touch application that will help you get started with this new Touch Framework. Sencha Touch is all about developing mobile web applications that look like native in iPhone, Android and Blackberry touch devices. It is a JavaScript library that complies to all the latest web standards like HTML5, CSS3. To start with we will be developing a simple contact list that will store contact information. When a particular contact item is clicked/tapped then an overlay will show more information about that person. This is how it will look at the end.

Our application

Creating a SVG Pie Chart – HTML5

In one of my recent projects I had to create a simple pie chart kind of structure in SVG (Scalable Vector Graphics) based on values given in an array. So if the array has five values in it then the pie chart will have five slices, each slice representing a value. Here is how it looks,

Calculating angles swiped by each slice

Alright, so we need the angles that are swiped or covered by a each of the pie slices. The values are supplied by an array

var pieData = [113,100,50,28,27];

Each value will cover some angle in the circular space. Let us find the angle covered by the first value in the array i.e 113. One thing to note is that the 5 values (the array) together, will cover the circular space which is a complete 360 degrees. So 113 + 100 + 50 + 28 + 27 = 318 is making a 360 degrees or a circle. So 113 will cover (113 * 360 degrees)/318 which is approximately 128 degrees. So, similarly by looping the array you can calculate the angles swiped by each value and store them in a new array for later use.

The Approach

Now, that we have the angles calculated, the next step is to approach the problem. For my case I have used Raphael library to generate SVG in JavaScript and I would suggest you do the same. Raphael is easy to learn and will not take you a day to do so.

HTML5 Geolocation

Geo-location is a new feature that has been included in HTML5. It allows the viewer to share his current location to trusted servers or websites. Once the location is determined, the server can then use this data to do a lot of stuff. Imagine creating a HTML application that determines the location of all your favorite food corners near you say in a 5 kilometer radius.  With the new Geo-location feature it is possible, cool isn’t it.

Geo-Location API

The Geo-location facility is provided by the all new and important Geo-Location API in HTML5. What happens primarily is that the latitude and longitude of the user is available to JavaScript in the page which can send the values to a remote server and then do location fancy stuff.

Lets look at a quick example of how to do so,

The Geo-location API adds a new property to the global navigator object navigator.geolocation.

navigator.geolocation.getCurrentPosition(success,error);

Next thing to do is to call the getCurrentPosition() method as shown, inside your JavaScript function to determine the location. For eg.

function getLocation()
{
navigator.geolocation.getCurrentPosition(success,error);
}

where success and error are references of two callback methods.

HTML5 – SVG Demographic Map Dashboard Example

The previous month I was busy with experimenting a dashboard which had choropleth/thematic maps, charts, interactivity, also dynamic data reading. Here is what I came up with. This one is a HTML5 based dashboard. Looks like a Flex application isn’t it? The map is of United States and the demographic data are just demo data although they are read from XML files. What’s good is that this application can scale, in the sense that the data can be fed to it by services running on remote servers and the map can display that. Also the data distribution has two categories a) Equal Distribution b) Quantiles method. Had to look up the statistic book again for these two. Play with the application and let me know if you like it.

The application is meant for computer browsers that support HTML5 Canvas and Inline SVG. You can best view it in Chrome, FF and Safari.

Click the image to see the live demo.
(The demo link has slight problems at the moment. I am fixing this right now. But you can view the source code in the browser and download it if needed.)

Note: The script code needs a bit of re-factoring. I am working on it partially due to time constraints. Once you have the code, you can modify it as per your needs.

Issue: I am noticing some issues with the select lists on the top. The Equal Intervals/Quantiles select list some times does not make any changes in the map. I will look into this, but you might want to test it.