Desenvolver Layouts de Seção Personalizados com APIs

Você pode desenvolver layouts de seção personalizados no Oracle Content Management com a API de Layout de Seção, o que inclui as APIs de Renderização e Edição.

Para obter os arquivos iniciantes a serem examinados, consulte Criar um Layout de Seção. Os arquivos iniciantes dos layouts de seção incluem comentários com detalhes sobre a estrutura de arquivos de layout de seção.

APIs de Renderização

As APIs de Renderização, carregadas do módulo render.js, são usadas no Site Builder e no runtime.

API de Renderização Descrição Parâmetro(s) de Entrada Retornar Resultado

API de Renderização	Descrição	Parâmetro(s) de Entrada	Retornar Resultado
(Construtor)	Inicializa o módulo de renderização de Layout de Seção.	Um objeto JavaScript que contém as seguintes propriedades: sectionlayoutData (Objeto) : os dados de layout de seção encontrados no modelo de página. componentId (String): o valor `componentId` do layout de seção, normalmente um GUID. renderMode (String, opcional): o modo de renderização para a operação de renderização. customSettingsData (Objeto): uma cópia de `customSettingsData` localizada em `sectionLayoutData.`	As APIs de Renderização de Layout de Seção são inicializadas.
renderizar	Emite elementos DOM apropriados ao layout de seção para a página, incluindo DIVs de contêiner para componentes filhos.	contêiner (Elemento) : o elemento DOM no qual a marcação do layout de seção deve ser renderizada.	Após o retorno desse método, os componentes filhos serão renderizados. Você pode identificar os componentes filhos encontrando os elementos `div[id]` filhos
addComponent	Usado com componentes de lista de conteúdo para adicionar dinamicamente componentes filhos a um layout de seção. Essa função é opcional.	contêiner (Elemento) : o elemento DOM no qual o novo componente deve ser renderizado. componentId (String): o ID do novo componente a ser adicionado ao layout de seção.	Após o retorno desse método, o elemento cujo ID corresponde à entrada `componentId` será renderizado.

(Construtor)

Inicializa o módulo de renderização de Layout de Seção.

Um objeto JavaScript que contém as seguintes propriedades:

sectionlayoutData (Objeto) : os dados de layout de seção encontrados no modelo de página.
componentId (String): o valor componentId do layout de seção, normalmente um GUID.
renderMode (String, opcional): o modo de renderização para a operação de renderização.
customSettingsData (Objeto): uma cópia de customSettingsData localizada em sectionLayoutData.

As APIs de Renderização de Layout de Seção são inicializadas.

renderizar

Emite elementos DOM apropriados ao layout de seção para a página, incluindo DIVs de contêiner para componentes filhos.

contêiner (Elemento) : o elemento DOM no qual a marcação do layout de seção deve ser renderizada.

Após o retorno desse método, os componentes filhos serão renderizados.

Você pode identificar os componentes filhos encontrando os elementos div[id] filhos

addComponent

Usado com componentes de lista de conteúdo para adicionar dinamicamente componentes filhos a um layout de seção.

Essa função é opcional.

contêiner (Elemento) : o elemento DOM no qual o novo componente deve ser renderizado.

componentId (String): o ID do novo componente a ser adicionado ao layout de seção.

Após o retorno desse método, o elemento cujo ID corresponde à entrada componentId será renderizado.

APIs de Edição

O módulo edit.js será carregado se a propriedade hasEditHandlers for definida como true no arquivo appinfo.json associado ao layout de seção.

As APIs de Edição são usadas no Site Builder.

Todas as funções desse módulo, exceto Construtor, são opcionais.

