Java Punto & Coma: JSF + PrimeFaces

Hola a todos y bienvenidos a este espacio en la nube en la cual quiero compartir lo que voy aprendiendo dia a dia.

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.

De Java Punto & Coma

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..

15 comentarios:

Unknown29 de enero de 2011, 20:32
Muy agradecido de tu ayuda...

ahora, me surge un problema, cuando uso primefaces y sus skins, no me aparecen los iconos... leí que esto se puede solucionar si se usa myfaces 2.0.3.

Otra pregunta, cuando usas Mojarra como agregas la libreria? la creaste tú? Saludos
ResponderEliminar
Respuestas
Unknown30 de enero de 2011, 18:01
Hola Gabriel,
Gracias por el Comentario y hacerca de tus dudas, pues uso la libreria Mojarra 2.0.3 en una de las imagenes esta la pantalla donde se agrega esta libreria tal cual.El mismo Helios se encarga de hacer la descarga de la libreria.
En caso ya lo tengas creado, ve a properties/Project Facets/Java Server Faces y desde ahi puedes agregar la Libreria.
Los iconos de los Skins de estas estan dentro de la carpeta del skin o theme en el caso del ejemplo usamos el aristo por ello puedes ver la carpeta Webcontent/themes/aristo/images en donde encontraras los iconos que usa. Por lo cual creo que no deberias tener problemas. Pero en lo general, usa como pagina default o de inicio un jsp que redireccione a la que quieres que en verdad sea tu pagina Inicial, porque suele pasar que no carga correctamente los css que les asignas, si no lo haces.
Espero que te sea de ayuda y tambien puedes descargar el codigo completo en el ultimo post.
Saludos
ResponderEliminar
Respuestas
Unknown4 de febrero de 2011, 10:48
Amigo, Muchas gracias por tu ayuda :) aunque nunca tuve ese error xD era una idiotez (solo en "menubar" no me muestra el stilo y las imágenes del css)... aunque tengo otro drama, cuando creo un proyecto jsf me lo crea con un demo de pormedio, sabes como crear un proyecto jsf limpio?

Uso Eclipse Helios, Jboss 6.0.0 y jboss tools
ResponderEliminar
Respuestas
Carlos19 de marzo de 2011, 10:10
muy bueno, pero haras otros ejemplos mas? estoy enpezando en el mundo del JSF y primefaces pero uso netbeans 6.9.1..

por cierto no me direcciiona a la paginacion me dice que el url no esta en el servidor

esperp otros ejemplos gracias...
ResponderEliminar
Respuestas
Unknown24 de marzo de 2011, 12:27
Hola Carlos,
Pues mi primer objetivo es completar el CRUD con JPA, pero por motivos de tiempo(Trabajo y Univ.) pues se me a hecho dificil publicarlo(Hacer los printscreen, separar el codigo por pasos , etc..).
Pero en cuanto tengo tiempo libre publicare el CRUD completo.
Saludos
ResponderEliminar
Respuestas
Unknown24 de marzo de 2011, 23:21
Excelentes tutos Th3_RiC, espero q sigas publicando otros mas. POr cierto probe el ejemplo en eclipse con tomcat 6 y no funciono es por las librerias?
ResponderEliminar
Respuestas
Anónimo20 de abril de 2011, 16:07
Hay algun modo de usar primefaces en un documento jsp?... que hago si necesito codigo java en el documento que voy a desplegar(jsp)?
ResponderEliminar
Respuestas
Unknown5 de mayo de 2011, 23:17
Muy buenos los ejemplos gracias por ser un aporte mas para los que nos estamos iniciando en java
ResponderEliminar
Respuestas
La Gente Fea Tambien Tiene Derecho.1 de mayo de 2012, 13:54
Gracias bro.
ResponderEliminar
Respuestas
juancupa26 de julio de 2012, 22:02
Buenas !...........
Muy bueno su aporte pero tengo una duda como seria para el caso de una consulta o una búsqueda ya sea por nombre o id

Gracias Saludos
ResponderEliminar
Respuestas
Anónimo2 de agosto de 2012, 12:12
Hola,
y que pasa si tengo un jar como por ejemplo 'vader-1.0.6.jar' como es el uso porque en ese jar ya esta el css e imagenes, quiero saber como es la llamada o uso de ese archivo....

gracias.
ResponderEliminar
Respuestas
Unknown5 de enero de 2013, 10:33
gracias
ResponderEliminar
Respuestas
Anónimo29 de abril de 2013, 22:43
Hola, soy nuevo en esto de Prime faces y java, estoy utilizando netbeans y glassfish mi duda es ¿como agrego un icono al dock de primefaces?,¿que carpeta debo agregar y en donde?, espero y me puedan aclarar la duda gracias.
ResponderEliminar
Respuestas
Anónimo17 de julio de 2013, 23:22
apenas e hecho un ejemplo de jsf, estoy confundido podrias decirme en que momento usas primefaces?
ResponderEliminar
Respuestas
Anónimo14 de noviembre de 2013, 12:38
Sería bueno un ejemplo de una página pero para que pueda ingresar datos en un BD,
se te agradecería
ResponderEliminar
Respuestas

Añadir comentario

sábado, 1 de enero de 2011

JSF + PrimeFaces

15 comentarios: