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:
Na stronie startowej Oracle Content Management wybrać opcję Programista.
Zostanie wyświetlona strona Programista.
Nacisnąć przycisk Wyświetl wszystkie składniki.
Z menu wybrać opcję Utwórz składnik lokalny.
Podać nazwę składnika; na przykład A_Local_Component.
Podać opcjonalny opis.
Nacisnąć przycisk Utwórz.
Gdy zostanie to wykonane, na liście składników pojawi się składnik o nazwie A_Local_Component
.
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ół.
Pod składnikiem można zobaczyć następujące pliki:
assets render.js settings.html appinfo.json _folder_icon.jpg
Z katalogu /assets
wybrać plik render.js
, a następnie go otworzyć.
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));
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:
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>' +
Zsynchronizować (lub wysłać) składnik z serwerem instancji Oracle Content Management.
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
.
Wyświetlić panel "Ustawienia", po czym nacisnąć przycisk Ustawienia niestandardowe.
Zmienić wartość pola Szerokość obrazu na 300px.
Rozmiar domyślnego obrazu zostanie zmieniony z 260 pikseli na 300 pikseli.
Dodany tekst zostanie zmieniony na image width is 300px
.
Kontynuacja: Etap 3: Sprawdzanie struktury ustawień składnika lokalnego.