How to create a mobile Flickr app with Sencha Touch 2

How to create a mobile Flickr app with Sencha Touch 2

Touchr App

The best way for developers to learn new technology is definitely coding. For learning the new changes introduced with Touch 2, I created this little app that I called Touchr. It features some common components and basic filtering interaction, but also a customized proxy with YQL integration to consume Flickr. Check the list:

  • MVC architecture
  • Customized JSONP proxy that consumes YQL queries
  • Use of sencha.io service to resize images, optimizing for mobile screens.
  • Use of controller listeners to filter data stores
  • Use of TabPanel, DataView, Buttons, Toolbar, TextField
  • Use of custom theme to define new color, new icons and css optimizations

In this post I’ll share some details so you can also exercise some Touch skills as well!

Grab it!

The code is available on github.com/brunotavares/Touchr. I’m always trying to improve it and keep it up to date. The last major one was for Touch 2.1, using the new SDK with the microloader.
*Touch compatibility webkit only

Starting the project

$ sencha app create TR ~/Code/Touchr

Really simple task with the new Touch SDK. This will create all project scaffold, already activating the dynamic loading and the microloader. Check “Quick Touch 2 scaffolding example” if you have any questions.

Views

The root component for this app will be a TabPanel, and from there we’ll create 3 different lists: Feature Photos, Search Photos, and Photos from User. I decided to separate those in different views, and reference them on the tabpanel using xtype.

All the 3 lists will look similar. I picked the User list to expand the code. Please take a look on other 2 lists views from the repository.

Notice that it’s a list, but it extends Ext.dataview.DataView, and not Ext.dataview.List. Since I don’t need features like row selection, grouping, and index bar, the dataview is a lighter and better option. The same line of thought is valid when choosing simple Containers other than full Panels. Always analyse carefully when picking up components.

Also notice that for the itemTpl config I’m using the src.sencha.io service. It’s a great utility that delivers images according to the device screen size. It makes your app faster, since you don’t need to serve 1000×600 pictures for a 480×320 device.

Models and DataStores

The list above will only display data if it’s tied to a datastore. In this case is the UserPhotos store. And this store is tied to the Photo model, which defines its fields.

Taking a close look at this store, it’s clear that it’s linked to TR.model.Photo. It’s also using remoteFilter, which allows the custom Flickr proxy to pass parameters to Yahoo YQL API (more to come). The proxy is the one responsible for fetching data, and it has a JSON reader attached for parsing.

This store features a not so conventional rootProperty. It’s a nested one, since the YQL API response is formatted in this way.

The Photo model is pretty straightforward. The only different thing here is the photo_url field, which is not an information delivered by the server-side. It’s a custom local property that I defined, so I could have a better model design. Since mobile apps often deal with third part APIs, and those are not always properly designed for our app, we have the chance to normalize it.

Controllers

At this point we already have views displaying data, so now we’re adding some interaction. Let’s take a look on the search tab, which has a searchfield on the top that will filter our list. We need to create a controller that will look into the component tree for our searchfield, associate a listener to it, and then filter the list’s store.

The way controllers associate listeners to components is by the control config. This object receives key:values pairs, where the key is a string representing a ComponentQuery String, and the value is another object, containing the name of the event as key, and the value as a function string reference.

To filter the list I don’t actually go trough its methods trying to find a way to accomplish the task. All the data is defined on the datastores and models. They serve as a data layer, and every data operations as adding, removing, updating or filtering itens is done by the datastore.

Other parts…

I’m still missing the custom Flickr Proxy, designed to consume YQL Service via JSONP, and the theming structure. I’ll let those to a separate article.

On this post we saw how to start the project, and go trough the MVC pattern, defining views, then the data layer with models and stores, and last adding interaction via controllers.

I’m looking forward to do more tutorials like these. If you like it, don’t forget to share and support our growth!