Aplicaciones Multi Nivel

Diana Lorena Velandia Vanegas

dlvelandia@misena.edu.co
Arquitectura de las Aplicaciones Web

Cliente
Vista
Lógica DAO - Data
Access Object
Modelo
 Capa de Presentación
Prime Faces

• http://www.primefaces.org/showcase/
• Librería de componentes para JavaServer Faces (JSF) de código
abierto que cuenta con un conjunto de componentes enriquecidos
que facilitan la creación de las aplicaciones web.
 Qué es JSF?

• La tecnología Java Server Faces es un marco de trabajo de

interfaces de usuario del lado de servidor para aplicaciones Web
basadas en tecnología Java
• Estándar para construcción de componentes visuales.
• JSR 252: JavaServer Faces 1.2 – JavaEE5
• JSR 314: JavaServer Faces 2.0 – JavaEE6
 PRINCIPALES COMPONENTES DE
LATECNOLOGÍA JAVA SERVER FACES

• Un API y una implementación de referencia

• para: representar componentes UI y manejar su estado.
• Manejo de eventos.
• Validación del lado del servidor y conversión de datos.
• Definir la navegación entre páginas.
 PRINCIPALES COMPONENTES DE
LATECNOLOGÍA JAVA SERVER FACES
• Un API y una implementación de referencia para: representar
componentes UI y manejar su estado.
• Manejo de eventos.
• Validación del lado del servidor y conversión de datos.
• Definir la navegación entre páginas.
• Soportar internacionalización y accesibilidad.
• Proporcionar extensibilidad para todas estas características.
• Una librería de etiquetas JavaServer Pages (JSP) personalizadas
para dibujar componentes UI dentro de una página JSP.
 PRINCIPALES COMPONENTES DE
LATECNOLOGÍA JAVA SERVER FACES

• Clara separación entre la lógica y la presentación.

• Separación de roles en el grupo de desarrollo.
• Los diseñadores de las paginas pueden usar las etiquetas de
componentes UI de la tecnología
• JavaServer Faces para enlazar código de la aplicación desde dentro
de la página Web sin escribir ningún script.
 Roles de Desarrollo

Diseñadores de paginas.
• Utilizan un lenguaje de marcas, como HTML, para construir
páginas para aplicaciones Web. Cuando se utiliza la tecnología
JavaServer Faces, los diseñadores de páginas casi siempre usarán
exclusivamente la librería de etiquetas.
Desarrolladores de Aplicaciones.
• Programan los objetos del modelo, los manejadores de eventos, los
validadores, y la navegación de páginas.
• Proporcionan las clases de utilidad necesarias.
Componentes Prime Faces
Componentes Prime Faces
 Uso de Prime Faces

Diseñadores de paginas.
• Utilizan un lenguaje de marcas, como HTML, para construir
páginas para aplicaciones Web. Cuando se utiliza la tecnología
JavaServer Faces, los diseñadores de páginas casi siempre usarán
exclusivamente la librería de etiquetas.
Desarrolladores de Aplicaciones.
• Programan los objetos del modelo, los manejadores de eventos, los
validadores, y la navegación de páginas.
• Proporcionan las clases de utilidad necesarias.
 Ejemplo 1. Tablas
Manual de Referencia:
www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf
 Ejemplo 1. Tablas
Manual de Referencia:
www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf
Ejemplo 1. Tablas – Propiedades <p:dataTable>
Etiqueta / Atributo
var="estudiantes"
value="#{estudianteVista.listaEstudiantes}"
rows="10" paginator="true"
rowsPerPageTemplate="2,4,6"
filteredValue="#{estudianteVista.listaEstudiantes}"
emptyMessage="No se encontraron resultados"
Uso
Indica el nombre que se dará a la variable que
almacena los datos con los que se llena la tabla
que provienen del Managed Bean.
Indica el valor que tomará el atributo var anterior
y hace referencia a la lista que trae los objetos.
Indica que la tabla tendrá paginación y que por
defecto será de 10.
Permite dar la posibilidad al usuario de escoger
con cuantos registros paginar cada vista de la
tabla.
Cuando se aplica un filtro a la tabla se debe
especificar en que variable del Managed Bean
será guardada, puede ser la lista del value u otra
variable.
En caso de no encontrarse resultado después de
aplicar un filtro.
Ejemplo 1. Tablas – Propiedades <p:dataTable>
Etiqueta / Atributo Uso

Columnas
Las tablas estarán compuestas de columnas, en las cuales se especificará los valores a partir del
value indicado antes.
<p:column> </p:column>

headerText="Id" Nombre de encabezado columna.

filterBy="#{estudiantes.idEstudiante}" Cuál será el filtro a aplicar sobre esta columna.

filterMatchMode="contains"
<h:outputText value="#{estudiantes.idEstudiante}"
Importante que es dependiendo del tipo de objeto
que trae la tabla.
El tipo de filtro, que también puede ser:
startsWith, endsWith, exact, lt (<), lte (<=), gt (>),
gte(>=), equals, in (a partir del filtered value).
Generalmente las tablas son para visualización de
contenido, por ende se usa los oitputText para
mostrar.
 Ejemplo 2. Formularios
Manual de Referencia:
www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf
 Ejemplo 2. Formularios
Manual de Referencia:
www.primefaces.org/docs/guide/primefaces_user_guide_5_0.pdf
Ejemplo 2. Formularios
Etiqueta / Atributo Uso

<h:outputText value="Documento:"/>

<p:inputText id="txtDocumento"
binding="#{estudianteVista.txtIdentificacion}" size="30"
/>
<p:selectOneMenu id="cmbTipo"
binding="#{estudianteVista.cmbTipo}" >
<f:selectItem itemLabel="TARJETA DE IDENTIDAD"
itemValue="TARJETA DE IDENTIDAD" />
<f:selectItem itemLabel="CÉDULA"
itemValue="CÉDULA" />
</p:selectOneMenu>
<p:commandButton id="btnCrear" value="Crear"
binding="#{estudianteVista.btnRegistrar}"
action="#{estudianteVista.registrar_action}"
update=":formulario:mensajes,:formulario:panelEstudiantes
" />
Ejemplo 3. Registro

Ver Netbeans
 Cambio de Estilo
http://www.primefaces.org/themes