Step 2: Customize the layout

Add a logo to the application header and add some text to the application footer.

Add a logo to the application header

The HTML5 theme has a snippet that creates the header for a GWC for HTML5 application: $FGLASDIR/tpl/SetHtml5/Header.xhtml. Replace this header with a custom header specifically for this application.

Create a copy of the default Header.xhtml snippet file and place it in the application's template directory ($(application.path)/../tpl)

Specify the custom header file in the application's configuration file.

...
<THEME>
  <SNIPPET Id="Header">$(application.path)/../tpl/Header.xhtml</SNIPPET>
</THEME>
...

Tell the Genero Application Server where to find the logo file.

...
<PATH Id="SetHtml5" Type="APPSERVER"
  ExtensionFilter="$(res.web.extensions);.less;.svg" DVMFallbackAllowed="FALSE">
  $(application.path)/../web;$(application.path)/../res/photo;
  $(res.path.pic);$(res.path.tpl.html5);$(res.path.tpl.common)</PATH> 
...

Replace the page title:

<h1
  class='gHeaderTitle'           
  data-g-layout-item='"row": 0, "column": 0, "isXSpacer": true'           
  data-g-layout-policy='"minWidth": 0'
>Genero HTML5 Web Client</h1>

with an image:

<h1
  class='gHeaderTitle'           
  data-g-layout-item='"row": 0, "column": 0, "isXSpacer": true'           
  data-g-layout-policy='"minWidth": 0'
><img alt="My Company logo" style="height:48px"
  gwc:attributes="src resourceuri('card-logo.png','SetHtml5')"/></h1>

After this modification, the application text header is replaced by an image. The image height is specified to set a place holder for the image. The image url is retrieved with template function resourceuri from the resource identified by <PATH Id="SetHtml5" ...>

Add text to the application footer

The HTML5 theme has a snippet that creates the footer for a GWC for HTML5 application: $FGLASDIR/tpl/SetHtml5/Footer.xhtml. Replace this header with a custom footer specifically for this application.

Create a copy of the default Footer.xhtml snippet file and place it in the application's template directory ($(application.path)/../tpl)

Specify the custom footer file in the application's configuration file.

...
<THEME>
  <SNIPPET Id="Footer">$(application.path)/../tpl/Footer.xhtml</SNIPPET>
</THEME>
...

In your custom footer, replace the placeholder:

<!--
Change your footer content
-->

with a link that starts an email message to a specified email address.

<p>For any issues or comments please contact 
<a href="mailto:support@mycompany.com">support@mycompany.com</a></p>

Solutions for this step of the tutorial can be found in the project HTML5ClientTutorialStep2.4pw.