Exercice 2.2 : Personnalisation du site de portail

Avant de commencer, vous devez terminer l'Exercice 2.1 : Création d'un portail pour l'affichage de l'application de portlet.

Création d'un thème

Lors de la création d'une application de portail, vous pouvez choisir de créer un nouveau thème dans Portal Designer. Les thèmes permettent de concevoir l'aspect global de l'application de portail et incluent de nombreux éléments de conception de portail, tels que des images, une technique de navigation, des barres d'outils et des effets visuels au niveau des pages. Pour créer un thème pour le site de portail développé dans ce tutoriel, procédez comme indiqué ci-après.

  1. Sélectionnez Fichier > Nouveau > Thème dans la barre de menus.
  2. Entrez Vente aux enchères dans la zone Titre.
  3. Faites défiler la liste et sélectionnez le thème Corporate comme thème source. Il est plus facile de créer un thème d'après un thème existant, car cela évite de devoir créer tous les éléments de thème obligatoires à partir de rien.
  4. Cliquez sur Suivant.
  5. Sélectionnez l'encadrement Shadow dans la liste des encadrements disponibles et cliquez sur Définir comme encadrement par défaut pour le définir comme l'encadrement par défaut du nouveau thème Vente aux enchères.

    Un encadrement est la bordure qui entoure chaque portlet d'une page de portail. A la différence des thèmes, qui s'appliquent à la conception globale du portail, les encadrements se limitent à la conception de chaque portlet inséré dans l'application de portail. Par défaut, seule une sélection limitée d'encadrements est disponible pour chaque thème.

  6. Cliquez sur Fin.
  7. Développez Eléments > Thèmes dans la vue Structure (Outline) et sélectionnez Vente aux enchères.
  8. Dans la vue Propriétés, cochez la case Par défaut pour appliquer le nouveau thème à l'application de portail.

    La modification est immédiatement appliquée dans la configuration du portail :
    Configuration du portail avec le nouveau thème

  9. Sauvegardez la configuration du portail.

Dans cette partie de l'exercice, vous allez mettre à jour les styles, les thèmes et les encadrements dans l'application de portail Vente aux enchères à l'aide de CSS Designer et de Page Designer.

Modification de l'image de la bannière du thème en cours

Pour remplacer l'image de la bannière du thème par défaut du portail Vente aux enchères, procédez comme indiqué ci-après.

  1. Tout d'abord, importez une nouvelle image de bannière dans le projet.
    1. Dans la barre de menus, sélectionnez Fichier > Importer. La boîte de dialogue Importation s'affiche.
    2. Dans Sélectionnez une source d'importation, cliquez sur Système de fichiers.
    3. Cliquez sur Suivant.
    4. Etant donné que les différents produits Rational utilisent des emplacements cible d'installation différents, vous devez quitter l'interface utilisateur du produit pour localiser le plug-in contenant la nouvelle image de bannière. A l'aide d'un outil de recherche de fichiers, localisez le dossier du plug-in com.ibm.etools.portal.examples.application_6.0.0.1 dans le chemin d'installation du produit, dans le système de fichiers local.
    5. Revenez à l'assistant Importation et cliquez sur le bouton Parcourir situé en regard de la zone Importer à partir du répertoire. Accédez au répertoire suivant :
      x:\com.ibm.etools.portal.examples.application_6.0.0.1\samples
      x: représente le chemin contenant le plug-in com.ibm.etools.portal.examples.application_6.0.0.1 sur votre ordinateur.
    6. Sélectionnez auction.gif comme cible de l'importation et cliquez sur OK.
    7. Cliquez sur le bouton Parcourir situé en regard de la zone Importer vers un dossier et indiquez AuctionPortal/PortalContent/themes/html/Auction.
    8. Cliquez sur Fin.

      L'assistant importe le fichier dans l'espace de travail.

  2. Le fichier Configuration du portail du projet AuctionPortal étant ouvert, sélectionnez Editer un style dans le menu en incrustation de Portal Designer. Le fichier Styles.css s'ouvre alors dans CSS Designer. Styles.css est la feuille de style par défaut du thème par défaut de l'application.

    CSS Designer fournit deux vues des styles définis pour les fichiers CSS : l'Aperçu (sur la gauche), qui permet de prévisualiser les exemples de règles de style telles qu'elles apparaissent dans un navigateur affichant une ressource Web, et la vue Source (sur la droite), qui affiche une version texte du fichier CSS. Il est possible d'éditer les styles via l'une ou l'autre vue.

  3. Faites défiler la page et cliquez sur l'icône Arrière-plan de la bannière dans l'Aperçu.
  4. Sélectionnez Editer une règle de style [.wpsToolbarBannerBackground] dans le menu en incrustation.
  5. Cliquez sur la propriété Arrière-plan dans la partie gauche de la boîte de dialogue Définition des propriétés de style.
  6. Saisissez ../../auction.gif dans la zone Image.
    Boîte de dialogue Définition des propriétés de style
  7. Cliquez sur OK.
  8. Sauvegardez le fichier CSS et fermez CSS Designer. La nouvelle image de bannière est appliquée à la page ouverte dans Portal Designer.

    Nouvelle bannière

  9. Sauvegardez et fermez le fichier Configuration du portail.

Vous pouvez apporter de nombreux changements à un thème et modifier, par exemple l'agencement d'une barre d'outils dans la zone d'en-tête, à l'aide de Page Designer. Vous pouvez également éditer l'agencement (et le style) d'un thème et des encadrements associés. Ces modifications sont stockées dans le fichier default.jsp du thème, ainsi que dans d'autres fichiers JSP connexes. Toute modification effectuée dans l'éditeur s'applique à toutes les utilisations du thème dans l'application de portail.

A présent, vous êtes prêt à commencer l'Exercice 2.3 : Exécution de l'application de portail dans l'environnement de test WebSphere Portal.

Retour d'informations
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.