Este documento describe los pasos para crear un proyecto de hotel usando PrimeFaces en Java con conexión a una base de datos MySQL. Explica cómo crear el proyecto, agregar entidades desde la base de datos, crear páginas, habilitar botones de exportación a Excel, PDF y XML, cambiar el tema, agregar login y fondo de pantalla.

1. 1
PROYECTO DE PRIMFACES “HOTEL”
Iniciamosnuestroproyectoabriendonetbeans8.0
Ya abiertocrearemosnuestroproyecto damosclicenNew Proyect
SeleccionamosJavaWeby despuésWebAplication,le damossiguiente

2. 2
ProjectName cambiamosel nombre pordefectoEHotel ysiguiente
Le damossiguiente yaqaquí no hacemosningúncambio

3. 3
Antesde terminarseleccionamosJavaServerFacesyesperamosaq se habrá un cuadro por debajo
Seleccionamosel primercasillerollamado“primefaces”de componentsyle damosterminar

4. 4
Así nosquedaya nuestroproyectoyacreado
CONECCION CON LA BASE DE DATOS MYSQL
Ahoracomienzalointeresante lacreaciónde nuestroproyecto“EHotel”conectandoconlabase
de datos mysql.
Ahorale damos clicenEHotel – nuevo– entityclasesfromdatabase se abriráun cuadro donde
nos pide el nombre de la base de datos.

5. 5
Aquí seleccionamosNew DataSource le damosunnombre “EHOTEL” enData base Connectionle
das ennew data base y le das enok.
En estaimagenle das siguientedrivery seleccionaMysql yle dasensiguiente

6. 6
Al llegarhastaaquí sololo que tienesque cambiaresdonde dice Database le ponesel nombre de
tu base de datos que sincambiarle nadami es “hotel”
Y le das terminar
Si realizaste el pasoanteriorcomolohice yo ya te deberán aparecertodastus tablasennuestro
cuadro asi como estáaquí, ahora damosclic en“AddAll>>” y se pasaran las tablasde un ladoal
otro y de aquí le das ensiguiente

7. 7
Una vez que ya estásen EntityClasses donde dice Package tendrásque darle unnombre
“entidades”yle dasenterminarya que no habrá nada masq hacer aquí.
CREACION DE LAS PAGINAS DE PRIMEFACES
Vueltahacemosclicennuestroproyectole damosennuevoyahora seleccionamos primefaces
pagesfromEntity Classes.

8. 8
Una vez aquí nosaparecerátodas lastablasde nuestrabase de datosque anteriormente ya
llamamosyguardamoscon entidades,igualmentehacemosclicen“AddAll>>” y le pasamosde
un cuadro al otro lado
Nosquedaraalgo así y despuésle damosensiguiente

9. 9
En estaparte lesdaremosnombresala Sesiónconbeans,Backingconcontrollersya Converter
con converterle hacemosunpoco máspequeñalapantallaparadarle en terminar.
Aquí se comenzaraa cargar todoslosdatos enlistade nuestroproyecto

10. 10
Ahoravamos a serviciosdamosclicenServersymandamosa correr a nuestroservidorGlassfish
Server

11. 11
VISIBILIDAD DE BOTONES
Aquí vamosa irnosla carpetaprincipal WebPagesdonde estánnuestrastablasencarpetas
abrimoslaq deseemos“reservaciónDet”yabrimosList.xhtmldentrode estonosvamosal final y
endonde dice style=”visibility;hidden”estaspalabrasborramosyaque harán q aparezcalos
botones
Al eliminarestalíneade códigonosquedaraalgoasí.

12. 12
EXPORTACIÓN O DESCARGA, EXCEL, XML Y PDF
Lo q realizaremosesagregarlasfuncionesexportaciónodescarga,excel,xml ypdf paraello
dentrode donde borramos style=”visibility;hidden”debajode estoseleccionamoscomomuestra
enla imagenylo cambiamosporel códigoq 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" />

13. 13
</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:includesrc="/confirmation.xhtml"/>
</h:form>
</ui:composition>
Al copiar lael códigonos quedaraalgoasí sololoque nosfalta esbuscar lasimágenesparaque se
visualice mejoryagradable a lavista

14. 14
Desde lawebdescargamosimágenesylaagregamosa nuestroproyecto
Al mandar a correr el proyectovisualizandolosbotonesyadjuntandolaexportación luciráconlas
imágenesalgoasí

15. 15
CAMBIO DE TEMA DE NUESTRO TRABAJO
Ahoracambiaremosel temade nuestrotrabajo,nosdescargamosel temade mas nos parezcauna
vezdescargoy guardadoen unacarpeta, nosvamosa libreríasdamosclicderechoenadd
jar/folder
Seleccionamosel temaque descargamosenmi caso“ui-darkness”ydamosclicenabrir

16. 16
Una vez hechoestose nosagregara a las librerías,asícomo estaseleccionado
Ahoranos vamosa WEB-INF– y le damosdoble clicenweby pegamosel siguiente códigodebajo
de </welcome-file-list>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>ui-darkness</param-value> comentario“/*este nombre variasegunel nombre
del temaque han escojido*/
</context-param>

17. 17
Ahorasolole damos clicderechorun/correr y la aplicaciónse abrirácon nuestronuevotemaasí

18. 18
LOGIN
En la parte que esta primefacescambiamosde nombre porloginyasemosel
llamadoal logine ingresamosel códigoque estádebajoenlaimagen
En donde dice index.xhtml –cambiamosdonde dice primefacesporloginparaque haga el
correcto llamado
Al darle doble clickole mandamosa ejecutarnuestroproyectose abriráasi

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

20. 20
El resultado de colocar este código es