This procedure shows you how to modify the default customization project files to extend the MainContainerWidget. Once you have sets up this framework, you are ready to carry out the procedures for customizing header and footer widgets.

Overview

This procedure starts by having you copy and modify some files provided by the sample customization project.

Copy the javascript, template, and scss files for the MyMainContainerWidget

Copy the <GBC_PROJECT_DIR>/customization/sample/js/MyMainContainerWidget.js file to your <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js directory.

Copy the <GBC_PROJECT_DIR>/customization/sample/js/MyMainContainerWidget.tpl.html file to your <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js directory.

Copy the <GBC_PROJECT_DIR>/customization/sample/sass/MyMainContainerWidget.scss file to your <GBC_PROJECT_DIR>/customization/<customization_project_dir>/sass directory.

Copy the <GBC_PROJECT_DIR>/customization/sample/sass/customization.scss file to your <GBC_PROJECT_DIR>/customization/<customization_project_dir>/sass directory.

Edit MyMainContainerWidget.js

Open <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js/MyMainContainerWidget.js with a text editor.

Remove the code that extends the header. Your file should resemble the code in the following example. Save your changes.

"use strict";

modulum('MyMainContainerWidget', ['MainContainerWidget', 'WidgetFactory'],
  /**
   * @param {gbc} context
   * @param {classes} cls
   */
  function(context, cls) {

    /**
     * @class classes.MyMainContainerWidget
     * @extends classes.MainContainerWidget
     */
    cls.MyMainContainerWidget = context.oo.Class(cls.MainContainerWidget, function($super) {
      /** @lends classes.MyMainContainerWidget.prototype */
      return {
        __name: "MyMainContainerWidget",

      };
    });

    /*
     *  This is a sample widget that would replace the default one in GBC
     *  To activate it, please uncomment the line below. This will override
     *  the original widget registration to this one.
     */

    cls.WidgetFactory.registerBuilder('MainContainer', cls.MyMainContainerWidget);
  });

Edit MyMainContainerWidget.tpl.html

Open the <GBC_PROJECT_DIR>/customization/<customization_project>/js/MyMainContainerWidget.tpl.html file for editing.

Modify the code to explicitly illustrate the header element. Your file should resemble the code in the example. Save your changes.

<div>
  <header>
      Place your header here.
  </header>
  <!-- GBC will be rendered in this div -->
  <div class="containerElement"></div>
  <footer>
      Place your footer here
  </footer>
</div>

Update customization.scss

Open the <GBC_PROJECT_DIR>/customization/<customization_project>/sass/customization.scss file for editing.

Copy the code shown in the example to import the MyMainContainerWidget.scss file and save.

//@import "sampleItem";
//@import "sampleContainer";
@import "MyMainContainerWidget";

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

Verify your customization is used as expected by closing and reopening your application.