Sviluppare layout sezione personalizzati con interfacce API

È possibile sviluppare layout sezione personalizzati in Oracle Content Management con l'interfaccia API per i layout sezione, che include API di rendering e API di modifica.

Per conoscere i file iniziali da esaminare, vedere Creare un layout sezione. I file iniziali per i layout sezione includono commenti con i dettagli relativi alla struttura dei file di layout sezione.

API di rendering

Le interfacce API di rendering, caricate dal modulo render.js, vengono utilizzate in SiteBuilder e in runtime.

API di rendering Descrizione Parametro/i di input Risultato restituito

API di rendering	Descrizione	Parametro/i di input	Risultato restituito
(Constructor)	Inizializza il modulo di rendering dei layout sezione.	Oggetto JavaScript che contiene le proprietà riportate di seguito. sectionlayoutData (oggetto): dati del layout sezione trovati nel modello della pagina. componentId (stringa): il valore `componentId` del layout sezione, in genere un GUID. renderMode (stringa, facoltativa): modalità di visualizzazione per l'operazione di rendering. customSettingsData (oggetto): copia dei dati `customSettingsData` trovati in `sectionLayoutData`.	Le interfacce API di rendering dei layout sezione vengono inizializzate.
render	Genera gli elementi DOM appropriati per il layout sezione nella pagina, incluse le tag div contenitore per i componenti figlio.	container (elemento): l'elemento DOM in cui deve essere visualizzato il markup del layout sezione.	Dopo la restituzione del risultato da parte di questo metodo, i componenti figlio verranno visualizzati. È possibile identificare gli elementi figlio eseguendo la ricerca degli elementi `div[id]` figlio.
addComponent	Viene utilizzata con i componenti Lista di contenuti per aggiungere in modo dinamico i componenti figlio a un layout sezione. Questa funzione è facoltativa.	container (elemento): l'elemento DOM in cui deve essere visualizzato il nuovo componente. componentId (stringa): l'ID del nuovo componente da aggiungere al layout sezione.	Dopo la restituzione del risultato da parte di questo metodo, l'elemento con ID corrispondente al parametro di input `componentId` verrà visualizzato.

(Constructor)

Inizializza il modulo di rendering dei layout sezione.

Oggetto JavaScript che contiene le proprietà riportate di seguito.

sectionlayoutData (oggetto): dati del layout sezione trovati nel modello della pagina.
componentId (stringa): il valore componentId del layout sezione, in genere un GUID.
renderMode (stringa, facoltativa): modalità di visualizzazione per l'operazione di rendering.
customSettingsData (oggetto): copia dei dati customSettingsData trovati in sectionLayoutData.

Le interfacce API di rendering dei layout sezione vengono inizializzate.

render

Genera gli elementi DOM appropriati per il layout sezione nella pagina, incluse le tag div contenitore per i componenti figlio.

container (elemento): l'elemento DOM in cui deve essere visualizzato il markup del layout sezione.

Dopo la restituzione del risultato da parte di questo metodo, i componenti figlio verranno visualizzati.

È possibile identificare gli elementi figlio eseguendo la ricerca degli elementi div[id] figlio.

addComponent

Viene utilizzata con i componenti Lista di contenuti per aggiungere in modo dinamico i componenti figlio a un layout sezione.

Questa funzione è facoltativa.

container (elemento): l'elemento DOM in cui deve essere visualizzato il nuovo componente.

componentId (stringa): l'ID del nuovo componente da aggiungere al layout sezione.

Dopo la restituzione del risultato da parte di questo metodo, l'elemento con ID corrispondente al parametro di input componentId verrà visualizzato.

API di modifica

Il modulo edit.js viene caricato se la proprietà hasEditHandlers è impostata su true nel file appinfo.json associato al layout sezione.

Le interfacce API di modifica vengono utilizzate in SiteBuilder.

Tutte le funzioni di questo modulo, ad eccezione di Constructor, sono facoltative.

