Définition de modules de thème

Vous pouvez définir des modules de thèmes dans XML ou JSON.

Pourquoi et quand exécuter cette tâche

Les exemples suivants sont des déclinaisons des exemples précédents et couvrent toute la syntaxe disponible pour le point d'extension plugin.xml et les définitions de module JSON.

Procédure

Définissez le module. Un ID est requis et la version est une valeur décimale facultative.

<module id="testModule1" version="1.0" >

       "modules":[
        // ...  The ellipses indicate place holders for syntax explained in other steps
        {
            "id":"testModule1",
            "version":"1.0",
            // ...
        },
        // ...
        ]

Facultatif : Définissez autant de fonctions que nécessaire dans le module, avec une chaîne d'ID requise et une valeur en notation décimale, par exemple, 1.2.3.4. Ces informations sont ajoutées à la mappe globale des fonctions de thème du client incluse dans l'attribut de demande com.ibm.portal.theme.client.capabilities. Les portlets peuvent envoyer une requête côté serveur pour identifier les fonctions côté client qui sont présentes, telles que des bibliothèques JavaScript et les catalogues de style CSS. Le code JavaScript côté client peut interroger l'objet JSON global com_ibm_theme_capabilities pour rechercher toutes les fonctions disponibles dans la portée de la page rendue actuellement.
```
<capability id="capabilityA" value="1.0.0"/>
        <capability id="capabilityB" value="1.5"/>
```
```
"capabilities":[{
                "id":"capabilityA",
                "value":"1.0.0"
            },
            {
                "id":"capabilityB",
                "value":"1.5"
            }
        ],
```
Outre les fonctions explicites définies ici, une fonction définie implicitement par module a également été introduite. Cette fonction définie implicitement porte le nom et la version du module. Si le même nom est défini implicitement, le nom explicite est utilisé.

Facultatif : Définissez autant de prereqs que nécessaire dans le module, avec une chaîne d'ID requise et une chaîne de type optional ou minVersion en notation décimale. Si le type optional est utilisé, aucune erreur n'est renvoyée en sortie si le prereq est introuvable sur le système.

<prereq id="testModuleA"/>
        <prereq id="testModuleB" minVersion="1.2.3.4"/>
        <prereq id="testModuleC" type="optional"/>

"prereqs":[{
                "id":"testModuleA"
            },
            {
                "id":"testModuleB",
                "minVersion":"1.2.3.4"
            },
            {
                "id":"testModuleC",
                "type":"optional"
            }
        ],

Facultatif : Ajoutez un titre ou des titres en différentes langues pour le module.

<title lang="en" value="en Module"/>
        <title lang="de" value="de Module"/>
        <title lang="es" value="es Module"/>

								 "titles":[{
                "lang":"en",
                "value":"en Module"
            },
            {
                "lang":"de",
                "value":"de Module"
            },
            {
                "lang":"es",
                "value":"es Module"
            }
        ],

Facultatif : Ajoutez une ou plusieurs descriptions en différentes langues.

<description lang="en" value="one two three"/>
        <description lang="de" value="ein zwei drei"/>
        <description lang="es" value="uno dos tres"/>

        				"descriptions":[{
                "lang":"en",
                "value":"one two three"
            },
            {
                "lang":"de",
                "value":"ein zwei drei"
            },
            {
                "lang":"es",
                "value":"uno dos tres"
            }
        ],

Au moins une requise : ajoutez des contributions comportant chacune au moins une sous-contribution enfant au module. Il existe quatre types de contribution qui déterminent l'emplacement où les sous-contributions associées sont renvoyées sur la page HTML :

head: Ces contributions sont liées à la section head du thème dans la zone de contenu dynamique co:head.
config: Ces contributions sont ajoutées à la fin de la section body dans le thème dans la zone de contenu dynamique co:config.
menu: Ces contributions peuvent être appelées par la structure de menu du thème.
dyn-cs: Les sorties de ces contributions sont ajoutées au thème dans la zone de contenu dynamique indiquée.

