Header widget

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

Prerequisite

Check if you have all that you need:

  • You have a project directory, <GBC_PROJECT_DIR>/customization/<customization_project_dir>.
  • You 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>/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>/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>/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";

Rebuild using grunt.

$ grunt --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.