The opens automatically in the editing area, the central area of the IDE, when you
create a new project. In this editor you edit your application's pages. You can drag and drop
components from the Palette and the to the Visual Designer to create pages for your web application. The Visual
Designer has three buttonw at the top, Design, JSP, and Java:
Design. Switches the view from the JSP Editor to the Visual Designer, where you can
see and work with your components.
JSP. Switches the view to the JSP Editor for the
current page.
Java. Opens the current page bean in the
Java Editor. The page bean is a Java class that declares all the JavaBeans objects that
correspond to the JSP page and the components in it. In this class you work with Java code,
like the code for the event handlers for your JSP page's components.
Here are some ways to work with the Visual Designer.
When you drag components to the page, by default, the Visual Designer arranges each
component by specifying the component's absolute CSS position. Where you place a component
in the Visual Designer is where it appears on the HTML page. You can use the Grid Panel and Group Panel components to arrange components in a
group or you can set the
layout of the entire page to use flow layout and position components from left to right
on the first line.
If you select a component that you have added to the page, you can view and edit its
properties in the
Properties window. For a description of some common component properties, see Common Component Properties.
You can drag database tables, web services, and Enterprise JavaBeans components to the page
and bind components to them, as described in About Binding Components to Data.
You can select individual components and move them, and you can drag a selection rectangle
around a group of components and move them as a group.
You can select multiple components and then right-click one of the selected components and
choose Align to align them to one another or to the underlying grid. For descriptions of
these actions, see Aligning Components and Setting the Grid.
You can stack components on each other (for example, dropping an Input Text component on
top of an image). You can also nest components inside other components. For more
information, see Stacking
Components and Nesting
Components.
If you right-click the page itself, not a component in the page, you see the following set
of menu items:
Edit Java Source. Opens the Java Editor to display the page bean for this page,
a Java class that declares all the JavaBeans objects that correspond to the JSP page
and the components in it. In this class you work with Java code like the code for the
event handlers for your JSP page's components.
Edit JSP Source. Opens the JSP Editor to display the Java Server Pages (JSP)
code for this page.
Virtual Forms. Opens a dialog box in which you can define the virtual forms for the page.
Align. Aligns the components. Choose from the following options: Snap to Grid,
Top, Middle, Bottom, Left, Center, and Right.
Cut. Deletes the current selection and places it on the clipboard.
Copy. Copies the current selction to the clipboard.
Paste. If there is anything in the system paste buffer, such as an image file
you have selected and copied to the buffer, this item is enabled. Clicking Paste copies
the contents of the buffer to the page.
Delete. Deletes the current selection.
Preview in Browser. Opens the page as a static web page so you can quickly see
how the JSP code renders in the default web browser.
Refresh. Redraws the page. Especially useful if components are not displaying
properly.
Target Browser Window. Enables you to set the size of the web browser window
that you expect your users to be using, so that your design fits that size window.
Page Navigation. Opens the Page Flow
editor so you can link your pages together and create new pages to link to.