This procedure shows you how to add footer text to your application.

Overview

The footer text is defined in the footer widget (MyFooterBarWidget), 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 MyFooterBarWidget JavaScript and template files

Create and edit file gbc-project-dir/customization/customization-project-dir/js/MyFooterBarWidget.js:

"use strict";

// declare the dependency to inheritedWidget (here WidgetBase) module
modulum('MyFooterBarWidget', ['WidgetBase', 'WidgetFactory'],
  function(context, cls) {
    cls.MyFooterBarWidget = context.oo.Class(cls.WidgetBase, function($super) {
      return {
        __name: "MyFooterBarWidget"

        /* your custom code */
      };
    });
    cls.WidgetFactory.registerBuilder('MyFooterBar', cls.MyFooterBarWidget);
  });

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

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

Edit MyMainContainerWidget.js

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

Copy the code in the example. 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 footerBar = cls.WidgetFactory.createWidget("MyFooterBar");
                  footerBar.setParentWidget(this);
                  this.getElement().querySelector("footer").appendChild(footerBar.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 '<footer>' element. Your file should resemble the following:

<div>
  <header>
    Place your header here
  </header>
  <!-- GBC will be rendered in this div -->
  <div class="containerElement"></div>
  <footer></footer>
</div>

Create MyFooterBarWidget.scss

Create and edit file gbc-project-dir/customization/customization-project-dir/sass/MyFooterBarWidget.scss:

.gbc_MyFooterBarWidget {
  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 MyFooterBarWidget.scss file and save.

@import "MyMainContainerWidget";
@import "MyFooterBarWidget";

Compile

$ gbc build --customization customization-project-dir

Test

Test the footer 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.