Defining the Layout of the Declarative Component

Immediately after defining the metadata for a declarative component, JDeveloper presents the declarative component definition file (which is a .jspx file) as a blank page in the visual editor:

Visual editor, Component Palette

To begin defining the declarative component layout, if the Component Palette is not already open, from the View menu choose Com ponent Palette . Then select the ADF Faces page from the dropdown list in the palette, and expand the panel of your choice (for example, Common Components or Layout). You can use any number of ADF Faces components to define your declarative component layout. Typically, you would first add a layout or container component such as Panel Group Layout, and then insert the other components into the layout or container component.

Adding components to a declarative component layout is similar to adding components to a JSF page. You can use any combination of design tools to create your declarative component layout. For instance, you will use the visual editor, Property Inspector, and Component Palette to create a toolbar with toolbar buttons.

While metadata for a declarative component is defined in the component definition file within the af:xmlContent element, any other ADF Faces components that you place outside of af:xmlContent will constitute the layout of the declarative component. When you add the first ADF Faces component anywhere on the page, JDeveloper will automatically insert it either before or after the af:xmlContent element. It does not matter whether it is inserted before or after the af:xmlContent element, as long as it is within af:componentDef but outside of af:xmlContent, as shown in the Structure window:

Structure window, af:menuBar in definnition

In the layout part of the declarative component definition, you will insert the following ADF Faces components:

A Panel Menu Bar component
A Menu component inside the Panel Menu Bar
Two Menu Item components inside the Menu component

You cannot include ADF databound components in the layout part of the declarative component. For instance, you cannot drag and drop an item from the Data Controls panel.

To enable page authors to enter their own label for a menu item, you will invoke the Expression Builder from the Property Inspector to create and insert an EL expression for the text property of a menu item component. The EL expression will reference the attribute already defined in the declarative component metadata.

Expression Builder, JSP Objects

To enable page authors to enter their own action listener method for the menu item, you will use the Edit Property dialog to insert a method expression on the actionListener property of the menu item component.

Edit Property dialog

To enable page authors to add additional menus if they so desire, you will add the Facet Ref component to the Panel Menu Bar component. The Facet Ref component will reference the facet name already defined in the declarative component metadata.

Insert Facet Ref dialog