Voir Utilisation des zones de contenu dynamique. Chaque contribution comporte au moins une sous-contribution. Chaque sous-contribution comporte au moins un URI vers une ressource et un seul de ces URI est renvoyé par chaque sous-contribution. Les sous-contributions ont chacune un type requis :

css: Des fichiers de feuille de style en cascade peuvent être ajoutés aux contributions head uniquement.
js: Des fichiers JavaScript peuvent être liés à des contributions head ou config.
json: La sortie JavaScript Object Notation est utilisée par les contributions menu uniquement.
balisage: Un marquage HTML peut être servi par des contributions head, config ou dyn-cs.
config_static: Ce type est une objet de configuration JavaScript statique, global et pouvant être mis en cache publiquement et rendu disponible dans les contributions head ou config.
config_dynamic: Ce type est un objet de configuration JavaScript qui peut changer en fonction de la page ou de l'utilisateur en cours, et rendu disponible dans les contributions head ou config.

Voir Types de contribution. Sur la base de ces types de contribution et de sous-contribution, il est impossible d'implémenter les cas d'utilisation suivants dans un module. Voir l'exemple de code au début de cette rubrique pour afficher tous les fragments suivants réunis.

Facultatif : Ajoutez un fichier CSS. Si vous ajoutez plusieurs fichiers CSS du même type, utilisez une sous-contribution séparée pour chacun d'eux.

<contribution type="head">
                <sub-contribution type="css">
                    <uri value="res:/HelloWorld/css/helloWorld.css" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"head",
                "sub-contributions":[{
                    "type":"css",
                    "uris":[{
                        "value":"/css/helloWorld.css"
                    }
                }
            }],

Facultatif : Définissez un autre fichier CSS pour les styles bidirectionnels. Ces styles sont servis uniquement à l'aide d'un langage rtl.

<contribution type="head">
                <sub-contribution type="css">
                    <uri value="res:/HelloWorld/css/helloWorld.css" />
                    <!-- define alternate styles for right to left -->
                    <uri type="rtl" value="res:/HelloWorld/css/helloWorld_rtl.css" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"head",
                "sub-contributions":[{
                    "type":"css",
                    "uris":[{
                        "value":"/css/helloWorld.css"
                    },
                    // define alternate styles for right to left
                    {
                        "value":"/css/helloWorld_rtl.css",
                        "type":"rtl"
                    }]
                }
            }],

Facultatif : Définissez une ressource pour une classe d'unités spécifique. Dans la même sous-contribution, ajoutez des URI avec la chaîne de classe d'unités ou l'identificateur d'équation approprié. Voir Equations de classe d'unités.

<contribution type="head">
                <sub-contribution type="css">
                    <uri value="res:/HelloWorld/css/helloWorld.css" />
                    <!-- define alternate styles for an iPad -->
                    <uri deviceClass="tablet+iOS" value="res:/HelloWorld/css/helloWorld_iPad.css" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"head",
                "sub-contributions":[{
                    "type":"css",
                    "uris":[{
                        "value":"/css/helloWorld.css"
                    },
                    // define alternate styles for an iPad
                    {
                        "value":"/css/helloWorld_iPad.css",
                        "deviceClass":"tablet+iOS"
                    }]
                }
            }],

Facultatif : Ajoutez un élément markup à la section head en veillant à ce qu'il soit de type HTML, comme une balise meta. Des sous-contributions de type markup peuvent également être ajoutées à des contributions config ou dyn-cs.

<contribution type="head">
                <sub-contribution type="markup">
                    <uri value="res:/HelloWorld/markup/helloWorldHead.html" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"head",
                "sub-contributions":[{
                    "type":"markup",
                    "uris":[{
                        "value":"/markup/helloWorldHead.html"
                    }]
                }]
            }],

Facultatif : Ajoutez un fichier JavaScript à la section head du thème car il doit pouvoir être utilisé par les portlets, comme par exemple une bibliothèque js telle que Dojo ou jQuery. Si vous ajoutez plusieurs fichiers JavaScript du même type, utilisez une sous-contribution séparée pour chacun d'eux.

