Desarrollo de diseños de sección personalizados mediante las API

Puede desarrollar diseños de sección personalizados en Oracle Content Management mediante la API de diseño de sección, la cual incluye unas API de representación y unas API de edición.

Para obtener información sobre los archivos de inicio que debe buscar, consulte Crear un diseño de sección. Los archivos de inicio de los diseños de sección incluyen comentarios con información detallada sobre la estructura de los archivos de diseño de sección.

API de representación

Las API de representación, que se cargan desde el módulo render.js, se utilizan en el creador de sitios y en tiempo de ejecución.

API de representación Descripción Parámetros de entrada Devolver resultado

API de representación	Descripción	Parámetros de entrada	Devolver resultado
(Constructor)	Inicializa el módulo de representación Diseño de sección.	Objeto de JavaScript que contiene las siguientes propiedades: sectionlayoutData (Object): datos del diseño de sección encontrados en el modelo de página. componentId (String): valor `componentId` del diseño de sección, normalmente un GUID. renderMode (String, opcional): modo de representación de la operación de representación. customSettingsData (Object): copia de los `customSettingsData` encontrados en `sectionLayoutData.`	Se inicializan las API de representación del diseño de sección.
render	Emite elementos DOM adecuados para el diseño de sección en la página, incluidos los DIV de contenedor para los componentes secundarios.	container (Element): elemento DOM en el que se debe representar el marcador del diseño de sección.	Después de la devolución de este método, se representarán los componentes secundarios. Puede identificar los componentes secundarios buscando los elementos secundarios `div[id]`
addComponent	Se utiliza con componentes de lista de contenido para agregar dinámicamente componentes secundarios a un diseño de sección. Esta función es opcional.	container (Element): elemento DOM en el que se debe representar el nuevo componente. componentId (String): identificador del nuevo componente que se va a agregar al diseño de sección.	Después de la devolución de este método, se representará el elemento cuyo identificador coincida con la entrada de `componentId`.

(Constructor)

Inicializa el módulo de representación Diseño de sección.

Objeto de JavaScript que contiene las siguientes propiedades:

sectionlayoutData (Object): datos del diseño de sección encontrados en el modelo de página.
componentId (String): valor componentId del diseño de sección, normalmente un GUID.
renderMode (String, opcional): modo de representación de la operación de representación.
customSettingsData (Object): copia de los customSettingsData encontrados en sectionLayoutData.

Se inicializan las API de representación del diseño de sección.

render

Emite elementos DOM adecuados para el diseño de sección en la página, incluidos los DIV de contenedor para los componentes secundarios.

container (Element): elemento DOM en el que se debe representar el marcador del diseño de sección.

Después de la devolución de este método, se representarán los componentes secundarios.

Puede identificar los componentes secundarios buscando los elementos secundarios div[id]

addComponent

Se utiliza con componentes de lista de contenido para agregar dinámicamente componentes secundarios a un diseño de sección.

Esta función es opcional.

container (Element): elemento DOM en el que se debe representar el nuevo componente.

componentId (String): identificador del nuevo componente que se va a agregar al diseño de sección.

Después de la devolución de este método, se representará el elemento cuyo identificador coincida con la entrada de componentId.

API de edición

El módulo edit.js se carga si se ha definido la propiedad hasEditHandlers en true en el archivo appinfo.json asociado al diseño de sección.

Las API de edición se utilizan en el creador de sitios.

Todas las opciones de este módulo son opcionales, excepto Constructor.

