Entendendo um aplicativo mobile baseado na Sencha Touch 2.0

Vimos como instalar a biblioteca Secha Touch 2.0 e suas ferramentas de desenvolvimento. Vimos também como criar seu primeiro aplicativo. Tudo isso em um único artigo que serviu de base para a primeira aula de desenvolvimento do curso de desenvolvimento móvel da Faculdade Spei.

Neste artigo vamos dar uma olhada rápida na arquitetura da biblioteca Sencha Touch 2.0. Antes de começar vamos deixar claro uma coisa: Esta arquitetura, apesar de incrível, não é MVC. Eu sei lá existe um M de model, onde você colocará as classes de modelo, há um C de controller, onde você colocará as classes de controle e lógica e há até um V de view onde ficará sua interface mas, as semelhanças acabam ai. Esta arquitetura é própria e particular e chamá-la de MVC é menosprezar este trabalho.

A imagem ao lado, retirada próprio site da Sencha, mostra a arquitetura do ponto de vista modular e deixa claro que tudo está relacionado ao módulo APP.

interessante desenvolvimento móvel com arquitetura sencha touch 2.0

Todos os módulos são relacionados através do módulo Application e, além do MVC tradicional temos o Profile e o Store.

  • Models: Ou modelos são as classes de abstração de dados;
  • Views: São as classes responsáveis pelo visual e pela interação com o usuário;
  • Controllers: Respondem a comandos do usuário, executam a lógica de negócio;
  • Stores: Classes responsáveis pelo armazenamento de dados usadas por componentes como Components like Lists e DataViews;
  • Profiles: Permitem a criação de visualizações diferentes para dispositivos diferentes de forma simples.

Criando aplicativos móveis com o sencha touch 2.0

Além disso, estes módulos estão organizados em uma estrutura de pastas e arquivos específica, ainda que complexa, e eficiente.

Observe que há uma pasta raiz, GS e abaixo dela as três pastas principais app, resources e sdk. Observe também que todos os aplicativos que você criar com esta biblioteca terá esta estrutura então você só precisará se preocupar com ela uma vez. Não esqueça que você não precisa decorar este treco todo. Como vimos antes, existe um aplicativo só para criar esta estrutura.

Os nomes das pastas são, para lá de autoexplicativos. Você, por acaso, tem alguma dúvida sobre o que deve ficar em uma pasta chamada icons? Ou images?

Há uma pasta que merece atenção: a raiz. No nosso caso, a pasta GS. Existem algums arquivos interessantes lá. O mais importante é o app.js.

Este arquivo define o aplicativo. Define o namespace, as classes que serão incluídas, os recursos que serão utilizados e é o arquivo que será executado para rodar seu aplicativo.

[javascript]

Ext.application({
name: ‘Sencha’,

launch: function() {
var vermelho = {
style: "background-color: #ff1111; color:white;",
title: "Vermelho",
html: "O que eu colocar aqui será impresso na página"
};

Ext.create(‘Ext.Carousel’,{
fullscreen: true,
direction: ‘vertical’,

items:[vermelho]
});
}
});

[/javascript]

Vá lá, abra o seu em algum editor de textos, verá que não tem nenhuma relação com este código acima. Fiz de propósito. Este aqui é mais simples tem a definição do namespace do seu aplicativo (nome:) e a função de inicialização do seu aplicativo (launch: function() {…) estes dois itens serão comuns a todas as aplicações. O resto é pouco, quase nada, só para testar.
Experiemente usar este código substituindo o código gerado automaticamente e ver o que acontece. Já vou adiantando, não é grande coisa e o carrousel não vai funcionar corretamente. Sabe por quê?
Os modelos, controllers, views, profiles e stores são todos itens da classe application. Você faz referência a estes módulos simplesmente colocando seus nomes, em um array, como pode ser visto neste código de exemplo tirado das páginas da Sencha:

[javascript]
Ext.application({
name: ‘MyApp’,
models: [‘User’, ‘Product’, ‘nested.Order’],
views: [‘OrderList’, ‘OrderDetail’, ‘Main’],
controllers: [‘Orders’],

launch: function() {
Ext.create(‘MyApp.view.Main’);
}
});
[/javascript]

E cada um destes módulos deve ter seu próprio arquivo js na pasta correta. Uma última observação. Isto aí é javascript. Cuidados com as letras maiúsculas e minúsculas, com as aspas simples e duplas e, acima de tudo, observe que argumentos e itens são separados por vírgulas e funções por ponto e vírgula. Uau!