<contribution type="head">
                <sub-contribution type="js">
                    <uri value="res:/HelloWorld/js/helloWorldHead.js" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"head",
                "sub-contributions":[{
                    "type":"js",
                    "uris":[{
                        "value":"/js/helloWorldHead.js"
                    }]
                }]
            }]

Facultatif : Définissez un fichier JavaScript dans la zone config. Celui-ci fonctionne mieux que s'il était ajouté à la section head, mais le js n'est pas disponible tant que les portlets ne l'ont pas chargé. Si vous ajoutez plusieurs fichiers JavaScript du même type, utilisez une sous-contribution séparée pour chacun d'eux.

<contribution type="config">
                <sub-contribution type="js">
                    <uri value="res:/HelloWorld/js/helloWorldBody_root.js" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"config",
                "sub-contributions":[{
                    "type":"js",
                    "uris":[{
                        "value":"/js/helloWorldBody_root.js"
                    }]
                }]
            }]

Facultatif : Définissez un fichier JavaScript alternatif pour d'autres environnements locaux. Dans la même sous-contribution, ajoutez un deuxième URI avec l'attribut d'environnement local pertinent.

<contribution type="config">
                <sub-contribution type="js">
                    <uri value="res:/HelloWorld/js/helloWorldBody_root.js" />
                    <!-- define alternate js for when the Portal is using different languages -->
                    <uri lang="en" value="res:/HelloWorld/js/helloWorldBody_en.js" />
                    <uri lang="de" value="res:/HelloWorld/js/helloWorldBody_de.js" />
                    <uri lang="es" value="res:/HelloWorld/js/helloWorldBody_es.js" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"config",
                "sub-contributions":[{
                    "type":"js",
                    "uris":[{
                        "value":"/js/helloWorldBody_root.js"
                    },
                    // define alternate js for when the Portal is using different languages
                    {
                        "value":"/js/helloWorldBody_en.js",
                        "lang":"en"
                    },
                    {
                        "value":"/js/helloWorldBody_de.js",
                        "lang":"de"
                    },
                    {
                        "value":"/js/helloWorldBody_es.js",
                        "lang":"es"
                    }]
                }]
            }],

Facultatif : Définissez un fichier JavaScript alternatif à des fins de débogage. Pour déboguer le code côté client d'un thème, indiquez une seconde entrée pour une sous-contribution de type debug afin de fournir une version plus lisible du fichier JavaScript. Pour plus d'informations, voir Activation du traçage de module.

<contribution type="config">
                <sub-contribution type="js">
                    <uri value="res:/HelloWorld/js/helloWorldBody_root.js" />
                    <!-- define alternate js for debugging purposes in LTR and RTL environments -->
                    <uri type="debug" value="res:/HelloWorld/js/helloWorldBody_debug.js" />
                    <uri type="debug,rtl" value="res:/HelloWorld/js/helloWorldBody_debug_rtl.js" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"config",
                "sub-contributions":[{
                    "type":"js",
                    "uris":[{
                        "value":"/js/helloWorldBody_root.js"
                    },
                    // define alternate js for debugging purposes in LTR and RTL environments
                    {
                        "value":"/js/helloWorldBody_debug.js",
                        "type":"debug"
                    },
                    {
                        "value":"/js/helloWorldBody_debug_rtl.js",
                        "type":"debug,rtl"
                    }]
                }]
            }],

Facultatif : Ajoutez un objet config_dynamic JavaScript.

<contribution type="config">
                <sub-contribution type="config_dynamic">
                    <uri value="res:/HelloWorld/jsp/helloWorldBodyConfig.jsp" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"config",
                "sub-contributions":[
                {
                    "type":"config_dynamic",
                    "uris":[{
                        "value":"/config/helloWorldBodyConfig.js"
                    }]
                }
            }]

Facultatif : Ajoutez un objet config-static JavaScript.

<contribution type="config">
                <sub-contribution type="config_static">
                    <uri value="res:/HelloWorld/jsp/helloWorldBodyStatic.jsp" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"config",
                "sub-contributions":[
                {
                    "type":"config_static",
                    "uris":[{
                        "value":"/config/helloWorldBodyStatic.js"
                    }]
                }]
            }]