API di modifica	Descrizione	Parametro/i di input	Risultato restituito
(Constructor)	Inizializza il modulo di modifica dei layout sezione.	Oggetto JavaScript che contiene la proprietà seguente: componentId (stringa): il valore `componentId` del layout sezione, in genere un GUID.	Le interfacce API di modifica dei layout sezione vengono inizializzate.
getCapabilities	Restituisce un oggetto che descrive le capacità di modifica del layout sezione.	Oggetto JavaScript che descrive le capacità di modifica del layout sezione. Al momento dell'input, le capacità predefinite verranno fornite alla funzione. La funzione può modificare l'oggetto Capabilities in base alle esigenze. L'oggetto Capabilities può includere le capacità riportate di seguito. title (stringa): il titolo del layout sezione da presentare all'utente. settingsTitle (stringa): il titolo da visualizzare nella finestra di dialogo del pannello Impostazioni. hasSettings (booleano): indica se il layout sezione supporta il pannello Impostazioni. allowMove (booleano): indica se il layout sezione consente lo spostamento degli elementi figlio. allowDelete (booleano): indica se il layout sezione consente l'eliminazione degli elementi figlio. isHidden (booleano): indica se il layout sezione è nascosto in risposta alle scelte dell'utente. dropTarget (booleano): indica se il layout sezione è la destinazione per le operazioni di trascinamento della selezione. customMenuOptions (array): opzioni di menu personalizzate da aggiungere al menu di scelta rapida del layout sezione. Ogni oggetto menu-option contiene le proprietà riportate di seguito. label (stringa) : il testo visualizzato della voce di menu. action (funzione): la funzione da richiamare quando si fa clic sulla voce di menu. disabled (booleano): indica che la voce di menu deve essere visualizzata con lo stato Disabilitato. icon (stringa): l'URL da visualizzare accanto all'etichetta nella voce di menu. (Questa proprietà è riservata per uso futuro). checkmark (booleano): indica che deve essere visualizzato un segno di spunta accanto all'etichetta nella voce di menu. subMenuItems (array): opzioni di menu da visualizzare in un menu secondario.	(Oggetto): le capacità per il layout sezione.
getCaptionContent	Restituisce il nome visualizzato del layout sezione che apparirà negli elementi dell'interfaccia utente.	Nessuno.	(Stringa): il nome visualizzato del layout sezione.
filterCapabilities	Consente al layout sezione di modificare l'oggetto Capabilities prima della visualizzazione dei menu all'utente. È possibile utilizzare questa interfaccia API per regolare o rimuovere le opzioni di menu. (Vedere anche getCapabilities).	Oggetto JavaScript che descrive le capacità di modifica del layout sezione. Al momento dell'input, le capacità predefinite verranno fornite alla funzione.	(Oggetto): le capacità per il layout sezione.
onDragOver	Chiamata durante un'operazione di trascinamento della selezione per indicare se l'elemento trascinato può essere rilasciato nel layout sezione.	eventObject (oggetto evento): oggetto evento che contiene le informazioni relative all'evento di trascinamento. dataTransfer (oggetto DataTransfer): oggetto `DataTransfer` che contiene le informazioni relative all'elemento trascinato sul layout sezione.	(Booleano): valore che indica se l'elemento trascinato può essere accettato dal layout sezione. Restituisce true se il layout sezione può accettare l'elemento trascinato, altrimenti restituisce false.
onDrop	Chiamata durante la fase di rilascio di un'operazione di trascinamento della selezione per indicare che l'elemento trascinato deve essere posizionato all'interno del layout sezione.	eventObject (oggetto evento): oggetto evento che contiene le informazioni relative all'evento di rilascio. dataTransfer (oggetto DataTransfer): oggetto DataTransfer che contiene le informazioni relative all'elemento rilasciato sul layout sezione.	(Booleano): valore che indica se l'operazione di rilascio è stata gestita dal layout sezione. Quando viene restituito il valore booleano true, la logica predefinita viene ignorata.
onAddComponent	Notifica al layout sezione che un'operazione di trascinamento della selezione ha aggiunto un elemento nel layout sezione.	eventObject (oggetto evento): oggetto evento che contiene le informazioni relative all'evento di trascinamento. dataTransfer (oggetto DataTransfer): oggetto DataTransfer che contiene le informazioni relative all'elemento rilasciato sul layout sezione. componentId (stringa): il valore `componentId` dell'elemento appena aggiunto.	Notifica per il layout sezione.
onMoveComponent	Notifica al layout sezione che un'operazione di trascinamento della selezione ha spostato un elemento nel layout sezione.	eventObject (oggetto evento): oggetto evento che contiene le informazioni relative all'evento di trascinamento. dataTransfer (oggetto DataTransfer): oggetto DataTransfer che contiene le informazioni relative all'elemento rilasciato sul layout sezione. componentId (stringa): il valore `componentId` dell'elemento spostato.	Notifica per il layout sezione.
getSettingsData	Consente al layout sezione di modificare i dati delle impostazioni prima della visualizzazione del pannello Impostazioni.	settingsData (oggetto): i dati predefiniti delle impostazioni calcolati per il layout di sezione.	(Oggetto): i dati delle impostazioni per il layout sezione.
updateSettings	Consente al layout di sezione di modificare le proprie impostazioni dopo la chiusura del pannello Impostazioni. Questa interfaccia API viene richiamata immediatamente prima della memorizzazione delle impostazioni nel modello di pagina.	parameters (oggetto): l'oggetto dei parametri di tipo RAW restituito dal pannello Impostazioni. sectionLayoutData (oggetto) : i dati del layout sezione che verranno memorizzati. I dati predefiniti verranno generati da `parameters (oggetto)` e passati alla funzione in questo parametro.	(Oggetto): i dati del layout sezione da memorizzare nel modello di pagina.
dispose	Consente al modulo di modifica di liberare memoria, scollegare eventi e annullare l'allocazione delle risorse associate agli handler di modifica. Questa interfaccia API viene richiamata quando il layout sezione deve essere ridisegnato completamente, come avviene per le operazioni Annulla/Ripeti.	Nessuno.	La funzione che consente di ridisegnare il layout sezione è abilitata.