APLICAR ESTILO CSS EN JSF

En este nuevo post le daremos estilo a nuestra pagina index.xhtml con código

jsf, aprenderemos como crear un archivo css e incluirlo en nuestra pagina. Atraves de

líneas css modificaremos el estilo nuestra tabla datatable jsf que estuvimos viendo en

ejemplos anteriores, haciéndola mas presentable y amigable al usuario. En este post no

enseñaremos 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 estaríamos mezclando el

diseño 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 estarán 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.

Después de esta sencilla explicación 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 (fácilmente se lo podría 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 líneas 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/xhtml1-

transitional.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. <br></br>

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><br></br>

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><br></br>

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><br></br>

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><br></br>

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><br></br>

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><br></br>

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><br></br><br></br>

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.

También 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, también 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.

Además 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 debería ser el siguiente.

http://www.compujuy.com.ar/ckfinder/userfiles/images/java/PJSF8/Snap4.jpg

Esto es todo por ahora, es sencillo, claro que se puede hacer cosas mejores, solo es

cuestión de meterse mas en el tema, tanto en css como en jsf.