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

Overview

The style classes for the header image are 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 class attribute to the mylogo style. Save your changes.

<div>
  <img class="mylogo"/>
  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 a reference to the image in the mylogo class style.
• 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.

  TIP: If the logo is to appear on the right-hand side of the title, add the img element after the window title in the <div>.

Create MyHeaderBarWidget.scss

In your gbc-project-dir/customization/customization-project-dir/sass directory, create a file called MyHeaderBarWidget.scss.

Copy the code shown in the example and save:

/* Header bar */
.mylogo {
    width: 50px;
    height: 50px;
    background-image: url("$$RES/img/my_logo.png");
}

In this example you can see:

• The .mylogo style class has settings for the size of the logo.
• The background-image property sets the URL for locating the image file.

NOTE: The $$RES variable allows the gbc build process to set the correct path for the resource in your distribution.

Edit MyMainContainerWidget.js

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

• Check that it contains the code that adds MyHeaderBarWidget 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 "MyHeaderBarWidget";
@import "MyMainContainerWidget";

In this example we import the MyHeaderBarWidget and MyMainContainerWidget styles.

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.