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.

About this task

The header text is defined in the header widget (MyHeaderBarWidget), which must be included in the main container widget (MyMainContainerWidget).

Before you begin

You must have a customization directory gbc-project-dir/customization/customization-project-dir.

You must have completed the procedure to extend the MainContainerWidget and as a result you have the following files:

  • In customization-project-dir/js:

    • MyMainContainerWidget.tpl.html
    • MyMainContainerWidget.tpl.js
  • In customization-project-dir/sass:

    • MyMainContainerWidget.scss

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.