Etap 2: Sprawdzanie struktury renderowania składnika lokalnego

Sprawdzimy tu strukturę plików domyślnych, utworzonych dla składnika lokalnego.

Dla prostego przykładu Hello World cztery obiekty JavaScript i znaczna liczba linii kodu mogą wydawać się zbyt wielkim nakładem, lecz mają one jedynie służyć zarówno jako podstawa konstruowania bardziej złożonych składników, jak i prezentacja interakcji z cyklem życia stron Oracle Cloud Sites Service.

Aby sprawdzić strukturę składnika lokalnego, należy:

1. Na stronie startowej Oracle Content Management wybrać opcję Programista.

   Zostanie wyświetlona strona Programista.

2. Nacisnąć przycisk Wyświetl wszystkie składniki.

3. Z menu wybrać opcję Utwórz składnik lokalny.

4. Podać nazwę składnika; na przykład A_Local_Component.

5. Podać opcjonalny opis.

6. Nacisnąć przycisk Utwórz.

   Gdy zostanie to wykonane, na liście składników pojawi się składnik o nazwie A_Local_Component.

1. Używając klienta synchronizującego typu Desktop Oracle Content Management, zlokalizować składnik, po czym zsynchronizować go z systemem plików.

   Nie mając klienta typu Desktop, można na karcie "Składniki" interfejsu usługi Oracle Content Management wyświetlić wszystkie składniki, po czym wybrać składnik, a następnie — aby wyświetlić pliki — drążyć w dół.

2. Pod składnikiem można zobaczyć następujące pliki:

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

3. Z katalogu /assets wybrać plik render.js, a następnie go otworzyć.

   Najważniejsze uwagi dotyczące pliku render.js to:

   • Jest strukturyzowany jako moduł JavaScript AMD, tak że może być uznany za wymagany na stronie.

   • Zawiera odwołania do KnockoutJS i JQuery, które już zostały załadowane jako część strony Oracle Content Management.

Przyjrzyjmy się strukturze pliku render.js.

W pliku render.js są zawarte dwa obiekty JavaScript, implementujące wymagane API składników Oracle Content Management: sampleComponentFactory i SampleComponentImpl. Obiekty te stanowią przykład implementacji mającej na celu tworzenie dowolnych składników opartych na KnockoutJS. Implementacja tych obiektów zmienia się w zależności od używanej technologii.

• sampleComponentFactory

  • Ten obiekt jest zwracany przez moduł AMD render.js.

  • Jest to bardzo prosty obiekt "Factory" implementujący jeden interfejs createComponent().

  • Bardziej złożone implementacje mogą używać wartości args przekazywanej w celu zwrócenia różnych implementacji składnika na podstawie parametru viewModel. Dzięki temu można uzyskać implementację składnika w trybie wykonawczym, mniej obciążającą niż uzyskana za pomocą konstruktora serwisów.

• SampleComponentImpl

  • Główną funkcją w tym obiekcie jest funkcja render służąca do renderowania składnika na stronie.

    W celu wyrenderowania składnika Knockout na stronie funkcja render dynamicznie dodaje szablon do strony, po czym stosuje do niego wiązania viewModel.

  • Pozostała część implementacji obsługuje inicjalizację parametru viewModel i szablonu oraz komunikację między stroną a składnikiem.

Ostatnie dwa obiekty z pliku render.js — sampleComponentTemplate i SampleComponentViewModel — zapewniają niestandardową implementację składnika. Implementacja zmienia się w zależności od wymagań.

• sampleComponentTemplate

  • Ten obiekt zapewnia tworzenie szablonu KnockoutJS. Przed podjęciem próby wyświetlenia czegokolwiek czeka, aż składnik będzie miał zainicjalizowane wszystkie dane.

• SampleComponentViewModel

  • viewModel pobiera w imieniu składnika informacje składowane w Oracle Content Management, po czym — bazując na tych danych — wybiera odpowiedni układ składnika.

  • Ogólne obiekty Knockout "observable", używane przez szablon do obsługi dostępu w imieniu składnika do składowanych metadanych:

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

  • Integracja wyzwalaczy i czynności:

    Wyzwalacz: Funkcja uaktywniająca wyzwalacz Oracle Content Management ze składnika, która może zostać powiązana z czynnościami związanymi z innymi składnikami na stronie.

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

    Czynność: Funkcja obsługująca wywołanie zwrotne, gdy składnikowi jest zlecane wykonanie czynności z użyciem danego ładunku.

        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);
              }
            });
          }
        };

    Wywołanie zwrotne mające na celu wykonanie — na żądanie — jakichkolwiek zarejestrowanych czynności.

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

  • Subskrypcje związane z cyklem życia składnika:

    • Inicjalizacja składnika: Upewnienie się, że składnik nie będzie renderowany, dopóki nie zostaną pobrane wszystkie dane. Jest obsługiwane przez obiekty Knockout "observable".

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

      Uzyskanie początkowych wartości wszelkich wymaganych właściwości. Jest obsługiwane przez wywołania zwrotne pobierania danych.

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

    • Aktualizacje metadanych: wywołanie zwrotne, gdy metadane składnika składowane w imieniu składnika ulegną zmianie; na przykład, gdy użytkownik wywoła panel "Ustawienia" i zmieni dane.

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