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

Overview

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 (see Extend the MainContainerWidget) and as a result you have the following files:

• In gbc-project-dir/customization/customization-project-dir/js, you have:

  • MyMainContainerWidget.tpl.html
  • MyMainContainerWidget.tpl.js

• In gbc-project-dir/customization/customization-project-dir/sass, you have:

  • MyMainContainerWidget.scss

Create MyHeaderBarWidget JavaScript and template files

Create and edit file 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);
});

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

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

Edit MyMainContainerWidget.js

Open gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js with a text editor.

Add the code in the example to include the MyHeaderBarWidget. Save your changes.

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

Update MyMainContainerWidget.tpl.html

Open the gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.tpl.html file for editing.

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>

Create MyHeaderBarWidget.scss

Create and edit file 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.

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 MyHeaderBarWidget.scss file and save.

@import "MyMainContainerWidget";
@import "MyHeaderBarWidget";

Compile

$ gbc build --customization <customization-project-dir>

Test

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.