Criando uma Aplicação CRUD com ExtJS 4 MVC: Parte 1

Olá Pessoal,

Hoje vou começar uma série de posts explicando passo a passo como criar uma aplicação simples com ExtJS 4 usando o MVC. A aplicação vai ser um CRUD, já que é a maneira mais simples de demonstrar vários recursos.

Eu já tinha disponibilizado a aplicação antes em outro post aqui no blog, mas como recebi muitos pedidos pelo passo a passo, cá estou eu escrevendo! :) - se no futuro sobrar um tempinho, gravo vídeo-aulas também.

Bom, eu separei então essa série em 5 partes - hoje vamos ver a primeira:

Requisitos para construir esse tutorial:

SDK do ExtJS 4
WebServer (apache: wamp, xampp, mamp - ou outro)
Editor de texto (o seu favorito)
PHP (ou outra linguagem) - eu sou muito newbie em PHP, então o código está bem simples - o que importa aqui é a lógica usada - e acredito que qualquer pessoa vai conseguir entender com um pouco de lógica de programação
MySQL (ou outro banco de dados)

Hoje vamos ver a primeira parte que inclui:

Preparando o Banco de Dados
Criando a aplicação
Estrutura MVC
Página HTML
Criando a App e o Viewport

1 - Preparando o Banco de Dados

Antes da gente começar, vamos preparar o banco de dados criando a tabela e inserindo alguns dados para testes.

A idéia da aplicação é gerenciar contatos, então vamos precisar de uma tabela bem simples com id, nome, email e telefone. Eu criei 200 contatos de testes, então antes de começar execute o seguinte script na sua base MySQL: https://github.com/loiane/extjs4-mvc-json-crud-php-mysql/blob/master/sql/script.sql

2 - Criando a aplicação

Agora vamos começar a criar a nossa aplicação. Dentro do webserver, crie um diretório chamado extjs4-mvc-json-crud-php-mysql (ou outro nome de sua preferência).

Quando a aplicação ficar pronta, teremos a seguinte estrutura com os seguintes arquivos:

Vamos ver passo a passo como criamos todos esses arquivos.

2.1 - Criando a Estrutura

Dentro de extjs4-mvc-json-crud-php-mysql, crie uma outra pasta chamada app. Dentro da pasta app, crie quatro pastas: controller, view, model, store. É nesse diretório que vamos criar todo o nosso código ExtJS.

Voltando para o diretório extjs4-mvc-json-crud-php-mysql crie também uma pasta chamada php. Nesse diretório vamos colocar todo o nosso código PHP.

Crie um diretório chamado resources. Nesse diretório vamos criar um arquivo CSS para customizar algumas coisas na nossa aplicação; e também teremos um diretório para imagens (para deixar os botões da aplicação mais bonitos).

Crie também um arquivo chamado app.js e index.html. Deixe os arquivos em branco por enquanto. Vamos trabalhar neles ainda nesse post.

Por último, unzipe o SDK do ExtJS 4 dentro do diretório e renomei-o para extjs.

Até agora temos a seguinte estrutura:

2.2 - Criando o CSS

O único motivo de termos um arquivo CSS é para customizar alguma coisa na nossa aplicação. No nosso caso, queremos apenas mostra ícones nos botões assim:

Para isso, precisamos criar o seguinte CSS:

[code lang="css" firstline="1" toolbar="true" collapse="false" wraplines="false"]
.icon-user {
background-image: url(../images/user.png) !important;
}

.icon-user-add {
background-image: url(../images/user_add.gif) !important;
}

.icon-save {
background-image: url(../images/save.gif) !important;
}

.icon-reset {
background-image: url(../images/stop.png) !important;
}

.icon-grid {
background-image: url(../images/grid.png) !important;
}

.icon-add {
background-image: url(../images/add.png) !important;
}

.icon-delete {
background-image: url(../images/delete.png) !important;
}
[/code]

E por fim, crie um diretório images dentro do diretório resources e faça o download das imagens aqui: https://github.com/loiane/extjs4-mvc-json-crud-php-mysql/tree/master/resources/images

3 - Estrutura MVC

Agora que temos a estrutura da nossa aplicação completa, vamos tentar entender o porquê de estruturamos a aplicação assim e o que vamos colocar em cada diretório da pasta app.

Se você ainda não sabe o que é MVC e para que serve, por favor, leia esse artigo: http://pt.wikipedia.org/wiki/MVC

O arquivo index.html é a página HTML da nossa aplicação. E sim, não importa o tamanho da nossa aplicação que teremos apenas essa página HTML. Com ExtJS não criamos uma página HTML para coisa que queremos fazer. Se tivermos uma aplicação grande, vamos brincar com os componentes para decidir o que vai ser mostrado ou não.

