ASP NET MVC + NHibernate + ExtJs – Parte 6

Depois de criado toda a estrutura e testado todos nossos CRUDs, hoje vamos começar a desenvolver a view, na minha opinião a parte mais “chata”. Vamos estar utilizando uma biblioteca chamada EXT JS que é um framework escrito em JavaScript e JSON, ele possui vários componentes como Grids, TreeViews, Menus, ToolBars, etc… Para aqueles que gostam de trabalhar com JavaScript com toda certeza vai se dar bem com esse fremework, ja aqueles que não gostam vão sentir bastante dificuldade no começo.

Configurando a aplicação WEB

Bom, primeiramente temos que baixar o framework, estou utilizando a versão 3.2.1 que pode ser baixado aqui. O download vem com todos os sources e com vários exemplos. Após finalizar o download, descompactar o arquivo e copiar a pasta ext-3.2.1 para o diretório onde se encontra a nossa aplicação WEB, veja abaixo como vai ficar a estrutura do projeto Contatos.Web.

Agora vamos adicionar as referências da bliblioteca EXT, que nada mais é algumas bibliotecas JavaScript e CSS, em nossa aplicação WEB, vá até a pasta Shared e abra a Master Page Site.Master e adicione as seguintes referências.

[sourcecode language=”html”]
<link rel="stylesheet" type="text/css" href="../../ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../../ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-3.2.1/ext-all.js"></script>
[/sourcecode]

Também vamos precisar adicionar referências aos projetos Contatos.Factory e Contatos.Business, clique com o botão direito em cima do projeto Contatos.Web e selecione a opção Add Reference.

Não podemos esquecer das configurações no NHibernate.

  • Copie o arquivo hibernate.cfg.xml do projeto Contatos.Factory.Teste para Contatos.Web
  • Adicione as referências NHibernate.dll, NHibernate.ByteCode.LinFu.dll, Npgsql.dll que estão dentro da pasta Lib

Criando Controller TipoTelefone

Vamos criar um novo controller, clique com o botão direito em cima da pasta Controllers e selecione Add -> Controller coloque o nome de TipoTelefoneController.cs

Agora adicione um novo método GetAll, que será responsável por recuperar todos os registros da entidade TipoTelefone, veja o código abaixo:

[sourcecode language=”csharp”]
public class TipoTelefoneController : Controller
{
private readonly ITipoTelefoneRepository _tipoTelefoneRepository;

public TipoTelefoneController()
{
if (_tipoTelefoneRepository == null)
_tipoTelefoneRepository = new TipoTelefoneRepository();
}

public ActionResult Index()
{
return View();
}

public JsonResult GetAll()
{
IList<TipoTelefone> lst = _tipoTelefoneRepository.ObterTodos();
return Json(new { tipotelefone = lst, totalProperty = lst.Count });
}
}
[/sourcecode]

Veja que o retorno é um JsonResult, onde o EXT vai recuperar esse Json e carregar uma grid.

Vamos criar uma nova página aspx clique com o botão direito em cima da action Index e selecione a opcão Add View e depois clique no botão Add.

Veja que o próprio Visual Studio ja criou uma nova pasta chamada TipoTelefone dentro de Views e uma nova página chamada Index.

Abra a página Index.aspx e vamos começar a adicionar os componentes EXT na tela. Para carregar os dados em uma grid primeiramente vamos precisar de um componente chamado JsonStore, ele vai ser responsável por chamar o método GetAll e guardar os dados retornados via Json, podemos dizer que funciona como se fosse um DataSet do ASPX. Veja abaixo como criar um JsonStore.

[sourcecode language=”javascript”]
<script type="text/javascript">

Ext.onReady(function() {

var tipoTelefoneStore = new Ext.data.JsonStore({
url: ‘/TipoTelefone/GetAll’,
root: ‘tipotelefone’,
autoLoad: true,
fields: [‘Codigo’, ‘Descricao’]
});

});
</script>
[/sourcecode]

Analisando o código – JsonStore

  • Todos os componentes EXT tem que ficar dentro do Ext.onReady
  • Tome muito cuidado com a sintax, uma virgula que você esquece já gera erro
  • JsonStore é responsável por executar o método e guardar o resultado

Agora vamos criar uma Grid e apresentar os dados que estão no JsonStore.

[sourcecode language=”javascript”]
<script type="text/javascript">

