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.