How to integrate Dojo prototype into the ICN?

Question

I have a template(using Dojo) as follows: enter image description here

I integrated it into ICN, using New Feature of IBM content navigator : enter image description here

Please help or give me an example.

Any help would be appreciated, Thank.

-- My code is as follows:

Prototype code ------------------------- ------------html page

<div class="leading-panel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
            <p>Danh sách thông tin<br/> <input id="stateSelect"></p>
            <p>Mã thông tin<br/> <input id="stateSelect2"></p>
</div><!--End .leading-panel-->

------------Js page

require([
    "dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
], function(Memory, ComboBox){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"},
            {name:"Armed Forces Europe", id:"AE"},
            {name:"Armed Forces Pacific", id:"AP"},
            {name:"Armed Forces the Americas", id:"AA"},
            {name:"California", id:"CA"},
            {name:"Colorado", id:"CO"},
            {name:"Connecticut", id:"CT"},
            {name:"Delaware", id:"DE"}
        ]
    });

    var comboBox = new ComboBox({
        id: "stateSelect",
        name: "state",
        style:{width: "auto"},
        value: "California",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect").startup();

    var comboBox = new ComboBox({
        id: "stateSelect2",
        name: "state",
        style:{width: "auto"},
        value: "California",
        store: stateStore,
        searchAttr: "name"
    }, "stateSelect2").startup();
});

---

New Feature of IBM content navigator code------------- .com.WebContent.testICNDojo.templates ---ICNFutureTest.html

<div class="ecmCenterPane">
    <!--  Please add your configuration pane -->
    <div class="wrapper" data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">
        <div class="leading-panel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">
            <p>Danh sách thông tin<br/> <input id="stateSelect"></p>
            <p>Mã thông tin<br/> <input id="stateSelect2"></p>
        </div><!--End .leading-panel-->
    </div>
</div>

--------------------------------------------------- .com.WebContent.testICNDojo ---ICNFutureTest.js

define([
    "dojo/_base/declare",
    "ecm/widget/layout/_LaunchBarPane",
    "dojo/text!./templates/ICNFutureTest.html",
    "dojo/store/Memory", 
    "dijit/form/ComboBox",
    "dojo/domReady!"
],
function(declare,
        _LaunchBarPane,
        template,
        Memory,
        ComboBox) {
    /**
     * @name testICNDojo.ICNFutureTest
     * @class 
     * @augments ecm.widget.layout._LaunchBarPane
     */
    return declare("testICNDojo.ICNFutureTest", [
        _LaunchBarPane
    ], {
        /** @lends testICNDojo.ICNFutureTest.prototype */

        templateString: template,

        widgetsInTemplate: true,

        postCreate: function() {
            this.inherited(arguments);

            //load js for template
            this.loadDataOfForm();
        },


        /**
         * My js-------
         */
        loadDataOfForm: function() {

            var stateStore = new Memory({
                data: [
                    {name:"Alabama", id:"AL"},
                    {name:"Alaska", id:"AK"},
                    {name:"American Samoa", id:"AS"},
                    {name:"Arizona", id:"AZ"},
                    {name:"Arkansas", id:"AR"},
                    {name:"Armed Forces Europe", id:"AE"},
                    {name:"Armed Forces Pacific", id:"AP"},
                    {name:"Armed Forces the Americas", id:"AA"},
                    {name:"California", id:"CA"},
                    {name:"Colorado", id:"CO"},
                    {name:"Connecticut", id:"CT"},
                    {name:"Delaware", id:"DE"}
                ]
            });

            var comboBox = new ComboBox({
                id: "stateSelect",
                name: "state",
                style:{width: "auto"},
                value: "California",
                store: stateStore,
                searchAttr: "name"
            }, "stateSelect").startup();

        }
        /*ect function ...*/
    });
});

Answer 1

You should put it in loadContent function. loadContent is build-in function in CustomFeature - IBM Content Navigator like:

  loadContent: function() {

   var stateStore = new Memory({
     data: [
       {name:"Alabama", id:"AL"},
       {name:"Alaska", id:"AK"},
       {name:"American Samoa", id:"AS"},
       {name:"Arizona", id:"AZ"},
       {name:"Arkansas", id:"AR"},
       {name:"Armed Forces Europe", id:"AE"},
       {name:"Armed Forces Pacific", id:"AP"},
       {name:"Armed Forces the Americas", id:"AA"},
       {name:"California", id:"CA"},
       {name:"Colorado", id:"CO"},
       {name:"Connecticut", id:"CT"},
       {name:"Delaware", id:"DE"}
     ]
   });

   var comboBox = new ComboBox({
     id: "stateSelect",
     name: "state",
     style:{width: "auto"},
     value: "California",
     store: stateStore,
     searchAttr: "name"
   }, "stateSelect").startup();
   this.logEntry("loadContent");

   if (!this.isLoaded) {
     this.isLoaded = true;
     this.needReset = false;
   }

   this.logExit("loadContent");
 },