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.

Note:

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

FeedbackOpens in a new tab