Maquetacion Con JSF

DESARROLLO DE
APLICACIONES WEB EN
Conceptos de maquetación
con JSF
DESARROLLO DE APLICACIONES
WEB JAVA - ADSI
FAVA - Formación en Ambientes Virtuales de Aprendizaje
SENA - Servicio Nacional de Aprendizaje.

Desarrollo de aplicaciones web JAVA
6.1 Conceptos de maquetación con JSF.
El generador de código de Netbeans provee el archivo template.xhtml el cual fue aplicado

a todas los archivos xhtml que se generaron como se muestra a continuación:
Figura 6.2 Template o plantilla generada por Netbeans.
Esta plantilla será la que aplicará la estructura a todas las vistas del proyecto. El código
en esta etapa del proyecto es el siguiente:
<?xml version=’1.0’ encoding=’UTF-8’ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:ui=”http://xmlns.jcp.org/jsf/facelets”
xmlns:h=”http://xmlns.jcp.org/jsf/html”>
<h:head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title><ui:insert name=”title”>Default Title</ui:insert></title>
<h:outputStylesheet library=”css” name=”jsfcrud.css”/>
</h:head>
<h:body>
<h1>
<ui:insert name=”title”>Default Title</ui:insert>
</h1>
<p>
<ui:insert name=”body”>Default Body</ui:insert>
</p>
</h:body>
</html>
A esta plantilla se le realizarán varias modificaciones hasta llegar a la maqueta o modelo

planteado.
SENA - Servicio Nacional de Aprendizaje. 31

A continuación se insertará el código para que la plantilla contenga un encabezado y una

sección de contenido. Para lo anterior se usarán dos etiquetas <div> así:
<h:head>
</h:head>
<h:body>
<div id=”encabezado”>
<h1><ui:insert name=”header”>Sistema de Gestión Odontológica</ui:insert></h1>
</div>
<h1>

</h1>
<div id=”contenido”>
</div>
</h:body>
</html>
A continuación se procede a incluir el menú. Para lo anterior se hará uso de la etiqueta de

JSF llamada “h:commandLink” que es similar a una etiqueta <a> en html. La estructura
es la siguiente:
<h:commandLink action=”ruta_en_jsf”>Nombre</h:commandLink>
Donde:
“action” es la ruta donde se dirigirá el enlace.

Antes de la creación de menú se deben crear las rutas. Una ruta es la asociación entre
una etiqueta y un archivo xhtml. La configuración de la rutas se realiza en el archivo
“faces-config.xml” ubicado como se muestra a continuación:
Figura 6.3 Archivo de configuración faces-config.xml
Para este recurso se incluirán las siguientes rutas:

<navigation-rule>
<from-view-id>*</from-view-id>
<navigation-case>
<from-outcome>inicio</from-outcome>
<to-view-id>/index.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>asignar_cita</from-outcome>
<to-view-id>/citas/Create.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>consultar_cita</from-outcome>
<to-view-id>/citas/List.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
La estructura de las rutas es la siguiente:

<navigation-case>
<from-outcome>nombre_de_la_ruta</from-outcome>
<to-view-id>ubicacion_del_archivo_xhtml</to-view-id>
</navigation-case>
Para el menú se utilizará la etiqueta html <nav>. Una vez incluidos los cambios, el archivo
de plantilla queda como se muestra a continuación:


<h:head>
</h:head>
<h:body>
<div id=”encabezado”>
<h1><ui:insert name=”header”>Sistema de Gestión Odontológica</ui:insert></h1>
</div>
<nav id=”menu”>
<h:form>
<ul>
<li><h:commandLink action=”inicio”>Inicio</h:commandLink></li>
<li><h:commandLink action=”asignar_cita”>Asignar Cita</h:commandLink></li>
<li><h:commandLink action=”consultar_cita”>Consultar Cita</h:commandLink></li>
</ul>
</h:form>
</nav>
<div id=”contenido”>
</div>
</h:body>
</html>
Figura 6.4 Plantilla con las opciones del menú.

En este punto ya tenemos lista la plantilla que aplicará a todas los archivos de presentación
del proyecto. Al ejecutar el proyecto aparece lo siguiente en pantalla:
Figura 6.5. Prueba de la aplicación.
Se puede observar que el index.xhtml que generó automáticamente el sistema no está

actualizado con la plantilla que se acabó de diseñar. Para aplicar la plantilla al index.xhml
se introducen los siguientes cambios:
<ui:composition template=”/template.xhtml”>
<ui:define name=”title”>
<h:outputText value=”INICIO”></h:outputText>
</ui:define>
<ui:define name=”body”>
</ui:define>
</ui:composition>
Se puede observar la utilización de la etiqueta de JSF llamada “ui:composition”. Esta

última hace uso de la plantilla “/template.xhtml”.
Las etiquetas “<ui:define>” sirven para definir los parámetros establecidos en la plantilla.
En este caso los parámetros “title” y “body” se definieron usando esta etiqueta. En caso
que no se diligencien los parámetros la plantilla incluirá el código por defecto.

El archivo index.html con los cambios queda así:


xmlns:h=”http://xmlns.jcp.org/jsf/html”
xmlns:ui=”http://xmlns.jcp.org/jsf/facelets”>
<ui:composition template=”/template.xhtml”>
<ui:define name=”title”>
<h:outputText value=”INICIO”></h:outputText>
</ui:define>
<ui:define name=”body”>
</ui:define>
</ui:composition>
</html>
Figura 6.6. Archivo index.xhtml usando la plantilla de la aplicación.
En este punto se puede nuevamente probar la aplicación ejecutando “run” en la barra de

herramientas de Netbeans. Aparece lo siguiente en pantalla:
Figura 6.7. Prueba de index.xhtml que usa la plantilla de la aplicación.

Maquetacion Con JSF

Cargado por

Copyright:

Formatos disponibles

Maquetacion Con JSF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Maquetacion Con JSF

Cargado por

Copyright:

Formatos disponibles

DESARROLLO DE

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje.

6.1 Conceptos de maquetación con JSF.

El generador de código de Netbeans provee el archivo template.xhtml el cual fue aplicado

Figura 6.2 Template o plantilla generada por Netbeans.

A esta plantilla se le realizarán varias modificaciones hasta llegar a la maqueta o modelo

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 31

A continuación se insertará el código para que la plantilla contenga un encabezado y una

A continuación se procede a incluir el menú. Para lo anterior se hará uso de la etiqueta de

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 32

Figura 6.3 Archivo de configuración faces-config.xml

Para este recurso se incluirán las siguientes rutas:

La estructura de las rutas es la siguiente:

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 33

<?xml version=’1.0’ encoding=’UTF-8’ ?>

Figura 6.4 Plantilla con las opciones del menú.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 34

Figura 6.5. Prueba de la aplicación.

Se puede observar que el index.xhtml que generó automáticamente el sistema no está

Se puede observar la utilización de la etiqueta de JSF llamada “ui:composition”. Esta

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 35

El archivo index.html con los cambios queda así:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Figura 6.6. Archivo index.xhtml usando la plantilla de la aplicación.

En este punto se puede nuevamente probar la aplicación ejecutando “run” en la barra de

Figura 6.7. Prueba de index.xhtml que usa la plantilla de la aplicación.

FAVA - Formación en Ambientes Virtuales de Aprendizaje

SENA - Servicio Nacional de Aprendizaje. 36

También podría gustarte