tell me more icon Designing the UI

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

In the example, you will use the Component Palette to select and then drag and drop the JSF components Input Text, Command Button, and Output Text onto your JSF pages in the visual editor. To begin adding JSF components, you will select JSF from the dropdown list in the Component Palette, and then expand the HTML panel.

Component Palette, JSF

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 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.

Visual editor, JSF page

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 ,,,,,,,,,,,,,,,