4.5.2.2.8. HtmlBoxLayout

HtmlBoxLayout is a container that enables you to define locations of components in an HTML template. The layout template is included in a theme.

XML-name of the component: htmlBox.

Below is an example of using htmlBox for a simple screen.

gui htmlBox 1

Screen’s XML-descriptor:

<htmlBox align="TOP_CENTER"
         template="sample"
         width="500px">
    <label id="logo"
           value="Subscribe"
           stylename="logo"/>
    <textField id="email"
               width="100%"
               inputPrompt="email@test.test"/>
    <button id="submit"
            width="100%"
            invoke="showMessage"
            caption="Subscribe"/>
</htmlBox>

template attribute defines the name of an HTML file located in the layouts subdirectory of your theme. You should create a theme extension or a custom theme before creating a template. For example, if your theme is Halo and the attribute contains my_template, the template file should be modules/web/themes/halo/layouts/my_template.html.

Content of the HTML template located in the modules/web/themes/halo/layouts/sample.html file:

<div location="logo" class="logo"></div>
<table class="component-container">
    <tr>
        <td>
            <div location="email" class="email"></div>
        </td>
        <td>
            <div location="submit" class="submit"></div>
        </td>
    </tr>
</table>

A template should contain <div> elements with location attributes. This elements will display CUBA components defined in the XML descriptor with corresponding identifiers.

Content of modules/web/themes/halo/halo-ext.scss file (see Extending an Existing Theme for how to create this file):

@import "../halo/halo";

@mixin halo-ext {
  @include halo;

  .email {
    width: 390px;
  }

  .submit {
    width: 100px;
  }

  .logo {
    font-size: 96px;
    text-transform: uppercase;
    margin-top: 50px;
  }

  .component-container {
    display: inline-block;
    vertical-align: top;
    width: 100%;
  }
}

Attributes of htmlBox

align - enable - height - id - stylename - template - visible - width