This procedure shows you how to add an image or company logo to the header bar widget of your application.

Prerequisite

First you need to check if you have all that you need:

You have a project directory and your <GBC_PROJECT_DIR>/customization/<customization_project_dir> directory contains the following .js, .tpl.html, and .scss files:

• In <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js, you have:
  • MyMainContainerWidget.tpl.html
  • MyMainContainerWidget.tpl.js
  • MyHeaderBarWidget.tpl.html
  • MyHeaderBarWidget.js

In <GBC_PROJECT_DIR>/customization/<customization_project_dir>/sass, you have:

• customization.scss
• MyMainContainerWidget.scss

These files may be copied from your <GBC_PROJECT_DIR>/customization/sample directory.

• Your <GBC_PROJECT_DIR>/customization/<customization_project_dir>/resources/img directory contains your image file.

Edit MyHeaderBarWidget.tpl.html

Open the <GBC_PROJECT_DIR>/customization/<customization_project_dir>/js/MyHeaderBarWidget.tpl.html file with a text editor.

• Inside the div element add an <img> tag, and set its src attribute to the path to your image. Save your changes.

<div>
  <img src="./resources/img/my_logo.jpg"/>
  Applications started: <b class="MyHeaderBarWidget-counter"></b>
  <span data-i18n="mycusto.window.currentTitle"></span> : <b class="MyHeaderBarWidget-title"></b>
</div>

In this example the customization:

• Adds the path to the image in the img element.

NOTE: When referencing an image in your project's resources directory from a file in the js directory, the path needs to be set relative to your <GBC_PROJECT_DIR>/customization/<customization_project_dir> directory, the application root at compilation time (./).

• Text displays the number of applications opened, referencing the MyHeaderBarWidget-counter class.
• Text displays the application title by referencing locale custom keys with the MyHeaderBarWidget-title class.

Edit MyMainContainerWidget.js

Open the <GBC_PROJECT_DIR>/customization/<customization_project_dir>/MyMainContainerWidget.js file with a text editor.

• Check that the main container class has code that adds the header bar class as a child of the main container widget. If not, copy the code shown in the example and save.

"use strict";

modulum('MyMainContainerWidget', ['MainContainerWidget', 'WidgetFactory'],
        
       ...

        constructor: function(opts) {
          $super.constructor.call(this, opts);

          var headerBar = new cls.MyHeaderBarWidget(opts);
          headerBar.setParentWidget(this);
          this.getElement().querySelector("header").appendChild(headerBar.getElement());
        }
      };
    });

    cls.WidgetFactory.register('MainContainer', cls.MyMainContainerWidget);
  });

In the JavaScript code example, you can see:

• The variable headerBar references an instance of the MyHeaderBarWidget class.
• The .getElement().querySelector() method inserts the header bar widget as a child of the header element.

Update customization.scss

Open the <GBC_PROJECT_DIR>/customization/<customization_project>/sass/customization.scss file for editing.

Copy the code shown in the example and save.

@import "MyMainContainerWidget";

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

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