Uno de los temas que eh aprendido y estoy con muchos animos de ponerlo en practica es el PrimeFaces, para los que no saben de que se trata pues es una libreria de componentes visuales OPEN SOURCE para JSF, asi como el IceFaces o el RichFaces para los que ya estan en el mundo del JSF.
Porque PrimeFaces?
Entre sus bondades tenemos:
- Libreria con alrededor de 100 componentes Ajax de facil uso.
- Soporta JSF 2.0.
- No requiere una complicada configuraciones.
- Showcase de Ejemplo para descarga.
- Documentación (pdf con 411 pg.).
- Temas preconfigurados(Nos ahorramos el trabajo de Diseño XD)
Este es mi primer blog y quiero hacer de este algo dinamico ya que por experiencia ayuda mucho a aprender a los que visitantes y seguidores, Asi que les pedire que si cometo algunos errores me los hagan saber para mejorar en los sgtes post's.
No pienso hacer un Hola Mundo porque creo que no seria util y no se mostraran las bondades del PrimeFaces. Asi que Haremos un CRUD de Clientes, pero por partes, asi que sin mas que decir comienzo con la creación del proyecto, configuración y la creación de una pagina de bienvenida simple.
Herramientas y recursos:
Vamos.....
Creación del Proyecto.
 |
Usaremos el Tomcat 7.0 y como ya comente el jsf 2.0 Mojarra. les dejo las pantallas para que se guien.
 |
 |
 |
 |
Agregamos las librerias dentro de WebContent/WEB-INF/lib, solo copiamos los .jar y pegamos en lib, debe quedar asi.
 |
Primefaces nos da los. css y los archivos .Js para tener una presentación muy moderna y profesional, que es modificable mediante Themeroller, añadimos las carpetas(css, design, images ,themes) en el WebContent(Ctrl + C / Ctrl + V) queda asi:
 |
Editamos el Web.xml
<?xml version="1.0" encoding="ASCII"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0"> <display-name>CRUDPrimeFaces</display-name> <context-param> <param-name>javax.faces.STATE_SAVING_METHOD</param-name> <param-value>server</param-value> </context-param> <context-param> <param-name>primefaces.PRIVATE_CAPTCHA_KEY</param-name> <param-value>6LfwZwoAAAAAAEhRyntKF1PBzysAJLzqp2v-GMRR</param-value> </context-param> <context-param> <param-name>primefaces.PUBLIC_CAPTCHA_KEY</param-name> <param-value>6LfwZwoAAAAAAI-oUHpdvRnkMfu9fXQHxc0P7IBu</param-value> </context-param> <context-param> <param-name>primefaces.SKIN</param-name> <param-value>none</param-value> </context-param> <filter> <filter-name>PrimeFaces FileUpload Filter</filter-name> <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class> </filter> <filter-mapping> <filter-name>PrimeFaces FileUpload Filter</filter-name> <servlet-name>Faces Servlet</servlet-name> </filter-mapping> <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> <listener> <listener-class>com.sun.faces.config.ConfigureListener</listener-class> </listener> </web-app>
Crearemos una plantilla para tener un formato, Creamos una carpeta "templates" en el WebContent en el que crearemos la pg. "plantilla.xhtml" y editamos la misma.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<f:view contentType="text/html">
<h:head>
<title><ui:insert name="head"></ui:insert></title>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/aristo/skin.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/syntaxhighlighter/styles/syntaxhighlighter.css" />
<style type="text/css">
.new {
background: url(../images/new-ico.gif) no-repeat 1%;
}
.ui-widget {
font-size: 98% !important;
}
.ui-menu .ui-menu-item .ui-menu-item-label {
padding: .2em 1.7em;
}
.ui-growl {
top:115px;
}
.themeMenu {
overflow: auto;
height:300px;
width:200px;
}
</style>
</h:head>
<h:body>
<div class="ui-widget ui-widget-header">
<div id="logo">
<h1>Java Punto y Coma CRUD : JSF + PrimeFaces </h1>
</div>
</div>
<div id="wrapper">
<div id="page">
<div id="sidebar1" class="ui-widget-content ui-corner-all ui-helper-clearfix sidebar" style="border: 0;margin-top: 0px;">
<h:form id="frmMenu" prependId="false" >
<p:menu style="width:200px">
<p:submenu label="Opciones">
<p:menuitem value="Inicio"
url="/pg/home.jsf" />
<p:menuitem value="Gestion de Clientes"
url="/pg/frmCliente.jsf" />
</p:submenu>
</p:menu>
</h:form>
</div>
<div id="content" class="ui-widget">
<div class="post">
<ui:insert name="content">...</ui:insert>
</div>
</div>
<div style="clear: both;"> </div>
</div>
</div>
<div id="footer" class="ui-widget ui-widget-header ui-corner-all">
<p class="copyright"> Th3_RiC © 2010 • </p>
</div>
</h:body>
<ui:insert name="highlight">
<script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/shCore.js"></script>
<script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/shBrushJava.js"></script>
<script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script language="javascript" src="#{request.contextPath}/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '#{request.contextPath}/syntaxhighlighter/scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</ui:insert>
</f:view>
</html>
Ya que tenemos nuestra plantilla creamos nuestro pagina de inicio.
Primero para no tener problemas con los .css, creamos un index.jsp en el WebContent que redireccionara a la pagina de inicio de nuestra aplicación.
<% response.sendRedirect("pg/home.jsf"); %>
Como dice en el Codigo lineas arriba crearemos una carpeta en el Webcotent llamado "pg" donde crearemos nuestras paginas para tener todo algo mas ordenado, creamos home.xhtml en pg. y pondremos lo sgte:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 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:p="http://primefaces.prime.com.tr/ui" template="../templates/plantilla.xhtml"> <ui:define name="head">:: Java Punto y Coma ::</ui:define> <ui:define name="content"> <h1 class="title ui-widget-header ui-corner-all">Bienvenidos al Sistema</h1> <div class="entry" style="line-height:200%"> CRUD con JSF y PrimeFaces. <br /> Se completara en el sgte. orden: <ul style="margin-top:5px;"> <li>Listado y Busqueda.</li> <li>Creacion de Clientes.</li> <li>Edicion de Clientes.</li> <li>Eliminacion de Clientes.</li> </ul> </div> </ui:define> </ui:composition>
 |
Y ahora podemos darle run a la aplicación y el resultado sera el sgte:
 |
Espero no haber dejado pasar nada importante.Sino m avisan..
