Add header image

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

Steps

1. Edit MyHeaderBarWidget.tpl.html.
   1. Open the gbc-project-dir/customization/customization-project-dir/js/MyHeaderBarWidget.tpl.html file with a text editor.
   2. Inside the div element add an <img> tag, and set its src attribute to the path to your image.

      <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>

   3. Save your changes.

   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 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.
2. Edit MyMainContainerWidget.js.
   1. Open the gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js file with a text editor.
   2. 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'],
        function(context, cls) {
          cls.MyMainContainerWidget = context.oo.Class(cls.MainContainerWidget,
            function($super) {
              return /** @lends classes.MyMainContainerWidget.prototype */ {
                __name: "MyMainContainerWidget",
      
                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
3. Update customization.scss.
   1. Open the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file for editing.
   2. Copy the code shown in the example and save.

   @import "MyMainContainerWidget";

4. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

5. 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.