Etapa 10: Usar Componentes Aninhados com Edição em Linha

Os componentes do Oracle Content Management são implementados usando a arquitetura de componente KnockoutJS. Isso significa que, se você estiver usando o KnockoutJS para implementar seus componentes, poderá incluir os componentes incorporados do Oracle Content Management diretamente no modelo.

Nota:

Como os componentes incorporados do Oracle Content Management só podem ser executados na página do Oracle Content Management, você não poderá usar componentes aninhados se seu componente for renderizado em um frame embutido.

Para utilizar componentes aninhados:

  1. Implemente seu componente usando o KnockoutJS.

  2. Use o RequireJS para incluir seu componente e use a mesma variável de instância "ko" do Knockout criada pelo Oracle Content Management.

    Isso é necessário porque o Oracle Content Management estende o Knockout com componentes e esses componentes não estarão disponíveis se você usar sua própria instância do KnockoutJS.

Nesta etapa, você verificará como os componentes Imagem, Parágrafo e Título do Oracle Content Management são renderizados em seu componente personalizado. Um usuário poderá editá-lo diretamente na página e acessar o painel Definições para o componente aninhado.

Para ver como esses componentes são incluídos no modelo, edite o arquivo render.js e examine o objeto sampleComponentTemplate. A seção padrão renderizada é mostrada aqui:

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

Examinando o componente aninhado <scs-image>, você verá a seguinte entrada:

'<scs-image params="{ scsComponent: { \'renderMode\': mode, \'parentId\': id, \'id\': \'imageId\', \'data\': imageData }}"></scs-image>' +
Os dados scsComponent transmitidos ao binding de modelo params incluem os seguintes:

  • renderMode: Isso se refere ao modo em que o Site Builder está. Você pode usar isso para ativar e desativar recursos. Por exemplo, quando utilizado pelo componente <scs-title>, ele adiciona o editor de rich text durante a execução no modo edit.

  • parentId: Isso é necessário para que o componente do Oracle Content Management saiba que está sendo renderizado como componente aninhado. Todas as alterações no componente aninhado serão salvas nos dados do componente personalizado.

  • id: Um ID exclusivo para o componente aninhado. Este será posteriormente associado a um namespace pelo ID do componente personalizado.

  • data: Dados iniciais do componente aninhado. Se o componente não for modificado posteriormente, ele será renderizado com esses dados iniciais.

Os valores id e mode referenciados são transmitidos ao seu componente personalizado no objeto SampleComponentViewModel, de modo que você não precisará modificar o objeto para obter esses valores:

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

A sintaxe de todos os outros componentes aninhados suportados segue o mesmo padrão de <scs-paragraph>; por exemplo: <scs-image>, <scs-title>, <scs-button>.

Verificar os Resultados da Etapa 10

  1. Atualize sua página no site para que o Site Builder possa selecionar as alterações no componente.

  2. Coloque a página no modo de Edição.

  3. Arraste e solte o componente na página.

  4. Clique no texto As a page author, you can edit. . . em seu componente e atualize a descrição usando o editor de rich text.

  5. Alterne para o modo de Visualização para ver sua atualização.

  6. Alterne novamente para o modo de Edição.

  7. Abra o painel Definições no seu componente.

  8. Clique no link Componentes que aparece agora, porque ele encontrou seu componente aninhado.

  9. Clique em Parágrafo, que é o componente aninhado que ele encontra.

Agora você pode atualizar as propriedades no componente Parágrafo, dentro do seu componente.

Nota:

Até que o componente tenha sido instanciado, o Oracle Content Management não sabe da existência de qualquer componente aninhado que possa existir no modelo. Para informar o Oracle Content Management sobre componentes aninhados ocultos, você pode usar a API SitesSDK.setProperty('visibleNestedComponents', []);. Para que componentes aninhados ocultos sejam mostrados por padrão, atualize o array "nestedComponents": [] no registro do componente.

Continue em Etapa 11: Suportar Diferentes Layouts.