Facultatif : Définissez une contribution de menu. Créez une contribution de type menu avec une sous-contribution de type json. La sous-contribution référence un fichier JSON qui définit les entrées de menu individuel. See Menu framework.

<contribution type="menu">
                <sub-contribution type="json">
                    <uri value="res:/HelloWorld/js/helloWorld.json" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"menu",
                "sub-contribution":[{
                    "type":"json",
                    "uris":[{
                        "value":"/js/helloWorld.json"
                    }]
                }]
            }]

Facultatif : Définissez une zone dynamique. Lorsque le module est activé, la sortie de cette sous-contribution remplace le contenu par défaut de la zone dynamique identifiée par l'attribut ref-id. Voir Zones de contenu dynamique.

<contribution type="dyn-cs">
                <sub-contribution type="markup" ref-id="some_dynamic_spot_id">
                    <uri value="res:/HelloWorld/jsp/helloWorldDynamicSpot.jsp" />
                </sub-contribution>
            </contribution>

"contributions":[{
                "type":"dyn-cs",
                 "sub-contribution":[{
                    "type":"markup",
                    "ref-id":"some_dynamic_spot_id",
                    "uris":[{
                        "value":"/html/helloWorldDynamicSpot.html"
                    }]
                }]
            }]

Facultatif : Attribuez un indicateur d'activation au module. Utilisez l'extensionID, utilisé dans ces exemples, ou l'attribut class pour indiquer l'implémentation ModuleActiveChecker ; les deux sont pris en charge. Par défaut, tous les modules qui sont définis sont actifs. Un module inactif est traité de la même façon qu'un module qui n'est pas défini. C'est pourquoi les modules inactifs ne sont pas démarrés à l'exécution du portail. Spécifiez une clé pour une entrée dans un fournisseur d'environnement de ressources sur le serveur d'applications pour l'activation ou la désactivation du module. Voir Ajout des propriétés de fournisseur d'environnement de ressources. Remplacez RESOURCE_ENV_PROVIDER_NAME par le nom du fournisseur d'environnement de ressources et KEY_IN_RESOURCE_ENV_PROVIDER par la clé dans le fournisseur d'environnement de ressources. Les valeurs de clé valides sont true si le module est actif et false si le module est inactif. Par exemple, si vous souhaitez spécifier la clé my.module.is.active pour l'activation du module dans le fournisseur d'environnement de ressources ConfigService, l'entrée est la suivante :
```
<repentry rep="ConfigService" key="my.module.is.active"/>
```
```
<moduleActivation extensionID="com.ibm.portal.resourceaggregator.util.ResourceEnvironmentProviderModuleActivationHandler">
            <parameter name="rep" value="RESOURCE_ENV_PROVIDER_NAME" />
            <parameter name="key" value="KEY_IN_RESOURCE_ENV_PROVIDER"/> 
        </moduleActivation>
```
```
"moduleActivation":{
            "extensionID":"com.ibm.portal.resourceaggregator.util.ResourceEnvironmentProviderModuleActivationHandler",
            "parameters":[{
                "name":"rep",
                "value":"RESOURCE_ENV_PROVIDER_NAME"
            },
            {
                "name":"key",
                "value":"KEY_IN_RESOURCE_ENV_PROVIDER"
            }]
        },
```
Facultatif : Attribuez au module un gestionnaire d'activation de l'environnement d'exécution avec une condition. Ce module peut être activé ou désactivé pour chaque page individuellement, en fonction de l'état de la page en cours. Actuellement, le gestionnaire d'activation d'exécution prend en charge la vérification des classes d'appareil, lesquelles peuvent être une chaîne ou une équation. Voir Equations de classe d'appareil.
```
<runtimeActivation>
            <condition deviceClass="tablet"/> 
        </runtimeActivation>{code}
```
```
"runtimeActivation":[{
            "condition":{
                "deviceClass":"tablet"
            }
        }]
```