Aplicar Estilo Css en JSF

APLICAR ESTILO CSS EN JSF
En este nuevo post le daremos estilo a nuestra pagina index.xhtml con cdigo jsf, aprenderemos como crear un archivo css e incluirlo en nuestra pagina. Atraves de lneas css modificaremos el estilo nuestra tabla datatable jsf que estuvimos viendo en ejemplos anteriores, hacindola mas presentable y amigable al usuario. En este post no ensearemos css, tansolamente veremos como crear un archivo css y referenciar componentes jsf. Podemos seguir nuestro ultimo post de ejemplo:
VALIDACION EN JSF, VALIDANDO ENTRADA A LA TABLA DATATABLE JSF.
ESTILO CSS EN JSF.

En jsf el estilo se puede aplicar de dos maneras

Atravez de el atributo style de cualquier tag jsf. Atravez de un archivo css en un archivo diferente.
Atravez de el atributo style de cualquier tag jsf. Todas las etiquetas jsf contienen este atributo, un ejemplo seria el siguiente <h:outputText value="NOMBRE" style="margin: 12px; color: #FFFFFF"/> En donde a la etiqueta outputtext le estamos aplicando estilo atraves de su atributo style, en donde le damos un margen general (superior, inferior derecho e izquierdo) de 12 px y un color hexadecimal. Esta no es la mejor manera de hacerlo, ya que estaramos mezclando el diseo con la vista de los componentes jsf , pero es valido. Atravez de un archivo css en un archivo diferente. Esta es la mejor manera de hacerlo, en un archivo diferente en donde estarn todas nuestras directivas css. Todos los componentes jsf cuantan con los siguientes atributos:

