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.
- Sélectionnez Fichier > Nouveau > Thème dans la barre
de menus.
- Entrez Vente aux enchères dans la zone Titre.
- 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 du rien.
- Cliquez sur Suivant.
- 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.
- Cliquez sur Fin.
- Développez Eléments > Thèmes dans la vue
Structure (Outline) et sélectionnez Vente aux enchères.
- 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 :

- 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.
- Tout d'abord, importez une nouvelle image de bannière dans le
projet.
- Dans la barre de menus, sélectionnez Fichier > Importer. La boîte de dialogue Importation s'affiche.
- Dans Sélectionnez une source d'importation, cliquez sur Système de fichiers.
- Cliquez sur Suivant.
- 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.
- 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
où x: représente le chemin contenant le plug-in
com.ibm.etools.portal.examples.application_6.0.0.1 sur votre
ordinateur.
- Sélectionnez auction.gif comme cible de l'importation et
cliquez sur OK.
- Cliquez sur le bouton Parcourir situé en regard de
la zone Importer vers un dossier et indiquez AuctionPortal/PortalContent/themes/html/Auction.
- Cliquez sur Fin.
L'assistant importe le fichier dans l'espace de travail.
- 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.
- Faites défiler la page et cliquez sur l'icône Arrière-plan de
la bannière dans l'Aperçu.
- Sélectionnez Editer une règle de style
[.wpsToolbarBannerBackground] dans le menu en incrustation.
- 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.
- Saisissez ../../auction.gif dans la zone Image.

- Cliquez sur OK.
- Sauvegardez le fichier CSS et fermez CSS Designer. La nouvelle
image de bannière est appliquée à la page ouverte dans Portal Designer.

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