This Tutorial is most relevant to Sencha Touch, 1.x.
Well-known designer and developer, Joe McCann, recently spent a few days using Sencha Touch. In this article, he talks through his experiences of building his first application.
After seeing David Kaneda speak on a panel at SXSWi this year about the latest and greatest features of Sencha Touch, and finally having the shiny new iPad 2 firmly in my grasp, I was convinced that I needed to build a Sencha Touch app for the iPad 2.
Why specifically the iPad 2? Because the UI is gorgeous and the browser is incredibly responsive and snappy. Oh, and because the iPad overall had an 83% share of the tablet market in 2010 before the iPad 2 came out, I knew a large a number of people would be able to use it.
Instead of building something that is just a "Hello World" app, or merely one step above that, like pulling in some tweets from Twitter, I thought about making something that developers (and myself for that matter) would actually consider a bit more of a "real world" project. Coupling that with the large screen size the iPad 2 provides, a photo gallery of some sort seemed like a nice idea. But let's not use Flickr, let's use the ultra-hip and exciting Instagram API instead! And thus, Teagrams was born - an app that snags Instagrams tagged with the word "tea". (Sencha is after all a type of tea!)
What really compelled me to do something that required a web service call is I wanted to build something that would allow me to use the new "Pull-to-Refresh" feature in Sencha Touch 1.1. Considering how fast people are posting photos to Instagram, I figured refreshing our "teagrams" list would be a decent test of this UI pattern.
First things first: I needed to download Sencha Touch and setup my development environment. A workflow pattern that seems to work well for Sencha Touch apps is the following directory structure:
There are a number of tutorials and resources about getting started with Sencha Touch, so if you haven't done so go there now to get familiar.
Also, note that the source code for this app is heavily documented, but does require some familiarity with Sencha Touch and/or ExtJS. You can download all the source code free on Github.
Diving In To MVC...It's Easier Than You Think
In order to make my app work properly there are few fundamental components required. One is the UI (View). Another is the data to populate that UI (Model). Finally there is the logic that wires them together (Controller). Nothing revolutionary here, just a tried and true design pattern. However, how it works in Sencha is quite unique and incredibly powerful.
For Teagrams, there is the main "Viewport" view which acts as a wrapper and initializer for all subsequent views and there is a "TeagramLists" view. It is in the TeagramLists view where I create the actual "visible" UI itself, (which is an extension of an Ext.Panel and inside this Panel a number of Ext.List components). Confused? Have a look at the TeagramLists.js file. It is well documented.
I define the components to contain some logic such as making the initial request to the Instagram API when the page loads. Of course I also associate the view with the the data model (TeagramPhoto.js) so the view is properly populated with relevant data. Since we are loading some data from the Instagram API when the app/page loads, there is no real need for a controller in the traditional sense. However, I included a controller for consistency and potentially for future development. Maybe in the future we might add an Ext.Map and associate the GPS coordinates of the photos in a different view.
Setting up a model in Sencha Touch is really straightforward. You register the model with the app and create fields containing the data types you need (strings, ints, etc.) and either name those fields directly from properties in the JSON object that will be coming from the Instagram API response or create your own names but "map" the actual data to this name.
For example, the JSON response from the Instagram API has a key named "filter", so naming a property in the model "filter" will automatically map to its value (which is of type string). On the other hand, in my model, the field "thumbnail_url" does not exist in the JSON object response from Instagram. So using the "mapping" property, I scope using dot notation down to the string I want (the URL for the thumbnail) and normalize it to the field "thumbnail_url".
Sencha Touch itself has a clean and appealing design language out of the box, thus making an elegant and visually appealing app rather trivial (engineers, consider yourselves blessed with this feature). But if you're like me, you want to add some style of your own and create a custom theme. Sencha Touch makes it incredibly easy to not only tweak individual elements, but also create full blown themes with only modifying one value in your (s)CSS.
That's right, Sencha Touch uses Sass - and uses it right. Inside the teagrams.scss you'll notice on the very first line a "$base-color" variable. By simply changing this one value, recompiling your Sass (I recommend using Compass) and refreshing your browser you see not only one color change but a completely new theme based on that color. Yes, read that again. A theme can be created by setting only one color!
In the end, all of your standard CSS styling knowledge applies so if you do need to just add a repeating background image to a class, you can. Remember, it's still just a web app!
Pull to Refresh!
Before losing sight of what I was aiming to do, if you recall, I really wanted to try out the Pull-to-Refresh feature that is available in Sencha Touch 1.1. Pull-to-Refresh is actually a plugin for Sencha Touch and can be found here.
To my surprise, the Pull-to-Refresh feature addition was incredibly trivial to add to my app. It can actually be accomplished with one line of code, but for readability, it's on three.
Inside the TeagramInnerList component definition, "plugins" is just another option that is passed in as a configuration to the Ext.List component that I extended. That's it! Once this is set, Pull-to-Refresh is automagically wired up and ready for action.
Final Analysis & Next Steps
After putting all this together and placing on a local web server (or accessing the hosted GitHub version), you get the following result:
And the Pull-to-Refresh action:
And tapping on one of the list items showing the full size image:
Going forward, a way of enhancing this app would be to increase our model with maybe more fields (such as GPS information). Maybe we'll do that next time, but for now, this should be good enough to get you going. It did for me.
Finally, I would like to point out this was my first Sencha Touch app. Ever. I was able to get up to speed and build the app in one business day. You can too. Once you wrap your head around the object-oriented nature of Sencha Touch, creating incredibly robust and visually stunning applications is quite trivial. I highly recommend getting started sooner than later.