Cambiar el estilo de un componente JSF

Puede cambiar el aspecto de un componente JSF mediante código EGL, como por ejemplo cambiar el color del texto. Para efectuar un cambio de mayores dimensiones en el aspecto del componente cambiando su clase de estilo, consulte la sección Cambiar la clase de estilo de un componente JSF. Para obtener más información acerca de los estilos y las clases de estilo, consulte la sección Definir estilos de página para un sitio Web - visión general.

Esta tarea tiene los siguientes prerrequisitos. Para obtener más información, consulte la sección Acceso a un componente JSF desde un pageHandler.
Para cambiar el estilo de un componente JSF desde un pageHandler de EGL, siga estos pasos:
  1. En una línea vacía de una función del pageHandler, pulse Control+Mayús+Z. Se abrirá la ventana Asistente de código fuente EGL, que visualizará los componentes JSF de la página.
  2. En la ventana Asistente de código fuente de EGL, seleccione el componente JSF al que desee acceder.
  3. Pulse Aceptar.
    El asistente de código fuente EGL añadirá dos líneas de código EGL al pageHandler. La primera línea define una variable EGL de un tipo coincidente con el componente JSF que ha seleccionado. La segunda línea asocia esa variable con el componente JSF. Por ejemplo, el código para acceder a un componente de texto de entrada JSF puede ser parecido a este:
    text1 HtmlInputText;
    text1 = myViewRoot.findComponent("form1:text1");
  4. Utilizando la variable EGL creada por el asistente de código fuente, cambie el estilo del componente JSF con la función setStyle. Por ejemplo, para cambiar al color rojo el texto de un campo de texto, añada este código:
    text1.setStyle("color : red");
    Cuando se ejecuta este código, cambia el atributo de estilo del campo de entrada. En este ejemplo, el código HTML visualizado por el navegador es el siguiente:
    <input id="form1:text1" type="text" name="form1:text1" style="color : red" />
    El atributo de estilo nuevo sobreescribe los atributos de estilo anteriores. Para realizar más de un cambio en el estilo del componente, separe los cambios con signos de punto y coma (;). Por ejemplo, para cambiar el color a rojo y el tamaño a 20 puntos, utilice este código:
    text1.setStyle("color : red; font-size: 20pt");
A continuación figuran algunos ejemplos de otros cambios que puede realizar en el estilo de un componente. No todos los estilos son compatibles con todos los componentes JSF.
text1.setStyle("font-size : 20pt");
Establece el tamaño del font del componente en 20 puntos
text1.setStyle("text-align: center");
Centra el texto del componente.
text1.setStyle("border-style : solid; border-color : red");
Añade un borde rojo formado por una línea continua alrededor del componente.
text1.setStyle("font-weight : bold");
Muestra en negrita el texto del componente.
text1.setStyle("height : 50px");
Muestra el componente con una resolución de 50 píxels.

Conceptos relacionados
Árbol de componentes JSF
Propiedad viewRootVar

Tareas relacionadas
Añadir soporte de interfaz de componentes JSF a un proyecto Web EGL
Acceso a un componente JSF desde un pageHandler
Cambiar la clase de estilo de un componente JSF
Cambiar el destino de un enlace JSF
Habilitar e inhabilitar componentes JSF
Establecer el tamaño de una imagen JSF
Establecer manejadores de eventos para un componente JSF
Establecer propiedades de tabla de datos JSF
Definir
estilos de página para un sitio Web - visión general

Consulta relacionada
Componentes de acceso del árbol de componentes

Comentarios
(C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.