Pasul 13: Randarea unei componente într-un cadru inline

Similitudini între componentele care se află şi cele care nu se află într-un cadru inline

Panoul Setări

Deoarece panoul Setări este plasat întotdeauna în pagină într-un cadru inline, codul pentru panoul Setări nu se modifică, indiferent dacă respectiva componentă utilizează sau nu un cadru inline. Veţi crea acelaşi cod pentru panoul Setări, la ambele cazuri de utilizare.

Interfaţă API SDK pentru site-uri

Interfaţa API SDK este aceeaşi pentru ambele cazuri de utilizare. Veţi utiliza acelaşi cod pentru a genera triggere, pentru a asculta acţiuni şi pentru a obţine şi seta valori de proprietate. În timp ce anumite proprietăţi este posibil să nu fie aplicabile în ambele cazuri (de exemplu, nu puteţi seta proprietatea "height" pentru o componentă care nu utilizează un cadru inline), interfaţa API rămâne aceeaşi. Prin urmare, puteţi copia codul între aceste două tipuri de componente, iar codul exemplului discutat în acest tutorial va funcţiona pentru ambele cazuri.

Diferenţe între componentele care se află şi cele care nu se află într-un cadru inline

Structura fişierelor şi dependenţele

<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

Aceste fişiere sunt create pentru a vă permite să rulaţi imediat componenta dvs. într-un cadru inline din pagina respectivă. Principalele diferenţe dintre această structură şi structura unei componente locale standard sunt:

• Dependenţe JavaScript:

  • Obţineţi o copie completă a acestor fişiere, astfel încât componenta dvs. să poată rula. Aceste fişiere sunt necesare pentru rularea componentei exemplu în cadrul inline. Puteţi adăuga şi elimina conţinut din acest registru, în funcţie de cerinţele dvs.

  • Deoarece tot ce se află în directorul assets pentru componenta dvs. este încărcat la un site public atunci când componenta este publicată, tot ce există în directorul js va fi disponibil atât în Generatorul de site-uri cât şi la runtime.

  • Notă: Aceste fişiere sunt create pentru uşurinţă în utilizare. Ar trebui să vă uitaţi la consolidarea acestor fişiere în cadrul temei sau într-o altă locaţie publică, mai degrabă decât să creaţi versiuni separate ale acestor fişiere pentru fiecare dintre componentele dvs. din cadrul inline.

• render.html:

  • Acesta este un document HTML complet, spre deosebire de fişierul render.js pentru componentele standard, care este un modul AMD.

Administrarea parametrului "Height" (Înălţime) pentru componentă

Una dintre problemele legate de utilizarea unui cadru inline este managementul înălţimii cadrului inline. Dacă alegeţi greşit, veţi vedea barele de derulare care apar pentru componenta de pe pagină, ceea ce este posibil să doriţi sau nu.

Pentru a gestiona înălţimea cadrului inline, componenta trebuie să comunice paginii cât de înalt trebuie să fie cadrul inline. În cazul componentelor aflate la distanţă, este posibil să vă confruntaţi cu probleme inter-domenii, astfel că trebuie să utilizaţi mesageria SDK pe site-uri pentru a cere paginii să seteze cadrul inline la înălţimea necesară, după ce componenta s-a randat pe pagină. Acest lucru este realizat prin utilizarea SitesSDK.setProperty('height', {value}) din interfaţa API. (Consultaţi SDK-uri Oracle Content and Experience.)

De exemplu, creaţi funcţia setHeight şi o rutină de legare personalizată, pentru a o apela atunci când componenta s-a randat pe pagină.

• Actualizaţi funcţia pentru înălţime:

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

• Rutină de legare personalizată în Knockout, pentru a apela setHeight de fiecare dată când componenta este randată în pagină sau se modifică o proprietate:

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

• Actualizare şablon pentru apelarea rutinei de legare:

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

Înregistrare triggere şi acţiuni

În timp ce înregistrarea trigger/acţiune pentru componentele care nu sunt în cadre inline se află în fişierul appinfo.json, pentru componentele de cadru inline componenta însăşi este responsabilă de furnizarea acestor informaţii. Acest lucru este realizat utilizând aceste două interfeţe API:

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

Iată un exemplu de utilizare a acestor API-uri.

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

Acces la stilurile temei

Deoarece componenta este randată într-un cadru inline, nu are acces la stilurile disponibile în temă. SDK-ul Sites oferă un API pentru a prelua aceste stiluri, astfel încât acestea să poată fi aplicate elementelor din cadrul inline.

Acest subiect este explorat mai detaliat în Pasul 14: Utilizarea stilurilor personalizate atunci când componenta este randată într-un cadru inline.

Protocol HTTPS combinat în comparaţie cu protocol HTTP

Deoarece Oracle Content Management utilizează protocolul HTTPS, toate resursele la care se face referire în cadrul paginii trebuie, de asemenea, să utilizeze HTTPS. Resursele includ fişierul .html de bază, care va fi randat în cadrul inline împreună cu toate fişierele la care face referire.

Această cerinţă pentru resurse se aplică în principal componentelor la distanţă, totuşi trebuie să fiţi conştienţi de această restricţie. Resursele pentru componentele locale care utilizează cadre inline sunt furnizate de serverul Oracle Content Management, astfel că aceste componente folosesc deja un protocol asociat.

Continuaţi cu Pasul 14: Utilizarea stilurilor personalizate atunci când componenta este randată într-un cadru inline.