Modèles d'habillages

Le modèle d'habillage statique skin.html se trouve dans le répertoire principal du dossier habillage du magasin de fichiers WebDAV. Le fichier skin.html fournit le marquage complet pour la décoration autour d'un portlet ou d'un iWidget. Tout comme pour les modèles de thème, vous pouvez utiliser les zones de contenu dynamiques pour ajouter des éléments dynamiques au modèle d'habillage au moment de l'exécution.

Le portail met à disposition un modèle d'habillage de base et des modèles d'habillage localisés.

Le fichier skin.html se trouve dans le répertoire principal de l'habillage \fs-type1\skins\skin-name\ dans WebDAV, et des fichiers skin.html localisés se trouvent dans le répertoire nls sous l'habillage \fs-type1\skins\skin-name\nls\. Modifiez les fichiers du modèle d'habillage à l'aide du point d'entrée WebDAV fs-type1. Si vous utilisez ce point d'entrée, les modifications que vous apportez au modèle d'habillage sont immédiatement reflétées lors de l'actualisation du navigateur.

Modèle d'habillage racine

Dans une installation d'HCL Portal par défaut, le portail n'affiche pas le fichier de modèle skin.html qui se trouve dans le répertoire principal du thème. En revanche, ce fichier est lié aux modèles localisés, et le portail affiche le modèle localisé approprié. Les liens vers les modèles localisés se trouvent au début du modèle racine. Ils se présentent sous la forme suivante :

<a rel="alternate" href="nls/skin_locale_code.html" hreflang="locale_code" class="wpthemeDisplayNone"></a>

Exemple de lien vers le fichier de modèle anglais :

<a rel="alternate" href="nls/skin_en.html" hreflang="en" class="wpthemeDisplayNone"></a>

Vous pouvez placer la classe wpthemeDisplayNone sur ces liens pour que le navigateur n'expose pas l'élément d'ancrage dans l'interface utilisateur. Cette classe garantit que les technologies accessibles, telles que les lecteurs d'écran, ne rencontrent pas ces liens dans l'ordre des onglets.

Si vous ne voulez pas utiliser les modèles d'habillage localisés, vous pouvez supprimer ces liens de la section supérieure du modèle skin.html qui se trouve dans le répertoire principal. Si vous supprimez les liens, le portail affiche le modèle racine.

Ce modèle d'habillage inclut également le scriptage Apache Ant sous la forme suivante :

${bundle_name:bundle_key:character_encoding}

Le paramètre character_encoding remplace les caractères spéciaux par la séquence d'échappement déterminée par le codage spécifié. Les types disponibles de codage sont XML et JSON. Vous pouvez chaîner plusieurs instances de codage avec or comme suit :

${bundle:key:json:xml} or ${bundle:key:xml:json}

Vous pouvez utiliser l'infrastructure de génération Apache Ant pour générer des modèles localisés reposant sur ce modèle racine. Cette infrastructure peut être utile si vous souhaitez mettre à jour un modèle au cours du développement puis générer les modèles. Si vous voulez utiliser le modèle racine uniquement, remplacez le scriptage Ant par le texte que vous souhaitez afficher. Vous pouvez en savoir plus sur l'outil de génération Ant sur la page d'accueil Apache Ant.

Modèles d'habillage localisés

Dans une installation de portail par défaut, le thème affiche le contenu à l'aide des modèles d'habillage localisés. Ces modèles se trouvent dans le sous-répertoire nls du répertoire skin de WebDAV. Pour ces fichiers, le code de l'environnement local est ajouté à la fin du nom de modèle, par exemple skin_en.html pour l'anglais. Ces modèles contiennent du texte statique traduit.

Lorsque vous utilisez les modèles d'habillage localisés et si vous voulez visualiser vos modifications, mettez à jour le modèle que le portail affiche dans le navigateur. Par exemple, si la langue de votre choix est l'anglais, mettez à jour le fichier fileskin_en.html.

Zones de contenu dynamiques côté serveur

<a rel="dynamic-content" href="lm:title">: Introduit le titre du portlet dans l'habillage.
<a rel="dynamic-content" href="lm:control">: Affiche le contenu du portlet.

Zones de contenu dynamiques côté client

Les zones de contenu dynamiques côté client sont remplacées par RuntimeSkinModel et le service de texte en direct au moment du chargement de la page ou à l'exécution par l'intermédiaire de JavaScript.

class='lm-dynamic-icon'

Par défaut, les habillages ne contient pas la zone lm-dynamic-icon. Pour prendre en charge une icône dynamique, vous devez ajouter une balise d'image au marquage titlebar dans le modèle HTML d'habillage.

Exemple :

<img class="lm-dynamic-icon" src=""/>

Fournit une méthode côté client pour changer l'icône du portlet ou de l'iWidget dans l'habillage dynamiquement. Par exemple, vous pouvez ajouter l'exemple de code suivant pour définir l'icône de manière dynamique. Le second paramètre transmis dans la fonction setDynamicContent est une adresse URL qui constitue la src de l'élément <img> de l'icône.

var skinNode = com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel().find("somePortletID");
	skinNode.setDynamicContent(com.ibm.mashups.enabler.runtime.skin.Constants.DYNAMIC_CONTENT_ICON, "http://www.cntserv_exmp.com/icon.gif");

Remarque : La fonction somePortletID extraite du modèle d'habillage d'exécution est un ID de chaîne du noeud de présentation dont l'intitulé ou l'icône est modifié. Le profil utilisé sur la page doit inclure Enabler dans le mode d'aperçu tel qu'il est requis pour extraire le noeud d'habillage et définir le contenu dynamique.

Remarque : Enabler est obsolète.

class='lm-dynamic-title'

Cette zone de contenu change le titre de l'habillage de façon dynamique au moment de l'exécution.

Par exemple, pour définir le titre, le deuxième paramètre est une chaîne qui est insérée comme nouveau titre.

skinNode.setDynamicContent(skinConstants.DYNAMIC_CONTENT_TITLE, "My new title")

Où :

var controlId : ID de chaîne du nœud de présentation pour lequel l'icône ou le titre est changé.
var runtimeSkinModel : com.ibm.mashups.enabler.runtime.skin.Factory.getRuntimeSkinModel().
var skinNode : runtimeSkinModel.find(controlId).
var skinConstants : com.ibm.mashups.enabler.runtime.skin.Constants.