Δημιουργία του συστατικού στοιχείου HTML

Μπορείτε να δημιουργήσετε ένα νέο τοπικό συστατικό στοιχείο στον Κατάλογο συστατικών στοιχείων του Oracle Content Management και, στη συνέχεια, να δομήσετε το συστατικό στοιχείο HTML, προσθέτοντας και αλλάζοντας αρχεία στον φάκελο πόρων του.

1. Δημιουργήστε ένα συστατικό στοιχείο και ονομάστε το Συστατικό στοιχείο HTML.
   Ανατρέξτε στην ενότητα Δημιουργία νέου τοπικού συστατικού στοιχείου.
2. Προσθέστε το αρχείο mustache.min.js στον φάκελο πόροι στο Συστατικό στοιχείο HTML.
3. Δημιουργήστε ένα νέο αρχείο στον φάκελο πόροι με όνομα render.html, το οποίο περιέχει HTML για το κυρίως τμήμα του συστατικού στοιχείου σας. Για αυτό το παράδειγμα, δημιουργήστε το αρχείο render.html με τα ακόλουθα περιεχόμενα:

   <ul class="wrapper">
       <li class="box">
        <h1 class="title">One</h1>
      <p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </li>
       <li class="box"> 
        <h1 class="title">Two</h1>
        <p class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </li>
     <li class="box"> 
        <h1 class="title">Three</h1>
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p> 
       </li>
     <li class="box">
        <h1 class="title">Four</h1> 
        <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
       </li>
   </ul>

4. Δημιουργήστε ένα νέο αρχείο στον φάκελο πόροι με όνομα design.css, το οποίο είναι το CSS για το συστατικό στοιχείο σας. Για αυτό το παράδειγμα, προσθέστε τις ακόλουθες γραμμές ως περιεχόμενα του αρχείου design.css:

   .wrapper {
     text-align: center;
   }
   .box {
     display: inline-block;
     position: relative;
     width: 200px;
     height: 200px;
     padding:0px 10px 10px 10px;
     background: transparent;
     border-width:1px;
     border-style:solid;
     border-radius: 5px;
     border-color:#CCCCCC;
     z-index: 0;
     margin: 2px 2px 2px 2px;
     transition: all .15s ease-in-out;
   }
   .box:hover {
     background: #9CC;
     z-index: 100;
     transform: scale(1.2,1.2);
     box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
   }
   .title {
      color:red;
   }
   .text {
      color:#555555;
   }

5. Ανοίξτε το αρχείο render.js στον φάκελο πόροι και αλλάξτε το περιεχόμενο στο εξής. Ανεξάρτητα ποια HTML και CSS χρησιμοποιήσατε στα προηγούμενα βήματα, το ακόλουθο αρχείο render.js θα αποδώσει τα στοιχεία HTML και CSS στη σελίδα για εσάς:

   /* globals define */
   define(['jquery', './mustache.min', 'text!./render.html', 'css!./design.css'], function($, Mustache, template, css) {
     'use strict';
   
     // ----------------------------------------------
     // Create a Mustache-based component implemention
     // ----------------------------------------------
     var SampleComponentImpl = function(args) {
       this.SitesSDK = args.SitesSDK;
   
       // Initialze the custom component
       this.createTemplate(args);
       this.setupCallbacks();
     };
     // 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>';
     };
     SampleComponentImpl.prototype.updateSettings = function(settings) {
       if (settings.property === 'customSettingsData') {
           this.update(settings.value);
       }
     };
     SampleComponentImpl.prototype.update = function(data) {
       this.data = data;
       this.container.html(Mustache.to_html(this.template, this.data));
     };
     //
     // 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) {
          this.container = $(container);
          this.SitesSDK.getProperty('customSettingsData', $.proxy(this.update, this));
       }, this);
       //
       // callback - SETTINGS_UPDATED: retrive new custom data and re-render the component
       //
       this.SitesSDK.subscribe(this.SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this));
       //
       // callback - dispose: cleanup after component when it is removed from the page
       //
       this.dispose = $.proxy(function() {
          // nothing required
       }, 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;
   });