Az alapvető H1 összetevő kialakítása

H1 összetevő létrehozásához az előre elkészített fájlok tartalmának nagy részét eltávolíthatja. Ez a fejléc szövegét jeleníti meg, amelyet a viewModel létrehozásakor tölt be. Később beállításokat és stílusokat adhat meg az összetevőhöz.

A helyi összetevő struktúrájának áttekintése:

  1. Az Oracle Content Management asztali szinkronizáló alkalmazásával keresse meg összetevőjét, és szinkronizálja azt a fájlrendszerrel.

    • Az asztali szinkronizáló alkalmazás legújabb verziójában válassza a Szinkronizálás indítása vagy a Mappák kijelölése szinkronizáláshoz elemet.

    • Ha nem rendelkezik asztali szinkronizáló alkalmazással, az összetevőt kijelölheti az Oracle Content Management Összetevők lapján, majd részletezéssel megtekintheti a fájlokat.

  2. Amikor listázza az összetevőhöz tartozó fájlokat, a következő fájlok jelenhetnek meg:

    • Összetevőfájlok az assets mappában:

      • render.js

      • settings.html

    • appinfo.json: JSON-fájl az összetevő leírásával.

      Lásd: Tudnivalók összetevők fejlesztéséről.

    • folder_icon.jpg: az összetevő-katalógusban megjelenő ikon.

H1 összetevő kialakítása:

  1. Nyissa meg az appinfo.json fájlt, és tartalmát cserélje le a következő sorokkal:
    {
       "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. Nyissa meg az assets mappában lévő render.js fájlt kedvenc szövegszerkesztőjében.
  3. Módosítsa a render.js fájl tartalmát a következő sorokkal:
    /* 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. Az assets mappában hozza létre a render.html fájlt az összetevő egyszerű HTML sablonjaként.
  5. A render.html fájlban használja a következő tartalmat:
    <h1 data-bind="text: headingText()">  
    </h1> 

    Az összetevő assets mappája most három fájlt tartalmaz.

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

Vegye fel az új H1 összetevőt az oldalra (2. ellenőrzőpont).