Ricardo Bernert Machado • 14 nov 2016
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:
Baixando o Ext JS
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:
Criando a primeira App com Sencha Ext JS
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
Para pegar o ZIP deste App inicial
http://eng.com.br/novosite/software/sencha/exemplo/Exemplo.zip
Ricardo Bernert Machado
Instrutor e Desenvolvedor de software com vários anos de experiência em uma variedade de linguagens e plataformas, em particular .NET C# e desenvolvimento web em aplicações Single Page Application, com tecnologias SENCHA.
Experiência como consultor e instrutor em desenvolvimento de software para web e mobile; com tecnologias SENCHA, além de desenvolvimento de Apps em paltaforma iOS.
Também possui conhecimentos sólidos em algoritmos, estruturas de dados, arquitetura de computadores e práticas e metodologias de desenvolvimento de software.
Ricardo Machado é formado pela Universidade Estadual de Ponta Grossa, em Engenharia de Computação, e tem Pós-graduação em Gestão de Projetos pela FAE Business School <br>