JSF + YUI = YUI4JSF
Gute Nacht!
(Boa noite)
Levando mais a sério ainda o Yahoo Toolkit, vou deixar aqui uma breve explicação de como utilizar o YUI com JSF. É muito fácil. Bom, o JSF acho que nem precisa explicar né, mas vou deixar uma breve explicação pra quem está iniciando. O JSF, JavaServer Faces, é um framework para desenvolvimento de sistemas web com a tecnologia Java. O objetivo de sua criação foi a automatização de alguns serviços que são repetitivos, a reutilização de componentes e vários outros processos. Tenho um post muito legal que é bastante acessado mostrando como construir uma aplicação JSF.
Quem me conhece pessoalmente sabe que sou fã do YUI, ele faz coisas super legais em Javascript. E o melhor que acho é que é mantido pela gigante no mundo da internet Yahoo!.
O YUI, é um toolkit muito amplo desenvolvido para criar interfaces super ricas e dinâmicas em javascript.
Mas vamos ao que interessa não?!
Existe um projeto chamado YUI4JSF. Ele une o JSF com o YUI e permite que vc utilize os componentes legais Yahoo através da adição de tags JSF.
1# Primeiro passo: Crie a sua estrutura de diretório que achar mais conveniente na IDE de sua preferência.
2# Segundo passo: Adicione no diretório lib de sua aplicação os jar necessários para uma aplicação Myfaces, em seguinda entre no site do YUI4JSF e faça o dowload do JAR colocando ele também no diretório lib.
3# Configure seu web.xml:
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.faces.application.CONFIG_FILES</param-name>
<param-value>/WEB-INF/faces-config.xml</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<filter>
<filter-name>yui4jsf filter</filter-name>
<filter-class>net.sf.yui4jsf.filter.YUI4JSFFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>yui4jsf filter</filter-name>
<url-pattern>*.jsf</url-pattern>
</filter-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>
index.html
</welcome-file>
</welcome-file-list>
</web-app>
Ps.: Veja que configuramos o filtro yui4jsf.
4# Crie um bean e o configure no arquivo faces-config.xml.
5# Crie sua página index.jsp:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://yui4jsf.sourceforge.net" prefix="yui"%>
<html>
<head>
<title>YUI4JSF</title>
</head>
<f:view>
<h:form>
<yui:calendar id="dataNascimento" value="#{pessoa.dataNascimento}" popup="true" close="true">
<f:convertDateTime pattern="dd/MM/yyyy" />
</yui:calendar>
</h:form>
</f:view>
</body>
</html>
Ps.: Veja que adicionamos as tags yui para utilizar os seus componentes.
#Pronto!
Agora compile seus arquivos .java dê o deploy na sua aplicação lá no seu servidor e execute. Lembre-se que o arquivo index.jsp deve ser chamado no browser como index.jsf
Bom, qualquer dúvida é so falar!
Bis Bald!
May 19th, 2008 at 5:31 pm
[...] Web4u - Web for You » Blog Archive » JSF + YUI = YUI4JSF O YUI, é um toolkit muito amplo desenvolvido para criar interfaces super ricas e dinâmicas em javascript. (tags: http://www.web4u.eti.br 2008 mes4 dia19 at_tecp jsf java yui Yahoo! blog_post javascript) [...]