Aplicar Estilo Css en Jsf
-
Upload
yahir-mancilla-cabanas -
Category
Documents
-
view
3.397 -
download
9
Transcript of Aplicar Estilo Css en Jsf
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.
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.