HTML-Komponente erstellen

Sie können eine neue lokale Komponente im Komponentenkatalog von Oracle Content Management erstellen und die HTML-Komponente dann aufbauen, indem Sie Dateien im jeweiligen Assetordner hinzufügen und ändern.

1. Erstellen Sie eine Komponente mit dem Namen HTML Component.
   Siehe Neue lokale Komponente erstellen.
2. Fügen Sie die Datei mustache.min.js dem assets-Ordner in "HTML Component" hinzu.
3. Erstellen Sie eine neue Datei im assets-Ordner mit dem Namen render.html, die HTML für den Hauptteil der Komponente enthält. Erstellen Sie für dieses Beispiel die Datei render.html mit dem folgenden Inhalt:

   <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. Erstellen Sie eine neue Datei im assets-Ordner mit dem Namen design.css (das CSS für die Komponente). Fügen Sie für dieses Beispiel die folgenden Zeilen als Inhalt der Datei design.css hinzu:

   .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. Öffnen Sie die Datei render.js im assets-Ordner, und ändern Sie den Inhalt wie folgt. Unabhängig davon, welche HTML- und CSS-Datei Sie in den vorherigen Schritten verwenden, rendert die folgende render.js-Datei die HTML- und CSS-Datei auf der Seite:

   /* 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;
   });