Bienvenidos y gracias por visitar el blog, acá compartiendo otro tips de programación en Java web, esperando como siempre que sea de mucha ayuda para todos.
En esta ocasión quiero compartir la forma de como definir y utilizar una plantilla en paginas cliente JSF utilizando para ello los showcases de primefaces, en este caso utilizaremos un elemento menubar, así que manos a la obra.
Pueden ver el vídeo:
Pueden ver el vídeo:
CREACIÓN DEL PROYECTO
1. Creamos un nuevo proyecto, Web Application, yo lo nombre así: 'JSFplantillamenu'
2. Dejamos estos parametros por defecto
3. Acá elegimos Java Server Faces y en la ficha Components, marcamos la opción Primefaces y hacemos clic al botón finalizar.
4. El proyecto deberá tener la siguiente estructura por el momento
CREACIÓN DE LA PLANTILLA
1. Eliminamos la pagina welcomePrimefaces.xhtml que se ha creado, dejaremos únicamente la de index.xhtml.
2. Creamos un nuevo folder en Web Pages llamado 'Template', Clic derecho sobre Web Pages y eligen folder.
3. En este folder creamos un nuevo archivo Java Server Faces de tipo Facelest Template
4. Le colocamos un nombre, yo le llame 'plantilla' y como pueden observar aparecen varios estilos así que según la necesidad o estructura que se le quiera dar a la aplicación, elegir el que mas les convenga. Yo seleccione el que pueden ver en la imagen.
5. Por ultimo hacen clic al botón finalizar, con eso se nos crea una plantilla con los elementos <div> que señalan a cada parte de la plantilla. Así también notaran que se crearon dos archivos CSS, que contienen los estilos para cada elemento o parte de la plantilla .
Es importante tener en cuenta que cualquier cambio o modificación que hagamos a esta plantilla, afectara a cada pagina cliente que se base en dicha plantilla, ya sea que lo hagamos por medio de los archivos CSS o directamente en la plantilla..
CREAR UNA PAGINA CLIENTE BASADA EN LA PLANTILLA
1. Creamos en Web Pages otro folder llamado 'Views'.
2. Creamos en dicho folder un nuevo archivo Java Server Faces de tipo Facelets Template Client
3. En la siguiente pantalla, hacemos clic al boton Browser y buscamos la plantilla creada, para indicarle a nuestra pagina que utilice ese patrón, elegimos la opcion Selected File
4. En el siguiente paso le indicamos que únicamente necesitamos la parte de Content, ya que esa sera la única parte de nuestra pagina que se modificara. Recordemos que los demás elementos serán modificados en la plantilla y no es necesario que se haga nada en cada pagina que implemente la plantilla a excepción del contenido que es lo que cada pagina deberá mostrar de forma independiente.
5. Clic en finalizar y listo.
Hacemos una prueba de que la plantilla esta funcionando.
Para ello modificamos index.xhtml. de esta forma, y luego corremos el proyecto
Al ejecutarlo hacemos clic al enlace y nos debe mostrar la paginaCliente con el diseño de la plantilla que esta utilizando y como podrán ver los elementos Top, Left y Bottom lo esta heredando de la plantilla.
INCORPORANDO UN MENUBAR A LA PLANTILLA
1. Modificamos nuestra plantilla, específicamente en la parte del top, vamos a incorporar el siguiente código:
2. Corremos de nuevo la aplicación, deberemos ver que ahora ya aparece el menu en la parte superior de la pagina, y con ello cualquier pagina que se cree en base a la plantilla heredará dicho menu y todo lo que se especifique en dicha plantilla.
3. Ya solo bastaría aplicar estilos o modificar los que ya se han creado por defecto para poder darle una mejor presentación a la plantilla.
4. Eso es todo, como siempre espero les sea mucha utilidad y si hay dudas pueden comentarlo.
Hasta la próxima..
Excelente me ayudo mucho.
ResponderEliminar