Tutorial Facelets

Postado por:

Fonte: http://javawora.blogspot.com/search/label/JEE

Olá a todos, este é o primeiro tutorial que aborda o assunto de Facelets aqui no JavaWora. Acredito que todos que gostam de Java Server Faces estão super acostumados com a tecnologia, mas aqueles que usavam Struts e html puro, uma vez no mundo do JSF, uma das principais dificuldades (contornáveis é claro) era compreender a lógica das tags que de certa forma se distância do HTML convencional, o que eu até discordo em partes, afinal acho que um <html:text/> não se aproxima tanto de <input type=”text”/>, mas tudo bem, sabemos que da mesma forma aprender Struts não é uma tarefa das mais fáceis. Enfim vamos ao que interessa.

Um dos pontos que mais desagrada empresas que vão utilizar JSF é a distância do HTML convencional, portanto uma dificuldade de que designers possam efetuar atualizações, manutenções e coisas do gênero em uma página, pois bem, para “simplificar” toda essa dificuldade, foi desenvolvido uma tecnologia chamada de Facelets, aqueles que já viram o Tapestry verão muitas semelhanças, apontada como uma das inspiradoras para o Facelets.
No Tapestry utilizávamos a palavra chave jwcid (Java Web Component Id), para que o Framework substituísse aquele conteúdo por um componente desejado, e eis que apresento a palavra mágica do Facelets: jsfc (Java Server Faces Component). Não se engane isso não é uma cópia descarada, mas uma inspiração do primo de JSF, mas qual a mágica de tal palavrinha no caso de Facelets?O que ganhamos com isso?

Imagine o seguinte, você recebe a pagina HTML do designer, e você tem que alterar tudo aquilo, porque é tudo diferente do que você usa. Seus problemas acabaram! Basta você por uma palavrinha mágica em componentes, por exemplo:

<input type=”text”/>
Adicione:

<input type=”text” jsfc=”h:inputText” value=”#{cadastro.nome}”/>

Mágico, não acham? Um reaproveitamento de código maravilhoso e louvável. Outro ponto que nos interessa em reaproveitamento é a criação de um template, tiles é um bom framework mas deixa a desejar em alguns pontos. Com Facelets podemos definir um template declarativamente, de forma que a página sabe em qual template está inserida, reduzindo o esforço para descobrir seus componentes.
Para criar um template apenas devemos assinar os componentes da página por meio de <ui:insert name=”menu”> dentre as tags do facelets, caso queiramos inserir o conteúdo de um html naquele tag na página que define o template, utilizamos então: <ui:include src=”/templates/menu.xhtml”/>. No momento em que vamos utilizar um determinado template numa página, basta declará-lo: <ui:composition template=”/templates/common.xhtml”>, e inserir o que estmos sobrescrevendo por meio de <ui:define name=”body”>conteúdo</ui:define> no espaço delimitado pelas tags em conteúdo. Mais uma vez, simples, muito simples. O Facelets ainda possui componentização, Ájax integrado, dentre outras funcionalidades, mas vamos nos focar no core aqui, que é templates e reaproveitamento de html original.
O suporte de IDES ao Facelets ainda é fraco, o NetBeans possui um suporte, já no universo eclipse, temos o Exadel e agora o novíssimo Red Hat Developer Studio, os melhores na minha opinião. O exemplo deste tutorial foi desenvolvido com a implementação da Sun e no tomcat 5.5, no tomcat 6 algumas mudanças são necessárias. Os jars necessários são:

  • common-annotations.jar
  • commons-beanutils.jar
  • commons-collections.jar
  • commons-digester.jar
  • commons-logging.jar
  • el-api.jar
  • el-ri.jar
  • jsf-api.jar
  • jsf-facelets.jar
  • jsf-impl.jar
  • jsf-tlds.jar
  • jstl.jar
  • standard.jar


O web-xml necessário está na Figura 1. Criaremos três Classes para nossa lógica, são elas:

Listagem 1 – Login.java
package br.com.facelets.bean;
public class Login {
private String userName;
private String senha;
public Login() {
}
//sets e gets omitidos
@Override
public int hashCode() {
final int PRIME = 31;
int result = 1;
result = PRIME * result + ((senha == null) ? 0 : senha.hashCode());
result = PRIME * result + ((userName == null) ? 0 : userName.hashCode());
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
final Login other = (Login) obj;
if (senha == null) {
if (other.senha != null)
return false;
} else if (!senha.equals(other.senha))
return false;
if (userName == null) {
if (other.userName != null)
return false;
} else if (!userName.equals(other.userName))
return false;
return true;
}
}

Listagem 2 – Cadastro.java

package br.com.facelets.bean;
import javax.faces.context.FacesContext;
import br.com.facelets.business.CadastroSaver;
public class Cadastro {
private String nome;
private String senha;
private String userName;
public String getLogin() {
return userName;
}
public void setLogin(String login) {
this.userName = login;
}
//sets e gets omitidos
public String salvar(){
Login login = new Login();
login.setUserName(userName);
login.setSenha(senha);
CadastroSaver.salvar(login, this);
return “ok”;
}
public String logar(){
Login login = new Login();
login.setUserName(userName);
login.setSenha(senha);
Cadastro cadastro = CadastroSaver.busca(login);
if(cadastro!=null){
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put(“user”, cadastro);
return “ok”;
}else{
FacesContext.getCurrentInstance().getExternalContext().getRequestMap().put(“erro”, “login/senha inválidos”);
return “erro”;
}
}
}

Listagem 3 – CadastroSaver.java

package br.com.facelets.business;
import java.util.Hashtable;
import br.com.facelets.bean.Cadastro;
import br.com.facelets.bean.Login;
public class CadastroSaver {
private static final Hashtable saver = new Hashtable();
public static void salvar(Login login,Cadastro cadastro){
saver.put(login, cadastro);
}
public static Cadastro busca(Login login){
return saver.get(login);
}
}

E agora o faces-config e as páginas propriamente ditas.

Listagem 4- faces-config.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<faces-config version=”1.2″ xmlns=”http://java.sun.com/xml/ns/javaee&#8221;
xmlns:xi=”http://www.w3.org/2001/XInclude&#8221;
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd”&gt;
<managed-bean>
<managed-bean-name>cadastro</managed-bean-name>
<managed-bean-class>br.com.facelets.bean.Cadastro</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>nome</property-name>
<property-class>java.lang.String</property-class>
<value/>
</managed-property>
<managed-property>
<property-name>login</property-name>
<property-class>java.lang.String</property-class>
<value/>
</managed-property>
</managed-bean>
<navigation-rule>
<from-view-id>/pages/dados.xhtml</from-view-id>
<navigation-case>
<from-outcome>ok</from-outcome>
<to-view-id>/pages/inputname.xhtml</to-view-id>
<redirect/>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/pages/login.xhtml</from-view-id>
<navigation-case>
<from-outcome>ok</from-outcome>
<to-view-id>/pages/greeting.xhtml</to-view-id>
<redirect/>
</navigation-case>
<navigation-case>
<from-outcome>erro</from-outcome>
<to-view-id>/pages/login.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
<resource-bundle>
<base-name>resources</base-name>
<var>msg</var>
</resource-bundle>
<message-bundle>resources</message-bundle>
</application>
</faces-config>

Listagem 5 – menu.xhtml

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:ui=”http://java.sun.com/jsf/facelets&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core”&gt;
<body bgcolor=”#ffffff”>
<table style=”border:1px solid #CAD6E0″ align=”center” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tbody>
<tr>
<td colspan=”2″ valign=”bottom” height=”1″ bgcolor=”#CAD6E0″>
<table>
<tr>
<td>
<a href=”dados.jsf”>Incluir dados</a>
</td>
</tr>
<tr>
<td>
<a href=”login.jsf”>Login</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Listagem 6 – common.xhtml

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:ui=”http://java.sun.com/jsf/facelets&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core”&gt;
<span jsfc=”f:loadBundle” basename=”resources” var=”msg”/>
<head>
<title>
<ui:insert name=”pageTitle”>JavaWora</ui:insert>
</title>
<style type=”text/css”>
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
}
.bottom {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
text-align: center;
vertical-align: middle;
color: #8E969D;
}
</style>
</head>
<body bgcolor=”#ffffff”>
<table style=”border:1px solid #CAD6E0″ align=”center” cellpadding=”0″ cellspacing=”0″ border=”0″ width=”400″>
<tbody>
<tr>
<td class=”header” align=”center” valign=”middle” width=”100%” bgcolor=”#E4EBEB”>
<ui:insert name=”pageHeader”>JavaWora Facelets</ui:insert>
</td>
</tr>
<tr>
<td height=”1″ width=”100%” bgcolor=”#CAD6E0″></td>
</tr>
<tr>
<td width=”100%”>
<table width=”100%” style=”height:150px” align=”left” cellpadding=”0″
cellspacing=”0″ border=”0″>
<tbody>
<tr>
<td align=”center” width=”10%” valign=”middle”>
<ui:insert name=”menu”>
<ui:include src=”/templates/menu.xhtml”/>
</ui:insert>
</td>
<td align=”center” width=”75%” valign=”middle”>
<ui:insert name=”body”>Page Body</ui:insert>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan=”2″ valign=”bottom” height=”1″ width=”100%” bgcolor=”#CAD6E0″></td>
</tr>
</tbody>
</table>
</body>
</html>

