In my previous post, I showed how to build a mobile web app using jQuery Mobile. Its use of HTML5 data attributes and CSS classes made it pretty straightforward, especially if you are used to building regular websites. The architecture of your mobile website would have to be based on the server-side though, whether this be ASP.NET MVC, PHP, Ruby, etc. Then I came across Sencha Touch which changes this mentality to a more progressive approach… client-side applications!
Setup the Project
Once you have created a fresh workspace, add an “index.html” file with the following code.
For the rest of the application, create your structure like below. You can add your own flavor if you like. For example, I may merge the “css” and “img” folders into a “~/theme” folder in the future:
The store descends from the “Ext.data.Store” class and uses your models to populate your data. This data can come from local, session, memory, AJAX, JSONP, or Direct. What interests me most here is JSONP, which allows you to make REST calls to remote servers all from the client-side. This is what decouples your client-side application from the data storage. Now you can let the data storage be served from a remote cloud or a 3rd party service such as Twitter, Flickr, Amazon, or Sencha.io. The “store” is the closest thing to server-side you may have to touch, but hopefully you have a database admin or REST services for your storage already so you can focus on pure luscious code! Below is the “store” class used for mediating data between your models and storage.
You will be building the interface procedurally in this area. This means putting together available components like Lego blocks. You will be initializing the component properties within the “config” property and adding more components within the “items” property. Refer to the API documentation to see what components and properties are available for you to use. You can even create your own components which can be placed in the “~/app/ui” folder for reusability. By the way, set up an “alias” for your views using the special “widget.” format so you can use it as an “xtype” in other views.
Notice that your views are just clean building blocks without any event handling. That is where your controllers come in. In the “init” event of your controller, you can subscribe to events of your view components. What is nice here is that you can reference components using CSS-selectors like jQuery using Sencha’s “ComponentQuery”. In the events, such as an item tap, you can pull the record clicked, process the data, and call a controller action to render a view. Sencha is working on more MVC features, so for now “rendering a view” means to activate a card in a “Panel” or pushing a view into a “NavigationView”.