Ejercicio 1.7: Personalizar el sitio de portal

Antes de empezar, debe realizar el Ejercicio 1.6: 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.

  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. Pulse Examinar junto al campo De directorio y navegue al directorio siguiente: <dir_instal>/portal/eclipse/plugins/com.ibm.etools.portal.examples.application_númeroVersión/samples, donde <dir_instal> es el directorio de instalación de Rational Developer.
    5. Seleccione auction.gif como destino de la importación.
    6. Pulse Examinar junto al campo En carpeta y especifique AuctionPortal/PortalContent/themes/html/Auction.
    7. 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.

Cambiar el diseño de una barra de herramientas en el área de cabecera

Puede hacer 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, incluyendo PageBarInclude.jsp, por ejemplo. Además, los cambios realizados en el editor se aplicarán a todos los usos de este tema en la aplicación de portal.

  1. Con el archivo Configuración de portal para el proyecto AuctionPortal abierto, seleccione Editar tema en el menú emergen Diseñador de portales. Esto abrirá el archivo Default.jsp en Page Designer.

    Page Designer proporciona una representación visualizada del tema y las texturas asociadas.

  2. Seleccione el área de barra de herramientas tal como se muestra en esta imagen:
    Page Designer Observe que la pestaña Vista previa de Page Designer no está soportada para la representación de temas de portal.
  3. En la vista Propiedades verá que el valor de jsp:directive.include es ./ToolBarInclude.jsp. Para cambiar el código de la barra de herramientas, pulse el icono Examinar y expanda las carpetas PortalContent > themes > html. A continuación, seleccione una de las carpetas de tema, como por ejemplo Engineering y elija el archivo ToolBarInclude.jsp en ese directorio. Después de pulsar Aceptar verá la barra de herramientas nueva en la página de diseño.

    En algunos casos, cuando es difícil seleccionar elementos de tema individuales, considere la posibilidad de utilizar la vista Esquema para encontrar los elementos específicos que desee actualizar. Si selecciona un nodo en la vista Esquema, la selección se sincroniza en el editor y en la vista Propiedades.

  4. Guarde el archivo JSP y cierre Page Designer.

Ahora está listo para iniciar el Módulo 2: Revisar la aplicación de portal.

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