Vaihe 13: komponentin muodostus sisäisessä kehyksessä

Sisäisen kehyksen komponenttien ja muiden komponenttien väliset yhtäläisyydet

Asetukset-paneeli

Koska Asetukset-paneeli sijoitetaan sivulle aina sisäisessä kehyksessä, Asetukset-paneelin koodi ei muutu riippumatta siitä, käytetäänkö komponentissa sisäistä kehystä vai ei. Kummassakin tapauksessa luodaan sama Asetukset-paneelin koodi.

Sivustojen SDK API

SDK API on sama molemmissa käyttötapauksissa. Herättimien käynnistyksessä, toimintojen kuuntelussa sekä ominaisuusarvojen haussa ja määrityksessä käytetään samaa koodia. Vaikka tiettyjä ominaisuuksia ei välttämättä voidakaan käyttää molemmissa tapauksissa (esimerkiksi "height"-ominaisuutta ei voi määrittää komponentille, joka ei käytä sisäistä kehystä), API säilyy samana. Sen ansiosta voit kopioida näiden komponenttityyppien välisen koodin, jolloin tässä opastuksessa käsiteltävä mallikoodi toimii molemmissa tapauksissa.

Sisäisen kehyksen komponenttien ja muiden komponenttien väliset erot

Tiedostorakenne ja riippuvuudet

<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

Nämä tiedostot luodaan, jotta voit suorittaa komponenttisi välittömästi sivun sisäisessä kehyksessä. Tärkeimmät tämän rakenteen ja tavallisen paikallisen komponentin väliset erot:

• JavaScript-riippuvuudet:

  • Saat täydellisen kopion näistä tiedostoista, joten komponenttisi suoritetaan. Nämä tiedostot vaaditaan, jotta sisäisen kehyksen mallikomponentti voidaan suorittaa. Voit lisätä ja poistaa tämän hakemiston sisältöä tarpeen mukaan.

  • Koska kaikki assets-hakemistossa oleva sisältö siirretään julkiseen sivustoon komponentin julkaisun yhteydessä, koko js-hakemiston sisältö on käytettävissä sekä sivustonluontiohjelmassa että ajonaikaisesti.

  • Huomautus: Nämä tiedostot luodaan käyttöä helpottamaan. Ne kannattaa yhdistää teemaksi tai johonkin toiseen julkiseen paikkaan sen sijaan, että niistä luotaisiin erilliset versiot jokaiselle sisäisen kehyksen komponentille.

• render.html:

  • Tämä on täydellinen HTML-asiakirja verrattuna tavallisten komponenttien render.js-tiedostoon, joka on AMD-moduuli.

Komponentin korkeuden hallinta

Yksi sisäisen kehyksen käyttämiseen liittyvistä seikoista on kehyksen itsensä korkeuden hallinta. Jos korkeus määritetään väärin, sivulle ilmestyy vierityspalkkeja komponenttia varten - halusitpa tai et.

Jotta sisäisen kehyksen korkeutta voitaisiin hallita, komponentin on kerrottava sivulle, kuinka korkeaksi se haluaa määrittää sisäisen kehyksen. Etäkomponenttien kohdalla kyseessä saattaa olla toimialueiden välinen ongelma. Käytä sivustojen SDK:n viestintää ja pyydä sivua määrittämään sisäinen kehys vaadittavan korkuiseksi, kun komponentti on muodostettu sivulle. Se tehdään käyttämällä API-rajapintaa SitesSDK.setProperty('height', {value}). (Katso kohta Oracle Content and Experience -palvelun SDK-työkalut.)

Voit esimerkiksi luoda setHeight-funktion ja mukautetun sidosten käsittelyohjelman, jolla funktio kutsutaan, kun komponentti on muodostettu sivulle.

• Päivitä korkeuden funktio:

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

• Mukautettu Knockout-sidosten käsittelyohjelma, joka kutsuu setHeight-kohteen aina, kun komponentti muodostetaan sivulle tai ominaisuutta muutetaan:

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

• Mallipohjan päivitys sidosten käsittelyohjelman kutsumiseksi:

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

Herättimien ja toimintojen rekisteröinti

Muiden kuin sisäisissä kehyksissä sijaitsevien komponenttien herättimien/toimintojen rekisteröinti sijaitsee appinfo.json-tiedostossa. Sisäisten kehysten komponenttien osalta puolestaan komponentti on itse vastuussa kyseisten tietojen hankinnasta. Se tehdään käyttämällä näitä kahta API-rajapintaa:

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

Tässä on esimerkki näiden API-rajapintojen käytöstä.

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

Teeman tyylien käyttö

Koska komponentti muodostetaan sisäisessä kehyksessä, se ei voi käyttää teeman saatavilla olevia tyylejä. Sivustojen SDK tarjoaa käyttöön API-rajapinnan, jolla kyseiset tyylit voidaan hakea. Sen jälkeen niitä voidaan käyttää sisäisen kehyksen sisällä olevissa elementeissä.

Tästä aiheesta kerrotaan tarkemmin kohdassa Vaihe 14: mukautettujen tyylien käyttö, kun komponentti muodostetaan sisäisessä kehyksessä.

Yhdistetty HTTPS ja HTTP-protokolla

Koska Oracle Content Management käyttää HTTPS-protokollaa, kaikkien sivulla viitattujen resurssien on myös käytettävä HTTPS-protokollaa. Resursseihin sisältyy .html-tiedosto, joka muodostetaan sisäisessä kehyksessä kaikkien niiden tiedostojen kanssa, joihin se viittaa.

Tämä resurssivaatimus koskee lähinnä etäkomponentteja. Kannattaa kuitenkin ottaa huomioon tämä rajoite. Sisäisiä kehyksiä käyttävien paikallisten komponenttien resurssit toimitetaan Oracle Content Management -palvelimen mukana, joten kyseiset komponentit käyttävät jo sopivaa protokollaa.

Jatka kohtaan Vaihe 14: mukautettujen tyylien käyttö, kun komponentti muodostetaan sisäisessä kehyksessä.