Programando y otras cosas: Usar plantillas en JSF

Usar plantillas en JSF.

Cuando realizamos un proyecto web es normal que tengamos una base que se repita en todas nuestras páginas como podría ser un menú, mensajes de error o cualquier otro elemento que se nos ocurra. No tendría mucho sentido repetir este código en todas las páginas pues si por ejemplo decidiéramos cambiar una opción del menú, tendríamos que ir página a página y cambiar el código. Es por ello que se usan plantillas que definen los elementos comunes a usar.

En este artículo vamos a ver como usar plantillas en JSF.

Como primer paso vamos a crear un proyecto JSF, tal y como expliqué en el artículo de primeros pasos con JSF.

Una vez que tengamos el proyecto creado crearemos una carpeta con el nombre plantilla donde vamos a guardar las plantillas que creemos.

Ahora se debe crear un documento xhtml. En nuestro ejemplo lo llamaremos platilla_principal.xhtml. Como ejemplo añadiremos un pequeño menú en la parte superior. El archivo platilla_principal.xhtml contendrá el siguiente código:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <ui:insert name="contentido_cabecera"></ui:insert>
    </head>
    <body>
        <div id="menu">
            <ui:include src="menu.xhtml"></ui:include>
        </div>
        <div id="contenido">
            <ui:insert name="contentido_pagina"></ui:insert>
        </div>
    </body>
</html>

Hay dos etiquetas que se han usado en la creación de la página anterior:

ui:include. Esta etiqueta permite introducir el contenido de un archivo en la posición donde se encuentre.
ui:insert. Permite definir bloques que posteriormente serán sustituidos por el código que indiquemos en nuestras páginas tal y como veremos posteriormente.

Ahora crearemos el archivo menu.xhtml que hemos incluido en la platilla a través de la etiqueta ui:include.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core">

<style type="text/css">
boton
{
    width: 80px;
    height: 20px;
    float:left;
    background-color: cyan;
    text-align: center;
    margin:10px;
    font-size:12px;
    padding-top:5px;
    cursor:pointer;
    font-weight: bold;
    color: white;
    background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) !important; /* Firefox */
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) !important; /* Webkit: Chrome, Opera,... */
    background-color: #1a82f7; /* Navegadores sin CSS3 */
    background-&amp;amp;#8203;&amp;amp;#8203;image: linear-gradient(left , #1a82f7, #2F2727 ); /* CSS3 puro */
}
</style>
<div style="float:left; width: 100%;">
    <div class="boton"> Menu 1 </div>
    <div class="boton"> Menu 2 </div>
    <div class="boton"> Menu 3 </div>
</div>
</ui:composition>

Finalmente debemos modificar nuestras páginas index.xhtml y testJSF.xhtml.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
template="plantillas/plantilla_principal.xhtml">


    <ui:define name="contentido_cabecera">
        <title>Mi primer proyecto JSF 2.0 con plantillas</title>
    </ui:define>

    <ui:define name="contentido_pagina">
        <h:form>
            <h:inputText value="#{testBean.descripcion}"></h:inputText>
            <h:commandButton value="Enviar Formulario" action="testJSF"></h:commandButton>
        </h:form>
    </ui:define>

</ui:composition>

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
template="plantillas/plantilla_principal.xhtml">


    <ui:define name="contentido_cabecera">
        <title>Mi primer proyecto JSF 2.0</title>
    </ui:define>

    <ui:define name="contentido_pagina">
        
        Tu texto: #{testBean.descripcion}
    </ui:define>

</ui:composition>

Vemos que se han usado nuevas etiquetas:

ui:composition. Para definir un bloque e indicar que plantilla se va a usar.
ui:define. Esta etiqueta queda asociada a la etiqueta ui:insert vista con anterioridad. Lo que hacemos con ella es decirle a JSF que el contenido dentro de esta etiqueta debe incorporarse en la plantilla en la posición indicada por ui:insert que tenga el mismo nombre.

Ahora sólo será necesario que despleguemos la aplicación y la probemos.

menu

lunes, 23 de julio de 2012

Usar plantillas en JSF

Usar plantillas en JSF.

1 comentario: