VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2019/12/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

PRÁCTICA DE LABORATORIO / TALLERES / CENTROS DE SIMULACIÓN –

PARA DOCENTES

CARRERA: Ingeniería en Ciencias de la Computación ASIGNATURA: Sistemas de Información

NRO. PRÁCTICA: 07 TÍTULO PRÁCTICA: Uso de Primefaces

OBJETIVO Usar la librería de componentes visuales open source para JSF llamada PrimeFaces, con herramientas
de soporte de Ajax, en una interfaz sencilla.

1. Creación de un proyecto con soporte para PrimeFaces en JSF

2. Añadir las dependencias para el uso de cualquier librería de PrimeFaces.
INSTRUCCIONES
3. Creación del index.xhtml.
4. Prueba de diferentes librerías de PrimeFaces.

ACTIVIDADES POR DESARROLLAR

Para personas como nosotros que estamos empezando en este amplio mundo del desarrollo de aplicaciones en
JAVA, nos va a tocar adentrarnos en un tema que es la versión JAVA EE y entre eso el manejo de frameworks como
JSF (Java Server Faces). En mis inicios fue un poco complicado entender bien el tema y es más, a veces mi cerebro
me juega bromas configurando los proyectos WEB. Entonces, les dejo para su conocimiento este pequeño paso a
paso de como configurar un proyecto WEB con JSF verás que de una maner a u otro es bastante sencillo crear una
aplicación y desplegarla y esto nos servira de base para crear aplicaciones WEB de ahora en adelante en este
Framework. Sin mas preámbulo que este tutorial sirva para tus proyectos.

Crear un proyecto WEB

1. Selecciona la opción New -> Project.. y selecciona la opción Dynamic Web Project.

2. Ahora colócale un nombre a tu aplicación.

Resolución CS N° 076-04-2016-04-20
 Ingeniería de Sistemas Docente:
Período Lectivo: Septiembre 2018 –
Sistemas de Información
Febrero 2019

3. Después de colocarle el nombre, haz clic en Next. A continuación, te aparecerá una ventana que te pide la
carpeta donde iran las clases Java. Por defecto Eclipse nos da la opción de dejar la carpeta src/, este paso
lo puedes obviar dando clic en Next.

4. En la siguiente ventana te aparecera la opción para nombrar el directorio para las páginas WEB. Por
defecto Eclipse te la opción de dejar como nombre WebContent. A continuación, selecciona la opción
Generate web.xml deployment descriptor. Dale clic a Finish.
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2019/12/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

5. Ahora que ya has creado tu proyecto vamos realizar unas configuraciones para que todo fluya como debe
ser. Para hacer más sencilla las cosas vamos a configurar el proyecto con Maven. Entonces, así las cosas,
haz lo siguiente:

Haz clic derecho sobre el proyecto que acabaste de crear, selecciona la opción Configure ⇒ Convert to
Maven project. Seleccionando esta opción te aparecerá esta opción de configuración:

6. Si no estas muy familiarizado con Maven, puedes dejar estas opciones tal cual nos la recomiendo Eclipse.
Haz clic en Finish y con esto Eclipse se encargará de configurar el proyecto como un proyecto Maven.
Cuando se haya terminado de aplicar la configuración, Eclipse te dejará abierto el archivo pom.xml. En esta
instancia nos vamos a preocupar por agregar las dependencias necesarias para que nuestra aplicación
WEB funcione con JSF. Para ello, después de la etiqueta </build> agrega lo siguiente:

Resolución CS N° 076-04-2016-04-20
 Ingeniería de Sistemas Docente:
Período Lectivo: Septiembre 2018 –
Sistemas de Información
Febrero 2019

<dependencies>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.13</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.13</version>
</dependency>
</dependencies>
La configuración en el pom.xml te debe quedar como la que aparece a continuación:

7. Ahora vamos a configurar el descriptor WEB web.xml. Por lo general Eclipse lo deja ubicado en el
directorio WebContent/WEB-INF. Abrelo y copia lo siguiente en el archivo:

<welcome-file-list>
<welcome-file>/faces/index.xhtml</welcome-file>
</welcome-file-list>

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2019/12/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

Dentro de las etiquetas <welcome-file-list></welcome-file-list>, yo te recomendaría que dejaras solo

esta línea:

<welcome-file>/faces/index.xhtml</welcome-file>

8. De acuerdo a lo anterior, tu configuración debería ser como la siguiente:

