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!
Hi,
Thanks a lot for posting the tutorial, useful to see how sencha.io works!
I am also interested in a creating an app that has a separate controller for each tab in a tab bar (that only loads the controller/view pair when clicking). I will keep an eye on your blog
:-)
Thanks again,
Simon
Hey Simon, tks for the comment. This is just an utility part of sencha.io, the “image src provider”. Sencha.io is much cooler than that, but it’s still under development.
In this example I have a separate controller for each tab, but I don’t see much advantaged in loading dynamically. I’d rather have everything compressed and concatenated in one single file, that later on in production the microloader could smartly cache.
Ola Bruno,
Obrigado pelo seu Blog esta me ajudando, sou principiante no Sencha Touch, estou desenvolvendo uma aplicação para comandar pedido no restaurante, seria possível vc postar algo relacionado com Proxis, estou usando Ext.setup(…Ext.regModel(…)… Ext.apply())
Obrigado, Henrique
Ext.regModel? Tais usando Touch 1? Eu sugiro migrar o quanto antes, é bem fácil, já que a versão 2 emite warnings nos métodos que foram depreciados.
Eu adoraria escrever mais sobre algum assunto específico, mas não entendi bem o que vc está sugerindo quando diz algo relacionado a Proxis. É um assunto bem amplo.
Abs!
obrigado por responder, consegui progredir com o Proxis, estou usando localstore para guardar os dados do pedido até finalizar o processo, o atendente recebe um grid com todos os itens, informa a mesa e o código do cartão do cliente. Ficou simples e funcional.
Henrique
Wow, wonderful blog layout! How long have you been blogging for?
you make blogging look easy. The overall look of your site is fantastic,
as well as the content!
I have to thank you for the efforts you have put in penning this website.
I am hoping to check out the same high-grade blog posts by you in
the future as well. In truth, your creative writing abilities has motivated me to get
my own blog now ;)