Extend the MainContainerWidget

This procedure demonstrates how to modify the default customization project files to extend the MainContainerWidget. By creating a new class that inherits from MainContainerWidget, you can add new functionality while retaining the original behavior. Once you set up this framework, you can proceed with customizing header and footer widgets.

1. Copy the JavaScript, template, and scss files for the MyMainContainerWidget:
   • Run the gbc create-widget command to extend MainContainerWidget in your customization project directory:

     gbc create-widget customization/customization-project-dir MyMainContainerWidget --base MainContainerWidget

   • Or alternatively, copy the files by hand:
     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",
      
            };
          });
          cls.WidgetFactory.registerBuilder('MyMainContainer', 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.

   You can skip this step if you used the gbc create-widget option in step 1.

   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.