Lunes, 14 Julio 2014 20:33

Aplicar estilo CSS en JSF

Escrito por 
Valora este artículo
(0 votos)

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:


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,

Visto 3457 veces

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.