Sencha Inc. | HTML5 Apps

My First Sencha Touch Experience

Published Apr 23, 2011 | Joe McCann | Tutorial | Easy
Last Updated Jul 11, 2011

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.

Getting Started

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".

Sexy Styling

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.

Share this post:
Leave a reply

Written by Joe McCann

13 Comments

Robert Fauver

3 years ago

Hey Joe,

Thanks for creating this. It’s a great reference and big help.

Rob

Alexandre Parreira

3 years ago

Thank you!

That was very inspiring!

Felipe J

3 years ago

Joe,
Thanks for sharing. I almost forgot this was an Ipad app when testing on my Iphone where the detail image would be too big and prevent navigation backwards. The insight into the MVC approach is very appreciated.

Felipe

Jiang Long

3 years ago

Thanks for the great example!

I didn’t know you can base64 encode a png!  Thanks for teaching me that in your code!

And thanks for the MVC approach.  I used to wrap all my code inside a Ext.ready(...)  =)

Jiang

amidude

3 years ago

When trying to set up new styles I see mine for a split second and then Sencha default writes over it. No matter where I place the styles this happens. I’m finding it hard to justify the length of time it is taking me to do this in Sencha versus the time it is taking another developer to do it in JQuery Mobile. His app is practically done after 3 days and mine isn’t even done with the first page.

This was just a proof of concept and personally I’m going to have to recommend against using this tool because of the amount of time it takes to create your own look and feel. It’s just not conducive to a fast-paced environment.

James Pearce Sencha Employee

3 years ago

@amidude, that sounds strange - seeing your styles then disappear implies you are trying to splice in something extra rather than using Sass to (easily) alter Sencha Touch’s own style. Could you point me to some code so I can take a look? I could also point you towards http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch for a bit of extra styling info.

amidude

3 years ago

I followed that tutorial earlier and the most I was able to change was the base color. I may not be able to show code as I doing this work for a client. (I’ll check) I went through a variety of demos on Vimeo and all of them simply show you how to make minimal changes to the UI. (i.e. base color, icons etc) I guess what One said that I could use CSS3 to add my own styles. I tried to add style to the background with a gradient and a transparent PNG and whereas I can get this to work in a static HTML file, getting it to work in Sencha Touch is way too arduous a task. Also, the components in between our top and bottom docked tool bars needs their own styles to include different widths and positions. This sounds like it’s not the easiest thing to do in this framework.

amidude

3 years ago

Oh and I installed Compass and Sass. I made my changes to sencha-touch.scss per the examples I’ve been following. I do a “compass compile” prior to viewing my changes…when they actually show up and for the length of time they appear on the screen.

James Pearce Sencha Employee

3 years ago

@amidude, I would expect to see one-style-then-another-style if all the styling was in one single file (as it should be using Sass. Are you including your.css as well as then sencha-touch.css in the top of the index.html file? You’d only need the former.

amidude

3 years ago

No Sir. I left that one empty as the example I was following mentioned to place the CSS3 directly into the .scss file. I even pasted their example in there and it did the same thing.

amidude

3 years ago

Found out that when I take everything out of my index.js file that I can now see the background as I have it coded in my stylesheet. So that tells me that there is some default behavior in the Javascript that is putting a solid white background over my background.

Kousutbh

3 years ago

I   recently Sencha Touch   I don’t know how to work and use in .net help me for that

Scottie

3 years ago

I am learning sencha touch now,I think I can learn a lot from your article and your code.Thank you very much.

Leave a comment:

Commenting is not available in this channel entry.