Pasul 10: Utilizarea componentelor imbricate cu editare în linie

Componentele Oracle Content Management sunt implementate utilizând arhitectura de componente KnockoutJS. Acest lucru înseamnă că, dacă utilizaţi KnockoutJS pentru a implementa componentele dvs., puteţi include componentele Oracle Content Management înglobate, direct în şablonul dvs.

Notă:

Deoarece componentele Oracle Content Management înglobate se pot rula numai în pagina Oracle Content Management, nu puteţi utiliza componente imbricate dacă componenta dvs. este randată într-un cadru inline.

Pentru a putea utiliza componente imbricate:

  1. Implementaţi componenta dvs. utilizând KnockoutJS.

  2. Utilizaţi RequireJS pentru a include componenta dvs. şi utilizaţi aceeaşi variabilă de instanţă Knockout "ko" care este creată de Oracle Content Management.

    Acest lucru este necesar deoarece Oracle Content Management extinde Knockout cu componente şi aceste componente nu vor fi disponibile dacă utilizaţi propria instanţă a KnockoutJS.

În acest pas veţi examina modul în care componentele Oracle Content Management de Imagine, Paragraf şi Titlu sunt randate în componenta dvs. personalizată. Un utilizator îl va putea edita direct în cadrul paginii şi va accesa panoul Setări pentru componenta imbricată.

Pentru a vedea cum sunt incluse aceste componente în şablonul dvs., editaţi fişierul render.js şi priviţi la obiectul sampleComponentTemplate. Secţiunea prestabilită care este randată este prezentată aici:

'<!-- 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 -->' +

Privind la componenta imbricată <scs-image>, veţi vedea următoarea intrare:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Datele scsComponent transmise către legătura la şablonul params cuprind următoarele:

  • renderMode: Acest parametru se referă la modul în care funcţionează Generatorul de site-uri. Puteţi utiliza această opţiune pentru a activa şi dezactiva caracteristici. De exemplu, atunci când este utilizat de componenta <scs-title>, adaugă editorul de text formatat atunci când rulează în modul edit.

  • parentId: Acest parametru este obligatoriu când componenta Oracle Content Management randează ca o componentă imbricată. Toate modificările aduse componentei imbricate vor fi salvate în datele pentru componenta personalizată.

  • id: Un ID unic pentru componenta imbricată. Acesta va fi utilizat în continuare ca spaţiu de nume de către ID-ul respectiv pentru componenta personalizată.

  • data: Date iniţiale pentru componenta imbricată. În cazul în care componenta nu este modificată în continuare, ea va fi randată cu aceste date iniţiale.

Valorile de referinţă pentru id şi mode sunt transmise componentei dvs. personalizate din obiectul SampleComponentViewModel, astfel că nu este necesar să modificaţi obiectul pentru a prelua aceste valori:

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

Sintaxa pentru toate celelalte componente imbricate acceptate urmează acelaşi tipar ca acela pentru <scs-paragraph>; de exemplu: <scs-image>, <scs-title>, <scs-button>.

Verificaţi rezultatele de la pasul 10

  1. Reîncărcaţi pagina din site-ul dvs., astfel ca Generatorul de site-uri să poată prelua modificările aduse componentei.

  2. Treceţi pagina în modul Editare.

  3. Glisaţi şi plasaţi componenta dvs. pe pagină.

  4. Faceţi clic pe textul As a page author, you can edit. . . din componenta dvs. şi actualizaţi descrierea utilizând editorul de text formatat.

  5. Comutaţi la modul Previzualizare pentru a vedea actualizarea dvs.

  6. Reveniţi la modul Editare.

  7. Aduceţi panoul Setări în dreptul componentei dvs.

  8. Faceţi clic pe legătura Componente care acum apare, deoarece a găsit componenta dvs. imbricată.

  9. Faceţi clic pe Paragraf, care este componenta imbricată pe care a găsit-o.

Acum puteţi actualiza proprietăţile în raport de componenta Paragraf din cadrul componentei dvs.

Notă:

Până când componenta nu a fost instanţiată, Oracle Content Management nu ştie despre nicio componentă imbricată care poate exista în şablonul respectiv. Pentru a spune aplicaţiei Oracle Content Management despre componentele imbricate ascunse, puteţi utiliza interfaţa API SitesSDK.setProperty('visibleNestedComponents', []); API. Pentru a prezenta în mod prestabilit componentele imbricate ascunse, trebuie să actualizaţi matricea "nestedComponents": [] din înregistrarea componentei.

Continuaţi cu Pasul 11: Suportul pentru diverse machete.