Groupe 3G (Design_Portail)
Date de création :	30/06/2003
Dernière modification :	30/06/2003
Diffusion :	internet

Personnalisation du rendu

Toutes les informations, structurées sous forme de channel, reçues par l'environnement uPortal sont transformées via des feuilles xsl pour différents médias de sortie : html pour un navigateur, wml pour un portable.

L'objectif de ce document est d'expliquer la structure des différents fichiers xsl utilisés, leurs emplacements. Quelques exemples de modifications possibles de ces feuilles permettront de paramétrer UPortal afin qu'il respecte la charte graphique de l'établissement.

Pour le rendu de l'arbre xml, uPortal se repose sur deux types de feuilles :

• feuilles xsl : uportal/stylesheets/org/jasig/portal
• feuilles css et des icônes, graphismes : uportal/media/org/jasig/portal/channels

Du rôles des feuilles XSL

Par défaut, uPortal propose des feuilles xsl pour le rendu de la structure et de channels. Il est possible de modifier ces feuilles.

Le rendu de la structure

Par défaut c'est une représentation sous forme d'onglets et de colonnes qui sert au rendu de la structure du document. Le fichier utilisé pour cette transformation est placé dans le répertoire stylesheets/org/jasig/portal/layout/tab-column/nested-tables. Le fichier pour le rendu html est nested-tables.xsl. Cette feuille fait appel aux transformations individuelles des channels, ces feuilles sont placées dans uportal/webpages/stylesheets/org/jasig/portal/channels.

les motifs :

• layout : concerne l'enveloppe complète de la page HTML

  déclenchement des règles :

  • header
  • navigation
  • content
  • footer
• header : situé par défaut dans la partie supérieure du rendu à savoir l'affichage des logos des institutions, de la barre de commande après authentification (gestion des préférences, déconnexion ..., transformation du channel CHeader), du formulaire d'authentification ou texte affiché si l'authentification est déjà réalisée (transformation du channel CLogin) et de l'image d'en-tête

  Appel aux transformations :

  • CHeader
  • Clogin
• navigation
• content
• controlRow
• contentRow
• channel
• controls
• detachedChannelControls
• footer : aucun rendu (??) pas trouvé dans une seule dtd proprosée

Le rendu des channels

Les feuilles de style pour le rendu structurel d'un channel sont situées dans le répertoire uportal/stylesheets/org/asig/portal/channels. Dans l'exemple ci dessous, les fichiers associés au channel CHeader qui traitent de la barre de commande après authentification.

la feuille de la transformation est html.xsl . Elle est située dans uportal/stylesheets/org/jasig/portal/channels/Cheader. Ci-dessous, le visuel du Cheader et le code utilisé pour la transformation.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:param name="baseActionURL">default</xsl:param>
  <xsl:param name="authenticated">false</xsl:param>
  <xsl:template match="header">
    <xsl:if test="$authenticated != 'false'">
      <a href="{$baseActionURL}?uP_root=root" class="uportal-navigation-category">Accueil </a> | <xsl:if test="chan-mgr-chanid">
      <a href="{$baseActionURL}?uP_root={chan-mgr-chanid}" class="uportal-navigation-category"> Channel Admin </a> | </xsl:if>
      <a href="{$baseActionURL}?uP_root={preferences-chanid}" class="uportal-navigation-category"> Pr&#xE9;f&#xE9;rences </a> | <a href="Logout" class="uportal-navigation-category"> D&#xE9;connexion </a>
    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

Exemple : Modification du channel image

Le fichier de transformation du canal CImage est situé dans le répertoire uportal/stylesheets/org/jasig/portal/channels/CImage : CImage.xsl. Pour un channel de type CImage, on veut créer un rendu sous forme de tableau avec l'affichage du titre de l'image sur la première ligne, puis l'image avec possibilité d'un hyperlien, cette image possédant un texte de secours via des balises alt et title, un sous-titre pouvant apparaître dans une troisième ligne.
Un élément de type Image possède dans sa structure un élément image avec les attributs src (source de l'image), width et height (largeur et hauteur de l'image), link (lien vers un site), un élément caption (libellé de l'image), subcaption (sous-titre de l'image), link

<?xml version="1.0"?>
 <xsl:stylesheet xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="content">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
 <tr class="uportal-background-med" align="center">
 <td class="uportal-channel-subtitle">
 <xsl:value-of select="caption"/>
 </td>
 </tr>
 <tr class="uportal-background-med">
 <td align="center">
 <a href="{image/@link}">
 <image src="{image/@src}" width="{image/@width}" height="{image/@height}" hspace="3" vspace="3" border="{image/@border}" title="{caption}" alt="{caption}"/>
 </a>
 </td>
 </tr>
 <tr class="uportal-background-med">
 <td class="uportal-channel-subtitle" align="center">
 <xsl:value-of select="subcaption"/>
 </td>
 </tr>
 </table>
 < /xsl:template>
</xsl:stylesheet> 

Éléments graphiques

Création : 30/06/2003 Séb [UHP Nancy I]
Modifications :