O arquivo app.js é o arquivo que representa a nossa aplicação. É nele que vamos dizer o nome da nossa aplicação, e também vamos dizer qual será o componente que queremos carregar quando iniciarmos a aplicação.

Dentro do diretório app temos os seguintes diretórios:

model: nesse diretório vamos colocar todos os Models da nossa aplicação. Um Model é a representação do dado que vamos trabalhar e seus campos.
store: nesse diretório vamos colocar todas as Stores da nossa aplicação. A Store é uma espécie de DAO, que vai se comunicar com o servidor ou alguma outra forma de storage local. A Store sempre carrega ou envia dados que representam uma coleção de instâncias de Models de um mesmo tipo.
view: nesse diretório vamos colocar todas as nossas views que são os componentes em si, como grid, tree, form, gráficos, etc. Nos arquivos vamos colocar apenas o código para renderizar a view, não vamos tratar nenhum tipo de interação do usuário (exemplo: clique de botão).
controller: nesse diretório vamos colocar todos os nossos controllers. Os controllers são responsáveis por “ficar de olho” em tudo o que acontece na aplicação e são nesses arquivos que vamos colocar toda a lógica de controle das views, models e stores.

Se você ainda não sabe o que é um Model, Store, etc, assista as aulas do curso gratuito de ExtJS 4 para entender melhor como eles funcionam: http://www.loiane.com/2011/11/curso-de-extjs-4-gratuito/

4 - Página HTML

Como o ExtJS vai fazer tudo pela gente, a página HTML apenas precisa de ter o import/include dos arquivos CSS (do ExtJS e o que criamos), e do SDK do ExtJS 4, e do arquivo app.js. No final, vai ficar assim:

[code lang="html" firstline="1" toolbar="true" collapse="false" wraplines="false"]
<html>
<head>
<title>Ext JS 4 Examples - loiane.com</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>

<link rel="stylesheet" type="text/css" href="resources/css/app.css">
<script type="text/javascript" src="app.js"></script>

</head>
<body>
</body>
</html>
[/code]

5 - Criando a App e o Viewport

Nesse passo vamos adicionar código ao arquivo app.js:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.Loader.setConfig({enabled: true});

Ext.application({
name: 'ExtMVC',

controllers: [
'Contatos'
],

autoCreateViewport: true
});
[/code]

Na linha 1 temos o Loader que é responsável pelo carregamento dinâmico.

Na linha 3 temos a declaração da classe da nossa aplicação.

Na linha 4 temos a declaração do nome da nossa aplicação, também conhecido como namespace. A convenção para a criação do namespace é usando camelcase, a mesma usada para a criação de nome de classes.

Linhas 6 a 8 temos a declaração dos controllers utilizados na applicação.

Na linha 10 temos a declaração da config autoCreateViewport. Se verdadeiro, a aplicação vai instanciar a classe Viewport automaticamente. Para isso, temos que ter um arquivo chamado Viewport.js dentro da pasta app/view. Se quiser instanciar o Viewport ou qualquer outro componente manualmente, pode utilizar a função launch (ver documentação para maiores detalhes: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Application).

Também é possível declarar todos os models, stores e views nesse arquivo de aplicação. No curso de ExtJS 4 vamos aprender qual é a diferença entre declarar ou não.

Existem outras opções de configuração também, consulte a documentação: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Application

Mas já que estamos usando o autoCreateViewport como true (particularmente acho bem melhor assim do que usar a função launch), temos que criar o arquivo Viewport.js dentro da pasta app/view:

[code lang="js" firstline="1" toolbar="true" collapse="false" wraplines="false"]
Ext.define('ExtMVC.view.Viewport', {
extend: 'Ext.Viewport',
layout: 'fit',

requires: [
'ExtMVC.view.contato.Grid',
'ExtMVC.view.contato.Formulario'
],

initComponent: function() {
var me = this;

Ext.apply(me, {
items: [
{
xtype: 'contatogrid'
}
]
});

me.callParent(arguments);
}
});
[/code]

Alguns pontos chamam atenção nesse arquivo:

Na linha 1 temos a declaração do nome da classe: ExtMVC.view.Viewport:

ExtMVC pois é nome da nossa aplicação que declaramos na linha 4 do arquivo app.js;
view pois é o nome do pacote (diretório view);
Viewport, pois o nosso arquivo se chama Viewport.js;

Na linha 16 temos a declaração do xtype contatogrid, que é o alias do Grid que iremos criar; que será o único componente a ser mostrado na tela para o usuário (por isso estamos usando um layout do tipo fit).

Com tudo o que fizemos nesse post, já temos o esqueleto do projeto, que vamos continuar a desenvolver no próximo post!

Até o próximo post! :)