Doteraz vzorka zobrazovala lokálny komponent vykreslený priamo na stránke. Môžete si vybrať aj možnosť vykreslenia komponentu vo vloženom ráme.
Pre vykreslenie komponentu vo vloženom ráme sa môžete rozhodnúť vtedy, ak komponent vykonáva na stránke len menšie aktualizácie, čo si vyžaduje opätovné vytvorenie stránky po každej zmene vlastností. Vzdialené komponenty sa navyše vždy vykresľujú vo vloženom ráme.
Vzorky v tejto sekcii sú prevzaté zo súborov, ktoré sa vytvoria, keď pri vytváraní lokálneho komponentu vyberiete voľbu Vytvorte komponent, ktorý sa vykresľuje v ráme iframe. Tieto množiny súborov však môžete vziať a hosťovať ich na vašom vzdialenom serveri, aby sa rovnomerne aplikovali na vzdialené komponenty.
Podobnosti medzi komponentmi vo vloženom ráme a priamo na stránke
Panel Nastavenia
Keďže panel Nastavenia je na stránke vždy vložený vo vloženom ráme, kód panela Nastavenia zostáva rovnaký bez ohľadu na to, či komponent používa vložený rám, alebo nie. Pre obidva prípady použitia vytvoríte rovnaký kód panela Nastavenia.
Rozhranie SDK API lokalít
Rozhranie SDK API je rovnaké pre obidva prípady použitia. Rovnaký kód použijete aj na vyvolávanie spúšťačov, prijímanie akcií a načítanie a nastavenie hodnôt vlastností. Kým niektoré vlastnosti sa nebudú dať použiť v obidvoch prípadoch (napríklad vlastnosť "height"
nemôžete nastaviť pre komponent, ktorý nepoužíva vložený rám), rozhranie API zostáva rovnaké. Preto nemôžete kopírovať kód medzi obidvoma týmito typmi komponentov a vzorový kód preberaný v tomto tutoriáli bude fungovať v obidvoch prípadoch.
Rozdiely medzi komponentmi vo vloženom ráme a priamo na stránke
Štruktúra a závislosti súborov
<component name> assets css app-styles.css js jquery.mn.js knockout.mn.js sites.min.js render.html settings.html appinfo.json _folder_icon.jpg
S týmito vytvorenými súbormi budete môcť komponent okamžite spustiť vo vloženom ráme na stránke. Hlavné rozdiely medzi touto štruktúrou a štruktúrou štandardného lokálneho komponentu sú:
Závislosti skriptu JavaScript:
Dostanete kompletnú kópiu týchto súborov, aby sa komponent mohol spustiť. Sú potrebné na spustenie vzorového komponentu vo vloženom ráme. Obsah tohto adresára môžete podľa potreby pridávať alebo odstraňovať.
Keďže všetko v adresári assets
pre váš komponent sa odošle na verejnú lokalitu automaticky (push) pri publikovaní komponentu, všetko v adresári js
bude dostupné tak v generátore lokalít, ako aj v čase behu.
Poznámka: Tieto súbory sa vytvárajú kvôli ľahšiemu používaniu. Namiesto vytvárania samostatných verzií týchto súborov pre jednotlivé komponenty vo vložených rámoch odporúčame zvážiť konsolidáciu týchto súborov v motíve alebo v inom verejnom umiestnení.
render.html
:
Ide o úplný dokument HTML na rozdiel od súboru render.js
pre štandardné komponenty, ktorý je modulom AMD.
Správa „výšky“ komponentu
Jedným z problémov pri používaní vloženého rámu je správa výšky samotného vloženého rámu. Ak ju nenastavíte správne, na stránkach komponentu uvidíte posúvače, ktoré môžete, ale nemusíte chcieť.
Aby ste mohli spravovať výšku vloženého rámu, musí komponent stránku informovať, aký vysoký má byť vložený rám. Pri vzdialených komponentoch možno budete riešiť problémy naprieč doménami. Bude preto potrebné, aby ste prostredníctvom správ súpravy Sites SDK požiadali stránku o nastavenie vloženého rámu na požadovanú výšku po vykreslení komponentu na stránke. Používa sa na to rozhranie API – SitesSDK.setProperty('height', {value})
. (Pozrite si časť Súpravy SDK služby Oracle Content and Experience.)
Vytvorte napríklad funkciu setHeight
a obslužný program vlastného viazania, ktorý ju bude volať po vykreslení komponentu na stránke.
Aktualizujte funkciu výšky:
// set the height of the iFrame for this App self.setHeight = function () { // use the default calculation or supply your own height value as a second parameter SitesSDK.setProperty('height'); };
Obslužný program vlastného viazania Knockout, ktorý volá funkciu setHeight
po každom vykreslení komponentu na stránke alebo po zmene vlastnosti:
ko.bindingHandlers.sampleAppSetAppHeight = { update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { // create dependencies on any observables so this handler is called whenever it changes var imageWidth = viewModel.imageWidth(), imageUrl = viewModel.imageUrl(), titleText = viewModel.titleText(), userText = viewModel.userText(); // re-size the iFrame in the Sites page now the template has rendered // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue viewModel.setHeight(); } };
Aktualizácia šablóny na volanie obslužného programu viazania:
<div data-bind="sampleAppSetAppHeight: true"></div>
Registrácia spúšťača a akcií
Kým informácie o registrácii spúšťača a akcie pre komponenty, ktoré nie sú vo vložených rámoch, sú umiestnené v súbore appinfo.json
, v prípade komponentov vo vložených rámoch je za poskytnutie týchto informácií zodpovedný samotný komponent. Používajú sa na to tieto dve rozhrania API:
SitesSDK.subscribe('GET_ACTIONS', self.getAppActions); SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);
Tu je príklad použitia týchto rozhraní API.
// Register TRIGGERS meta-data SampleAppViewModel.prototype.getAppTriggers = function (args) { var triggers = [{ "triggerName": "imageClicked", "triggerDescription": "Image clicked", "triggerPayload": [{ "name": "payloadData", "displayName": "Trigger Payload Data" }] }]; return triggers; }; // Register ACTIONS meta-data SampleAppViewModel.prototype.getAppActions = function (args) { var actions = [{ "actionName": "setImageWidth", "actionDescription": "Update the image width", "actionPayload": [{ "name": "imageWidth", "description": "Image Width in pixels", "type": { "ojComponent": { "component": "ojInputText" } }, "value": "" }] }]; return actions; };
Prístup k štýlom motívu
Komponent, ktorý sa vykresľuje vo vloženom ráme, nemá prístup k štýlom v motíve. Súprava Sites SDK poskytuje rozhranie API na vyvolanie týchto štýlov, aby sa mohli použiť pre prvky vo vloženom ráme.
Táto téma je podrobnejšie rozobraná v časti Krok 14: Použitie vlastných štýlov, keď sa komponent vykresľuje vo vloženom ráme.
Zmiešaný obsah protokolov HTTPS a HTTP
Keďže služba Oracle Content Management používa protokol HTTPS, aj všetky prostriedky odkazované na stránke musia používať protokol HTTPS
. Prostriedky zahŕňajú základný súbor .html
, ktorý sa vykreslí vo vloženom ráme spolu so všetkými súbormi, na ktoré odkazuje.
Hoci sa táto požiadavka na prostriedky týka hlavne vzdialených komponentov, je potrebné vedieť o tomto obmedzení. Prostriedky pre lokálne komponenty, ktoré používajú vložené rámy, poskytuje server Oracle Content Management, takže tieto komponenty už používajú zodpovedajúci protokol.
Pokračujte na Krok 14: Použitie vlastných štýlov, keď sa komponent vykresľuje vo vloženom ráme.