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:
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.
Assign a value to the component's NAMESPACE parameter. Note that custom components should have their own dedicated namespace.
Place a <composite> element within the XData Contents block.
Add the <hmenu> and <menuItem> elements to the <composite> element.
Add custom styles definitions for the components to the XData Style block.