Blog Tecnológico

Iniciando no mundo Sencha Ext JS

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.

Instalação do Ambiente

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:

sencha1

 

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:

sencha2


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”.

sencha3


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:

sencha4


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

sencha5


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

sencha6


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: 

sencha7


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:

sencha8


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

sencha9


…e o formulário:

sencha9


O View Model mantém os dados da tela:

sencha10


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

sencha11


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”:

sencha12


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:

sencha13

 

Publicação

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

Para testar

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>

CONTATO