Creaţi componenta HTML

Puteţi crea o componentă locală nouă în catalogul de componente Oracle Content Management, apoi puteţi construi componenta HTML prin adăugarea şi modificarea fişierelor din folderul de resurse al acesteia.

1. Creaţi o componentă şi denuminţi-o HTML Component.
   Consultaţi Crearea unei componente locale noi.
2. Adăugaţi fişierul mustache.min.js la folderul assets al componentei HTML.
3. Creaţi un fişier nou în folderul assets, denumit render.html, care conţine limbajul HTML pentru corpul componentei. Pentru acest exemplu, creaţi fişierul render.html cu următorul conţinut:

   <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. Creaţi un fişier nou în folderul assets, denumit design.css, care va reprezenta foaia de stiluri cascadă pentru componenta dvs. Pentru acest exemplu, definiţi conţinutul fişierului design.css prin următoarele linii:

   .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. Deschideţi fişierul render.js din folderul assets şi modificaţi conţinutul acestuia în următorul mod. Indifererent ce limbaj HTML şi ce foaie de stiluri cascadă (CSS) aţi utilizat la paşii anteriori, următorul fişier render.js va randa elementele HTML şi CSS în pagină pentru dvs:

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