Vaihe 10: sisäkkäisten komponenttien käyttö rivinsisäisessä muokkauksessa

Oracle Content Management -komponenttien toteutuksessa käytetään KnockoutJS-komponenttiarkkitehtuuria. Tämä tarkoittaa sitä, että jos toteutat komponentit KnockoutJS:n avulla, voit lisätä Oracle Content Management -palvelun valmiita komponentteja suoraan mallipohjaan.

Huomautus::

Koska Oracle Content Management -palvelun valmiita komponentteja voidaan käyttää vain Oracle Content Management -sivulla, et voi käyttää sisäkkäisiä komponentteja, jos komponenttisi on muodostettu sisäisessä kehyksessä.

Sisäkkäisten komponenttien hyödyntäminen:

  1. Toteuta komponenttisi KnockoutJS:n avulla.

  2. Lisää komponenttisi RequireJS:n avulla ja käytä samaa Knockout-instanssin muuttujaa "ko", joka on luotu Oracle Content Management -palvelussa.

    Tämä on tarpeen, koska Oracle Content Management laajentaa Knockoutia komponenteilla, eivätkä kyseiset komponentit ole käytettävissä, jos käytät omaa KnockoutJS-instanssia.

Tässä vaiheessa kerrotaan, kuinka Oracle Content Management -palvelun kuva-, kappale- ja otsikkokomponentit muodostetaan mukautetussa komponentissasi. Käyttäjä voit muokata niitä suoraan sivulla ja käyttää sisäkkäisen komponentin Asetukset-paneelia.

Jos haluat nähdä, kuinka kyseiset komponentit lisätään mallipohjaasi, muokkaa render.js-tiedostoa ja katso sampleComponentTemplate-objektia. Tässä näkyy muodostettava oletusosa:

'<!-- ko if: alignImage() !== \'right\' -->' +
'<div style="display:flex;">' +
'<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +
'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData } }"></scs-image>' +
'</div>' +
'<div data-bind="attr: {style: paragraphStyle}">' +
'<scs-title params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'titleId\', \'data\': titleData } }"></scs-title>' +
'<scs-paragraph params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'paragraphId\', \'data\': paragraphData } }"></scs-paragraph>' +
'</div>' +
'</div>' +
'<!-- /ko -->' +

Kun tarkastelet sisäkkäistä komponenttia <scs-image>, näet seuraavan merkinnän:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
params-mallipohjan sidokselle välitetyt scsComponent-tiedot sisältävät seuraavaa:

  • renderMode: Tämä viittaa tilaan, jossa sivustonluontiohjelma on. Tämän avulla voit ottaa ominaisuuksia käyttöön ja poistaa niitä käytöstä. Jos tätä käytetään esimerkiksi <scs-title>-komponentissa, se lisää Rich Text -editorin edit-tilassa ollessaan.

  • parentId: Tämä vaaditaan, jotta Oracle Content Management -komponentti tietää, että sitä ollaan muodostamassa sisäkkäisenä komponenttina. Kaikki sisäkkäisen komponentin muutokset tallennetaan mukautetun komponentin tietoihin.

  • id: Sisäkkäisen komponentin yksilöivä tunnus. Nimialueeseen lisätään myös mukautetun komponentin tunnus.

  • data: Sisäkkäisen komponentin alkutiedot. Jos komponenttia ei muokata enempää, se muodostetaan näitä alkutietoja käyttäen.

Viitatut arvot id ja mode välitetään mukautettuun komponenttiin SampleComponentViewModel-objektissa, joten sinun ei tarvitse muokata objektia näiden arvojen hakemiseksi:

// Store the args
self.mode = args.viewMode;
self.id = args.id;

Kaikkien muiden tuettujen sisäkkäisten komponenttien syntaksi noudattaa samaa kaavaa kuin <scs-paragraph>-komponentti. Esimerkkejä: <scs-image>, <scs-title>, <scs-button>.

Tarkista vaiheen 10 tulokset

  1. Päivitä sivustossasi oleva sivu, jotta sivustonluontiohjelma voi poimia komponenttiin tehdyt muutokset.

  2. Aseta sivu muokkaustilaan.

  3. Vedä ja pudota komponentti sivulle.

  4. Napsauta tekstiä As a page author, you can edit. . . komponentissasi ja päivitä kuvaus Rich Text -editoria käyttäen.

  5. Siirry esikatselutilaan ja käy katsomassa tekemäsi päivitys.

  6. Vaihda takaisin muokkaustilaan.

  7. Avaa komponentin Asetukset-paneeli.

  8. Napsauta Komponentit-linkkiä, joka tulee nyt näkyviin, koska se löysi sisäkkäisen komponenttisi.

  9. Napsauta Kappale-komponenttia, joka on löydetty sisäkkäinen komponentti.

Nyt voit päivittää komponenttisi ominaisuudet Kappale-komponentin perusteella.

Huomautus::

Ennen kuin komponentti on luotu, Oracle Content Management ei tiedä mitään mahdollisista sisäkkäisistä komponenteista, joita mallipohjassa saattaa olla. Voit kertoa Oracle Content Management -sovellukselle piilotetuista sisäkkäisistä komponenteista käyttämällä API-rajapintaa SitesSDK.setProperty('visibleNestedComponents', []);. Jos haluat piilotettujen komponenttien näkyvän oletusarvoisesti, sinun on päivitettävä "nestedComponents": []-taulukko komponentin rekisteröinnissä.

Jatka kohtaan Vaihe 11: eri asettelujen tuki.