Using Sencha Touch HTML5 library to build a mobile application
bobleah 270000CN12 Comments (11) Visits (60626)
As in past conferences, Impact2011 offers a web based social aggregator, which pulls together conversations and artifacts from Twitter, YouTube, Flickr, Facebook, and other social destinations, into a single web page. While this page is available to mobile devices, it does not offer an optimal mobile experience. A few of us here at developerWorks thought it would be a cool project to offer an aggregator that is optimized for viewing on a mobile device. Rather than invest in the creation of multiple native device applications, we decided to explore some of the new web libraries that have been created expressly for displaying web applications on mobile devices. We chose Sencha Touch for this example.
If your going to Impact2011, or just want to give our app a test drive, you can access it by pointing your smart phone at the branded QR Code to the left, or you can directly load the app by clicking http
Here is a code sniplet:
Additionally, you will likely have your own inline CSS to style various elements that you include as part of your application. In particular, you will want to account for landscape mode in addition to portrait mode. You do this by creating some conditional CSS. In our case, if the screen width is greater than 479px, we use the first set of CSS (iPhone landscape orientation); whereas, if the screen width is less than or equal to 320px. we use the second set of CSS (iPhone portrait orientation) :
Finally we include our own js file (index.js) which implements the Sencha components. Sencha uses the Ext.js framework (For more information on this framework, you can visit http
To create this type of app, there are a few things to consider:
Let's examine each of these considerations more closely:
We extended the Sencha ExtJS Panel component to include a toolbar and a list view. In the toolbar, we have a back button, a refresh button and a title. The layout of the panel is set to 'card' layout to enable us to support multiple cards. A card, in this case, is a list view of each of our media types. The panel is set to full screen to take up the entire browser view port:
Remote retrieval of data / storage in a NestedList:
Every time the Blog, YouTube, Flickr, or Twitter icon is clicked. A remote Ajax call is invoked to retrieve the data back in JSON format. The data is then inserted into a Ext.NestedList component data store.
Since we don't want to keep making calls to the same blog data, video data, etc, we want a memory structure to save the data we have already retrieved. In the initComponent function, we added the following hashmap:
The states are the actual keys to retrieve the data. For example, impa
A couple of tips:
There are certainly a lot of components Sencha provides in additional to those we have covered. To see a demo of the capabilities of the Sencha libraries, you can visit http
Extjs provides a lightbox feature called mask. Since a server side round trip to retrieve data can take substantial time, consider using Ext.
In an iPhone, you can create an app icon using the Add to Home Screen feature in Safari, so that an app icon is created on your iPhone as a shortcut. With the Sencha CSS mimicking the iPhone look & feel so closely, this is a nice touch, and one of the reasons we chose to use Sencha,
If your attending Impact2011, please give this app a try, and if you could, please leave your feedback as a comment on this blog post. If you have any questions on the creation of this app, please don't hesitate to contact Daryl Pereira, Peter Yim, or myself. Thanks!