H1-peruskomponentin luonti

Voit luoda H1-komponentin poistamalla suurimman osan syötettyjen tiedostojen sisällöstä. Siinä näytetään otsikkoteksti, jonka syötät, kun luot viewModel-kohteen. Voit myöhemmin määrittää asetuksia ja tyylejä komponentille.

Paikallisen komponentin rakenteen tarkistus:

  1. Etsi komponenttisi Oracle Content Management -palvelun työpöydän synkronointisovelluksessa ja synkronoi komponentti tiedostojärjestelmän kanssa.

    • Valitse työaseman synkronointisovelluksen uudessa versiossa Aloita synkronointi tai Valitse synkronoitavat kansiot.

    • Jos sinulla ei ole työpöydän synkronointisovellusta, voit valita komponentin Oracle Content Management -palvelun Komponentit-välilehdessä ja siirtyä kansiorakenteessa alaspäin, kunnes näet tiedostot.

  2. Kun avaat komponenttiin kuuluvien tiedostojen listan, näet seuraavat tiedostot :

    • Komponentin tiedostot assets-kansiossa:

      • render.js

      • settings.html

    • appinfo.json: komponentin kuvauksen sisältävä JSON-tiedosto.

      Katso kohta Tietoja komponenttien kehittämisestä.

    • folder_icon.jpg: komponenttiluettelossa näkyvä kuvake.

H1-komponentin luonti:

  1. Avaa appinfo.json -tiedosto ja korvaa sen sisältö seuraavilla riveillä:
    {
       "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. Avaa assets-kansiossa sijaitseva render.js-tiedosto missä tahansa tekstieditorissa.
  3. Vaihda render.js-tiedoston sisällöksi seuraavat rivit:
    /* 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. Luo assets-kansioon uusi tiedosto nimeltä render.html. Siitä tehdään komponentin yksinkertainen HTML-mallipohja.
  5. Lisää seuraava sisältö render.html-tiedostoon:
    <h1 data-bind="text: headingText()">  
    </h1> 

    Komponentin assets-kansio sisältää nyt kolme tiedostoa.

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

Lisää uusi H1-komponentti sivullesi (tarkistuspiste 2).