13. lépés: Összetevő megjelenítése beágyazott keretben

A beágyazott és a nem beágyazott keretben megjelenített összetevők közötti hasonlóságok

Beállítások panel

Mivel a Beállítások panel mindig beágyazott keretben helyezkedik el az oldalon, a Beállítások panelhez tartozó kód attól függetlenül nem változik, hogy az összetevő beágyazott keretet használ-e vagy sem. Mindkét használati esetre a Beállítások panel ugyanazon kódját fogja létrehozni.

Sites SDK API

Az SDK API azonos mindkét használati esetnél. Ugyanazt a kódot fogja használni triggerek indításához, műveletek figyeléséhez, valamint a tulajdonságértékek beolvasásához és beállításához. Bár bizonyos tulajdonságok nem alkalmazhatók mindkét esetben (például nem állíthatja be a "height" tulajdonságot nem beágyazott keretet használó összetevőnél), de az API ugyanaz marad. Ezért az összetevők két típusa között másolhatja a kódot, és az ebben az oktatóanyagban bemutatott példakód mindkét esetben működni fog.

A beágyazott és a nem beágyazott keretben megjelenített összetevők közötti különbségek

Fájlstruktúra és függőségek

<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

Ezek a fájlok lehetővé teszik, hogy azonnal futtassa összetevőjét egy beágyazott keretben az oldalon. A fenti és a szokásos helyi összetevő struktúrája közötti alapvető különbségek a következők:

• JavaScript függőségek:

  • A fájlok teljes másolata rendelkezésre áll, így összetevője működni fog. Ezek a fájlok szükségesek a beágyazott keretben lévő mintaként szolgáló összetevő futtatásához. A felhasználó igényeinek megfelelően a könyvtár tartalma felvehető vagy eltávolítható.

  • Mivel összetevőjéhez tartozó assets könyvtár alatti teljes tartalom nyilvános webhelyre kerül az összetevő közzétételekor, a js könyvtár teljes tartalma elérhető lesz a Site Builder szerkesztőben és futásidőben.

  • Megjegyzés: Ezeknek a fájloknak a létrehozása az egyszerű használatot szolgálja. A fájlokat egyesítés céljából megtekintheti a témában vagy más nyilvános helyen, és nem kell különálló verziókat létrehoznia a beágyazott keretben lévő egyes összetevőkhöz.

• render.html:

  • Ez teljes mértékben HTML-dokumentum a szokásos összetevőkhöz tartozó render.js fájltól eltérően, amely AMD modul.

Összetevő „magasságának” kezelése

A beágyazott keretek használatának egyik problémája magának a beágyazott keret magasságának a kezelése. Ha ezt nem megfelelően kezeli, az összetevőhöz görgetősávok fognak megjelenni az oldalon, ami nem minden esetben kívánatos.

A beágyazott keret magasságának kezeléséhez az összetevőnek közölnie kell az oldallal, hogy milyen magas legyen a beágyazott keret. Távoli összetevőknél előfordulhatnak tartományok közötti problémák, ezért a Sites SDK üzenetkezelését kell használnia, hogy megkérje az oldalt a beágyazott keret kívánt magasságának beállítására, miután az összetevő megjelent az oldalon. Ez a SitesSDK.setProperty('height', {value}) API használatával történik. (Lásd: Az Oracle Content and Experience SDK készletei.)

Például hozza létre a setHeight függvényt és az egyéni kötéskezelőt ennek hívásához, amikor az összetevő megjelent az oldalon.

• Magasságot módosító függvény:

  // 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');
  };

• Knockout egyéni kötéskezelő a setHeight hívásához, amikor az összetevő megjelent az oldalon, vagy egy tulajdonság megváltozik:

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

• Sablonmódosítás kötéskezelő hívásához:

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

Triggerek és műveletek regisztrálása

Míg a nem beágyazott keretben lévő összetevőkhöz tartozó triggerek/műveletek regisztrálásának helye az appinfo.json fájl, a beágyazott keretben lévő összetevőknél maga az összetevő felelős ennek az adatnak a megadásáért. Ez a következő két API használatával történik:

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

Az alábbiakban példa látható az API felületek használatára.

    // 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;
    };

Hozzáférés témastílusokhoz

Mivel az összetevő beágyazott keretben jelenik meg, nem rendelkezik hozzáféréssel a témában elérhető stílusokhoz. A Sites SDK készlet API felületet biztosít ezeknek a stílusoknak a lekéréséhez, így ezek alkalmazhatók a beágyazott kereten belüli elemekre.

A témakör részletes ismertetését itt találja: 14. lépés: Egyéni stílusok használata az összetevő beágyazott keretben való megjelenítésekor.

HTTPS és HTTP protokoll vegyes használata

Mivel az Oracle Content Management a HTTPS protokollt használja, az oldalon belül hivatkozott összes erőforrásnak is a HTTPS protokollt kell használnia. Az erőforrások tartalmazzák a beágyazott keretben megjelenő .html bázisfájlt, valamint az ezzel hivatkozott összes fájlt.

Ez az erőforrás-követelmény főként a távoli összetevőkre vonatkozik, de ismernie kell ezt a korlátozást. A beágyazott kereteket használó helyi összetevők erőforrásait az Oracle Content Management kiszolgálója biztosítja, így ezek az összetevők már a megfelelő protokollt használják.

A következő témakör: 14. lépés: Egyéni stílusok használata az összetevő beágyazott keretben való megjelenítésekor.