Passo a passo da criação de um aplicativo Sencha Touch – Parte Um

Standard

Como vimos nos artigos anteriores, não é difícil criar a estrutura necessária para o desenvolvimento de aplicativos móveis usando o CSS3, HTML5 e Javascript. Principalmente se usarmos uma biblioteca como a Sencha Touch. Neste artigo vou considerar que você já configurou o ambiente e já gerou o aplicativo padrão o Get Started. Se não, siga o link acima e volte aqui mais tarde.

Vamos criar um aplicativo simples, com uma ou duas views, um ou dois controllers, alguns botões. Mais para você entender todo o processo que para uma funcionalidade específica. Comece criando uma estrutura nova. Chamaremos este aplicativo de Teste. Desculpe, deixei a criatividade na praia. Para isso, usando a linha de comandos, vá a pasta sencha, no diretório de documentos do Apache e digite:

[bash]
sencha generate app -p ../ts -n Teste
[/bash]

Este comando vai criar a estrutura que precisaremos, e modificaremos, para nosso novo aplicativo. Para testar digite: http://localhost/ts na barra de endereços do Chrome (Firefox? Safari?) Você deverá ver os três pontinhos tradicionais e um aplicativo exatamente igual ao que criamos aqui.

Pimba? Funcionou? Se não, você pode começar novamente leia este artigo, depois este, e por fim este aqui. Se seguir todos os passos a coisa deve funcionar. Se não funcionar… ouvi dizer que algumas religiões tem um período de aceitação bem curto. Rezar pode ser uma solução.

A estrutura criada aqui é a mesma que criamos durante a instalação, precisaremos renomear os arquivos principais e criar a estrutura de arquivos que modificaremos. Renomeie. Você pode precisar de algum dos arquivos originais para consulta.

 

No Diretório

Renomeie

Para

ts/

app.js

app_orig.js

ts/app/view

main.js

main_orig.js

 

Se você recarregar a página http://localhost/ts ficará vendo os três pontinhos característicos ad aeternum. Isto acontece porquê o arquivo index.html que existe na raiz, carrega os scripts necessários a execução dos aplicativo mas não encontra a classe representada no arquivo app.js, que neste momento, não existe.

Vamos criar este arquivo. Abra seu editor preferido, crie o arquivo app.js na past ts/ e copie e cole o seguinte código:

[javascript]
Ext.application({
name: "Teste",

launch: function () {
console.log("Este aplicativo está rodando");
}
});
[/javascript]

Observe que o atributo name deve conter o nome do aplicativo que estamos criando. Preste atenção nos caracteres, maiúsculos e minúsculos. Isto é fundamental.

Recarregue a pagina no navegador. Você continuará vendo os três pontinhos. Considerando que está usando o Chrome, clique com o botão direito em qualquer lugar da página, e clique em Inspecionar elemento. Você verá a janela de debug web do Chrome. Clique no botão console e verá a mensagem Este aplicativo está rodando impressa no console.

Observe que no meu caso o acento de está não saiu corretamente impresso. O editor que estou usando adotou o character set padrão do Windows, quando eu criei o arquivo app.js e meu servidor web, o Apache, está usando o padrão UTF-8. Para impedir erros como este, configure seu editor para utilizar o padrão UTF-8.

A mensagem de texto foi escrita no console pelo comando:

console.log(“Este aplicativo está rodando”);

Esta é uma linha de comando que você pode utilizar para um debug manual, de pobre, mas eventualmente muito útil.  No nosso caso, prova que, apesar de ainda estarmos vendo os três pontinhos, nosso aplicativo já rodou.

Vamos criar uma view com uma barra de ferramentas e colocar um botão nesta barra. Para isso crie no diretório view um arquivo chamado ViewUm.js e copie o seguinte código nele:

[javascript]
Ext.define("Teste.view.ViewUm", {
extend: "Ext.Container",
config: {
items: [{
xtype: "toolbar",
docked: "top",
title: "Minha Tela",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "Novo",
ui: "action",
id:"novo-btn"
}]
}]
}
});
[/javascript]

Se você recarregar o arquivo http://localhost/tsnão verá nenhuma alteração. Isto por que esta view ainda não foi carregada pelo arquivo app.js mas, antes de carregar vamos dar uma olhada, linha a linha, no código desta ViewUm.js

A primeira linha explicita a variável Ext o singleton responsável por todo namespace dos aplicativos criados com a biblioteca Sencha Tools. O método define recebe os argumentos referentes a definição de uma classe que representará seu aplicativo.

defineString className, Object data, Function createdFn )

No caso, className, um string, tem o formato aplicativo.modulo.classe  para este aplicativo “Teste.view.ViewUm”. Observe que o nome da classe é o mesmo nome do arquivo javascript que criamos. Observe também que o segundo argumento do método define, data, começa na primeira linha com a { e termina na última com }. Ou, caso ainda não tenha percebido, toda a definição da classe está feita no argumento data do método define. Uau!!!

A primeira coisa que fazemos na classe é dizer que ela estende a classe “Ext.Container”. A classe que estamos definindo, “Teste.view.ViewUm”, herdará as características da classe, “Ext.Container”. Esta última, uma classe do namespace Ext que herda as características da classe “Ext.Component”, responsável pela maior parte dos componentes visuais da biblioteca Sencha Touch com a propriedade extra de permitir a colocação de componentes no seu interior. Ou, em outras palavras, a classe que estendemos “Ext.Container” define um componente visual que pode conter outros componentes visuais.

Em seguida instanciamos o objeto config, responsável pela configuração da classe e passamos todos os atributos de configuração. Neste caso apenas o objeto array Items que contém um conjunto de componentes, configurações ou instancias. Como visto a seguir:

[javascript]
items: [{
xtype: "toolbar",
docked: "top",
title: "Minha Tela",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "Novo",
ui: "action",
id:"novo-btn"
}]
}]
[/javascript]

Como visto acima, este array items contém um e somente um objeto, do tipo toolbar, definido pelo comando xtype, com os atributos docked, title e items. Por sua vez,  este último objeto array items contém os objetos que serão contidos pelo item “toolbar” que foi inserido na classe “Teste.view.ViewUm” que estende a classe “Ext.Container” que estamos definindo. Ou seja, temos um contêiner contendo uma barra de ferramentas que contém um botão. Uau!!!

Mas, ainda assim, se você recarregar a página no navegador, não verá nada. Temos que incluir esta classe no app.js. Para isso vamos mudar o código do arquivo app.js para incluir a classe, seu novo código deve ser:

[javascript]
Ext.application({
name: "Teste",
views: ["ViewUm"],

launch: function () {
var viewum = Ext.create("Teste.view.ViewUm");
Ext.Viewport.add(viewum);
}
});
[/javascript]

Uma vez que o app.js tenha sido salvo, recarregue a página no navegador e voilà!!! Lá se foi meu francês. Você deverá ver alguma coisa parecida com:

Observe o título desagradavelmente reduzido e com reticências (ou ellipsis em inglês). Este efeito parece ser um defeito, este problema não aparece no Firefox. Se este problema lhe incomodar, você poderá modificar o arquivo app.css que se encontra na pasta ts/resources/css/app.css e remover a propriedade overflow:hidden da classe x-title. Isto resolverá o problema.

O importante, que precisa ser notado, no novo app.js é o atributo views:  um array que contém o nome, string, de todas as classes do módulo view que desejamos inserir no aplicativo e a instância do objeto ViewUm dentro da function launch.

Amanhã, continuamos.

2 thoughts on “Passo a passo da criação de um aplicativo Sencha Touch – Parte Um

Comments are closed.