Ext.onReady(function() {

var tipoTelefoneStore = new Ext.data.JsonStore({
url: ‘/TipoTelefone/GetAll’,
root: ‘tipotelefone’,
autoLoad: true,
fields: [‘Codigo’, ‘Descricao’]
});

var gridTipoTelefone = new Ext.grid.GridPanel({
id: ‘gridTipoTelefone’,
name:’gridTipoTelefone’,
store: tipoTelefoneStore,
title: ‘Tipo Telefone’,
width: 500,
height: 300,
renderTo: ‘div_grid’,
loadMask: true,
border: true,
stripeRows: true,
columns: [
{
dataIndex: ‘Codigo’,
header: ‘Código’,
width: 60
}, {
dataIndex: ‘Descricao’,
header: ‘Descrição’,
width: 400
}],
tbar: [{
text: ‘Novo’,
iconCls: ‘icon-new’
}, ‘-‘]
});
});

</script>
[/sourcecode]

Analisando o código – Grid

  • Veja que na propriedade store referenciamos nosso store criado anteriormente
  • A propriedade renderTo é o local onde a grid será renderizada, nosso caso uma div
  • Criamos todas as colunas setando o nome da propriedade criada no JsonStore

Vamos executar nosso projeto para ver o resultado.

Veja que quando clicamos no menu Tipo Telefone a grid já ;e carregada com os dados.

Agora vamos implementar nosso botão Novo que fica na parte de cima da grid, o que temos que fazer é adicionar um handler ao botão, ou seja, vamos adicionar um evento de clique no botão quando for executado vai abrir uma nova tela com um formulário para cadastrar um novo tipo de telefone.

[sourcecode language=”javascript”]
<script type="text/javascript">

Ext.onReady(function() {

var tipoTelefoneStore = new Ext.data.JsonStore({
url: ‘/TipoTelefone/GetAll’,
root: ‘tipotelefone’,
autoLoad: true,
fields: [‘Codigo’, ‘Descricao’]
});

var gridTipoTelefone = new Ext.grid.GridPanel({
id: ‘gridTipoTelefone’,
name:’gridTipoTelefone’,
store: tipoTelefoneStore,
title: ‘Tipo Telefone’,
width: 500,
height: 300,
renderTo: ‘div_grid’,
loadMask: true,
border: true,
stripeRows: true,
columns: [
{
dataIndex: ‘Codigo’,
header: ‘Código’,
width: 60
}, {
dataIndex: ‘Descricao’,
header: ‘Descrição’,
width: 400
}],
tbar: [{
text: ‘Novo’,
iconCls: ‘icon-new’,
handler: novoRegistro /* aqui adicionamos o envento ao botão*/
}, ‘-‘]
});
});

</script>
[/sourcecode]

Veja que depois do iconCls adicionamos o handler, quando clicar no botão Novo vai chamar a função novoRegistro, veja abaixo o código dessa função.

[sourcecode language=”javascript”]
function novoRegistro (btn, ev) {
_cod = null;
_desc = null;
MostrarFormulario();
}
[/sourcecode]

Nessa função apenas limpamos as variáveis globais e chamamos outra função que irá mostrar o formulário.

[sourcecode language=”javascript”]
function MostrarFormulario() {
formNovoRegistro = null;
formNovoRegistro = new Ext.Window({
name: ‘formNovoRegistro’,
id: ‘formNovoRegistro’,
title: ‘Cadastrar Novo Registro’,
expandonShow: true,
modal: true,
width: 500,
height: 150,
closable: true,
autoLoad:
{
url: ‘/TipoTelefone/Create’,
scripts: true
}
});

formNovoRegistro.show();
}
[/sourcecode]

Essa função MostrarFormulario ela executa uma action no nosso controller chamado Create, que vai retornar uma nova view, nesse caso uma partial view. No controller TipoTelefoneController vamos criar uma nova action chamada Create.

[sourcecode language=”csharp”]
public ActionResult Create()
{
return View();
}
[/sourcecode]

Depois de criada a action Create, temos que adicionar a view, clique com o botão direito em cima do Create e selecione a opção Add View, na tela que vai se abrir selecione o check box Create a partial view (.ascx) e depois clique no botão Add.

Vamos excultar novamente o projeto e ver o resultado quando clicar no botão Novo.

Veja que trabalhar com EXT é um pouco trabalhoso, mas o resultado final realmente é muito bom.

No próximo POST vamos concluir essa tela implementando o Cadastrar e o Alterar e o Excluir!

Download Parte 6

Até a próxima!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.