Composite Components

A composite component combines a set of components into a single component. This allows you to add several components to a page at once. It also simplifies controlling the consistency of the style and behavior of these components across all of the pages of an application.

We will create a composite menu component that combines several menuItem components along with an hmenu (horizontal menu) component and an html component. This creates a horizontal menu bar that can be added to each page of our application.

Here are the basic steps:

1. Create a new Zen component that extends %ZEN.Component.compositeOpens in a new tab. Note that custom components should always be placed in a dedicated package separate from the package containing your page classes.

2. Assign a value to the component's NAMESPACE parameter. Note that custom components should have their own dedicated namespace.

3. Place a <composite> element within the XData Contents block.

4. Add the <hmenu> and <menuItem> elements to the <composite> element.

5. Add custom styles definitions for the components to the XData Style block.