Skip to main content

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.


To learn more about composite components, read Composite Components in the Custom Components section of Developing Zen Applications.

FeedbackOpens in a new tab