Listagem 7 – cadastro.xhtml

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<ui:composition xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:ui=”http://java.sun.com/jsf/facelets&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core&#8221;
template=”/templates/common.xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Cadastro</title>
</head>
<ui:define name=”body”>
<form jsfc=”h:form” id=”cadastro”>
<table>
<tr>
<td>Nome*:</td>
<td>
<input type=”text” jsfc=”h:inputText” value=”#{cadastro.nome}” id=”nome” label=”#{msg.lbl.nome}” required=”true” requiredMessage=”#{msg.erroRequired}”/>
</td>
<td><h:message for=”nome” id=”erroNome”></h:message> </td>
</tr>
<tr>
<td>login*:</td>
<td>
<input type=”text” jsfc=”h:inputText” value=”#{cadastro.login}” id=”login” label=”#{msg.lbl.login}” required=”true” requiredMessage=”#{msg.erroRequired}”/>
</td>
<td><h:message for=”login” id=”erroLogin”></h:message> </td>
</tr>
<tr>
<td>senha*:</td>
<td>
<input type=”text” jsfc=”h:inputSecret” value=”#{cadastro.senha}” id=”senha” label=”${msg.lbl.senha}” required=”true” requiredMessage=”#{msg.erroRequired}”/>
</td>
<td><h:message for=”senha” id=”erroSenha”></h:message> </td>
</tr>
<tr>
<td>Estado Civil:</td>
<td>
<select jsfc=”h:selectOneMenu” value=”#{cadastro.idEstado}” id=”eCivil” label=”#{msg.lbl.estadoCivil}”>
<option jsfc=”f:selectItem” itemValue=”1″ itemLabel=”Casado”></option>
<option jsfc=”f:selectItem” itemValue=”2″ itemLabel=”Solteiro”></option>
<option jsfc=”f:selectItem” itemValue=”3″ itemLabel=”Divorciado”></option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<input type=”submit” value=”Salvar” jsfc=”h:commandButton” action=”#{cadastro.salvar}”/>
</td>
</tr>
</table>
</form>
</ui:define>
</ui:composition>

Listagem 8 – inputname.xhtml

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:ui=”http://java.sun.com/jsf/facelets&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core&#8221;
xmlns:c=”http://java.sun.com/jstl/core”&gt;
<ui:composition template=”/templates/common.xhtml”>
<ui:define name=”pageTitle”>
Bem Vindo
</ui:define>
<ui:define name=”pageHeader”>
Home
</ui:define>
<ui:define name=”body”>
${msg.prompt}
</ui:define>
</ui:composition>
</html>

Listagem 9 – greeting.xhtml

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:ui=”http://java.sun.com/jsf/facelets&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core”&gt;
<f:loadBundle basename=”resources” var=”msg” />
<ui:composition template=”/templates/common.xhtml”>
<ui:define name=”body”>
#{msg.greeting} <span jsfc=”h:outputLabel” value=”#{sessionScope.user.nome}”/>!
</ui:define>
</ui:composition>
</html>

