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:

  1. Seleccione Archivo > Nuevo > Tema en la barra de menús.
  2. Teclee Auction en el campo Título.
  3. 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.
  4. Pulse Siguiente.
  5. 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.

  6. Pulse Finalizar.
  7. Expanda Elements > Themes en la vista Esquema y seleccione Auction.
  8. 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:
    Configuración de portal con un tema nuevo

  9. 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:

  1. En primer lugar, importará una imagen de cabecera nueva en el proyecto:
    1. En la barra de menús, seleccione Archivo > Importar. Aparece el diálogo Importar.
    2. En Seleccionar un origen de importación pulse Sistema de archivos.
    3. Pulse Siguiente.
    4. 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 bajo la vía de acceso de instalación del producto en el sistema de archivos local.
    5. 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\samples
      donde x: es la vía de acceso que contiene el conector com.ibm.etools.portal.examples.application_6.0.0 en su sistema.
    6. Seleccione auction.gif como el destino de la importación y pulse Aceptar.
    7. Pulse Examinar junto al campo En carpeta y especifique AuctionPortal/PortalContent/themes/html/Auction.
    8. Pulse Finalizar.

      El asistente importa el archivo en el área de trabajo.

  2. 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.

  3. Desplace y seleccione el icono Fondo de cabecera en la Vista previa.
  4. Seleccione Editar regla de estilos [.wpsToolbarBannerBackground] en el menú emergente.
  5. Pulse la propiedad Background en el lado izquierdo del diálogo Establecer propiedades de estilo.
  6. Teclee ../../auction.gif en el campo Imagen.
    Diálogo Establecer propiedades de estilo
  7. Pulse Aceptar.
  8. 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.

    Cabecera nueva

  9. 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.

Condiciones de uso | Comentarios
(C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.