Opbygge H1-basiskomponenten

Du kan fjerne det meste af indholdet i udfyldte filer for at oprette en H1-komponent. Den viser den overskriftstekst, som du udfylder, når du opretter viewModel. Du kan senere angive indstillinger og typografier for komponenten.

Sådan gennemgår du strukturen af din lokale komponent:

  1. Brug Oracle Content Management-appen til desktop-synkronisering til at finde din komponent og synkronisere den med filsystemet.

    • Brug en nylig version af appen til synkronisering af skrivebordet til at vælge Start synkronisering eller Vælg mapper til synkronisering.

    • Hvis du ikke har appen til desktop-synkronisering, kan du vælge komponenten på fanen Komponenter i Oracle Content Management og derefter bore ned for at se filerne.

  2. Hvis du har en liste over filerne under komponenten, kan du se disse filer:

    • Komponentfilerne i mappen assets:

      • render.js

      • settings.html

    • appinfo.json: JSON-fil med komponentbeskrivelsen.

      Se Om udvikling af komponenter.

    • folder_icon.jpg: Ikon, der vises i komponentkataloget.

Sådan opbygger du en H1-komponent:

  1. Åbn filen appinfo.json , og erstat dens indhold med følgende linjer:
    {
       "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. Åbn filen render.js i mappen assets i din foretrukne teksteditor.
  3. Ændr indholdet af render.js til følgende linjer:
    /* 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. Opret den nye fil render.html i mappen assets, som skal være den simple HTML-skabelon for komponenten.
  5. Brug følgende indhold i filen render.html:
    <h1 data-bind="text: headingText()">  
    </h1> 

    Komponentmappen assets indeholder nu tre filer.

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

Tilføj den nye H1-komponent på siden (tjekpunkt 2).