OEPE provides tag drop support for JSF Web projects. This OEPE feature is made available through a series of wizard-style dialogs that are displayed during "specialty" drops that require not just simple tag editors, but tag-addition guides that assist you by offering appropriate attribute editors and default values. Note that you cannot use these editors to modify tags, but only to add panelGrid, dataTable, and form tags.
To access this OEPE functionality, open your JSF Web project in Project Explorer, right-click a JSP page on which you are planning to drop tags, and select Open With > Web Page Editor from the drop-down menu.
With the page open in the editor view, click Show Palette (a gray triangular button located at the top right corner of the editor) to display the Palette.
To add tags, you drag one of Panel Grid, Data Table, or Form components from the Palette to the body of your JSP page in the editor and complete New dialogs.
Note that you have an option of binding dialogs' fields to beans or bean properties by clicking buttons located to the right of most fields.
You add a panelgrid tag using the New Panel Grid dialog that provides tag attribute editors.
Using this dialog, in the Generation options field, specify whether you are adding a new panelGrid tag, or generating one and its content from data. If you choose the former, proceed with the following:
In the Columns field, enter a number of columns.
In the Width field, specify the width as an integer.
In the Table Class field, specify the table style class.
If you choose the latter, the New Panel Grid dialog will change and you proceed as follows:
Specify the bean property by clicking Select a Variable button located to the right of the Bean property field to open the Choose Bean/Bean Property dialog.
Click OK on the Choose Bean/Bean Property dialog, and then click Next on the New Panel Grid dialog to open the New Panel Grid > Choose Fields dialog.
On the New Panel Grid > Choose Fields dialog, you may select the fields that you want to generate for your panel grid, and then click Next.
On the next New Panel Grid > Choose Field Components, Labels and Ordering dialog, you may select components to represent fields and the labels for these fields. In addition, you may define the order in which the fields will appear by clicking Up and Down buttons located to the right of the Field Selection area.
You may click Next to open the New Panel Grid > Choose Options dialog. On this dialog, define if your panel grid should have a header and a footer, and whether or not validation messages should be displayed for input fields, and if so, choose their style by clicking a button to the right of Style class field to open the Choose CSS Style Class dialog.
Upon completion, in the body element of your JSP page an empty h:panelGrid tag with the specified parameters is added.
You add a dataTable tag using the New Data Table dialog.
Using this dialog, in the Generation options field specify whether you are adding a new dataTable tag, or generating one and its content from data. If you choose the former, proceed with the following:
In the Data Table area, provide the table ID, as well as to which UI component this table is to be bound by clicking the Bind to a dynamic value button located to the right of the Binding field and making selection of either variables or resources on the Choose Binding dialog.
In the Data Table area, provide the table ID, as well as to which UI component this table is to be bound by clicking the Bind to a dynamic value button located to the right of the Binding field and making selection of either variables or resources on the Choose Binding dialog.
In the Table Properties area, you may set the table's width and border size as integers, as well as specify classes for the table, row and column.
If you are generating a dataTable and its content from data, the New Data Table dialog will change and you proceed as follows:
Specify the enumerable bean property by clicking Select an Enumeration button located to the right of the Enumerable field to open the Choose Enumerable Bean Property dialog.
Enter the iteration variable name and type by completing appropriate dialogs. You may also choose the enumerable fields to generate and define their order, as well as insert a header and footer for your table. For information on how to do this, see Adding a PanelGrid Tag.
Upon completion, a h:dataTable tag with the specified parameters is added within the body element of your JSP page.
You add a form tag using the New Form dialog.
Using this dialog, in the Generation options field specify whether you are adding a new form tag, or generating one and its content from data. If you choose the former, proceed with the following:
In the Id field, enter the form ID.
In the Binding field, specify to which UI component this form is to be bound by either entering the value, or clicking the Bind to a dynamic value button located to the right of the Binding field and making selection of either variables (of type javax.faces.component.UIComponent) or resources on the Choose Binding dialog.
If you choose to generate a dataTable and its content from data, the New Form dialog will change, and you proceed as follows:
Specify an existing JSF managed bean by clicking the Select a Variable button located to the right of the Form bean field to open the Choose Bean/Bean Property dialog.
Click OK on the Choose Bean/Bean Property dialog.
Optionally, you can specify a form action, such as a navigation case outcome or a method binding, by clicking button to the right of the Form action field. Clicking Select a value will open the Select Navigation Case dialog. If there are no existing navigation cases listed, you may click New Navigation Case to open the dialog that will let you to define a new action (navigation case).
To specify a method binding, click Bind to a dynamic value button located to the right of the Form action to open the Choose Method dialog that will let you select a method, if available, or add a new method in the selected bean.
You can either click Finish on the New Form dialog, or click Next sequentially to provide the following optional configurations:
Fields - from the list of fields with accessor methods, select fields to generate.
Notes:
Fields of fields are displayed recursively as children.
Non-complex" first-level fields are selected by default; other fields, such as enumerated types and dates, are not selected because they are considered "complex".
Field Components, Labels and Ordering - select components to represent fields and the labels for these fields. In addition, you may define the order in which the fields will appear by clicking Up and Down buttons located to the right of the Field Selection area.
Options - define if your form should have a header and a footer, and whether or not validation messages should be displayed for input fields, and if so, choose their style by clicking a button to the right of Style class field to open the Choose CSS Style Class dialog.