Benutzerdefinierte Abschnittslayouts mit APIs entwickeln

Sie können benutzerdefinierte Abschnittslayouts in Oracle Content Management mit der Abschnittslayout-API entwickeln, die Rendering-APIs und Bearbeitungs-APIs enthält.

Ausgangsdateien finden Sie unter Abschnittslayout erstellen. Die Ausgangsdateien für Abschnittslayouts enthalten Kommentare mit Details zur Struktur von Abschnittslayoutdateien.

Rendering-APIs

Die Rendering-APIs, die aus dem Modul render.js geladen werden, werden in Sitebuilder und zur Laufzeit verwendet.

Rendering-API Beschreibung Eingabeparameter Rückgabeergebnis

Rendering-API	Beschreibung	Eingabeparameter	Rückgabeergebnis
(Konstruktor)	Initialisiert das Renderingmodul für Abschnittslayouts.	Ein JavaScript-Objekt mit den folgenden Eigenschaften: sectionlayoutData (Objekt) : Die Abschnittslayoutdaten im Seitenmodell. componentId (Zeichenfolge): Der `componentId`-Wert des Abschnittslayouts, in der Regel eine GUID. renderMode (Zeichenfolge, optional): Der Rendermodus für den Renderingvorgang. customSettingsData (Objekt): Eine Kopie der `customSettingsData` in `sectionLayoutData.`	Die Rendering-APIs für Abschnittslayouts werden initialisiert.
render	Gibt passende DOM-Elemente für das Abschnittslayout an die Seite aus, darunter Container-DIVs für untergeordnete Komponenten.	container (Element) : Das DOM-Element, in dem das Markup des Abschnittslayouts gerendert werden soll.	Nach Rückgabe dieser Methode werden untergeordnete Komponenten gerendert. Sie können untergeordnete Komponenten identifizieren, indem Sie untergeordnete `div[id]`-Elemente suchen
addComponent	Wird mit Inhaltslistenkomponenten verwendet, um untergeordnete Komponenten dynamisch zu einem Abschnittslayout hinzuzufügen. Diese Funktion ist optional.	container (Element) : Das DOM-Element, in dem die neue Komponente gerendert werden soll. componentId (Zeichenfolge): Die ID der neuen Komponente, die dem Abschnittslayout hinzugefügt wird.	Nach Rückgabe dieser Methode wird das Element gerendert, dessen ID mit der `componentId`-Eingabe übereinstimmt.

(Konstruktor)

Initialisiert das Renderingmodul für Abschnittslayouts.

Ein JavaScript-Objekt mit den folgenden Eigenschaften:

sectionlayoutData (Objekt) : Die Abschnittslayoutdaten im Seitenmodell.
componentId (Zeichenfolge): Der componentId-Wert des Abschnittslayouts, in der Regel eine GUID.
renderMode (Zeichenfolge, optional): Der Rendermodus für den Renderingvorgang.
customSettingsData (Objekt): Eine Kopie der customSettingsData in sectionLayoutData.

Die Rendering-APIs für Abschnittslayouts werden initialisiert.

render

Gibt passende DOM-Elemente für das Abschnittslayout an die Seite aus, darunter Container-DIVs für untergeordnete Komponenten.

container (Element) : Das DOM-Element, in dem das Markup des Abschnittslayouts gerendert werden soll.

Nach Rückgabe dieser Methode werden untergeordnete Komponenten gerendert.

Sie können untergeordnete Komponenten identifizieren, indem Sie untergeordnete div[id]-Elemente suchen

addComponent

Wird mit Inhaltslistenkomponenten verwendet, um untergeordnete Komponenten dynamisch zu einem Abschnittslayout hinzuzufügen.

Diese Funktion ist optional.

container (Element) : Das DOM-Element, in dem die neue Komponente gerendert werden soll.

componentId (Zeichenfolge): Die ID der neuen Komponente, die dem Abschnittslayout hinzugefügt wird.

