PROYECTO DE PRIMFACES “HOTEL”Iniciamos nuestro proyecto abriendo netbeans 8.0

Ya abierto crearemos nuestro proyecto damos clic en New Proyect

Seleccionamos Java Web y después Web Aplication, le damos siguiente

1

Project Name cambiamos el nombre por defecto EHotel y siguiente

Le damos siguiente ya q aquí no hacemos ningún cambio

2

Antes de terminar seleccionamos JavaServer Faces y esperamos a q se habrá un cuadro por debajo

Seleccionamos el primer casillero llamado “primefaces” de components y le damos terminar

3

Así nos queda ya nuestro proyecto ya creado

CONECCION CON LA BASE DE DATOS MYSQL

Ahora comienza lo interesante la creación de nuestro proyecto “EHotel” conectando con la base de datos mysql.

Ahora le damos clic en EHotel – nuevo – entity clases from database se abrirá un cuadro donde nos pide el nombre de la base de datos.

4

Aquí seleccionamos New Data Source le damos un nombre “EHOTEL” en Data base Connection le das en new data base y le das en ok.

En esta imagen le das siguiente driver y selecciona Mysql y le das en siguiente

5

Al llegar hasta aquí solo lo que tienes que cambiar es donde dice Data base le pones el nombre de tu base de datos que sin cambiarle nada mi es “hotel”

Y le das terminar

Si realizaste el paso anterior como lo hice yo ya te deberán aparecer todas tus tablas en nuestro cuadro asi como está aquí, ahora damos clic en “Add All>>” y se pasaran las tablas de un lado al otro y de aquí le das en siguiente

6

Una vez que ya estás en Entity Classes donde dice Package tendrás que darle un nombre “entidades” y le das en terminar ya que no habrá nada mas q hacer aquí.

CREACION DE LAS PAGINAS DE PRIMEFACES

Vuelta hacemos clic en nuestro proyecto le damos en nuevo y ahora seleccionamos primefaces pages from Entity Classes.

7

Una vez aquí nos aparecerá todas las tablas de nuestra base de datos que anterior mente ya llamamos y guardamos con entidades, igualmente hacemos clic en “Add All>>” y le pasamos de un cuadro al otro lado

Nos quedara algo así y después le damos en siguiente

8

En esta parte les daremos nombres a la Sesión con beans, Backing con controllers y a Converter con converter le hacemos un poco más pequeña la pantalla para darle en terminar.

Aquí se comenzara a cargar todos los datos en lista de nuestro proyecto

9

Ahora vamos a servicios damos clic en Servers y mandamos a correr a nuestro servidor Glassfish Server

10

VISIBILIDAD DE BOTONES

Aquí vamos a irnos la carpeta principal Web Pages donde están nuestras tablas en carpetas abrimos la q deseemos “reservaciónDet” y abrimos List.xhtml dentro de esto nos vamos al final y en donde dice style=”visibility;hidden” estas palabras borramos ya que harán q aparezca los botones

Al eliminar esta línea de código nos quedara algo así.

11

EXPORTACIÓN O DESCARGA, EXCEL, XML Y PDF

Lo q realizaremos es agregar las funciones exportación o descarga, excel, xml y pdf para ello dentro de donde borramos style=”visibility;hidden” debajo de esto seleccionamos como muestra en la imagen y lo cambiamos por el código q esta debajo

<h:panelGrid columns="2"><p:panel header="Export All Data"><h:commandLink> <p:graphicImage value="excel_icon.jpg" width="24" /><p:dataExporter type="xls" target="datalist" fileName="cars" /></h:commandLink><h:commandLink><p:graphicImage value="pdf.jpg" width="24" /><p:dataExporter type="pdf" target="datalist" fileName="cars" /></h:commandLink><h:commandLink><p:graphicImage value="descarga.jpg" width="24" /><p:dataExporter type="csv" target="datalist" fileName="cars" /></h:commandLink><h:commandLink><p:graphicImage value="Xml.png" width="24" /><p:dataExporter type="xml" target="datalist" fileName="cars" /></h:commandLink></p:panel><p:panel header="Export Page Data"><h:commandLink><p:graphicImage value="excel_icon.jpg" width="24" /><p:dataExporter type="xls" target="datalist" fileName="datalist" pageOnly="true" /></h:commandLink><h:commandLink><p:graphicImage value="pdf.jpg" width="24" /><p:dataExporter type="pdf" target="datalist" fileName="datalist" pageOnly="true" />

12

</h:commandLink><h:commandLink><p:graphicImage value="descarga.jpg" width="24" /><p:dataExporter type="csv" target="datalist" fileName="datalist" pageOnly="true" /></h:commandLink><h:commandLink><p:graphicImage value="Xml.png" width="24" /><p:dataExporter type="xml" target="datalist" fileName="datalist" pageOnly="true" /></h:commandLink></p:panel></h:panelGrid> </p:panel> <ui:include src="/confirmation.xhtml"/> </h:form> </ui:composition>

Al copiar la el código nos quedara algo así solo lo que nos falta es buscar las imágenes para que se visualice mejor y agradable a la vista

13

Desde la web descargamos imágenes y la agregamos a nuestro proyecto

Al mandar a correr el proyecto visualizando los botones y adjuntando la exportación lucirá con las imágenes algo así

14

CAMBIO DE TEMA DE NUESTRO TRABAJO

Ahora cambiaremos el tema de nuestro trabajo, nos descargamos el tema de mas nos parezca una vez descargo y guardado en una carpeta, nos vamos a librerías damos clic derecho en add jar/folder

Seleccionamos el tema que descargamos en mi caso “ui-darkness” y damos clic en abrir

15

Una vez hecho esto se nos agregara a las librerías, así como esta seleccionado

Ahora nos vamos a WEB-INF – y le damos doble clic en web y pegamos el siguiente código debajo de </welcome-file-list>

<context-param> <param-name>primefaces.THEME</param-name> <param-value>ui-darkness</param-value> comentario “/*este nombre varia segun el nombre del tema que han escojido*/</context-param>

16

Ahora solo le damos clic derecho run/correr y la aplicación se abrirá con nuestro nuevo tema así

17

LOGIN

En la parte que esta primefaces cambiamos de nombre por login y asemos el llamado al login e ingresamos el código que está debajo en la imagen

En donde dice index.xhtml – cambiamos donde dice primefaces por login para que haga el correcto llamado

Al darle doble click o le mandamos a ejecutar nuestro proyecto se abrirá asi

18

INSERTANDO IMAGEN DE FONDO DE PANTALLA

Para insertar imagen de fondo a la pantalla principal es algo muy sencillo solo tenemos que insertar este código.

<p:graphicImage value="imagen/HOTEL.jpg" />

Este codigo va dentro de template.xhtml

19

El resultado de colocar este código es

20