Etape 2 : vérification de la structure de l'affichage de votre composant local

Cette étape consiste à vérifier la structure des fichiers par défaut créés pour un composant local.

Pour un exemple Hello World simple, quatre objets JavaScript et le nombre de lignes de code peuvent sembler exagérés, mais il s'agit simplement de vous fournir les bases qui vous permettront de créer des composants plus complexes et de gérer l'interaction avec le cycle de vie de page Oracle Sites Cloud Service.

Pour vérifier la structure de votre composant local, procédez comme suit :

1. Sur la page d'accueil d'Oracle Content Management, cliquez sur Développeur.

   La page Développeur apparaît.

2. Cliquez sur Afficher tous les composants.

3. Dans le menu, choisissez Créer un composant local.

4. Nommez le composant, par exemple A_Local_Component.

5. Saisissez une description (facultatif).

6. Cliquez sur Créer.

   Une fois ces étapes terminées, un composant nommé A_Local_Component apparaît dans la liste des composants.

1. A l'aide du client de synchronisation de bureau Oracle Content Management, localisez votre composant et synchronisez-le avec le système de fichiers.

   Si vous ne disposez pas du client de bureau, vous pouvez afficher tous les composants et sélectionner le composant sur la page Composants de l'interface Oracle Content Management, puis effectuer une analyse descendante pour voir les fichiers.

2. Si vous répertoriez les fichiers sous le composant, vous pouvez voir les fichiers suivants :

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. Ouvrez le fichier render.js sous le répertoire /assets.

   Caractéristiques principales du fichier render.js :

   • Il est structuré comme un module AMD JavaScript afin de pouvoir être "requis" dans la page.

   • Il comprend également des références à KnockoutJS et à JQuery qui sont déjà chargées en tant que parties de la page Oracle Content Management.

Observez la structure du fichier render.js.

Parmi le contenu du fichier render.js se trouvent deux objets JavaScript qui implémentent les API de composant Oracle Content Management requises : sampleComponentFactory et SampleComponentImpl. Ces objets sont un exemple d'implémentation pour la création de composants reposant sur KnockoutJS. L'implémentation de ces objets est différente selon la technologie que vous employez.

• sampleComponentFactory

  • Cet objet est renvoyé par le module AMD render.js.

  • Il s'agit d'un objet Factory très simple qui implémente l'interface createComponent() unique.

  • Des implémentations plus complexes peuvent utiliser la valeur args transmise pour renvoyer différentes implémentations du composant reposant sur le paramètre viewMode. Vous disposez ainsi d'une implémentation de composant bien plus légère lors de l'exécution par rapport au générateur de site.

• SampleComponentImpl

  • La fonction principale dans cet objet est la fonction render, qui sert à afficher le composant sur la page.

    Pour afficher le composant Knockout sur la page, la fonction render ajoute dynamiquement le modèle à la page, puis applique les liaisons viewModel au modèle.

  • Le reste de l'implémentation consiste à initialiser le modèle et le paramètre viewModel, ainsi qu'à gérer la messagerie entre la page et le composant.

Les deux derniers objets du fichier render.js, sampleComponentTemplate et SampleComponentViewModel, fournissent une implémentation personnalisée pour le composant. L'implémentation de ces objets est différente selon vos besoins.

• sampleComponentTemplate

  • Cet objet fournit la création du modèle KnockoutJS. Il attend que toutes les données du composant soient initialisées avant de tenter d'afficher quoi que ce soit.

• SampleComponentViewModel

  • viewModel extrait les informations stockées par Oracle Content Management au nom du composant, puis sélectionne la bonne façon de présenter le composant en fonction de ces données.

  • Eléments observables Knockout généraux utilisés par le modèle pour gérer l'accès aux métadonnées stockées au nom du composant :

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Intégration de déclencheurs et d'actions :

    Déclencheur : fonction permettant d'activer un déclencheur Oracle Content Management à partir du composant qui peut être lié à des actions d'autres composants sur la page.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    Action : fonction permettant de gérer le callback lorsque le composant reçoit l'ordre d'exécuter une action avec des données traitées spécifiques.

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    Callback permettant d'exécuter toute action inscrite à la demande.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • Abonnements au cycle de vie du composant :

    • Initialisation du composant : assurez-vous que le composant n'est pas affiché tant que toutes les données n'ont pas été extraites. Cette opération est gérée par des éléments observables Knockout.

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      Obtenez les valeurs initiales des propriétés requises. Cette opération est gérée par des callbacks qui extraient les données.

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Mises à jour des métadonnées : callback à chaque modification des métadonnées du composant stockées au nom du composant. Par exemple, lorsque l'utilisateur appelle le panneau des paramètres et met à jour les données.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));