>

Sencha Touch – Parte I

Actualmente, como todos nós sabemos, o universo dos smartphones e das aplicações móveis vieram para ficar. O mercado das apps está em constante evolução e todos os dias aumenta o seu número nas diversas stores existentes. O problema existente é que cada fabricante obriga a uma linguagem de programação. Se queremos desenvolver uma aplicação para iOS, temos que programar em Objective-C, para Android, em Java, e Windows Phone somos obrigados a usar o C#, por exemplo. Ora, programar em todas estas linguagens é bastante complicado.

A solução para esta questão passa pela utilização de uma framework híbrida. Este tipo de frameworks permitem ao programador desenvolver uma aplicação em HTML5 e Javascript capaz de ser executada em qualquer sistema operativo móvel com o look and feel de uma aplicação nativa.

Exemplo deste tipo de frameworks é o Sencha Touch. Com esta framework é tão simples desenvolver uma aplicação com um design atrativo e cross-plataform. É importante referir que esta framework é totalmente gratuita e open-source.

Nesta introdução será demonstrado como preparar o ambiente de desenvolvimento, assim como um pequeno exemplo das capacidades desta poderosa framework.

Após o pequeno exemplo estar completo, será ainda explicado como iremos encapsular a app HTML5/Javascript numa aplicação nativa, utilizando o Apache Cordova.

Para criar o ambiente de desenvolvimento será necessário realizar o download da framework do seu site oficial: http://www.sencha.com/products/touch/download/.

Será necessário terem instalado um servidor web Apache, como por exemplo o WAMP ou XAMPP.

Finalmente, é preciso efectuar o download do Sencha Touch CMD, para criar a aplicação via linha de comandos (http://developer.sencha.com/pathway/sencha-cmd-3).

Terminados todos os downloads, é tempo de criar o ambiente.

  1. Unzip da framework dentro do servidor web.
  2. Executar o seguinte comando para criar a aplicação Sencha Touch:
    1. Navegar para a pasta onde extraíram o SDK e executar o comando:
      sencha generate app [nome aplicacao] [caminho]

Depois de criada a aplicação, basta aceder pelo browser ao local onde criar a app. Por exemplo:

sencha generate app pop ..//pop

No browser basta aceder ao endereço do webserver: http://localhost/pop/.

Sencha Tools: Exemplo App inicial
Figura 1: Exemplo App inicial

A aplicação criada por defeito, trás já algumas funcionalidades que podemos aproveitar para o nosso desenvolvimento.

Em seguida, será apresentada a arquitectura da framework, de forma a perceber melhor como está funciona.

O Sencha Touch está organizado segundo a arquitectura MVC (Model-View-Controller) onde os componentes visuais estão separados do modelo de negócio. Além desta componente, possui uma estrutura de pastas que ajuda ao programador a organizar o seu código.

Sencha Tools: Estrutura de Pastas
Figura 2: Estrutura Sencha Tools

Tal como é possível verificar na Figura 2, a estrutura de pastas de um projecto Sencha Touch está muito bem organizada, o que facilita o desenvolvimento. A pasta mais importante de referir neste momento, é a pasta app. Dentro da app está o modelo MVC da nossa aplicação e ainda as pastas form, store e profile.

Antes de começar a desenvolver, é necessário entender todos estes pequenos conceitos da framework de forma a tirar todo o partido desta.

A pasta da store é muito importante no desenvolvimento desta framework. Tal como o nome indica, a store será onde iremos armazenar dados da aplicação. Contudo, é apenas um auxiliar ao armazenamento dos dados, uma vez que o que será guardado nas stores serão dados voláteis, isto é, apenas serão guardados enquanto a aplicação estiver a ser executada.

Podem-se encarar as stores como um auxiliar ao armazenamento dos dados, uma vez que toda a informação é armazenada numa base de dados SQLlite. As stores são bastante úteis para carregar os dados provenientes da base de dados, e para efectuar operações sobre eles, como ordenações, filtros, etc.

O Sencha Touch é bastante simples de utilizar depois de entendido estes conceitos. Vários objectos visuais do Sencha Touch estão já preparados para consumirem stores. Exemplos destes objectos visuais são as listas por exemplo.

Criando uma lista com base numa store é bastante simples:

  1. Criar modelo para a store: O modelo é comparado a uma classe no Java, por exemplo. É esse modelo que irá representar a tabela na base de dados. Imagine-se que temos na base de dados uma tabela Cliente com os campos ID, NOME e MORADA. Temos que replicar essa informação num ficheiro dentro da pasta model, tal como o seguinte exemplo:
    Ext.define('pop.model.Cliente', {
    extend: 'Ext.data.Model',
    config: {
      idProperty : 'ID',
        fields: [
          {name: 'ID', type: 'string'},
          {name: 'NOME', type: 'string'},
          {name: 'MORADA', type: 'string'}
        ]
    }
});
  2. Depois de o modelo estar criado, temos que indicar que temos uma store com esse mesmo modelo. Assim, basta criar um novo ficheiro dentro da pasta store e apontar para o modelo Cliente.
    Ext.define('inovaquaMobile.store.Cliente', {
    extend: 'Ext.data.Store',
    config: {
        storeId: 'cliente',
        model  : 'pop.model.Cliente'
    }
});
  3. Todos os ficheiros criados quer sejam modelos, stores, view ou controllers devem ser referidos no ficheiro app.js
    • Declarar views:
      views: ['Menu','ListaCliente']
    • Declarar models:
      models: ['Cliente']
    • Declarar stores:
      stores:['Cliente']
    • Declarar controllers:
      controllers:[‘RegistaCliente’]
  4. Depois de criado o modelo para o Cliente e a respectiva store, apresentar uma lista com os clientes é bastante simples. Basta utilizar o componente ST Ext.List.
    Ext.define(pop.view.ListaCliente', {
    extend: 'Ext.List',
    xtype: 'listaclientes',
    config: {
        autoDestroy: true,
        store: 'Cliente',
        grouped: true,
        itemTpl : '<table>' +
            '<tr >' +
    '<td style="font-size:16px;color:#37899E;">' +
    '<b>{NOME}</b>' +
    '</td>' +

    '<tr>' +
    '<td>' +
    '<b style="font-size:14px;color:#37899E;">MORADA:</b><b style="font-size:14px;">{MORADA}</b>' +
    '</td>' +

    '</tr>' +
    '</tr>' +
    '</table>'
    }
});

Desta forma será apresentada uma lista com o nome e morada dos clientes. Esta lista é populada com os dados provenientes na store, através do uso da sua propriedade store: 'Cliente'.

A forma como a lista é apresentada fica ao critério de cada um. Usando a propriedade itemTpl pode-se definir um HTML para criar o corpo de cada item da lista.

É importante referir que todos os ficheiros criados devem iniciar-se da seguinte forma: Ext.define([nome do ficheiro], {

A propriedade extend indica que tipo é o objecto que estamos a criar. Pode ser um container, um panel, uma lista, etc.

Outra propriedade importante de referir é o xtype. Este é um identificador único do componente visual que será utilizado quando necessitarmos de instanciar esse mesmo objecto.

Pelo que podem analisar até agora, os conceitos existentes no Sencha Touch têm uma curva de aprendizagem bastante reduzida, sendo bastante fácil desenvolver com esta framework.

Na próxima edição será demonstrado um exemplo prático de uma aplicação com todos estes conceitos aplicados.

Será ainda demonstrado como converter a aplicação Sencha Touch para uma aplicação nativa Android e publicação na Play Store.

Publicado na edição 47 (PDF) da Revista PROGRAMAR.