9. Ya que has terminado con las configuraciones, vamos a hacer una pruebita de que todo esta bien
configurado. Para ello vamos a crear un Controlador, que en el argot de JSF sería un Managed Bean y
vamos a crear una página con extensión .xhtml.

Primero, vamos a crear nuestro controlador o Managed Bean. Haz clic derecho sobre el directorio src/
ubicado en Java Resources y selecciona la opción New -> Class.

Resolución CS N° 076-04-2016-04-20
 Ingeniería de Sistemas Docente:
Período Lectivo: Septiembre 2018 –
Sistemas de Información
Febrero 2019

10. Dale un nombre a tu paquete (package) y colocale un nombre a tu nuevo controlador. Para este caso
nuestro paquete sera com.ejerciciojsf.controlador y nuestro controlador se llamará Login.java. Después de
haber puesto lo anterior, da clic en Finish.

Ahora, vamos dejarle la anotación @ManagedBean y lo vamos a dejar con un scope de sesión
(@SessionScoped). Aqui te dejo el ejemplo de como deberá quedar:

11. Creado nuestro Managed Bean, vamos a proceder a crear nuestra página WEB. Vamos a crear nuestra
página con formato .xhtml presionando clic derecho sobre nuestros directorio WebContent y vamos a
seleccionar la opción New ->XHTML Page.
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2019/12/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

12. Da clic en Finish. Luego de esto, Eclipse te creará una página en blanco. Código de prueba:

<!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:rich="http://richfaces.org/rich"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">

<h:head>
<link rel="stylesheet" href="../css/nuevaEtapa.css" />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'
type='text/css'/>
</h:head>

<h:body>
<h1>Nueva Etapa</h1>
<a class="links" href="Administrador.xhtml">Administrador</a>
<div id="response"></div>
<h:form class="form" enctype="multipart/form-data">
<div class="input-wrapper" >
<h:inputText value="#{etapaBean.origen}" class="inputs" />
<h:inputText value="#{etapaBean.destino}" class="inputs" />
<h:inputText value="#{etapaBean.fecha}" class="inputs" />
<h:inputText value="#{etapaBean.hora}" class="inputs" />
<h:inputText value="#{etapaBean.categoria}" class="inputs" />
<h:inputText value="#{etapaBean.tipo}" class="inputs" />
<h:inputText value="#{etapaBean.nomPuerto}" class="inputs" />
<h:inputText value="#{etapaBean.alturaPto}" class="inputs" />
<h:inputText value="#{etapaBean.nomMapa}" class="inputs" />

Resolución CS N° 076-04-2016-04-20
 Ingeniería de Sistemas Docente:
Período Lectivo: Septiembre 2018 –
Sistemas de Información
Febrero 2019

<p:fileUpload fileUploadListener="#{fileUploadController.upload}"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" description="Select Images"
></p:fileUpload>
<img src="" class="imagen" width="200px" />
</div>
<h:commandButton class="btn" action="#{etapaBean.guardarEtapa()}"
value="Guardar Etapa" id="cmdbtn" />
</h:form>
</h:body>

</html>

La puesta en funcionamiento de las librerías PrimeFaces, se vuelve accesible gracias a la gran

comunidad que desarrolla estos diseños, y se pueden accedes con facilidad en la página oficial:
https://www.primefaces.org/showcase/ui/button/commandButton.xhtml

<h:body>
<p:outputLabel value="Hola Mundo PrimeFaces"/>
<br />
<p:link value="UPS" href="https://www.ups.edu.ec/"/>
</h:body>

ACTIVIDAD PROPUESTA:

De la página oficial de PrimeFaces, desarrollar ejercicios que se puedan aplicar en el desarrollo web de su proyecto.
Aplicar cualquier tipo de diseño y desarrollar un entorno de prueba.
 VICERRECTORADO DOCENTE Código: GUIA-PRL-001

CONSEJO ACADÉMICO Aprobación: 2019/12/06

Formato: Guía de Práctica de Laboratorio / Talleres / Centros de Simulación

RESULTADO(S) OBTENIDO(S):

- La gran cantidad de librerías permite una adaptación simple a cualquier proyecto independiente, además
de la posibilidad de crear nuevas plantillas.

Docente / Técnico Docente:

Firma: _______________________________

Resolución CS N° 076-04-2016-04-20
Ingeniería de Sistemas Docente:
Período Lectivo: Septiembre 2018 –
Sistemas de Información
Febrero 2019