Listagem 10 – login.xhtml

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<ui:composition xmlns=”http://www.w3.org/1999/xhtml&#8221;
xmlns:ui=”http://java.sun.com/jsf/facelets&#8221;
xmlns:h=”http://java.sun.com/jsf/html&#8221;
xmlns:f=”http://java.sun.com/jsf/core&#8221;
template=”/templates/common.xhtml”>
<ui:define name=”body”>
#{erro}
<form jsfc=”h:form” id=”login”>
<table>
<tr>
<td>Login:</td><td><input jsfc=”h:inputText” value=”#{cadastro.login}” type=”text”/></td>
</tr>
<tr>
<td>Senha:</td><td><input jsfc=”h:inputSecret” value=”#{cadastro.senha}” type=”password”/></td>
</tr>
<tr>
<td colspan=”2″ align=”center”>
<input jsfc=”h:commandButton” action=”#{cadastro.logar}” type=”submit” value=”OK”/>
</td>
</tr>
</table>
</form>
</ui:define>
</ui:composition>

Experimente abrir a pagina de login no firefox, ie, ou qualquer ferramenta WYSIWYG (acho q é isso) e veja que os parametros estão lá, até a pagina, mas como isso é possível? Ora como eu disse trata-se de uma página simples xhml, a propósito podemos trabalhar com xhtml diretamente em facelets, ou mesmo jsps, mas xhtml é mais legal. A aplicação consiste em efetuar um cadastro e logo após um login para verificar se os dados foram armazenados.
Agora vamos as curiosidades. Conforme observado no web.xml, há dois listeners registrados, eles são necessários para o Tomcat 5.5, pois o compilador utilizado no facelets não é o Jasper que vêm nele, mas um próprio.
No web.xml observe a sentença:

<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>

Cause um erro em uma página e observe o que ocorre, figura 2:

O compilador descreve o erro e lhe auxilia com a arvores de componentes gerada e os dados do que estavam presentes. Legal né! Pois agora troque a sentença para false. Você verá que o erro agora é apresentado como na figura 3. Bonito não?!

Obrigado e até mais!

Anúncios

Alterando a sequencia de boot do ubuntu

Digite no terminal:

sudo gedit /boot/grub/menu.lst

O linux solicitará a senha de usuário.

Com o arquivo aberto, procure a linha que que contém default X. O X significa o sistema operacional padrão para o boot. Conte o número do title que representa o windows, lembrando que é iniciado por 0 (zero), e altere o arquivo depois é só salvar.

Evandro

DEZAINE GRÁPHICO-TABELA DE PREÇOS

Fonte: http://www.ifd.com.br/blog/2005/09/23/dezaine-grphico-tabela-de-preos/

Conheça esta tabela bem humorada com dicas para cobrar aquele “cliente especial”.