Nach Rückgabe dieser Methode wird das Element gerendert, dessen ID mit der componentId-Eingabe übereinstimmt.

Bearbeitungs-APIs

Das Modul edit.js wird geladen, wenn die Eigenschaft hasEditHandlers in der Datei appinfo.json für das Abschnittslayout auf true gesetzt ist.

Die Bearbeitungs-APIs werden in Sitebuilder verwendet.

Alle Funktionen in diesem Modul mit Ausnahme des Konstruktors sind optional.

Bearbeitungs-API	Beschreibung	Eingabeparameter	Rückgabeergebnis
(Konstruktor)	Initialisiert das Bearbeitungsmodul für Abschnittslayouts.	Ein JavaScript-Objekt mit der folgenden Eigenschaft: componentId (Zeichenfolge): Der `componentId`-Wert des Abschnittslayouts, in der Regel eine GUID.	Die Bearbeitungs-APIs für Abschnittslayouts werden initialisiert.
getCapabilities	Gibt ein Objekt zurück, das die Bearbeitungsfunktionen des Abschnittslayouts beschreibt.	Ein JavaScript-Objekt, das die Bearbeitungsfunktionen des Abschnittslayouts beschreibt. Nach der Eingabe werden die Standardfunktionen für die Funktion bereitgestellt. Die Funktion kann das Capabilities-Objekt nach Bedarf ändern. Das Capabilities-Objekt kann die folgenden Funktionen umfassen: title (Zeichenfolge): Der Titel des Abschnittslayouts, der Benutzern angezeigt wird. settingsTitle (Zeichenfolge): Der Titel, der im Dialogfeld des Einstellungsbereichs angezeigt werden soll. hasSettings (boolescher Wert): Gibt an, ob das Abschnittslayout einen Einstellungsbereich unterstützt. allowMove (boolescher Wert): Gibt an, ob untergeordnete Elemente im Abschnittslayout verschoben werden können. allowDelete (boolescher Wert): Gibt an, ob untergeordnete Elemente im Abschnittslayout gelöscht werden können. isHidden (boolescher Wert): Gibt an, ob das Abschnittslayout derzeit als Reaktion auf Benutzeroptionen ausgeblendet ist. dropTarget (boolescher Wert): Gibt an, ob das Abschnittslayout das Ziel für Drag-and-Drop-Vorgänge ist. customMenuOptions (Array): Benutzerdefinierte Menüoptionen, die dem Kontextmenü des Abschnittslayouts hinzugefügt werden. Jedes menu-option-Objekt hat die folgenden Eigenschaften: label (Zeichenfolge) : Der Anzeigetext des Menüelements. action (Funktion): Die Funktion, die beim Klicken auf das Menüelement aufgerufen werden soll. disabled (boolescher Wert): Gibt an, dass das Menüelement deaktiviert angezeigt werden soll. icon (Zeichenfolge): Die URL, die neben dem Label im Menüelement angezeigt werden soll. (Diese Eigenschaft ist für die zukünftige Verwendung reserviert.) checkmark (boolescher Wert): Gibt an, dass ein Häkchen neben dem Label im Menüelement angezeigt werden soll. subMenuItems (Array): Menüoptionen, die in einem Untermenü angezeigt werden sollen.	(Objekt): Die Funktionen für das Abschnittslayout.
getCaptionContent	Gibt den Anzeigenamen des Abschnittslayouts zurück, der in UI-Elementen angezeigt wird.	Kein Wert.	(Zeichenfolge): Der Anzeigename des Abschnittslayouts.
filterCapabilities	Damit kann das Abschnittslayout das Capabilities-Objekt ändern, bevor Menüs angezeigt werden. Mit dieser API können Sie Menüoptionen anpassen oder entfernen. (Siehe auch getCapabilities.)	Ein JavaScript-Objekt, das die Bearbeitungsfunktionen des Abschnittslayouts beschreibt. Bei der Eingabe werden die Standardfunktionen für die Funktion bereitgestellt.	(Objekt) Die Funktionen für das Abschnittslayout.
onDragOver	Wird bei einem Drag-and-Drop-Vorgang aufgerufen, um anzugeben, ob das verschobene Element im Abschnittslayout abgelegt werden kann.	eventObject (Ereignisobjekt): Ein Ereignisobjekt mit Informationen zum Drag-Ereignis. dataTransfer (DataTransfer-Objekt): Ein `DataTransfer`-Objekt mit Informationen zum Element, das im Abschnittslayout verschoben wird.	(Boolescher Wert) Ein Wert, der angibt, ob das verschobene Element vom Abschnittslayout akzeptiert werden kann. Gibt true zurück, wenn das Abschnittslayout das verschobene Element akzeptieren kann. Andernfalls false.
onDrop	Wird beim Drop-Teil eines Drag-and-Drop-Vorgangs aufgerufen, um anzugeben, dass das verschobene Element im Abschnittslayout abgelegt werden muss.	eventObject (Ereignisobjekt): Ein Ereignisobjekt mit Informationen zum Drop-Ereignis. dataTransfer (DataTransfer-Objekt): Ein DataTransfer-Objekt mit Informationen zum Element, das im Abschnittslayout abgelegt wird.	(Boolescher Wert) Ein Wert, der angibt, ob der Drop-Vorgang vom Abschnittslayout verarbeitet wurde. Bei Rückgabe von true wird die Standardlogik umgangen.
onAddComponent	Benachrichtigt das Abschnittslayout darüber, dass ein Element im Abschnittslayout mit einem Drag-and-Drop-Vorgang hinzugefügt wurde.	eventObject (Ereignisobjekt): Ein Ereignisobjekt mit Informationen zum Drag-Ereignis. dataTransfer (DataTransfer-Objekt): Ein DataTransfer-Objekt mit Informationen zum Element, das im Abschnittslayout abgelegt wird. componentId (Zeichenfolge): Der `componentId`-Wert des neu hinzugefügten Elements.	Abschnittslayoutbenachrichtigung.
onMoveComponent	Benachrichtigt das Abschnittslayout darüber, dass ein Element im Abschnittslayout mit einem Drag-and-Drop-Vorgang verschoben wurde.	eventObject (Ereignisobjekt): Ein Ereignisobjekt mit Informationen zum Drag-Ereignis. dataTransfer (DataTransfer-Objekt): Ein DataTransfer-Objekt mit Informationen zum Element, das im Abschnittslayout abgelegt wird. componentId (Zeichenfolge): Der `componentId`-Wert des verschobenen Elements.	Abschnittslayoutbenachrichtigung.
getSettingsData	Damit kann das Abschnittslayout die Einstellungsdaten ändern, bevor der Einstellungsbereich angezeigt wird.	settingsData (Objekt): Die für das Abschnittslayout berechneten Standardeinstellungsdaten.	(Objekt) Die Einstellungsdaten für das Abschnittslayout.
updateSettings	Damit kann das Abschnittslayout seine Einstellungen ändern, nachdem der Einstellungsbereich geschlossen wurde. Diese API wird direkt vor dem Speichern der Einstellungen im Seitenmodell aufgerufen.	parameters (Objekt): Das vom Einstellungsbereich zurückgegebene Raw-Parameterobjekt. sectionLayoutData (Objekt) : Die zu speichernden Abschnittslayoutdaten. Standarddaten werden vom `parameters`-Objekt generiert und an die Funktion in diesem Parameter übergeben.	(Objekt) Die Abschnittslayoutdaten, die im Seitenmodell gespeichert werden sollen.
dispose	Damit kann das Bearbeitungsmodul Arbeitsspeicher freigeben, Ereignisse trennen und die Zuweisung von Ressourcen für die Bearbeitungs-Handler aufheben. Diese API wird aufgerufen, wenn das Abschnittslayout gänzlich neu gezeichnet werden muss, wie bei einem Undo/Redo-Vorgang.	Kein Wert.	Das erneute Zeichnen des Abschnittslayouts ist aktiviert.