Построение базового компонента H1

Для создания компонента H1 можно удалить большую часть содержимого предварительно заданных файлов. Этот компонент отображает текст заголовка, который вводится при создании параметра viewModel. Позднее можно предоставить настройки и стили для компонента.

Чтобы просмотреть структуру локального компонента, выполните указанные ниже действия:

  1. С помощью настольного приложения Oracle Content Management для синхронизации найдите компонент и синхронизируйте его с файловой системой.

    • В последней версии настольного приложения для синхронизации выберите команду Начать синхронизацию или Выбрать папки для синхронизации.

    • Если настольного приложения для синхронизации нет, компонент можно выбрать на вкладке Компоненты в Oracle Content Management, а затем развернуть его, чтобы просмотреть файлы.

  2. Если перечислить файлы, относящиеся к компоненту, можно увидеть следующие файлы:

    • Файлы компонента в папке assets:

      • render.js

      • settings.html

    • appinfo.json: файл JSON с описанием компонента.

      См. О разработке компонентов.

    • folder_icon.jpg: значок, отображаемый в каталоге компонентов.

Чтобы создать компонент H1, выполните указанные ниже действия.

  1. Откройте файл appinfo.json и замените его содержимое следующими строками:
    {
       "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. Откройте файл render.js в папке assets в предпочтительном текстовом редакторе.
  3. Измените содержимое файла render.js на следующие строки:
    /* 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. В папке assets создайте новый файл render.html, который будет простым HTML-шаблоном компонента.
  5. Используйте в файле render.html следующее содержимое:
    <h1 data-bind="text: headingText()">  
    </h1> 

    Папка assets компонента теперь содержит три файла.

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

Добавьте новый компонент H1 на свою страницу (контрольная точка 2).