Serviço Valor (R$)
[1] Logo marca, logomarca 6000,00
Logotipozinho, logomarcazinha, marquinha e marquinhazinha (preço também válido para logotipo bem pequenininho, simbolo, desenho pra colocar no cartão e elipse e degrade) 2250,00
Nome do logotipo 5500,00
Impresso 855,00
Folheto de divulgação 255,00
Convitezinho 345,00
Panfleto 452,00
Um folder rapidinho 1250,00
Prospecto 355,00
Jeitinho aqui 150,00
Folhinha / Filipeta 355,00
Folhinha pra tirar xérox mesmo (xérox não inclusas) 456,00
Uma faixa aí 2230,00
Cartaz “que você ja pega pronto no Print artist” 564,00
“Botar um design” no meu site 5300,00
Desenho animado pra colocar no site 50000,00
Uma letra girando, assim ó 250,00
Cartãozinho mixuruca 150,00
Só pra não passar em branco (Folder de aniversário de 50 anos da empresa) 6000,00
Um site (Não interessa a quantidade de paginas, nem o que tem dentro, site é site, ué) 15000,00
Um portal (Sem diferença para o material acima, apenas na nomenclatura) 30000,00
“Igualzinho a esse aqui, só vai colocar o meu timbre ao inves do dele aqui em cima, entendeu? Pra não dar trabalho mesmo…” 1000,00
Sem muitos detalhes 350,00
Quando começar a frase com:
Acrescentar mais (R$)
“Isso aí, você coloca no computador e ele faz” 1250,00
“Eu tenho um sobrinho que faz assim…” 350,00
“Ei, você que mexe com computador…” 500,00
“Ah foi bom te ver aqui, você não é o cara da informáica?” 8000,00
“O chefe do departamento ja escolheu até a letra e a cor, agora ficou fácil” 250,00
“Não, não.. você nao vai ter trabalho nenhum, mesmo. É so colocar no computador mesmo” 350,00
“Na verdade o serviço JÁ ESTÁ PRONTO! É só colocar um pouco de design” 750,00
“É só uma firula mesmo né?” 450,00
“Pra enfeitar o pavão…” 360,00
“Na verdade é porque eu não tenho tempo pra fazer..” 2500,00
“Eu confio em você, vê ai alguma coisa..” (não sabe nem o nome da empresa) 5500,00
“Depois a gente vê uma maneira de te compensar…” 240.000,00
“Vê ai o que você faz pra mim?” 890,00
“Nossa, mas é so um site! Isso tudo?” 5000,00
“POR PÁGINA??????” (cada vez que a pessoa repetir essa frase) 345,00
“Aproveita pra ver o que aconteceu com o antivirus daqui da loja?” 350,00
“Ah.. tá.. mas nisso ja estão incluidas as fotos e as modelos né?” 150,00
“É só esticar aqui, ó” 60,00
“E você usa o computador pra isso?” 75,00
“Coisa simples” 2500,00
“Não você não entendeu é simples mesmo” 3500,00
“É você não entendeu mesmo” 4500,00
“Só uma galeria de fotos. Quantas fotos? Ah umas 100, mas é so colocar ali no canto” 890,00
“Ué, mas é so digitar como ta aqui no jornal.” 980,00
“Escaneia daqui da revista mesmo” 200,00
“Eu quero um site” (Mecãnico free-lancer) 2800,00
“DUZENTOS E CINQUENTA REAIS???” (subir mais R$ 50,00 a cada grito de desespero) 50,00
“Fotolito? Não, não, não vamos contratar fotografo” 35,00
“Ah!! Pode pegar o logo do nosso site, não tem problema nenhum, eu autorizo. É so clicar com o botão direito do mouse em cima e ir em ’salvar como’…” 890,00
“COMO ASSIM, SEM A IMPRESSÃO???” (afinal o cara ainda vai pagar a impressão!!) 200,00
“E quanto você cobra assim? Pra um site, é. Completo! Sim eu sei, mas mais ou menos? Tira uma média, site completo! Hum.. e outro mais simplezinho?” 450,00
“Ah mas eu achei a mesma coisa por R$ 30,00 cada página. E é serviço de confiança. O que a gente pode fazer pra chegar nisso?” (esses eu tenho vontade de xingar…) 200,00
“Pois é mas eu estou vendo com outras pessoas…” 100,00
“Ta, tudo bem.. e fica pronto quando? Pode me mandar uma previa por email hoje a noite? 5000,00
(numa sexta feiras 17:55) “ok, me entrega na segunda até umas 10h tá bom?” 8000,00
“É que meu prazo já está estourado, sabe como é né?” 4580,00
Serviços extras – depois do trabalho pronto:
“Aumenta essa letra?” 50,00
“Coloca esse amarelo mais vivo?” 90,00
“Troca esse vermelho, por amarelo?” Sob consulta. Em casos como trocar o tom da pele de uma foto fica mais caro.
“Vira o rosto dela no computador, pra ficar de lado, acho q vai ficar melhor” (foto 3×4) 150,00 (e não realiza o serviço, lógico)
“E se a gente mudasse o menu pra cá? To achando isso meio parado…” (site pronto) Valor do site x 5
(Depois de pedir incessantemente pelo estetoscopio na capa do manual médico) “É mesmo, né? Não ficou muito legal….. e agora?” 6000,00
“Puxa mais pra ca.. Isso agora mais pra ca, isso, troca essa cor.. agora inclui essa foto… podia mudar aqui ne? hum… po parace que piorou não estou entendendo…” 8500,00

Agora falando sério, o IFDBlog tem o post [2] QUANTO COBRAR? com diversas tabelas referenciais de preços das melhores associações de profissionais da área de comunicação do Brasil e do Mundo além de dicas que podem ajudar você a formular o preço do seu trabalho, vale a pena dar um olhada.


Matéria impressa através do IFDBlog: http://www.ifd.com.br/blog

URL da matéria: http://www.ifd.com.br/blog/2005/09/23/dezaine-grphico-tabela-de-preos/

URLs in this post:
[1] Logo marca, logomarca: http://www.ifd.com.br/blog/2005/11/22/logomarca/
[2] QUANTO COBRAR?: http://www.ifd.com.br/blog/2004/07/29/quanto_cobrar/