HTML Bileşenini Oluşturma

Oracle Content Management Bileşen Kataloğunda yeni bir yerel bileşen oluşturabilir ve ardından bileşenin varlıklar klasörüne dosya ekleyip dosyaları değiştirerek HTML bileşenini oluşturabilirsiniz.

1. Bir bileşen oluşturun ve ona HTML Component adını verin.
   Bkz. Yeni Bir Yerel Bileşen Oluşturma.
2. mustache.min.js dosyasını HTML Component bileşenindeki assets klasörüne ekleyin.
3. assets klasöründe, bileşeninizin gövdesine yönelik HTML'i içeren render.html adlı yeni bir dosya oluşturun. Bu örnek için şu içeriğe sahip render.html dosyasını oluşturun:

   <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. assets klasöründe, bileşeninize yönelik CSS olan design.css adlı yeni bir dosya oluşturun. Bu örnek için design.css dosyasının içeriği olarak şu satırları ekleyin:

   .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. assets klasöründe render.js dosyasını açın ve içeriği aşağıdakiyle değiştirin. Önceki adımlarda kullandığınız HTML ve CSS fark etmeksizin, şu render.js dosyası HTML ve CSS'inizi sizin için sayfada görüntüler:

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