Bem, esse é meu primeiro post relacionado a Java. Comecei a estudar esses dias alguma coisa de uma biblioteca javascript chamada ext-js, fiquei maravilhado, mas acho que não utilizaria em um projeto grande pois na minha opinião da muito trabalho para usar em todas páginas, eu particularmente não gosto de escrever javascript. Mesmo assim queria ter esses efeitos em algum projeto, li uns tutoriais, entendi mais ou menos como funciona e resolvi fazer alguma coisa com os layouts do ext-js, o framework facelets, de template para JSF e o próprio JSF.
O exemplo é extremamente simples, se quer tem classes ;). Estou usando ext-js 1.1 (a biblioteca javascript), JSF 1.2 (java server faces), facelets (framework para criar templates) e richfaces 3.0.1 (conjunto de componentes JSF). Primeiro é necessário baixar tudo que é preciso, faço meus testes usando o Jboss 4.2, portanto já tem suporte a JSF 1.2, utilizei o eclipse 3.2 para desenvolver, mas se quiser fazer algo bem mais rápido e produtivo existe o red hat developer studio, que é baseado no eclipse e eu achei muito legal, principalmente porque já vem bastante coisa instalada e você não precisa ficar instalando plugins.
Para começar, criei um novo projeto Java normal (eu chamei de ExtJS) no eclipse, e deixei da seguinte forma:
Ok, agora é começar a desenvolver. Primeiro vou criar um jspx no diretório web que será o template da minha aplicação chamado layout.jspx, a principio ele será assim:
Agora vou criar o arquivo javascript que usará o ext-js e irá montar meu layout. Dentro de js/layout criei um arquivo chamado layout.js: Agora que já tenho meu template criado, ele pode ser usado para qualquer aplicação pois perceba que de conteúdo ele não tem nada. Vou criar um novo template chamado myLayout.jspx dentro do diretório web, que estende layout.jspx e será o template de uma nova aplicação minha: Esse layout já define o cabeçalho, rodapé, o menu e os atalhos da minha nova aplicação, deixando somente o conteúdo (centro) para ser definido por outras páginas do sistema. Para criar o menu usei dois componentes do richfaces, tabpanel e panelbar. Agora é só desenvolver o resto do sistema estendendo novas páginas de myLayout.jspx. Vou criar um main.jspx que será por exemplo uma página qualquer da minha aplicação e definirá um conteúdo. Se quiser usar esse build.xml do ant, ele compila e faz deploy, só não esqueçam de trocar o diretório do container em build.properties
Copiei as bibliotecas java e suas dependências necessárias para o diretório lib. Repare que não coloquei as bibliotecas do JSF pois vou fazer deploy no jboss e ele já possui suporte, mas em qualquer projeto para valer precisaria dos jars do JSF, até mesmo para compilar suas classes que usarem algo dele, bem como o desenvolvimento das páginas, mas tudo bem, é um exemplo e coloquei ali só o essencial.
Adicionei as bibliotecas no classpath (botão direito encima do projeto -> properties -> Java Build Path -> Libraries -> Add JARs), na real nem precisa para esse exemplo, mas tudo bem, é o hábito ;) copiei o ext-js para um diretório chamado js/ext-js dentro do diretório web, criei também um diretório js/layout.
Tudo criado, vou editar os arquivos de configuração:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
version="2.0">
<ui:composition>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="north-div">
<ui:insert name="north"></ui:insert>
</div>
<div id="south-div">
<ui:insert name="south"></ui:insert>
</div>
<div id="west-div">
<ui:insert name="west"></ui:insert>
</div>
<div id="east-div">
<ui:insert name="east"></ui:insert>
</div>
<div id="content-div">
<ui:insert name="content"></ui:insert>
</div>
</body>
</html>
</ui:composition>
</jsp:root>
Olha os id's dos elementos DIV, isso vai ser importante para o ext-js posteriormente montar o layout. As tags ui:insert são do facelets, são os pontos que as páginas que forem usar esse template incluirão código, daqui a pouco vai dar para entender melhor, qualquer coisa da uma olhada nos links que coloquei do facelets que explicam mais a fundo.
Layout = function() {
return {
init : function() {
var mainLayout = new Ext.BorderLayout(document.body, {
north: {
split: true,
initialSize: 50
},
south: {
split: true,
initialSize: 50
},
east: {
split: true,
initialSize: 100,
titlebar: true,
collapsible: true,
animate: true
},
west: {
split: true,
initialSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true
}
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', {
fitToFrame: true,
closable: false
}));
mainLayout.add('south', new Ext.ContentPanel('south-div', {
fitToFrame: true,
closable: false
}));
mainLayout.add('east', new Ext.ContentPanel('east-div', {
fitToFrame: true,
closable: false,
title: 'Atalhos'
}));
mainLayout.add('west', new Ext.ContentPanel('west-div', {
fitToFrame: true,
closable: false,
title: 'Menu Principal'
}));
mainLayout.add('center', new Ext.ContentPanel('content-div', {
fitToFrame: true, autoScroll: true, title: 'Conteudo'
}));
mainLayout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Layout.init, Layout, true);
Esse arquivo não é muito complicado, apenas criei o layout e depois adicionei os content panels a ele, lincando com os id das divs da página. Agora vou reeditar o layout.jspx importando o ext-js junto com meu layout.js:<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
version="2.0">
<ui:composition>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="js/ext-js/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="js/ext-js/resources/css/xtheme-gray.css"/>
<script type="text/javascript" src="js/ext-js/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext-js/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext-js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/layout/layout.js"></script>
</head>
<body>
<div id="north-div">
<ui:insert name="north"></ui:insert>
</div>
<div id="south-div">
<ui:insert name="south"></ui:insert>
</div>
<div id="west-div">
<ui:insert name="west"></ui:insert>
</div>
<div id="east-div">
<ui:insert name="east"></ui:insert>
</div>
<div id="content-div">
<ui:insert name="content"></ui:insert>
</div>
</body>
</html>
</ui:composition>
</jsp:root>
A alteração foi só importar os arquivos do ext-js e o layout.js para a página. Eu estou usando um theme do ext-js chamadado xtheme-gray.css, isso dará um tom de cinza que combina bastante com a skin default do richfaces (configurado no web.xml), implementando vocês podem mudar isso para outras skins do richfaces (BlueSky, Classic, Ruby, Wine, DeepMarine, EmeraldTown, Sakura, Default), outros themes do ext-js (xtheme-aero.css, xtheme-vista.css), ou porque não, criar uma nova.<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
version="2.0">
<ui:composition>
<html xmlns="http://www.w3.org/1999/xhtml">
<ui:composition template="layout.jspx">
<ui:define name="north">
Sistema XXXXX
</ui:define>
<ui:define name="south">
Copyright...
</ui:define>
<ui:define name="east">
Atalhos do meu sistema
</ui:define>
<ui:define name="west">
<rich:tabPanel switchType="ajax" height="400">
<rich:tab label="Principal">
<rich:panelBar height="370">
<rich:panelBarItem label="Tarefas">
links para tarefas
</rich:panelBarItem>
<rich:panelBarItem label="Cadastros">
links para cadastros
</rich:panelBarItem>
<rich:panelBarItem label="Relatorios">
links para relatorios
</rich:panelBarItem>
</rich:panelBar>
</rich:tab>
<rich:tab label="Sistema">
<rich:panelBar height="370">
<rich:panelBarItem label="Controle de Acesso">
links para controle de acesso
</rich:panelBarItem>
<rich:panelBarItem label="Sistema">
links para utilidades do sistema
</rich:panelBarItem>
</rich:panelBar>
</rich:tab>
</rich:tabPanel>
</ui:define>
</ui:composition>
</html>
</ui:composition>
</jsp:root>
<?xml version="1.0" encoding="ISO-8859-1" ?>
<jsp:root
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.ajax4jsf.org/rich"
version="2.0">
<html xmlns="http://www.w3.org/1999/xhtml">
<ui:composition template="myLayout.jspx">
<ui:define name="content">
Conteudo qualquer
</ui:define>
</ui:composition>
</html>
</jsp:root>
Agora é só fazer deploy e testar, abrindo http://localhost:8080/extjs/main.lubs
src.dir=src
bin.dir=bin
webinf.dir=${web.dir}/WEB-INF
dist.dir=dist
lib.dir=${webinf.dir}/lib
war.name=extjs
container.path=C:/Java/Servidores/jboss-4.2.1.GA
deploy.dir=${container.path}/server/default/deploy
container.lib.dir=${container.path}/server/default/lib
Algumas imagens do layout pronto:
Funk do Twitter
2 horas atrás
Postagens
1 comentários:
Interessante!
Em um dos meus clientes nós utilizamos um template do Extjs que parece um desktop, ficou bem interessante.
Noutros pontos nós integramos os dois frameworks (Richfaces e Extjs) para renderizar componentes mais ricos.
Enfim, ótimo post!
Parabéns.
Postar um comentário