V tomto kroku skontrolujeme štruktúru predvolených súborov vytvorených pre lokálny komponent.
Pre jednoduchý príklad Hello World
sa štyri objekty JavaScript a počet riadkov kódu môžu zdať príliš veľa, ale ide o to, aby sme vám poskytli základ na vytváranie komplexnejších komponentov a tiež na riešenie interakcie so životným cyklom stránky Oracle Sites Cloud Service.
Ako skontrolovať štruktúru lokálneho komponentu:
Na domovskej stránke služby Oracle Content Management kliknite na položku Vývojár.
Zobrazí sa stránka Vývojár.
Kliknite na položku Zobraziť všetky komponenty.
V ponuke vyberte položku Vytvoriť lokálny komponent.
Zadajte názov komponentu, napríklad A_Local_Component.
Zadajte voliteľný popis.
Kliknite na položku Vytvoriť.
Keď to urobíte, v zozname komponentov sa zobrazí komponent s názvom A_Local_Component
.
Pomocou klienta služby Oracle Content Management pre synchronizáciu s počítačom vyhľadajte komponent a synchronizujte ho so systémom súborov.
Ak nemáte počítačový klient, môžete zobraziť všetky komponenty, vybrať komponent na stránke Komponenty v rozhraní služby Oracle Content Management a prejsť na nižšie úrovne na zobrazenie súborov.
V zozname súborov pod komponentom uvidíte tieto súbory:
assets render.js settings.html appinfo.json _folder_icon.jpg
Otvorte súbor render.js
v adresári /assets
.
render.js
:
Je štruktúrovaný ako modul JavaScript AMD, aby mohol byť na stránku „vyžiadaný“.
Zahŕňa aj odkazy na knižnice KnockoutJS a JQuery, ktoré už sú načítané ako súčasť stránky Oracle Content Management.
Pozorne si pozrite štruktúru súboru render.js
.
V obsahu súboru render.js
sa nachádzajú dva objekty JavaScript, ktoré implementujú požadované rozhrania API komponentu služby Oracle Content Management: sampleComponentFactory
a SampleComponentImpl
. Tieto objekty sú príkladom implementácie na vytvorenie ľubovoľných komponentov na báze KnockoutJS. Implementácia týchto objektov sa bude meniť v závislosti od technológií, ktoré použijete.
sampleComponentFactory
Tento objekt je vrátený modulom AMD v súbore render.js
.
Ide o veľmi jednoduchý objekt Factory, ktorý implementuje jedno rozhranie createComponent()
.
Zložitejšie implementácie môžu používať hodnotu args
, aby sa vrátili rôzne implementácie komponentu na základe parametra viewMode
. V porovnaní s generátorom lokalít to umožňuje používať omnoho jednoduchšiu implementáciu komponentu v čase behu.
SampleComponentImpl
Hlavnou funkciou v rámci tohto objektu je funkcia render
, ktorá sa používa na vykreslenie komponentu na stránke.
Aby bolo možné vykresliť na stránke komponent Knockout
, funkcia render
na stránku dynamicky pridá šablónu, v ktorej potom použije viazania viewModel
.
Zvyšok implementácie rieši inicializáciu parametra a šablóny viewModel
a spracovanie výmeny správ medzi stránkou a komponentom.
Posledné dva objekty v súbore render.js
– sampleComponentTemplate
a SampleComponentViewModel
poskytujú vlastnú implementáciu pre komponent. Ich implementácia sa bude líšiť v závislosti od vašich požiadaviek.
sampleComponentTemplate
Tento objekt poskytuje vytvorenie šablóny KnockoutJS. Skôr ako sa pokúsi niečo zobraziť, čaká, kým sa inicializujú všetky dáta pre komponent.
SampleComponentViewModel
viewModel
vyvolá informácie, ktoré uložila služba Oracle Content Management namiesto komponentu, a potom na základe týchto dát vyberie vhodný spôsob rozloženia komponentu.
Všeobecné pozorované objekty Knockout observables, ktoré sa v šablóne používajú na spracovanie prístupu k metadátam uloženým namiesto komponentu:
self.imageWidth = ko.observable('200px'); self.alignImage = ko.observable(); self.layout = ko.observable(); self.showTopLayout = ko.observable(); self.showStoryLayout = ko.observable();
Integrácia spúšťačov a akcií:
Spúšťač: Funkcia na vyvolanie spúšťača služby Oracle Content Management z komponentu, ktorý môže byť zviazaný s akciami iných komponentov na stránke.
self.imageClicked = function (data, event) { self.raiseTrigger("imageClicked"); // matches appinfo.json };
Akcia: Funkcia na spracovanie spätného volania, keď komponent dostane príkaz na vykonanie akcie s uvedeným payloadom.
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); } }); } };
Spätné volanie na vykonanie ľubovoľných registrovaných akcií na požiadanie.
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, $.proxy(self.executeActionsListener, self));
Odbery životného cyklu komponentu:
Inicializácia komponentu: Zabezpečte, aby sa komponent nevykreslil, kým sa nevyvolajú všetky dáta. Toto je spracované použitím pozorovaných objektov Knockout observables.
self.componentLayoutInitialized = ko.observable(false); self.customSettingsDataInitialized = ko.observable(false);
Získajte počiatočné hodnoty pre všetky požadované vlastnosti. Toto je spracované spätnými volaniami na vyvolanie dát.
SitesSDK.getProperty('componentLayout', self.updateComponentLayout); SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);
Aktualizácie metadát: Spätné volanie pri každej zmene metadát komponentu, ktoré boli uložené namiesto komponentu, napríklad keď používateľ vyvolá panel Nastavenia a aktualizuje dáta.
SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));
Poznámka:
Keďže server Oracle Content Management vždy nastaví pre súbory.html
typ MIME, nemôžete nahrať súbor .html
a na jeho načítanie použiť požadovaný plugin "text!"
. Z tohto dôvodu v prípade šablón potrebujete buď iné rozšírenie na načítanie pomocou pluginu "text!"
, alebo je potrebné súbor vložiť priamo do skriptu JavaScript, ako vidno v prednastavených dátach.Kontrola výsledkov pre krok 2
Teraz by ste už mali mať prehľad o tom, ako sa vytvára štruktúra vykresľovača vlastných komponentov. Ako overiť, či to funguje:
Zmeňte nasledujúci riadok tak, že aktualizujete objekt sampleComponentTemplate
v súbore render.js
. Zmeňte tento kód:
'<!-- ko if: initialized -->'+
Namiesto toho použite kód:
'<!-- ko if: initialized -->'+ '<div data-bind="text:\'image width is: \' + imageWidth()"></div>' +
Komponent synchronizujte alebo nahrajte na server inštancie Oracle Content Management.
Upravte stránku na lokalite a na stránku presuňte vlastný komponent A_Local_Component
.
V tomto momente by ste v komponente mali vidieť text image width is: 260px
.
Otvorte panel Nastavenia a kliknite na tlačidlo Vlastné nastavenia.
V poli Šírka obrázka nastavte hodnotu 300px.
Veľkosť predvoleného obrázka sa zmení z 260 pixelov na 300 pixelov.
Pridaný text sa aktualizuje na image width is 300px
.
Pokračujte na Krok 3: Kontrola štruktúry nastavení lokálneho komponentu.