Passo 10: Utilizzare componenti nidificati con la modifica in linea

I componenti di Oracle Content Management vengono implementati tramite l'architettura di componenti KnockoutJS. Ciò significa che se si usa KnockoutJS per implementare i componenti, sarà possibile includere i componenti built-in di Oracle Content Management direttamente nel modello.

Nota:

Poiché i componenti built-in di Oracle Content Management possono essere eseguiti solo nella pagina di Oracle Content Management, non sarà possibile utilizzare componenti nidificati se il componente viene visualizzato in un frame in linea.

Per utilizzare i componenti nidificati, effettuare le operazioni riportate di seguito.

Implementare il componente con KnockoutJS.
Usare RequireJS per includere il componente e usare la stessa variabile di istanza "ko" Knockout creata da Oracle Content Management.

Ciò è necessario perché Oracle Content Management estende Knockout con i componenti e questi componenti non saranno disponibili se si utilizza la propria istanza di KnockoutJS.

In questo passo verranno esaminate le modalità di esecuzione del rendering dei componenti Immagine, Paragrafo e Titolo di Oracle Content Management nel componente personalizzato. L'utente sarà in grado di modificarlo direttamente all'interno della pagina e di accedere al pannello Impostazioni per il componente nidificato.

Per vedere come questi componenti vengono inclusi nel modello, modificare il file render.js ed esaminare l'oggetto sampleComponentTemplate. Questa è la sezione predefinita che viene visualizzata:

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

Esaminando il componente nidificato <scs-image> si vedrà l'istruzione seguente:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +

I dati scsComponent passati all'associazione modello params includono quanto riportato di seguito.

renderMode: indica la modalità corrente di SiteBuilder. Può essere utilizzato per abilitare e disabilitare le funzioni. Ad esempio, quando viene utilizzato dal componente <scs-title>, aggiunge il rich text editor se eseguito in modalità Modifica.
parentId: obbligatorio se il componente Oracle Content Management "sa" di essere visualizzato come componente nidificato. Tutte le modifiche apportate al componente nidificato verranno salvate nei dati per il componente personalizzato.
id: ID univoco per il componente nidificato. Verrà ulteriormente associato a uno di spazio di nomi dall'ID per il componente personalizzato.
data: dati iniziali per il componente nidificato. Se non viene modificato, il componente verrà visualizzato con i dati iniziali specificati.

I valori id e mode di riferimento vengono passati al componente personalizzato nell'oggetto SampleComponentViewModel, pertanto non è necessario modificare l'oggetto per ottenerli:

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

La sintassi per tutti gli altri componenti nidificati supportati prevede lo stesso pattern di <scs-paragraph>; ad esempio: <scs-image>, <scs-title>, <scs-button>.

Controllare i risultati per il passo 10

Aggiornare la pagina nel sito in modo che SiteBuilder possa selezionare le modifiche apportate al componente.
Attivare la modalità Modifica per la pagina.
Trascinare e rilasciare il componente sulla pagina.
Fare clic sul testo As a page author, you can edit. . . nel componente e aggiornare la descrizione utilizzando il rich text editor.
Passare alla modalità Anteprima per visualizzare l'aggiornamento.
Tornare alla modalità Modifica.
Visualizzare il pannello Impostazioni per il componente.
Fare clic sul collegamento Componenti visualizzato, perché ha trovato il componente nidificato.
Fare clic su Paragrafo, ovvero il componente nidificato trovato.

Ora è possibile aggiornare le proprietà per il componente Paragrafo all'interno del componente.

Nota:

Finché non sarà stata creata un'istanza del componente, Oracle Content Management non sarà informato dell'esistenza dei componenti nidificati nel modello. Per informare Oracle Content Management riguardo ai componenti nidificati nascosti, è possibile usare l'interfaccia API SitesSDK.setProperty('visibleNestedComponents', []);. Per fare in modo che i componenti nidificati nascosto vengano visualizzati per impostazione predefinita, è necessario aggiornare l'array "nestedComponents": [] nella registrazione del componente.

Continuare con l'argomento Passo 11: Supportare layout diversi.