Adding the Composite Menu

Add the new MenuComposite component to HomePage.cls by completing the following steps:

1. Declare the ZenTutorial namespace in the HomePage.cls <page> element. Do this by adding the following attribute and value:

   
   xmlns:zentutorial="http://www.intersystems.com/ZenTutorial"
   
   

   

2. Add the MenuComposite element to the HomePage.cls <page> element.

3. Set the value of the MenuComposite width attribute to 100%.

Update the first few lines of the HomePage.cls XData Contents block to look like the following:

XData Contents [XMLNamespace="http://www.intersystems.com/zen"]
{
  <page title="Zen Contacts" 
  xmlns:zentutorial="http://www.intersystems.com/ZenTutorial" 
  xmlns="http://www.intersystems.com/zen">
  <zentutorial:MenuComposite width="100%"/>
  
  ...

Note that we add the <MenuComposite> directly to the <page> element rather than to one of the <hgroup> or <vgroup> elements. We do this so that the width of the menu is 100% of the page and not merely 100% of one of the page's subcomponents. Here is the layout: