Krok 13: Generování komponenty ve vloženém rámci

Podobné rysy komponent ve vložených rámcích a komponent nepoužívajících vložené rámce

Panel Nastavení

Vzhledem k tomu, že panel Nastavení je na stránce vždy umístěn ve vloženém rámci, kód panelu Nastavení se nezmění bez ohledu na to, zda komponenta používá vložený rámec nebo nikoli. Pro oba případy použití vytvoříte stejný kód panelu Nastavení.

Rozhraní API sady SDK pro weby

Rozhraní API sady SDK je pro oba případy použití stejné. Použijete stejný kód k vyvolání triggerů, sledování akcí a získání a nastavení hodnot vlastností. Zatímco určité vlastnosti nemusí být použitelné v obou případech (například nemůžete nastavit vlastnost "height" pro komponentu, která nepoužívá vložený rámec), rozhraní API zůstane stejné. Můžete tak kopírovat kód mezi oběma těmito typy komponent a ukázkový kód rozebíraný v tomto návodu bude fungovat pro oba případy.

Rozdíly mezi komponentami ve vložených rámcích a komponentami nepoužívajícími vložené rámce

Struktura souborů a závislosti

<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

Tyto soubory jsou vytvořeny tak, aby vám umožnily okamžitě spustit komponentu ve vloženém rámci na stránce. Mezi hlavní rozdíly mezi touto strukturou a strukturou standardní místní komponenty patří:

• Závislosti kódu v jazyce JavaScript:

  • Získáváte úplnou kopii těchto souborů, takže vaše komponenta bude spuštěna. Tyto soubory jsou vyžadovány ke spuštění ukázkové komponenty ve vloženém rámci. Obsah tohoto adresáře můžete přidávat a odebírat podle svých požadavků.

  • Vzhledem k tomu, že celý obsah adresáře assets pro vaši komponentu je při publikování komponenty přenesen na veřejný web, celý obsah adresáře js bude dostupný jak v nástroji Site Builder, tak za běhu.

  • Poznámka: Tyto soubory jsou vytvořeny tak, aby umožňovaly snadné použití. Měli byste zvážit konsolidaci těchto souborů v tématu nebo na jiném veřejném místě, místo abyste vytvářeli samostatné verze těchto souborů pro každou ze svých komponent používajících vložený rámec.

• render.html:

  • Toto je úplný dokument HTML na rozdíl od souboru render.js pro standardní komponenty, což je modul AMD.

Správa výšky komponenty

Jedním z problémů při používání vloženého rámce je správa výšky samotného vloženého rámce. Pokud není vše v pořádku, zobrazí se pro komponentu na stránce posuvníky. Zobrazení posuvníků může být jak záměrné, tak nechtěné.

K zajištění správy výšky vloženého rámce musí komponenta informovat stránku, jak má být vložený rámec vysoký. V případě vzdálených komponent se možná budete potýkat s problémy mezi doménami, takže bude nutné použít zasílání zpráv zajišťované sadou SDK pro weby a požádat stránku, aby nastavila vložený rámec na požadovanou výšku poté, co bude komponenta generována na stránce. K provedení tohoto kroku se používá rozhraní API SitesSDK.setProperty('height', {value}). (Prostudujte si téma Sady SDK služby Oracle Content and Experience.)

Můžete například vytvořit funkci setHeight a vlastní obslužný program vazby, který funkci zavolá po generování komponenty na stránce.

• Funkce aktualizace 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');
  };

• Vlastní obslužný program vazby z knihovny Knockout pro volání funkce setHeight, kdykoli je komponenta generována na stránce nebo se změní vlastnost:

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

• Aktualizace šablony, která zavolá obslužný program vazby:

  <div data-bind="sampleAppSetAppHeight: true"></div>

Registrace triggeru a akce

Zatímco registrace triggeru/akce pro komponenty, které nejsou ve vložených rámcích, se nachází v souboru appinfo.json, u komponent umístěných ve vložených rámcích obstarává poskytování těchto informací samotná komponenta. K tomu používá tato dvě rozhraní API:

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

Zde je uveden příklad použití 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;
    };

Přístup ke stylům témat

Vzhledem k tomu, že je komponenta generována ve vloženém rámci, nemá přístup ke stylům dostupným v tématu. Sada SDK pro weby poskytuje rozhraní API k načtení těchto stylů, aby je bylo možné použít pro prvky ve vloženém rámci.

Tímto tématem se podrobněji zabývá část Krok 14: Použití vlastních stylů pro komponentu generovanou ve vloženém rámci.

Smíšený protokol HTTPS versus HTTP

Vzhledem k tomu, že služba Oracle Content Management používá protokol HTTPS, všechny zdroje odkazované na stránce musí rovněž používat protokol HTTPS. Zdroje zahrnují základní soubor .html, který bude generován ve vloženém rámci, společně se všemi soubory, na které odkazuje.

Tento požadavek na zdroje se týká zejména vzdálených komponent, nicméně si musíte být tohoto omezení vědomi. Zdroje pro místní komponenty používající vložené rámce jsou poskytovány serverem služby Oracle Content Management, takže tyto komponenty již používají odpovídající protokol.

Pokračujte částí Krok 14: Použití vlastních stylů pro komponentu generovanou ve vloženém rámci.