Sestavení základní komponenty H1

Při vytváření komponenty H1 můžete odebrat většinu obsahu ze zdrojových souborů. Zobrazí se text záhlaví, který načtete, když vytvoříte viewModel. Později můžete pro komponentu zadat nastavení a styly.

Postup kontroly struktury místní komponenty:

  1. Pomocí aplikace Oracle Content Management Desktop Sync vyhledejte komponentu a synchronizujte ji se souborovým systémem.

    • V poslední verzi aplikace Desktop Sync vyberte volbu Spustit synchronizaci nebo Vybrat složky k synchronizaci.

    • Pokud nemáte aplikaci Desktop Sync, můžete vybrat komponentu na kartě Komponenty služby Oracle Content Management a poté přechodem k podrobnostem zobrazit soubory.

  2. V seznamu souborů pro komponentu najdete tyto soubory:

    • Soubory komponenty ve složce assets:

      • render.js

      • settings.html

    • appinfo.json: Soubor JSON s popisem komponenty.

      Prostudujte si téma Informace o vývoji komponent.

    • folder_icon.jpg: Ikona, která se zobrazuje v katalogu komponent.

Postup sestavení komponenty H1:

  1. Otevřete soubor appinfo.json a nahraďte jeho obsah následujícími řádky:
    {
       "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. Otevřete soubor render.js ve složce assets v oblíbeném textovém editoru.
  3. Změňte obsah souboru render.js na následující řádky:
    /* 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. Ve složce assets vytvořte nový soubor render.html, který bude jednoduchou šablonou HTML komponenty.
  5. V souboru render.html použijte následující obsah:
    <h1 data-bind="text: headingText()">  
    </h1> 

    Složka assets komponenty nyní obsahuje tři soubory.

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

Přidejte novou komponentu H1 na svou stránku (kontrolní bod 2).