This procedure shows you how to modify the default customization project files to extend the MainContainerWidget. When you set 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-dir/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-dir/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";

Compile

$ gbc build --customization <customization_project_dir>

Test

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