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

Overview

The header image is defined in the header widget (MyHeaderBarWidget).

Before you begin

You must have a project directory which 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-dir/sass/customization.scss file for editing.

Copy the code shown in the example and save.

@import "MyMainContainerWidget";

Compile

$ gbc build --customization <customization_project_dir>

Test

Close and reopen your application to check the image displays as expected.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.