PROYECTO DE PRIMFACES “HOTEL”

Iniciamos nuestro proyecto abriendo netbeans 8.0

Ya abierto crearemos nuestro proyecto damos clic en New Proyect

1

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

Project Name cambiamos el nombre por defecto EHotel y siguiente

2

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

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

3

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

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.

4

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.

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

5

En esta imagen le das siguiente driver yselecciona MySql y le das en siguiente

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

6

Si realizaste el paso anterior como lo hice yo ya te deberán aparacer 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

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í.

7

CREACION DE LAS PAGINAS DE PRIMEFACES

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

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

8

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

En esta parte les daremos nombres a la Sessió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.

9

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

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>

12

<p:graphicImage value="pdf.jpg" width="24" /><p:dataExporter type="pdf" target="datalist" fileName="datalist" pageOnly="true" /></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