API de Edição	Descrição	Parâmetro(s) de Entrada	Retornar Resultado
(Construtor)	Inicializa o módulo de edição de Layout de Seção.	Um objeto JavaScript que contém a seguinte propriedade: componentId (String): o valor `componentId` do layout de seção, normalmente um GUID.	As APIs de Edição de Layout de Seção são inicializadas.
getCapabilities	Retorna um objeto que descreve os recursos de edição do layout de seção.	Um objeto JavaScript que descreve os recursos de edição do layout de seção. Na entrada, os recursos padrão serão fornecidos à função. A função pode modificar o objeto de Recursos conforme necessário. O objeto de Recursos pode incluir os seguintes recursos: title (String): o título do layout de seção a ser exibido ao usuário. settingsTitle (String): o título a ser exibido na caixa de diálogo Painel de Definições. hasSettings (Booliano): indica se o layout de seção suporta um Painel de Definições. allowMove (Booliano): indica se o layout de seção permite que itens filhos sejam movidos. allowDelete (Booliano): indica se o layout de seção permite que itens filhos sejam excluídos. isHidden (Booliano): indica se o layout de seção está oculto no momento em resposta a opções do usuário. dropTarget (Booliano): indica se o layout de seção é o destino das operações de arrastar e soltar. customMenuOptions (Array): opções de menu personalizadas a serem adicionadas ao menu de contexto do Layout de Seção. Cada menu-option object tem as seguintes propriedades. label (String) : o texto de exibição do item de menu. ação (Função): a função a ser chamada ao clicar no item de menu. desativado (Booliano): indica que o item de menu deve ser exibido em um estado desativado. ícone (String): o URL a ser exibido ao lado do label no item de menu. (Esta propriedade está reservada para uso futuro.) marca de seleção (Booliano): indica que uma marca de seleção deve aparecer ao lado do label no item de menu. subMenuItems (Array): opções de menu a serem exibidas em um submenu.	(Objeto): os recursos do layout de seção.
getCaptionContent	Retorna o nome para exibição do layout de seção, que aparecerá nos elementos da interface do usuário.	Nenhum.	(String): o nome para exibição do layout de seção.
filterCapabilities	Permite que o layout de seção modifique o objeto de Recursos antes que os menus sejam exibidos ao usuário. Você pode usar essa API para ajustar ou remover as opções de menu. (Veja também getCapabilities.)	Um objeto JavaScript que descreve os recursos de edição do layout de seção. Na entrada, os recursos padrão serão fornecidos à função.	(Objeto) Os recursos do layout de seção.
onDragOver	Chamado durante a operação Arrastar e Soltar para indicar se o item arrastado pode ser solto no layout de seção.	eventObject (Objeto de Evento): um objeto de evento que contém as informações sobre o evento de arrastar. dataTransfer (Objeto DataTransfer): um objeto `DataTransfer` que contém as informações sobre o item que está sendo arrastado para o layout de seção.	(Booliano) Um valor indicando se o item arrastado pode ser aceito pelo layout de seção. Retorna verdadeiro quando o layout de seção pode aceitar o item arrastado; caso contrário, falso.
onDrop	Chamado durante a parte de soltura de uma operação Arrastar e Soltar para indicar que o item arrastado deve ser colocado dentro do layout de seção.	eventObject (Objeto de Evento): um objeto de evento que contém as informações sobre o evento de soltura. dataTransfer (Objeto DataTransfer): um objeto DataTransfer que contém as informações sobre o item que está sendo solto no layout de seção.	(Booliano) Um valor indicando se a operação de soltura foi identificada pelo layout de seção. O retorno de verdadeiro ignora a lógica padrão.
onAddComponent	Notifica o Layout de Seção de que uma operação de Arrastar e Soltar adicionou um item ao layout de seção.	eventObject (Objeto de Evento): um objeto de evento que contém as informações sobre o evento de arrastar. dataTransfer (Objeto DataTransfer): um objeto DataTransfer que contém as informações sobre o item que está sendo solto no layout de seção. componentId (String): o valor `componentId` do item recém-adicionado.	Notificação do layout de seção.
onMoveComponent	Notifica o layout de seção de que uma operação de Arrastar e Soltar moveu um item no layout de seção.	eventObject (Objeto de Evento): um objeto de evento que contém as informações sobre o evento de arrastar. dataTransfer (Objeto DataTransfer): um objeto DataTransfer que contém as informações sobre o item que está sendo solto no layout de seção. componentId (String): o valor `componentId` do item movido.	Notificação do layout de seção.
getSettingsData	Permite que o layout de seção altere os dados de Definições antes da exibição do Painel de Definições.	settingsData (Objeto): os dados de definições padrão computados para o Layout de Seção	(Objeto) Os dados de definições do layout de seção.
updateSettings	Permite que o layout de seção altere suas definições após o Painel de Definições ter sido fechado. Essa API é chamada imediatamente antes do armazenamento das definições no modelo de página.	parâmetros (Objeto): o objeto de parâmetros brutos retornado do Painel de Definições. sectionLayoutData (Objeto) : os dados do layout de seção que serão armazenados. Os dados padrão serão gerados de `parameters (Object)` e transmitidos à função nesse parâmetro.	(Objeto) Os dados de layout de seção a serem armazenados no modelo de página.
descartar	Permite que o módulo de edição libere memória, desanexe eventos e desaloque recursos associados aos handlers de edição. Essa API é chamada quando o layout de seção precisa ser totalmente redesenhado, como no caso de uma operação Desfazer/Refazer.	Nenhum.	O redesenho do layout de seção está ativado.