Creating a Page Layout

Now we define the page layout for HomePage.cls. The page layout defines the arrangement of the Zen components as they appear on the Web page.

First, add the title and and namespace attributes to the page element, which the wizard has already added to the XData Contents block. The page component will eventually contain all of the other components on our page. The title attribute defines the Web page's title. The namespace attribute declares the namespace for the standard Zen components contained in the page.

/// This XML block defines the contents of this page.
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page title="Zen Contacts" xmlns="http://www.intersystems.com/zen" >

</page>
}

Next, add an <hgroup> element to the page and three <vgroup> elements to the <hgroup>. The hgroup component uses 100% of the available page width. The vgroup components use respectively 5%, 90%, and 5% of the width of the <hgroup>.

/// This XML block defines the contents of this page.
XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
<page title="Zen Contacts" xmlns="http://www.intersystems.com/zen" >
  <hgroup width="100%">

    <vgroup width="5%"></vgroup>
  
    <vgroup width="90%">
    </vgroup>
  
    <vgroup width="5%"></vgroup>
  
 </hgroup>
</page>
}

The hgroup component arranges its child components horizontally on the page while the vgroup component arranges its child components vertically. Adding the three vgroup elements to the hgroup arranges them horizontally. The overall effect is to create a set of three columns on the page.

The two columns running down the side serve as borders for our page. We add the main content of the page to the larger central column.