Add header text

This procedure shows you how to add a custom header widget to your application. This widget will display text in the header.

Steps

1. Create and edit gbc-project-dir/customization/customization-project-dir/js/MyHeaderBarWidget.js:

   "use strict";
   
   // declare the dependency to inheritedWidget (here WidgetBase) module
   modulum('MyHeaderBarWidget', ['WidgetBase', 'WidgetFactory'],
     function(context, cls) {
   
       cls.MyHeaderBarWidget = context.oo.Class(cls.WidgetBase, function($super) {
         return {
           __name: "MyHeaderBarWidget"
             //[…]
         };
       });
       cls.WidgetFactory.registerBuilder('MyHeaderBar', cls.MyHeaderBarWidget);
   });

2. Create and edit gbc-project-dir/customization/customization-project-dir/js/MyHeaderBarWidget.tpl.html:

   <div>
        This is my NEW header text!
   </div>

3. Edit MyMainContainerWidget.js.
   1. Open the gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js file with a text editor.
   2. Add the code in the example to include the MyHeaderBarWidget.

      "use strict";
      
      modulum('MyMainContainerWidget', ['MainContainerWidget', 'WidgetFactory'],
      
        function(context, cls) {
      
          cls.MyMainContainerWidget = context.oo.Class(cls.MainContainerWidget, function($super) {
            return {
              __name: "MyMainContainerWidget",
      
              constructor: function(opts) {
                $super.constructor.call(this, opts);
      
                var headerBar = cls.WidgetFactory.createWidget("MyHeaderBar");
                headerBar.setParentWidget(this);
                this.getElement().querySelector("header").appendChild(headerBar.getElement());
              }
            };
          });
      
          cls.WidgetFactory.registerBuilder('MainContainer', cls.MyMainContainerWidget);
        });

   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. Create and edit gbc-project-dir/customization/customization-project-dir/sass/MyHeaderBarWidget.scss.

   .gbc_MyHeaderBarWidget {
     font-size:2em;
   }

   Note:

   You can define the custom style you want here for your widget.

6. 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 "MyMainContainerWidget";
   @import "MyHeaderBarWidget";

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

   $ gbc build --customization customization-project-dir

8. Test the header is displayed as expected by closing and reopening your application.
   Tip:

   You may need to use CTRL + F5 to clear the browser cache before you see your changes.