Add header image using style class

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

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 class attribute to the mylogo style.

      <div>
        <img class="mylogo"/>
        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 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>.

2. Create MyHeaderBarWidget.scss.
   1. In your gbc-project-dir/customization/customization-project-dir/sass directory, create a file called MyHeaderBarWidget.scss.
   2. 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 resources in your distribution.

3. Edit MyMainContainerWidget.js.
   1. Open the gbc-project-dir/customization/customization-project-dir/js/MyMainContainerWidget.js file with a text editor.
   2. 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'],
      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.
4. 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 "MyHeaderBarWidget";
   @import "MyMainContainerWidget";

   In this example we import the MyHeaderBarWidget and MyMainContainerWidget styles.

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

   $ gbc build --customization customization-project-dir

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