Extend the MainContainerWidget

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.

1. Copy the JavaScript, template, and scss files for the MyMainContainerWidget:
   1. Copy MyMainContainerWidget.js and MyMainContainerWidget.tpl.html from gbc-project-dir/customization/sample/js to gbc-project-dir/customization/customization-project-dir/js.
   2. Copy MyMainContainerWidget.scss and customization.scss from gbc-project-dir/customization/sample/sass to gbc-project-dir/customization/customization-project-dir/sass.
2. Edit MyMainContainerWidget.js.
   1. Open gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js with a text editor.
   2. Remove the code that extends the header. Your file should resemble the code in the following example.

      "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);
        });

   3. Save your changes.
3. Edit MyMainContainerWidget.tpl.html.
   1. Open gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.tpl.html with a text editor.
   2. Modify the code to explicitly illustrate the header element. Your file should resemble the code in the following example.

      <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>

   3. Save your changes.
4. Edit gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.tpl.html.

   Remove any content from the'<header> element. Your file should resemble the following:

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

5. Update customization.scss.
   1. Open the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file for editing.
   2. Copy the code shown in the example and save.

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

6. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

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