Passo 13: Apresentar um Componente numa Moldura Inline

Semelhanças Entre os Componentes de Moldura Inline e Moldura Não Inline

Painel Definições

Uma vez que o painel Definições é sempre colocado na página numa moldura inline, o código para o painel Definições não é alterado independentemente de o componente utilizar uma moldura inline ou não. Irá criar o mesmo código de painel Definições para ambos os casos de utilização.

API do Sites SDK

A API do SDK é a mesma para ambos os casos de utilização. Utilizará o mesmo código para gerar triggers, monitorizar ações e obter e definir valores de propriedade. Embora determinadas propriedades possam não ser aplicáveis em ambos os casos (por exemplo, não pode definir a propriedade "height" para um componente que não utiliza uma moldura inline), a API permanece a mesma. Por conseguinte, pode copiar o código entre ambos estes tipos de componentes, funcionando em ambos os casos o código de exemplo abordado neste tutorial.

Diferenças Entre os Componentes de Moldura Inline e Moldura Não Inline

Estrutura de Ficheiro e Dependências

<component name>
    assets
        css
            app-styles.css
        js
            jquery.mn.js
            knockout.mn.js
            sites.min.js
        render.html
        settings.html
    appinfo.json
    _folder_icon.jpg

Estes ficheiros são criados para lhe permitir executar imediatamente os seus componentes numa moldura inline na páginas. As diferenças principais entre esta estrutura e a de um componente local standard são:

• Dependências de JavaScript:

  • Está a obter uma cópia completa destes ficheiros, por isso, o seu componente será executados. Estes ficheiros são necessários para que o componente da moldura inline de exemplo seja executado. Pode acrescentar e retirar o conteúdo deste diretório com base nos seus requisitos.

  • Uma vez que todo o conteúdo que está no diretório assets do seu componente é colocado num site público quando o componente é publicado, todo o conteúdo no diretório js será disponibilizado tanto no Criador de Sites como em runtime.

  • Nota: Estes ficheiros são criados para facilitar a utilização. Deverá consultar a consolidação destes ficheiros no tema ou noutra localização pública em vez de criar versões separadas destes ficheiros para cada um dos seus componentes de moldura inline.

• render.html:

  • Este é um documento de HTML completo por oposição ao ficheiro render.js para componentes standard, que é um módulo AMD.

Gestão do Componente "Altura"

Um dos problemas na utilização de uma moldura inline é a gestão da altura da própria moldura inline. Se este problema não for tido em consideração, verá barras de deslocação a aparecer para o componente na página, o que poderá ser a sua intenção ou não.

Para gerir a altura da moldura inline, o componente deve indicar à página a altura pretendida para a moldura inline. Com os componentes remotos, poderá deparar-se com problemas entre domínios, pelo que deve utilizar as mensagens do Sites SDK para pedir à página para definir a moldura inline para a altura necessária depois de o componente ter sido apresentado na página. Este procedimento é efetuado utilizando a API SitesSDK.setProperty('height', {value}). (ConsulteSDKs do Oracle Content and Experience.)

Por exemplo, crie a função setHeight e uma rotina de tratamento de associação customizada para a chamar quando o componente for apresentado na página.

• Função de altura de atualização:

  // set the height of the iFrame for this App
  self.setHeight = function () {
  // use the default calculation or supply your own height value as a second parameter
  SitesSDK.setProperty('height');
  };

• Rotina de tratamento de associação customizada do Knockout para chamar setHeight sempre que o componente for apresentado na página ou a propriedade for alterada:

  ko.bindingHandlers.sampleAppSetAppHeight = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      // create dependencies on any observables so this handler is called whenever it changes
      var imageWidth = viewModel.imageWidth(),
          imageUrl = viewModel.imageUrl(),
          titleText = viewModel.titleText(),
          userText = viewModel.userText();
  
    // re-size the iFrame in the Sites page now the template has rendered
    // Note: If you still see scrollbars in the iframe after this, it is likely that CSS styling in your app is the issue
    viewModel.setHeight();
   }
  };

• Atualização de modelo para chamar a rotina de tratamento de associação:

  <div data-bind="sampleAppSetAppHeight: true"></div>

Registo de Trigger e Ação

Enquanto o registo de trigger/ação para componentes que não estão em molduras inline está localizado no ficheiro appinfo.json, para os componentes de moldura inline, o próprio componente é responsável pelo fornecimento destas informações. Este procedimento é efetuado utilizando estas duas APIs:

SitesSDK.subscribe('GET_ACTIONS', self.getAppActions);
SitesSDK.subscribe('GET_TRIGGERS', self.getAppTriggers);

Segue-se um exemplo de como utilizar estas APIs.

    // Register TRIGGERS meta-data
    SampleAppViewModel.prototype.getAppTriggers = function (args) {
      var triggers = [{
        "triggerName": "imageClicked",
        "triggerDescription": "Image clicked",
        "triggerPayload": [{
          "name": "payloadData",
          "displayName": "Trigger Payload Data"
        }]
      }];

      return triggers;
    };

    // Register ACTIONS meta-data
    SampleAppViewModel.prototype.getAppActions = function (args) {
      var actions = [{
        "actionName": "setImageWidth",
        "actionDescription": "Update the image width",
        "actionPayload": [{
          "name": "imageWidth",
          "description": "Image Width in pixels",
          "type": {
            "ojComponent": {
            "component": "ojInputText"
            }
          },
          "value": ""
        }]
      }];

      return actions;
    };

Acesso a Estilos de Tema

Uma vez que o componente é apresentado numa moldura inline, não tem acesso aos estilos disponíveis no tema. O Sites SDK fornece uma API para obter estes estilos para que possam ser aplicados aos elementos na moldura inline.

Este tópico é explorado com mais detalhe em Passo 14: Utilizar Estilos Customizados Quando o Componente é Apresentado numa Moldura Inline.

HTTPS Misto Versus Protocolo HTTP

Uma vez que o Oracle Content Management utiliza o protocolo HTTPS, todos os recursos referenciados na página também devem utilizar HTTPS. Os recursos incluem o ficheiro .html base que será apresentado na moldura inline juntamente com todos os ficheiros referenciados.

Este requisito de recurso aplica-se na maior parte dos casos aos componentes remotos, no entanto, deve estar ciente desta restrição. Os recursos para componentes locais utilizando molduras inline são fornecidos pelo servidor do Oracle Content Management, pelo que estes componentes já utilizam um protocolo correspondente.

Avance para Passo 14: Utilizar Estilos Customizados Quando o Componente é Apresentado numa Moldura Inline.