シード済ファイル内のコンテンツの大部分を削除して、H1コンポーネントを作成できます。これにより、viewModel
の作成時にシードする見出しテキストが表示されます。後で、コンポーネントの設定およびスタイルを指定できます。
ローカル・コンポーネントの構造を確認するには:
Oracle Content Managementデスクトップ同期アプリケーションを使用して、コンポーネントを検索し、それをファイル・システムと同期させます。
デスクトップ同期アプリケーションの最新バージョンで、「同期化の開始」または同期化するフォルダの選択オプションを選択します。
デスクトップ同期アプリケーションがない場合は、Oracle Content Managementの「コンポーネント」タブでコンポーネントを選択し、ドリルダウンしてファイルを表示できます。
コンポーネントの下のファイルをリストする場合は、次のようなファイルが表示されます:
assets
フォルダ内のコンポーネント・ファイル:
render.js
settings.html
appinfo.json
: コンポーネント説明を含むJSONファイル。
コンポーネントの開発についてを参照してください。
folder_icon.jpg
: コンポーネント・カタログに表示されるアイコン。
H1コンポーネントを構築するには:
appinfo.json
ファイルを開き、その内容を次の行と置き換えます:
{ "id": "h1-component-id", "settingsData": { "settingsHeight": 90, "settingsWidth": 300, "settingsRenderOption": "inline", "componentLayouts": [ ], "triggers": [ ], "actions": [ ] }, "initialData": { "componentId": "h1-component-id", "customSettingsData": { "headingText": "Heading 1" }, "nestedComponents": [ ] } }
assets
フォルダ内のrender.js
ファイルを開きます。render.js
のコンテンツを次の行に変更します:
/* globals define */ define(['knockout', 'jquery', 'text!./render.html'], function(ko, $, template) { 'use strict'; // ---------------------------------------------- // Define a Knockout ViewModel for your template // ---------------------------------------------- var SampleComponentViewModel = function(args) { var SitesSDK = args.SitesSDK; // create the observables -- this allows updated settings to automatically update the HTML on the page this.headingText = ko.observable(); // // Handle property changes from the Settings panel // this.updateCustomSettingsData = $.proxy(function(customData) { this.headingText(customData && customData.headingText); }, this); this.updateSettings = function(settings) { if (settings.property === 'customSettingsData') { this.updateCustomSettingsData(settings.value); } }; // Register your updateSettings listener to recieve SETTINGS_UPDATED events SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this)); // // Get the initial settings data for the component and apply it // SitesSDK.getProperty('customSettingsData', this.updateCustomSettingsData); }; // ---------------------------------------------- // Create a knockout based component implemention // ---------------------------------------------- var SampleComponentImpl = function(args) { // Initialze the custom component this.init(args); }; // initialize all the values within the component from the given argument values SampleComponentImpl.prototype.init = function(args) { this.createViewModel(args); this.createTemplate(args); this.setupCallbacks(); }; // create the viewModel from the initial values SampleComponentImpl.prototype.createViewModel = function(args) { // create the viewModel this.viewModel = new SampleComponentViewModel(args); }; // 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>'; }; // // 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) { var $container = $(container); // add the custom component template to the DOM $container.append(this.template); // apply the bindings ko.applyBindings(this.viewModel, $('#' + this.contentId)[0]); }, this); // // callback - dispose: cleanup after component when it is removed from the page // this.dispose = $.proxy(function() { // nothing required for this sample since knockout disposal will automatically clean up the node }, 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; });
assets
フォルダで、コンポーネントの単純なHTMLテンプレートになるようrender.html
という新しいファイルを作成します。render.html
ファイル内の次のコンテンツを使用します:
<h1 data-bind="text: headingText()"> </h1>
コンポーネントのassets
フォルダに、3つのファイルが含まれるようになります。
新しいH1コンポーネントをページに追加します(チェックポイント2)。