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.jssampleComponentTemplate 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));
        

Uwaga:

Ponieważ serwer Oracle Content Management zawsze ustawia dla plików .html typ MIME (mime-type), nie można wysłać pliku .html i w celu załadowania go użyć wymaganej wtyczki "text!". Z tego powodu trzeba — w celu załadowania szablonu za pomocą wtyczki "text!" — użyć innego rozszerzenia albo wprowadzić szablon bezpośrednio w kodzie JavaScript, jak pokazano w udostępnionych danych.

Sprawdzanie wyników dla etapu 2

Wiemy już, jak jest tworzona struktura renderowania niestandardowego składnika. Aby sprawdzić, czy działa, należy:

  1. Zaktualizować w pliku render.js obiekt sampleComponentTemplate, zmieniając poniższą linię. Zmienić następujący kod:

    '<!-- ko if: initialized -->'+

    Zamiast tego użyć następującego kodu:

    '<!-- ko if: initialized -->'+ 
    '<div data-bind="text:\'image width is: \' + imageWidth()"></div>' +
  2. Zsynchronizować (lub wysłać) składnik z serwerem instancji Oracle Content Management.

  3. Edytować stronę w obszarze serwisu, a następnie przeciągnąć niestandardowy składnik A_Local_Component na stronę.

    W tym momencie powinniśmy w składniku widzieć informację image width is: 260px.

  4. Wyświetlić panel "Ustawienia", po czym nacisnąć przycisk Ustawienia niestandardowe.

  5. Zmienić wartość pola Szerokość obrazu na 300px.

  6. W tym momencie w składniku nastąpią dwie zmiany:
    1. Rozmiar domyślnego obrazu zostanie zmieniony z 260 pikseli na 300 pikseli.

    2. Dodany tekst zostanie zmieniony na image width is 300px.

Kontynuacja: Etap 3: Sprawdzanie struktury ustawień składnika lokalnego.