Tworzenie podstawowego składnika H1

Aby utworzyć składnik H1, można usunąć większą część zawartości standardowych plików. Składnik H1 wyświetla tekst nagłówka, który jest wstępnie określany podczas tworzenia modelu viewModel. Później można wprowadzić ustawienia i style dla składnika.

Aby sprawdzić strukturę składnika lokalnego, należy:

  1. Używając aplikacji synchronizującej typu Desktop Oracle Content Management, zlokalizować składnik, po czym zsynchronizować go z systemem plików.

    • W najnowszej wersji aplikacji synchronizującej typu Desktop wybrać opcję Rozpocznij synchronizację lub Wybierz foldery do synchronizacji.

    • Nie mając aplikacji synchronizującej typu Desktop, można na karcie Składniki usługi Oracle Content Management wybrać składnik, a następnie — aby wyświetlić pliki — drążyć w dół.

  2. Pod składnikiem można zobaczyć następujące pliki:

    • Pliki składnika w folderze assets:

      • render.js

      • settings.html

    • appinfo.json: Plik JSON zawierający opis składnika.

      Zob. Tworzenie składników — informacje podstawowe.

    • folder_icon.jpg: Ikona, która jest wyświetlana w katalogu składników.

Aby utworzyć składnik H1, należy:

  1. Otworzyć plik appinfo.json , po czym zastąpić jego zawartość następującymi wierszami kodu:
    {
       "id": "h1-component-id",
    
       "settingsData": {
                 "settingsHeight": 90,
                 "settingsWidth": 300,
                 "settingsRenderOption": "inline",
                 "componentLayouts": [ ],
                 "triggers": [ ],
                 "actions": [ ]
       },
       "initialData": {
                 "componentId": "h1-component-id",
                 "customSettingsData": {
                         "headingText": "Heading 1"
                 },
                 "nestedComponents": [ ]
       }
    }
  2. Z folderu assets otworzyć plik render.js w preferowanym edytorze tekstów.
  3. Zmienić zawartość pliku render.html, wprowadzając:
    /* globals define */
    define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) {
      'use strict';
      // ----------------------------------------------
      // Define a Knockout ViewModel for your template
      // ----------------------------------------------
      var SampleComponentViewModel = function(args) {
        var SitesSDK = args.SitesSDK;
        // create the observables -- this allows updated settings to automatically update the HTML on the page
        this.headingText = ko.observable();
    
        //
        // Handle property changes from the Settings panel
        //
        this.updateCustomSettingsData = $.proxy(function(customData) {
          this.headingText(customData && customData.headingText);
        }, this);
        this.updateSettings = function(settings) {
          if (settings.property === 'customSettingsData') {
            this.updateCustomSettingsData(settings.value);
          } 
        };
        // Register your updateSettings listener to recieve SETTINGS_UPDATED events
        SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this)); 
    
        //
        // Get the initial settings data for the component and apply it
        //
        SitesSDK.getProperty('customSettingsData', this.updateCustomSettingsData);
      };
    
    
      // ----------------------------------------------
      // Create a knockout based component implemention
      // ----------------------------------------------
      var SampleComponentImpl = function(args) {
        // Initialze the custom component
        this.init(args);
      };
      // initialize all the values within the component from the given argument values
      SampleComponentImpl.prototype.init = function(args) {
        this.createViewModel(args);
        this.createTemplate(args);
        this.setupCallbacks();
      };
      // create the viewModel from the initial values
      SampleComponentImpl.prototype.createViewModel = function(args) {
        // create the viewModel
        this.viewModel = new SampleComponentViewModel(args);
      };
      // create the template based on the initial values
      SampleComponentImpl.prototype.createTemplate = function(args) {
        // create a unique ID for the div to add, this will be passed to the callback
        this.contentId = args.id + '_content_' + args.viewMode;
        // create a hidden custom component template that can be added to the DOM
        this.template = '<div id="' + this.contentId + '">' + 
          template + 
          '</div>';      
      };
      //
      // SDK Callbacks
      // setup the callbacks expected by the SDK API
      //
      SampleComponentImpl.prototype.setupCallbacks = function() {
        //
        // callback - render: add the component into the page
        //
        this.render = $.proxy(function(container) {
          var $container = $(container);
          // add the custom component template to the DOM
          $container.append(this.template);
          // apply the bindings
          ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]);
        }, this);
        //
        // callback - dispose: cleanup after component when it is removed from the page
        //
        this.dispose = $.proxy(function() {
          // nothing required for this sample since knockout disposal will automatically clean up the node
        }, this);
      };
      // ----------------------------------------------
      // Create the factory object for your component
      // ----------------------------------------------
      var sampleComponentFactory = {
        createComponent: function(args, callback) {
          // return a new instance of the component
          return callback(new SampleComponentImpl(args));
        }
      };
      return sampleComponentFactory;
    });
  4. W folderze assets utworzyć nowy plik render.html, który będzie zwykłym szablonem HTML składnika.
  5. W pliku render.html użyć następującej zawartości:
    <h1 data-bind="text: headingText()">  
    </h1> 

    Folder assets składnika zawiera teraz trzy pliki.

    • render.html
    • render.js
    • settings.html

Następnie należy dodać do strony nowy składnik H1 (punkt kontrolny 2).