Sencha Touch - por que você deve conhecer este framework para mobile

Neste artigo inicial vou apresentar um excelente framework para desenvolvimento de aplicações com suporte a touch utilizando HTML 5, voltada para dispositivo móvel. Mas antes de começar efetivamente,  vou mostrar uma breve história de como isso começou.

Sencha surgiu da união de três grandes projetos:

• ExtJS;
• Jq; e
• Raphaël.

Foi uma notícia bem repentina, do dia para a noite virou Sencha! E, como se não bastasse essa grande novidade, eles saíram com outra ainda maior, o lançamento do Sencha Touch, o primeiro framework HTML 5 para dispositivos móveis.

Sencha Touch é um framework cross-plataform para construir aplicações web especificamente para dispositivo móveis utilizando como base tecnológica HTML5, CSS3 e JavaScript. Ele conta com uma extensa biblioteca de widgets de interface, com visual moderno e diversos efeitos de transições CSS. Possui um completo controle de eventos de toque e um abrangente gerenciador de dados.

Acredito que muitos já pensaram em utilizar HTML 5 em suas aplicações e chegaram numa barreira de alta complexidade e uma curva de aprendizado relativamente alta. Com o Sencha Touch esse trabalho se torna fácil e divertido, pois a ideia principal do projeto é fornecer uma forma simples e flexível para desenvolvedores criarem suas aplicações complexas usufruindo do recurso touch e HTML 5. Veja aqui exemplos de componentes.

Podemos observar que mesmo estando na primeira versão, e em fase beta, o framework conta com uma grande variedade de componentes de interface prontos para serem utilizados. A coleção de componentes (widgets) do Sencha Touch, em minha opinião, é a que chama mais atenção a todos quando começamos a desenvolver utilizando a ferramenta. Fica muito fácil criar um formulário, um menu, efeitos de transições, entre outros recursos de interface. Outra vantagem em relação a outros framework, como JQuery-UI, é que todos os componentes são padronizados, facilitando a comunicação entre outros componentes na interface.

Veja um trecho de código para criar um lista de pessoa no estilo iPhone:

Ext.regModel('Contact', {
    fields: ['firstName', 'lastName']
});

demos.ListStore = new Ext.data.Store({
    model: 'Contact',
    sorters: 'firstName',
    getGroupString : function(record) {
       return record.get('firstName')[0];
},
data: [
{firstName: 'Julio', lastName: 'Benesh'},
{firstName: 'Julio', lastName: 'Minich'},
{firstName: 'Tania', lastName: 'Ricco'},
{firstName: 'Odessa', lastName: 'Steuck'},
{firstName: 'Nelson', lastName: 'Raber'},
{firstName: 'Tyrone', lastName: 'Scannell'},
{firstName: 'Allan', lastName: 'Disbrow'},
{firstName: 'Cody', lastName: 'Herrell'},
{firstName: 'Julio', lastName: 'Burgoyne'},
{firstName: 'Jessie', lastName: 'Boedeker'}
]
});


demos.List = new Ext.Panel({
    layout: Ext.is.Phone ? 'fit' : {
       type: 'vbox',
       align: 'center',
       pack: 'center'
},
cls: 'demo-list',
items: [{
    width: Ext.is.Phone ? undefined : 300,
    height: 500,
    xtype: 'list',
    disclosure: {
       scope: demos.ListStore,
       handler: function(record, btn, index) {
           alert('Disclose more info for ' + record.get('firstName'));
        }
    },
    store: demos.ListStore,
    tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> [lastName}</div></tpl>',
    itemSelector: 'div.contact',
    singleSelect: true,
    grouped: true,
    indexBar: true
  }]
});

A classe Ext.data.Store poderia ser facilmente substituída por outra, como Ext.data.JsonStore ou Ext.data.XmlStore, dessa forma poderíamos pegar os dados de um servidor para popular a lista.

Como podem ver, em poucas linhas foi criada uma lista de pessoas, ordenada e agrupada pela primeira letra do nome, e ainda com todos os eventos de navegação utilizado pelo iPhone ou similares.

Acesse o exemplo acima neste link.

Os componentes são todos renderizados em HTML 5 e são muito similares ao padrão utilizado pela Apple e pelo Google, com a vantagem de não precisar estar assinado, como os aplicativos do AppStore, para rodar no dispositivo. Com isso, abre-se portas para muitas empresas criarem aplicativos para iPhone ou iPad, sem se preocuparem com todas as inúmeras regras estabelecidas pela Apple, por exemplo.

Sencha Touch, assim como ExtJS, utiliza javascript no seu núcleo de funcionamento. Sendo assim, somente um browser é necessário para rodar a aplicação. Apesar do projeto ter sido voltado para dispositivos móveis com suporte a touch, ele funciona muito bem com o uso do mouse e de teclado.

Abaixo exemplos que podem ser acessado em um PC utilizando Google Chrome.

Na esquerda, está o Kiva Mobile, e à direita o Touch Solitaire.

É isso aí, espero que desfrutem bem do Sencha Touch! Em outro momento vou demonstrar exemplos práticos de como iniciar a construção de aplicativo, tanto em ExtJS como Sencha Touch.

• Para mais detalhes sobre o projeto: http://www.sencha.com/products/touch/
• Leitura recomendada: EXT - Criando aplicações com JavaScript
• Referência

Até a próxima!

Compartilhar :

Tweet

✚

Relacionadas