Paso 2: Revisar la estructura de representación del componente local

En este paso, revisamos la estructura de los archivos por defecto creados para un componente local.

Para un ejemplo sencillo como Hello World, cuatro objetos de JavaScript y el número de líneas de código pueden parecer demasiado, pero le facilitamos la base para crear componentes más complejos e interactuar con el ciclo de vida de la página de Oracle Sites Cloud Service.

Para revisar la estructura del componente local:

1. En la página inicial de Oracle Content Management, haga clic en Desarrollador.

   Se abrirá la página Desarrollador.

2. Haga clic en Ver todos los componentes.

3. En el menú, seleccione Crear componente local.

4. Introduzca un nombre para el componente; por ejemplo, A_Local_Component.

5. Introduzca una descripción opcional.

6. Haga clic en Crear.

   Después de hacer esto, verá un componente denominado A_Local_Component en su lista de componentes.

1. Mediante el cliente de sincronización de escritorio de Oracle Content Management, localice el componente y sincronícelo con el sistema de archivos.

   Si no tiene el cliente de escritorio, puede ver todos los componentes y seleccionar el componente en la página Componentes de la interfaz de Oracle Content Management y aumentar detalle para ver los archivos.

2. Si muestra los archivos del componente, verá los siguientes archivos:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. Abra el archivo render.js en el directorio /assets.

   Los aspectos principales del archivo render.js son:

   • Se estructura como un módulo AMD de JavaScript para que así sea "necesario" en la página.

   • También incluye referencias a KnockoutJS y JQuery, que ya se cargan como parte de la página de Oracle Content Management.

Considere la estructura del archivo render.js.

El contenido del archivo render.js incluye dos objetos de JavaScript que implantan las API de componente de Oracle Content Management necesarias: sampleComponentFactory y SampleComponentImpl. Estos objetos son un ejemplo de implantación para crear cualquier componente basado en KnockoutJS. La implantación de estos objetos cambiará en función de la tecnología que use.

• sampleComponentFactory

  • El módulo AMD de render.js devuelve este objeto.

  • Este es un objeto de fábrica muy simple e implanta la interfaz createComponent() única.

  • Para implantaciones más complejas, se puede usar el valor args transferido para devolver distintas implantaciones del componente según el parámetro viewModel. Esto le permite tener una implantación mucho más ligera del componente de tiempo de ejecución frente al creador de sitios.

• SampleComponentImpl

  • La función principal de este objeto es render, que se usa para representar el componente en la página.

    Para representar el componente Knockout en la página, la función render agrega de forma dinámica la plantilla a la página. A continuación, aplica enlaces de viewModel a la plantilla.

  • El resto de la implantación se encarga de la inicialización del parámetro viewModel y la plantilla, además de manejar los mensajes entre la página y el componente.

Los dos últimos objetos del archivo render.js, sampleComponentTemplate y SampleComponentViewModel, proporcionan una implantación personalizada para el componente. La implantación de estos cambiará en función de sus necesidades.

• sampleComponentTemplate

  • Este objeto proporciona la creación de la plantilla KnockoutJS. Espera hasta que el componente tiene todos los datos inicializados antes de intentar mostrar algo.

• SampleComponentViewModel

  • viewModel recupera la información almacenada por Oracle Content Management en nombre del componente. A continuación, selecciona cómo diseñar adecuadamente el componente basándose en esos datos.

  • Observables de Knockout generales que emplea la plantilla para manejar el acceso a los metadatos almacenados en nombre del componente:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Integración de disparadores y acciones:

    Disparador: función para iniciar un disparador de Oracle Content Management para el componente que se puede enlazar a acciones de otros componentes en la página.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    Acción: función que maneja la devolución de llamada cuando se indica al componente que ejecute una acción de carga útil proporcionada.

        self.executeActionsListener = function (args) {
          // get action and payload
          var payload = args.payload,
          action = args.action;
    
          // handle 'setImageWidth' actions
          if (action && action.actionName === 'setImageWidth') {
            $.each(payload, function(index, data) {
              if (data.name === 'imageWidth') {
                self.imageWidth(data.value);
              }
            });
          }
        };

    Devuelva la llamada para ejecutar acciones registradas a petición.

    SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.EXECUTE_ACTION, 
    $.proxy(self.executeActionsListener, self));

  • Suscripciones al ciclo de vida del componente:

    • Inicialización del componente: asegúrese de que el componente no se representa hasta que se hayan recuperado todos los datos. Esto se maneja con observables de Knockout.

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      Obtenga los valores iniciales para cualquier propiedad necesaria. Esto se maneja con devoluciones de llamada para recuperar los datos.

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Actualizaciones de metadatos: devuelva la llamada siempre que cambien los metadatos del componente almacenados en nombre del mismo; por ejemplo, cuando el usuario llame al panel de configuración y actualice los datos.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));