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.
- El proyecto Web EGL debe tener soporte para la interfaz de componentes JSF.
Consulte
la sección Añadir soporte de interfaz de componentes JSF a un proyecto Web EGL.
- El archivo de código de página del JSP de Faces debe contener la siguiente sentencia
de importación:
import com.ibm.egl.jsf.*
- Debe declarar una variable de tipo UIViewRoot dentro del pageHandler.
- Debe especificar el nombre de la variable UIViewRoot en la propiedad
viewRootVar de pageHandler.
Para cambiar el estilo de un componente JSF desde un pageHandler de EGL,
siga
estos pasos:
- 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.
- En la ventana Asistente de código fuente de EGL, seleccione el componente JSF al que
desee acceder.
- 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");
- 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.