Δημιουργία του βασικού συστατικού στοιχείου 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

Προσθέστε το νέο συστατικό στοιχείο Η1 στη σελίδα σας (Σημείο ελέγχου 2).