-- This section is unfinished --

While it is possible to do almost any normal layout with the standard layout components, it is sometimes best to separate the layout completely from code. With the CustomLayout component, you can write your layout as a template in XHTML that provides locations of any contained components. The layout template is included in a theme. This separation allows the layout to be designed separately from code, for example using WYSIWYG web designer tools such as Adobe Dreamweaver.

A template is a HTML file located under layouts folder under a theme folder, for example WebContent/ITMILL/themes/themename/mylayout.html. A template includes <div> elements with a location attribute that defines the location identifier.

<table width="100%" height="100%">
  <tr height="100%">
    <td>
      <table align="center">
        <tr>
          <td align="right">User&nbsp;name:</td>
          <td><div location="username"></div></td>
        </tr>
        <tr>
          <td align="right">Password:</td>
          <td><div location="password"></div></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td align="right" colspan="2"><div location="okbutton"></div></td>
  </tr>
</table>

The client-side engine of IT Mill Toolkit will replace contents of the location elements with the components. The components are bound to the location elements by the location identifier given to addComponent(), as shown in the example below.

Window sub = new Window("Login");
sub.setModal(true);
main.addWindow(sub);

// Create the custom layout and set it as the root layout of
// the containing window.
CustomLayout custom = new CustomLayout("mylayout");
sub.setLayout(custom);

// Create components and bind them to the location tags
// in the custom layout.
TextField username = new TextField();
custom.addComponent(username, "username");

TextField password = new TextField();
custom.addComponent(password, "password");

Button ok = new Button("Login");
custom.addComponent(ok, "okbutton");

The resulting layout is shown in Figure 5.8, “Example of a Custom Layout Component” below.