tell me more icon Designing the UI

In the example, you will design the user interface by adding HTML and JSF UI components to your JSF page. You will use a combination of integrated tools (namely, the Component Palette, JSP/HTML visual editor, and Property Inspector) to design the page. When you make a change to a page in one of these tools, the change is reflected in the others as well.

Visual editor, Component Palette

When designing a page in the visual editor, you can use the breadcrumb links at the bottom of the editor window (just above the editor tabs of Design and Source) to select an existing component or tag on the page. The editor breadcrumb links show the path of links from the currently selected component or tag back to its root parent component or tag.

When you click a component or tag in the editor breadcrumb links, JDeveloper shows the selected component or tag on the page with a dropdown menu icon at the top right corner of the selected item. When you click the dropdown menu, JDeveloper displays a context menu of actions that you can perform on the selected component or tag.

The visual editor is also fully integrated with the Structure window. While inserting, copying, or moving JSF components, you may 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.

After inserting components, you can set the properties of the components either using a dialog displayed at the time you drop the component, if one is required, or later using the Property Inspector.

Your application pages can also use a style sheet, either one provided by JDeveloper or one of your own. You can add a style sheet to a page at the time you create it, or later, by editing the page. If you have added a style sheet to your page, you can set the text on the page, such as the heading text, to a style chosen from the dropdown list:

Style dropdown list in visual editor toolbar

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

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