Stap 2: De structuur van uw lokale componentweergave controleren

In deze stap wordt de structuur gecontroleerd van de standaardbestanden die voor een lokale component zijn gemaakt.

Voor een eenvoudig voorbeeld als Hallo wereld lijken vier JavaScript-objecten en het aantal regels met code wat veel, maar hierdoor beschikt u over een basis waarmee u complexere componenten kunt opbouwen en de interactie met de Oracle Cloud Sites Service paginalevensduur kunt verwerken.

Ga als volgt te werk om de structuur van uw lokale component te bekijken:

1. Klik op de beginpagina van Oracle Content Management op Ontwikkelaar.

   De pagina Ontwikkelaar wordt weergegeven.

2. Klik op Alle componenten bekijken.

3. Kies Lokale component maken in het menu.

4. Voer een naam in voor de component. Bijvoorbeeld: Een_lokale_component.

5. Voer een optionele beschrijving in.

6. Klik op Maken.

   Hierna ziet u een component met de naam Een_lokale_component in uw lijst met componenten staan.

1. Zoek uw component en synchroniseer deze met het bestandssysteem met behulp van de Oracle Content Management desktopsynchronisatieclient.

   Als u geen desktopclient hebt, kunt u alle componenten bekijken en de component selecteren op de pagina 'Componenten' in de interface van Oracle Content Management en omlaag drillen om de bestanden te zien.

2. Als u de bestanden onder de component weergeeft, ziet u de volgende bestanden:

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

3. Open het bestand render.js in de directory /assets.

   De belangrijkste punten van het bestand render.js zijn:

   • Het is gestructureerd als een JavaScript AMD-module, zodat het op de pagina kan worden "vereist".

   • Het bevat ook verwijzingen naar KnockoutJS en JQuery die al zijn geladen als onderdeel van de Oracle Content Management pagina.

Houd rekening met de structuur van het bestand render.js.

Het bestand render.js bevat twee JavaScript-objecten waarmee de vereiste Oracle Content Management component-API's worden geïmplementeerd: sampleComponentFactory en SampleComponentImpl. Deze objecten zijn een voorbeeld van een implementatie voor het maken van KnockoutJS-componenten. De implementatie van deze objecten zal verschillen op basis van de technologie die u gebruikt.

• sampleComponentFactory

  • Dit object wordt geretourneerd door de AMD-module render.js.

  • Dit is een zeer eenvoudig factory-object waarmee alleen de interface createComponent() wordt geïmplementeerd.

  • Bij complexere implementaties kan de waarde args worden doorgegeven om verschillende implementaties van de component te retourneren op basis van de parameter viewMode. Hierdoor kunt u een aanzienlijk lichtere implementatie van de component voor runtime uitvoeren dan met de sitebuilder.

• SampleComponentImpl

  • De belangrijkste functie van dit object is de functie voor weergave. Deze wordt gebruikt om de component op de pagina te renderen.

    Om de Knockout-component in de pagina weer te geven, wordt de sjabloon met de functie voor weergave dynamisch aan de pagina toegevoegd. Vervolgens worden de viewModel-bindingen op de sjabloon toegepast.

  • Tijdens de rest van de implementatie worden de viewModel-parameter en -sjabloon geïnitialiseerd en de berichten tussen de pagina en de component verwerkt.

De laatste twee objecten in het bestand render.js, sampleComponentTemplate en SampleComponentViewModel, maken een aangepaste implementatie voor de component mogelijk. De implementatie hiervan is afhankelijk van uw vereisten.

• sampleComponentTemplate

  • Met dit object wordt de KnockoutJS-sjabloon gemaakt. Pas wanneer alle gegevens door de component zijn geïnitialiseerd, wordt geprobeerd iets weer te gegeven.

• SampleComponentViewModel

  • Met viewModel wordt de informatie opgehaald die door Oracle Content Management voor de component is opgeslagen. Vervolgens wordt op basis van die gegevens een geschikte lay-out voor de component geselecteerd.

  • Algemene Knockout-observables die door de sjabloon worden gebruikt voor het afhandelen van toegang tot de metagegevens die voor de component zijn opgeslagen:

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

  • Integratie van triggers en acties:

    Trigger: een functie voor het initiëren van een Oracle Content Management trigger in de component, die kan worden gekoppeld aan acties van andere componenten op de pagina.

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

    Actie: een functie voor het verwerken van de callback wanneer de component een actie met een bepaalde payload moet uitvoeren.

        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 om geregistreerde acties op verzoek uit te voeren

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

  • Abonnementen op componentlevensduur:

    • Componentinitialisatie: dit zorgt ervoor dat de component niet wordt weergegeven voordat alle gegevens zijn opgehaald. Dit wordt afgehandeld via Knockout-observables.

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

      De initiële waarden voor vereiste eigenschappen worden opgehaald. Dit wordt afgehandeld met callbacks voor het ophalen van de gegevens.

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

    • Metagegevenswijzigingen: callback wanneer metagegevens van een component die voor de component zijn opgeslagen worden gewijzigd, bijvoorbeeld wanneer de gebruiker het paneel 'Instellingen' opent en de gegevens bijwerkt.

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