Blog Tecnológico

Nesse breve artigo veremos como é fácil a criação de aplicações com o Sencha Ext JS 6, ensinando desde a instalação do framework até os procedimentos para a publicação da aplicação. Usaremos uma aplicação de exemplo simples para ilustrar o processo de desenvolvimento com o Ext JS.

O primeiro passo para usar o Ext JS é a instalação do Sencha Cmd, disponível em https://www.sencha.com/products/extjs/ (link “Download Cmd” na barra lateral).

O Sencha Cmd é uma ferramenta de linha de comando que possui todos os recursos necessários para criar, testar e publicar aplicações Sencha. A ferramenta está disponível para as plataformas Windows, OS X e Linux e possui um instalador fácil de ser usado.

Uma vez instalado, o Sencha Cmd pode ser testado usando o comando “sencha” em uma linha de comando do sistema.

Se a instalação foi bem-sucedida, será exibida a versão do Sencha Cmd e um texto de ajuda:

O próximo passo é baixar o Ext JS 6. No mesmo link (https://www.sencha.com/products/extjs/), está disponível uma versão trial do framework.

Aqueles que possuem a licença do Ext JS, podem baixar diretamente da página de suporte. O Ext JS é disponibilizado como um arquivo zip que pode ser descompactado em uma pasta qualquer do computador.

Uma vez descompactado o Ext JS, podemos usar o Sencha Cmd para criar uma nova aplicação através do comando “sencha generate app”.

Executando o comando em um diretório vazio, criado para a nova aplicação:

O caminho após o argumento “--sdk-path” do comando aponta para o diretório onde o Ext JS foi descompactado. O comando acima irá gerar, na pasta “Artigo”, toda a estrutura necessária para a aplicação, inclusive copiando os arquivos do framework necessários para a pasta “ext”.

Após a conclusão do comando “sencha generate app”, podemos usar o comando “sencha app watch” para iniciar um servidor local para o teste da aplicação. Esse comando também irá monitorar alterações no código fonte recompilando, por exemplo, os temas CSS da aplicação:

Com o comando em execução, podemos visualizar a aplicação gerada acessando o endereço http://localhost:1841/ em um navegador web:

A mesma aplicação sendo exibida em modo mobile:

Note o uso do parâmetro “platformTags” na URL para instruir o framework a habilitar a exibição mobile para teste. O Ext JS automaticamente detecta o tipo de navegador onde a aplicação está sendo executada e habilita a exibição mobile em smartphones e tablets. Porém, podemos usar o platformTags para testar o modo mobile durante o desenvolvimento, mesmo em um navegador desktop.

Vamos alterar a aplicação criada pelo Sencha Cmd. O exemplo que criaremos será um simples gerenciador de tarefas com uma lista de tarefas e um formulário de edição, conforme a imagem abaixo: 

Com os recursos disponibilizados pelo Ext JS, criar a aplicação acima é surpreendentemente simples.
Abaixo o código da tela principal:

A tela principal é formada por duas views. A grid…

…e o formulário:

O View Model mantém os dados da tela:

O View Controller implementa a lógica da aplicação:

Note que a aplicação está usando o armazenamento local do HTML5 para armazenar os dados. Se quiséssemos mudar para, por exemplo, um back-end REST, tudo que precisaria ser alterado na aplicação inteira é o proxy do model acima.

Para concluir o exemplo, vamos usar o Sencha Cmd para gerar os arquivos para a publicação da aplicação, através do comando “sencha app build”:

O Sencha Cmd irá concatenar e minimizar os arquivos JavaScript, compilar o tema Sass da aplicação e gerar os arquivos para publicação na pasta build:

Para publicar a aplicação basta copiar os arquivos acima para um servidor web.

http://eng.com.br/novosite/software/sencha/exemplo/index.html

http://eng.com.br/novosite/software/sencha/exemplo/Exemplo.zip