Ejercicio 2.2: Personalizar el sitio de portal
Antes de empezar, debe realizar el Ejercicio 2.1: Crear un portal nuevo
para visualizar la aplicación de portlet.
Crear un tema nuevo
En el proceso de creación de una aplicación de portal, puede optar por crear un tema nuevo en
Portal Designer. Los temas proporcionan el aspecto general de la aplicación de portal e incorporan
muchos elementos del diseño de portales, incluyendo imágenes, navegación, barras de herramientas y
efectos visuales de nivel de página. Siga estos pasos para crear un tema nuevo para el sitio de
portal desarrollado en esta guía de aprendizaje:
- Seleccione Archivo > Nuevo > Tema en la barra de menús.
- Teclee Auction en el campo Título.
- Desplácese y seleccione el tema Corporate para que sea el tema origen. Es mucho
más fácil basar un tema nuevo en un tema existente para que no tenga que crear desde cero todos los
elementos de tema necesarios.
- Pulse Siguiente.
- Seleccione la textura Shadow en la lista de texturas disponibles y pulse Establecer como
textura predeterminada para que Shadow sea la textura predeterminada del tema Auction nuevo.
Una textura es el marco alrededor de cada portlet en una página de portal. A diferencia de los
temas, que se aplican al aspecto general del portal, los temas se limitan al aspecto de cada
portlet que inserte en la aplicación de portal. Por omisión, solo hay una selección limitada de
texturas disponibles para cada tema.
- Pulse Finalizar.
- Expanda Elements > Themes en la vista Esquema y seleccione Auction.
- En la vista Propiedades, marque el recuadro de selección Valor por omisión para aplicar
el tema nuevo a la aplicación de portal.
El cambio se aplicará inmediatamente a la Configuración
de portal:

- Guarde la Configuración de portal.
En esta parte del ejercicio, actualizará estilos, temas y texturas en la aplicación del portal
Auction utilizando CSS Designer y Page Designer.
Cambiar la imagen de cabecera del tema actual
Para sustituir la imagen de cabecera del tema por omisión del portal Auction, siga estos pasos:
- En primer lugar, importará una imagen de cabecera nueva en el proyecto:
- En la barra de menús, seleccione Archivo > Importar. Aparece el diálogo Importar.
- En Seleccionar un origen de importación pulse Sistema de archivos.
- Pulse Siguiente.
- Puesto que los distintos productos de Rational utilizan distintas ubicaciones destino de
instalación, debe abandonar la interfaz de usuario del producto para localizar el conector que
contiene la imagen de cabecera nueva. Utilice una herramienta de búsqueda de archivos para
encontrar la carpeta del conector com.ibm.etools.portal.examples.application_6.0.0.1
bajo la vía de acceso de instalación del producto en el sistema de archivos local.
- Vuelva al asistente Importación y pulse Examinar junto al campo De directorio. Navegue al directorio siguiente:
x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
donde x: es la vía de acceso que contiene el conector
com.ibm.etools.portal.examples.application_6.0.0.1 en el sistema.
- Seleccione auction.gif como el destino de la importación y pulse Aceptar.
- Pulse Examinar junto al campo En carpeta y especifique
AuctionPortal/PortalContent/themes/html/Auction.
- Pulse Finalizar.
El asistente importa el archivo en el área de trabajo.
- Con el archivo Configuración de portal para el proyecto AuctionPortal abierto, seleccione
Editar estilo en el menú emergen Diseñador de portales. Esto abrirá el archivo Styles.css en
CSS Designer. Styles.css es la hoja de estilos predeterminada para el tema predeterminado de la
aplicación.
CSS Designer proporciona dos vistas de los estilos definidos para los archivos CSS: la Vista
previa (en la parte izquierda) que proporciona ejemplos visualizados de las reglas de estilo tal
como aparecen en un navegador que representa un recurso Web y la vista Fuente (en la parte derecha)
que muestra una versión de texto del archivo CSS. Puede editar estilos utilizando cualquiera de
estas vistas.
- Desplace y seleccione el icono Fondo de cabecera en la Vista previa.
- Seleccione Editar regla de estilos [.wpsToolbarBannerBackground] en el menú emergente.
- Pulse la propiedad Background en el lado izquierdo del diálogo Establecer propiedades
de estilo.
- Teclee ../../auction.gif en el campo Imagen.

- Pulse Aceptar.
- Guarde el archivo CSS y cierre CSS Designer. Observe que la imagen de cabecera nueva se aplica
a la página abierta en Portal Designer.

- Guarde y cierre el archivo de configuración de portal.
Puede hacer muchos cambios en un tema, como por ejemplo el diseño de una barra de herramientas
en el área de cabecera utilizando Page Designer. Puede editar el diseño (y el estilo) de un tema y sus
texturas asociadas. Los cambios se almacenan en el archivo default.jsp del tema, en los archivos
control.jsp de las texturas asociadas y en otros archivo JSP relacionados. Además, los cambios realizados en el editor se aplicarán a todos
los usos de este tema en la aplicación de portal.
Ahora está listo para iniciar el Ejercicio 2.3:
Ejecutar la aplicación de portal en el Entorno de prueba de WebSphere Portal.