API de edición	Descripción	Parámetros de entrada	Devolver resultado
(Constructor)	Inicializa el módulo de edición Diseño de sección.	Objeto de JavaScript que contiene la siguiente propiedad: componentId (String): valor `componentId` del diseño de sección, normalmente un GUID.	Se inicializan las API de edición del diseño de sección.
getCapabilities	Devuelve un objeto que describe las capacidades de edición del diseño de sección.	Objeto de JavaScript que describe las capacidades de edición del diseño de sección. Al realizar la entrada, se proporcionarán las capacidades por defecto para la función. La función puede modificar el objeto Capabilities según sea necesario. El objeto Capabilities puede incluir las siguientes capacidades: title (String): título del diseño de sección que se va a mostrar al usuario. settingsTitle (String): título que se va a mostrar en el cuadro de diálogo Panel de configuración. hasSettings (Boolean): indica si el diseño de sección admite un Panel de configuración. allowMove (Boolean): indica si el diseño de sección permite que se muevan los elementos secundarios. allowDelete (Boolean): indica si el diseño de sección permite que se supriman los elementos secundarios. isHidden (Boolean): indica si el diseño de sección está actualmente oculto como respuesta a las opciones de usuario. dropTarget (Boolean): indica si el diseño de sección es el destino de las operaciones de arrastrar y soltar. customMenuOptions (Array): opciones de menú personalizadas que se van a agregar al menú contextual Diseño de sección. Cada objeto de opción de menú tiene las siguientes propiedades: label (String): texto mostrado del elemento de menú. action (Function): función que se va a llamar cuando se hace clic en el elemento de menú. disabled (Boolean): indica que el elemento de menú debe mostrarse en estado desactivado. icon (String): URL que se va a mostrar junto a la etiqueta en el elemento de menú. (Esta propiedad se reserva para su uso posterior). checkmark (Boolean): indica que debe aparecer una marca de control junto a la etiqueta en el elemento de menú. subMenuItems (Array): opciones de menú que se van a mostrar en un submenú.	(Object): capacidades para el diseño de sección.
getCaptionContent	Devuelve el nombre mostrado del diseño de sección que aparecerá en los elementos de interfaz de usuario.	Ninguno.	(String): nombre mostrado del diseño de sección.
filterCapabilities	Permite al diseño de sección modificar el objeto Capabilities antes de que se muestren los menús al usuario. Puede utilizar esta API para ajustar o eliminar opciones de menú. (Consulte también getCapabilities).	Objeto de JavaScript que describe las capacidades de edición del diseño de sección. Al realizar la entrada, se proporcionarán las capacidades por defecto para la función.	(Object) Capacidades para el diseño de sección.
onDragOver	Se llama durante una operación de arrastrar y soltar para indicar si el elemento arrastrado se puede soltar en el diseño de sección.	eventObject (Event Object): objeto de evento que contiene información sobre el evento de arrastre. dataTransfer (DataTransfer Object): objeto `DataTransfer` que contiene información sobre el elemento que se arrastra sobre el diseño de sección.	(Boolean) Valor que indica si el elemento arrastrado se puede aceptar en el diseño de sección. Devuelve true si el diseño de sección puede aceptar el elemento arrastrado; de lo contrario, devuelve false.
onDrop	Se llama durante la porción de soltar de una operación de arrastrar y soltar para indicar que el elemento arrastrado se debe soltar dentro del diseño de sección.	eventObject (Event Object): objeto de evento que contiene información sobre el evento de soltar. dataTransfer (DataTransfer Object): objeto DataTransfer que contiene información sobre el elemento que se suelta en el diseño de sección.	(Boolean) Valor que indica si la operación de soltar la ha gestionado el diseño de sección. La devolución de true omite la lógica por defecto.
onAddComponent	Notifica al diseño de sección que una operación de arrastrar y soltar ha agregado un elemento en el diseño de sección.	eventObject (Event Object): objeto de evento que contiene información sobre el evento de arrastre. dataTransfer (DataTransfer Object): objeto DataTransfer que contiene información sobre el elemento que se suelta en el diseño de sección. componentId (String): valor `componentId` del elemento recién agregado.	Notificación de diseño de sección.
onMoveComponent	Notifica al diseño de sección que una operación de arrastrar y soltar ha movido un elemento en el diseño de sección.	eventObject (Event Object): objeto de evento que contiene información sobre el evento de arrastre. dataTransfer (DataTransfer Object): objeto DataTransfer que contiene información sobre el elemento que se suelta en el diseño de sección. componentId (String): valor `componentId` del elemento movido.	Notificación de diseño de sección.
getSettingsData	Permite al diseño de sección cambiar los datos de configuración antes de que se muestre el Panel de configuración.	settingsData (Object): datos de configuración por defecto calculados para el diseño de sección.	(Object) Datos de configuración para el diseño de sección.
updateSettings	Permite al diseño de sección cambiar la configuración una vez que el Panel de configuración se ha cerrado. Se llama a esta API justo antes de que se almacenen los valores en el modelo de página.	parameters (Object): objeto de parámetros raw devuelto desde el Panel de configuración. sectionlayoutData (Object): datos del diseño de sección que se van a almacenar. Los datos por defecto se generarán a partir de `parameters (Object)` y se transferirán a la función en este parámetro.	(Object) Datos del diseño de sección que se van a almacenar en el modelo de página.
dispose	Permite al módulo de edición liberar memoria, desasociar eventos y anular la asignación de recursos asociados a los manejadores de edición. Se llama a esta API cuando es necesario rediseñar completamente el diseño de sección, como es el caso de una operación Deshacer/Rehacer.	Ninguno.	Se activa el rediseño del diseño de sección.