Oracle Content Managementコンポーネント・カタログで新しいローカル・コンポーネントを作成し、アセット・フォルダでファイルを追加および変更することによってHTMLコンポーネントを構築できます。
HTML Component
という名前を付けます。
mustache.min.js
ファイルをHTMLコンポーネント内のassets
フォルダに追加します。assets
フォルダ内に、コンポーネントの本体のHTMLを含むrender.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>
assets
フォルダ内に、コンポーネントのCSSであるdesign.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; }
assets
フォルダ内の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; });
HTMLコンポーネントが構築されたことを確認するには(チェックポイント1):
コンポーネント内のassets
フォルダに次の5つのファイルがあることを確認します。
新しいHTMLコンポーネントをテスト・サイト内のページに追加します。エディタの編集モードおよびプレビュー・モードでは、次のようにページ上にコンポーネントが表示されます。
編集モード
プレビュー・モード