tell me more icon Designing the User Interface

JDeveloper provides the Component Palette for you to drag and drop UI components onto your JSF page. To see the libraries and components that are currently available, click the dropdown list in the Component Palette. To create a user interface for mobile devices, add Apache MyFaces Trinidad components to your JSF page in the visual editor.

Component Palette, Trinidad page

After inserting a component, you set the component properties using the Property Inspector or using a dialog displayed at the time you drop the component (if one is required).

Property Inspector

The visual editor is integrated with other development tools such as the Structure window and Property Inspector. You can use any combination of integrated tools to design your user interface. When you make a change to the page in one of the tools, the change is reflected in the other tools as well.

While inserting, copying, or moving components on a page, you select an insertion point on the page in the visual editor or in the Structure window in relation to a target page element. JDeveloper provides visual cues to indicate the location of the insertion point before, after, or contained inside a target component.

For example, the following Structure window illustration shows that the insertion point is after the Panel Header component within the Form component:

Structure window, visual cues

The following visual editor illustration shows that the target component is Form, and the insertion point is below the Panel Header component:

Visual editor, target component

The visual editor also provides breadcrumbs at the bottom of the editor window (just above the editor tabs Design and Source). The editor breadcrumbs show the path of component names from the currently selected component back to its root parent component. The last name in the path (shown in bold font) is the currently selected component; the names preceding the last name are the parent components. You can use the breadcrumbs to select a component on the page by clicking its component name.

Copyright © 1997, 2009, Oracle. All rights reserved.

false ,,,,,,,,,,,,,,,