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

Standard

Ontem nós vimos a primeira parte de um passo a passo, melhor, uma viajem, pelos meandros do framework Sencha Touch. Aprendemos o como e, boa parte do, porquê as coisas são como são. Hoje vamos colocar algum tempero nesta sopa.

Vamos adicionar uma ação ao botão Novo, que deve estar bem visível no canto superior esquerdo da sua tela, como pode ser visto a seguir:

Esqueceu? Tudo que você precisa fazer para continuar é abrir o seu navegador (Chrome? Firefox?) e digitar http://localhost/ts/ na barra de endereços e voltar onde paramos ontem.

Vamos criar um controller para adicionar alguma atividade ao botão Novo. Para isso crie o arquivo Novo.js no diretório controller e copie o código a seguir para ele:

[javascript]
Ext.define("Teste.controller.Novo", {
extend: "Ext.app.Controller",
config: {
refs: {
newNovo: "#novo-btn"
},
control: {
newNovo: {
tap: "onNovo"
}
}
},

onNovo: function() {
console.log("O botão Novo foi tocado");
}
});
[/javascript]

Lembre-se, pode recarregar seu navegador a vontade que nada irá acontecer. O controller está criado mas, ninguém sabe da sua existência. Mas especificamente o app.js não têm nenhuma referência para ele. Sendo assim temos que modificar o app.js mas, antes, vamos dar uma olhada neste controller.

A primeira coisa que notamos é que ele segue a mesma estrutura da view. Isso por que, na hora que você, lá no app.js, definiu uma classe herdeira do singleton Ext, criou imediatamente cinco namespaces:

  • Teste
  • Teste.view
  • Teste.controller
  • Teste.model
  • Teste.store
  • Teste.profile

Ok, você já reparou? São seis. Juro que um dia aprendo a contar. Na verdade já existem alguns outros predefinidos. Estes são apenas os que você usará mais. Os outros? Veremos com o tempo.

Então a primeira linha do controle define o nome da classe, em seguida começamos a entrar com os atributos desta classe e começamos dizendo que ela estende a classe “Ext.app.Controller”.

Esta classe é a classe base responsável por responder todos os eventos que ocorrem no seu aplicativo. Um objeto controller irá existir no contexto de um determinado aplicativo e será responsável por observar os eventos referentes a este aplicativo. Um aplicativo, normalmente, é composto de um conjunto de controllers.

Todos o controllers que o aplicativo usar deverão ser especificados na seção config da classe aplicativo.

Assim que definimos a superclasse passamos a configurar esta herdeira e o primeiro atributo é o config. Começamos por definir um objeto refs.

Os objetos refs são coleções de objetos nomeados que permitem a referência de objetos no seu aplicativo. Neste caso apenas criamos a referência newNovo que aponta para objeto novo-btn que criamos lá na view. Próximo passo, definir o objeto control.

[javascript]
refs: {
newNovo: "#novo-btn"
},
[/javascript]

O objeto control contém um mapa dos objetos e eventos que devem ser observados pelo controller e que método será chamado. No nosso caso, estamos monitorando o botão newNovo com referência ao evento tap e dispararemos o método onNovo.

[javascript]
control: {
newNovo: {
tap: "onNovo"
}
}
[/javascript]

Falta apenas definir o que o método onNovo fará. Por enquanto, vai chamar o console e enviar a mensagem: O botão novo foi tocado.

Para testar o controller vamos alterar o código do app.js:

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

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

Feito? Recarregue a página, clique em qualquer lugar com o botão direito do mouse e escolha inspecionar elemento. Quando a janela de desenvolvimento web abrir clique no botão console. E depois no botão Novo do seu aplicativo.

Você deverá ver a mensagem que escrevemos no console. Viva! Não viu? Então dançou… melhor começar novamente ou, se for realmente decidido, pode tentar ler as mensagens de erro que estão no console. Com certeza uma delas indica o que você fez de errado.

Parou!!! Você está vendo uma pilha de mensagens de erro e, ainda assim, a o botão Novo funcionou? Não se preocupe, no tempo certo vamos tirando todas estas mensagens.

Amanhã continuamos… O que estão achando?

One thought on “Passo a passo da criação de um aplicativo Sencha Touch – Parte Dois

Comments are closed.