Id Styleclass
Atraves de estos atributos es posible aplicarles estylo css a todos los componentes jsf. Por ejemplo EN CSS #texto{ color: blue; font-size: 20px; } ETIQUETA JSF <h:outputText id="texto" value="ESTO ES UN TEXTO"></h:outputText> O bien por medio del atributo styleclass
EN CSS .clase{ color: blue; font-size: 20px; } ETIQUETA JSF <h:outputText id="texto" value="ESTO ES UN TEXTO" styleClass="texto"></h:outputText> Hay que tener en cuenta que el atributo id, solo se lo puede referenciar en css como lo hicimos anteriormente cuando no es hija de otra etiqueta jsf, es decir si tenemos <h:form> <h:outputText id="texto" value="ESTO ES UN TEXTO" styleClass="texto"></h:outputText> </h:form> El atributo id como lo hicimos anteriormente, css no lo referenciara pero si lo hara por el atributo styleclass.
Despus de esta sencilla explicacin modificaremos nuestra tabla datatable jsf, para ello primero crearemos un archivo css de la siguiente manera: Crearemos el archivo css en el mismo lugar que el index.xhtml para no tner problemas de path (fcilmente se lo podra hacer en otra carpeta especial para nuestro archivos css, que seria la mejor manera).
Le damos el nombre, en este caso estilo.css, en este caso estilo.css
Y ya tenemos creado nuestro archivo css Ahora incluiremos las siguientes lneas css 1. .tabla{ 2. border: solid 2px #2E2EFE ; 3. border-collapse: collapse; 4. color: #424242; 5. font-weight: bold; 6. } 7. .cabeceraTabla{
8. color: #FFFFFF; 9. background: #0080FF; 10. padding:5px; 11. } 12. .fila1{ 13. text-align: center; 14. background:#FFFFFF; 15. 16. } 17. .fila2{ 18. text-align: center; 19. background:#EFEFFB; 20. border: solid 2px #2E2EFE; 21. } 22. .msjError{ 23. color: #FF0000; 24. font-weight: bold; 25. margin: 0px 0px 0px 15px; 26. } 27. .form{ 28. border: solid 2px #2E2EFE; 29. width: 800px; 30. padding: 20px; 31. } 32. .label{ 33. width: 300px; 34. } 35. .txtNombre, .txtApellido{ 36. margin-left: 90px; 37. width: 200px; 38. } 39. .txtDireccion{ 40. margin-left: 83px; 41. width: 250px; 42. } 43. .txtMail{ 44. margin-left: 114px; 45. width: 250px; 46. } 47. .txtSectorEmpr{ 48. margin-left: 11px; 49. width: 20px; 50. } 51. .txtSueldoBas{ 52. margin-left: 54px;
53. width: 50px; 54. } 55. .txtFechaNac{ 56. margin-left: 51px; 57. width: 80px; 58. } 59. .txtNombre, .txtApellido, .txtDireccion, .txtMail, .txtSectorEmpr, .txtSueldoBas, .txtFechaNac{ 60. font: 15px bold; 61. color: #045FB4; 62. } 63. .texto{ 64. color: blue; 65. font-size: 2px; 66. }
Nuestro index.xhtml queda de la siguiente manera 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml" 3. xmlns:h="http://java.sun.com/jsf/html" 4. xmlns:f="http://java.sun.com/jsf/core" 5. > 6. <h:head> 7. <title>Ejemplo JSF</title> 8. <link href="estilo.css" type="text/css" rel="stylesheet" /> 9. </h:head> 10. <h:body> 11. <h:form> 12. <h:dataTable headerClass="cabeceraTabla" rowClasses="fila1,fila2" styleClass="tabla" id="tabla" value="#{lista.lista}" binding="#{lista.tabla}" var="lis"> 13. <h:column> 14. <f:facet name="header"> 15. <h:outputText value="NOMBRE"/> 16. </f:facet> 17. <h:outputText value="#{lis.nombre}"/>
18. </h:column> 19. <h:column> 20. <f:facet name="header"> 21. <h:outputText value="APELLIDO"/> 22. </f:facet> 23. <h:outputText value="#{lis.apellido}"/> 24. </h:column> 25. <h:column> 26. <f:facet name="header"> 27. <h:outputText value="DIRECCION"/> 28. </f:facet> 29. <h:outputText value="#{lis.direccion}"/> 30. </h:column> 31. <h:column> 32. <f:facet name="header"> 33. <h:outputText value="FECHA NAC."/> 34. </f:facet> 35. <h:outputText value="#{lis.fechaNacimiento}"/> 36. </h:column> 37. <h:column> 38. <f:facet name="header"> 39. <h:outputText value="SUELDO BASICO"/> 40. </f:facet> 41. <h:outputText value="#{lis.sueldoBasico}"/> 42. </h:column> 43. <h:column> 44. <f:facet name="header"> 45. <h:outputText value="SECTOR EMPRESA"/> 46. </f:facet> 47. <h:outputText value="#{lis.sectorEmpresa}"/> 48. </h:column> 49. <h:column> 50. <f:facet name="header"> 51. <h:outputText value="MAIL"/> 52. </f:facet> 53. <h:outputText value="#{lis.mail}"/> 54. </h:column> 55. <h:column>
56. <f:facet name="header"> 57. <h:outputText value="SELECCIONAR"/> 58. </f:facet> 59. <h:commandLink action="#{lista.seleccionLista}"> 60. SELECCION 61. </h:commandLink> 62. </h:column> 63. </h:dataTable> 64. </h:form> 65. 66. 67. <h:form styleClass="form"> 68. <h:outputLabel styleClass="label" for="nombre"> Nombre </h:outputLabel> 69. <h:inputText styleClass="txtNombre" id="nombre" required="true" value="#{lista.txtNombre}"> 70. <f:validateLength minimum="3" maximum="30"/></h:inputText> 71. <h:message styleClass="msjError" for="nombre"></h:message> 72. <h:outputLabel for="apellido"> Apellido </h:outputLabel> 73. <h:inputText styleClass="txtApellido" id="apellido" required="true" value="#{lista.txtApellido}"> 74. <f:validateLength minimum="3" maximum="30"/></h:inputText> 75. <h:message styleClass="msjError" for="apellido"></h:message> 76. <h:outputLabel for="direccion"> Direccion </h:outputLabel> 77. <h:inputText styleClass="txtDireccion" id="direccion" required="true" value="#{lista.txtDireccion}"> 78. <f:validateLength minimum="3" maximum="50"/></h:inputText> 79. <h:message styleClass="msjError" for="direccion"></h:message> 80. <h:outputLabel for="mail"> Mail </h:outputLabel> 81. <h:inputText styleClass="txtMail" id="mail" required="true" validator="#{lista.validaMail}" value="#{lista.txtMail}" ></h:inputText>
82. <h:message styleClass="msjError" for="mail"></h:message> 83. <h:outputLabel for="fechaNac"> Fecha de Nac. </h:outputLabel> 84. <h:inputText styleClass="txtFechaNac" id="fechaNac" required="true" value="#{lista.txtFechaNac}"> 85. <f:convertDateTime pattern="dd/MM/yyyy"/></h:inputText> 86. <h:message styleClass="msjError" for="fechaNac"></h:message> 87. <h:outputLabel for="sectorEmpr"> Sector de la Empresa </h:outputLabel> 88. <h:inputText styleClass="txtSectorEmpr" id="sectorEmpr" required="true" value="#{lista.txtSectorEmpr}"> 89. <f:validateLongRange minimum="0" maximum="11"/></h:inputText> 90. <h:message styleClass="msjError" for="sectorEmpr"></h:message> 91. <h:outputLabel id="te" for="sueldoBasico"> Sueldo Basico </h:outputLabel> 92. <h:inputText styleClass="txtSueldoBas" id="sueldoBasico" required="true" converter="#{Double}" value="#{lista.txtSueldoBas}"> 93. <f:validateDoubleRange minimum="0" maximum="5000"/> </h:inputText> 94. <h:message styleClass="msjError" for="sueldoBasico"></h:message> 95. <h:commandButton value="Agregar" action="#{lista.cargarLista}"></h:commandButton> 96. <h:commandButton value="Modificar" action="#{lista.modificarLista}"></h:commandButton> 97. <h:commandButton value="Eliminar" action="#{lista.eliminarLista}"></h:commandButton> 98. </h:form> 99. 100. </h:body> 101. 102. </html> Vemos que solamente utilizamos el atributo styleclass de las etiquetas jsf. Tambin podemos observar que para la tabla utilizamos headerClass="cabeceraTabla" : atributo especias del componente datatable para dar estilo a la cabecera de la tabla.
rowClasses="fila1,fila2" : atributo especial del componente datatable para dar estilo a las filas de la tabla, tambin existe en los datatable el atributo columnClasses="", para dar estilo a las columnas , footerclass para el pie de la tabla y captionClass="" para dar estilo al titulo. Adems a nuestro index.xhtml incluiremos la referencia a nuestro archivo css, con la siguiente linea (lo ubicamos anteriormente en la misma carpeta que el index.xhtml) <link href="estilo.css" type="text/css" rel="stylesheet" />
Bien esas son todas las modificaciones que haremos para hacer mas presentable nuestra tabla de ejemplo. El arbol de proyecto queda asi
Ejecutamos el proyecto y el resultado debera ser el siguiente.
Esto es todo por ahora, es sencillo, claro que se puede hacer cosas mejores, solo es cuestin de meterse mas en el tema, tanto en css como en jsf.

Aplicar Estilo Css en JSF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Aplicar Estilo Css en JSF

Încărcat de

Drepturi de autor:

Formate disponibile

APLICAR ESTILO CSS EN JSF

VALIDACION EN JSF, VALIDANDO ENTRADA A LA TABLA DATATABLE JSF.

ESTILO CSS EN JSF.

Le damos el nombre, en este caso estilo.css, en este caso estilo.css

Ejecutamos el proyecto y el resultado debera ser el siguiente.

S-ar putea să vă placă și