Srini Raman's Radio Weblog

Fri, 24 Jun 2005 18:07:42 GMT

Faces Component Binding Support in JDeveloper 10.1.3 Visual Editor

Since JavaOne is around the corner, I thought I would blog about the Faces Component Binding and Backing Bean support in the upcoming JDeveloper 10.1.3 production release.

What is Backing Bean

Backing bean is a Java Beans file/class, which could contain the properties and methods which are associated with the Faces UI Components on a page (ex: a JSP Page)

 <h:inputText value="#{Person.firstName}" validator="#{Person.validatename}" /> </h:inputText>

In the above example, the inputText Faces UI Component has two attributes defined in the page. The attribute 'value' refers to the 'firstName' property defined in the java file Person.java. This is called value binding, whereby you bind the UI Component's attribute to a backing bean's property. The attribute 'validator' refers to the 'validatename' method defined in the java file 'Person'. This is called method binding, whereby you bind the UI Component's attribute to a backing bean's method.

So, the backing bean can have both properties and methods referenced from Faces components in the JSP page. The backing bean is created and stored with the application using the managed bean creation facility. Once you create a backing bean, you need to add the backing bean to the application configuration file.

Now, let's see what support JDeveloper provides in creating and managing the backing bean.

Associating Backing Bean with a JSP Page

Let's see how you can associate a backing bean with a JSP page. To create a JSF-JSP Page, select File->New and bring up the New Gallery wizard. From Client Tier categories section, select JSF. On the right side, you should see all the items that can be created for JSF category. Select JSF-JSP and click 'ok'.

Note: JSF-JSP is a predefined JSP page with some faces tags like view and form in it. JDeveloper adds the f:view and h:form tags, so user does not have to manually add them.

When you click 'ok', the JSF-JSP wizard comes up. If you go through the wizard, one of the pages you should encounter is the Component Binding page. The picture below shows the Component Binding page

JDeveloper uses the terminology Auto Bind to define the features related to component binding and creation & navigation to the backing bean. The user could specify the name of the java file that should be used as backing bean. JDeveloper will create this file and add it as a managed bean in the application configuration file. If you don't specify a backing bean class name, JDeveloper will create one for you and will automatically add the backing bean as a managed bean in the application configuration file.

When you finish the JSf-JSP wizard, JDeveloper creates the jsp file and the backing file specified in the component binding page of the wizard.

Take a look at the faces-config.xml file and you will see the following entry in it

<managed-bean>
<managed-bean-name>backing_untitled2</managed-bean-name>
<managed-bean-class>mypackage.backing.Untitled2</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>

What if you don't want to specify the backing bean when you create a JSP page, but want to specify it after the page is created. JDeveloper provides a way to associate backing bean to a JSP page after the page has been created. To do this, select Design->Page Properties ... menu option. This will bring up the Page Properties dialog. One of the tabs is for 'Component Binding'. You can specify or change the backing bean file through this dialog.

How is it used

Once the backing bean is associated with a JSP page, JDevleoper maintains the relationship between the JSP page and the backing bean file. JDeveloper also provides an easy way to navigate to the backing bean from the visual editor.

Let's see the auto binding in action through a simple example.

In the visual editor, drag and drop a commandButton from the component palette (commandButton is under JSF-HTML palette page). This is how the page looks like after dropping the commandButton

Let's double click on the command button and see what happens! JDeveloper takes you to the backing bean and puts the cursor in the method commandButton_action().

Here is what happened when you double clicked on the command button in the the Visual Editor.

- a variable and accessor methods (get/set) for the command button component got added to the backing bean.
- commandButon_action() method is added
- this method is automatically bound to the command button component in the JSP page. If you look at the source of the JSP page, you will see the following

<h:commandButton value="commandButton1" action="#{backing_untitled2.commandButton_action}">

The action attribute is now bound (method binding) to the backing bean's method.

Now you can add logic to the commandButton_action() method that will be executed when the user clicks on the command button.

Now, let's go back to the visual editor and add an inputText component to the page.

Let's double click on the input text component and see what happens!

<h:inputText validator="#{backing_untitled2.inputText_validator}">

Here, JDeveloper added a validator method for the inputText and bound the validator attribute to the method in the backing bean.

As you have noticed, in the case of commandButton the action attribute got bound to the backing bean method and in the case of inputText, the validator attribute got bound to the backing bean method. JDeveloper will bind the action attribute if it is supported on the Faces component, if not it will bind the validator attribute if it is supported on the component.

Note: what happens if neither the action nor the validator attribute is supported by the Faces component. Go ahead and try double click on a graphicImage component and see what happens!.

Component Binding Toolbar

I am not sure what the official name for this toolbar. I am going to go with the component binding toolbar. If you take a close look at the top of the source editor, you will see a toolbar like this

There are two items in the toolbar, one for Components and one for Events. Go ahead and select the components drop down list.

It shows all the Faces UI components that are available in the JSP page. Select the commandButton1 entry and the Events entry gets enabled.

Select the action entry in the Events drop down list and JDeveloper will put the focus on the commandButton_action() method. If you have lots of faces components, this toolbar provides an easy way to navigate to the appropriate method. First select the component from the Components drop down list and then select an entry from the Events drop down list, JDeveloper will move the focus to the appropriate method.

In the above case, you also see an entry named actionListener. Selecting that will create an action listener method for the commandButton1 component and associate the method to the actionListener attribute of the commandButton1 component.

<h:commandButton value="commandButton1" action="#{backing_untitled2.commandButton_action}" actionListener="#{backing_untitled2.commandButton_actionListener}"/>

The component binding toolbar can be used to navigate to the method and can also be used to create action or event or validator methods. This toolbar provides a powerful feature to quickly create methods which can serve as the entry point to the business logic for the faces components.

Hope you will find the component binding feature useful for your web application development. This feature will be available in the production release of JDeveloper 10.1.3.

Fri, 03 Dec 2004 18:45:45 GMT

JDeveloper 10.1.3: JSP Error Page Support

JSP Error Page Support in JDeveloper 10.1.3

This article explains how JDeveloper 10.1.3 provides support for creating JSP error page, specifying error page on any JSP page, and JSP error page template.

In your web application file (JSP file/page), you can specify an error page to take control of the exception handling for that page. If and when there is any uncaught exception from the JSP file (when it's run), the Web Container catches that exception and passes the exception to the error page specified in the JSP file which threw that exception. The error page can display information related to the cause of the exception/error to the user.

Creating an Error Page

An error page could be a JSP file with a marking which says that it's an error page. The page directive has an attribute called 'isErrorPage'. This attribute is set to true on an error page.

ErrorPage.jsp

<%@page isErrorPage=true %>

Now, let's see how we can create an error page in JDeveloper. To create an error page, do File->New->Web Tier->JSP->JSP

This brings up the JSP file creation wizard.

If you take a look at the 'JSP File' page, it has three options related to error page. The default option is, not to associate any error page with the JSP file that is being created. Since we are creating this JSP file as an error page, select the third option 'Create This File as an Error Page'. Click 'Finish' and take a look at the code that is generated.

What happens when 'Create this File as an Error Page' option is selected

isErrorPage="true" attribute is set on the @page directive. This tells the web container that this file should be used as an error page.
A template is created for the error message within the <body> tag. The scriplet outputs the exception message and the exception stack trace to the user

An error occured: <br></br> <pre> <% out.println(exception.getMessage()); CharArrayWriter charArrayWriter = new CharArrayWriter(); PrintWriter printWriter = new PrintWriter(charArrayWriter, true); exception.printStackTrace(printWriter); out.println(charArrayWriter.toString()); %> </pre>

You can edit the error page just like any other JSP page.

How to Use the Error Page

Now, let's see how we can use the error page we have created. Create another JSP file through File->New->Web Tier->JSP->JSP. For this file, select the 'Use an Error Page to Handle Uncaught Exception in This File' option in 'JSP File' page of the wizard. Click 'Next'.

The Wizard shows the 'Use Error Page' page which lists all the error pages that are available in your web application. This page will not be shown, if the 'Use an Error Page to Handle Uncaught Exception in This File' option is not selected in 'JSP File' page of the Wizard. JDeveloper look at all the JSP files to check whether isErrorPage is set; if so, list the file name. Select an error page from the list and click 'Finish'.

What happens when you select an error page

errorPage="/ErrorPage.jsp" attribute is set on the page directive. This attribute tells the web container that any uncaught exception in this page should be forwarded to the error page with the name 'ErrorPage.jsp'.

Note:
Q: Instead of specifying error page on each of the JSP pages in a web application, is there a way to specify it globally?
A: Yes. You can specify error page in web deployment descriptor file (web.xml)
Q: Can a html file be used as an error page instead of a JSP page?
A: Yes

Mon, 29 Nov 2004 21:26:19 GMT

Creation Wizards

Visual Editor: Creation Wizards in JDeveloper 10.1.3

When you create a HTML or JSP file in JDeveloper 10g, it brings up a dialog which looks like this

Here, all you can enter was filename and the directory where the file needs to be created.

In JDeveloper 10.1.3, we have introduced creation wizards for HTML and JSP file creation.

HTML Creation Wizard

To create a html file, do File->New->Web Tier->HTML->HTML Page

The first page is the welcome page, which you can skip the next time when you create a HTML page. To skip the welcome page, select the 'Skip this page Next Time' checkbox.

In the 'HTML File' page, you enter the name of the file and the directory.

The next page is something new to 10.1.3.

In 'HTML Options' page you can specify

the doctype that should be used in the page
title of the page
background image of the page
background color of the page
link color of the page (color used for all the links in the page)
style sheets that should be used in the page (you can specify as many style sheets as you want)

The values you specify in this page are saved/cached. So, when you create another HTML Page, the values that you entered last time are automatically updated in this page. Say, you select 'yellow' for the background color; next time when you go through this wizard, yellow color is selected for background color option.

Note: Go ahead and specify background color, background image, link color and see how we do code generation for these in the html file. Instead of setting html properties on <body> tag, document CSS style is created, like the folllowing example. The best way to use CSS styles is through external style sheets.

<style type="text/css"> body { background-color: #ffb563; } a:link { color: #ff0000; } </style>

JSP Creation Wizard

To create a JSP file/page, do File->New->Web Tier->JSP->JSP. This will bring up the wizard for JSP file creation. JSP wizard uses some of the pages that we saw in HTML wizard. In addition to that, JSP wizard adds JSP specific items/pages also.

In the 'Web Application' page, you can select the web application version (J2EE 1.4 or J2EE 1.3) that you want to use in your project. If your project is not setup for web application (ie., no web.xml file), this page will show up. If there is a web.xml file already in your project, then this page will not be shown.

What's the implication of selecting the web application version?

web.xml file is created in WEB-INF directory

The 'JSP File' page is similar to the 'HTML File' page in HTML wizard. But, in addition to the filename and directory name, you can see few other options. Here, you can select whether the page to be created is a JSP Page or a JSP Document. The main difference between these two is that the Document follows the xml syntax (ie., well-formed). If you are not familiar with this, just stick with the default selected option (which is JSP Page). This page also provides error page options, which I will blog as a separate article.

The 'Tag Libraries' page allows you to select the tag libraries that should be used in the page. On the left side, you can see all the tag libraries known (or registered) with JDeveloper. Using the shuttle UI, you can move tag libraries from the left side to the right side.

So, what's the implication of selecting a tag library?

a taglib directive is added to the page (Ex: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>) for each of the tag libraries selected in this page.
the jar file corresponding to the tag library gets copied to the WEB-INFlib directory.
if the tag library is associated with a technology scope, the technology scope is added to the project, if neccessary.

Note
- In addition to HTML and JSP file creation, we have wizard for creating JSP Tag File and JSP Tag Library
- For JSF-JSP (Faces) wizard, JSF related tag libraries are pre-selected in the 'Tag Libraries' page.
- For a JSF-JSP page, Faces Configuration file (faces-config.xml) is created, if it does not exists

Mon, 22 Nov 2004 18:59:52 GMT

Untitled Document

JDeveloper 10.1.3 Preview and JSP/HTML Visual Editor

We are working on 10.1.3 JDeveloper preview which will be released soon. In the coming weeks, I will blog about some of the features that we worked on, in JSP/HTML Visual Editor for 10.1.3.

Here is the summary of some of the features we have in 10.1.3 (related to the Visual Editor)

JSP 2.0 support
- tag file creation. tag file editing and rendering
- expression language support
- JSP 2.0 items in palette, custom dialogs for these items
- code insight and favorite attribute support for JSP 2.0 items
- prelude and coda rendering and editing
Project based tag library support
- creation wizard for tag library
- wizard for adding tag to a tag library
- dynamic update of palette page for the tag library
Faces (JSF) support
- jsf component rendering and editing
- faces config overview console
- jsf jsp creation wizard
Improved visual experience
- creation wizards for html, jsp and jsf pages
- revamped html palette pages
- inline attribute editing
- Expression Language builder

Stay tuned...

Wed, 22 Sep 2004 20:30:05 GMT

Web Development Survey and Amazon Gift Certificate!

We are conducting a survey on web development features of JDeveloper 10g. Please visit OTN to find out more about how you can win $50 Amazon gift certificate!

Mon, 21 Jun 2004 19:25:48 GMT

Untitled Document

JavaOne 2004: What we are doing...

JSP Visual Editor team is very busy preparing for the JavaOne demo. We plan to demo JSP 2.0 and Faces features that we are working on for the next version of JDeveloper.

Some of the features (in visual editor) that we will be showing in demo grounds

JSP Expression Language (EL) support: A cool EL picker dialog. Pervasive EL support.
Tag file support: Wizard for creating tag file, component palette support for using tag files, rendering of tag files, etc.,
Faces support. This includes a cool demo to show how we render faces tags, do event and value binding and add managed bean using faces config editor.

For more information about what Oracle is doing at JavaOne, please visit OTN.

Tue, 20 Apr 2004 21:01:19 GMT

Working With Tables in JSP-HTML Visual Editor

In this article, I will try to explain the various features we offer related to HTML table. First section covers the basic table editing and the second section explains how HTML table can be used with custom tags.

Working with Table

Creating a table

To create a table, drag Table element from the HTML page of the component palette and drop it on the Visual Editor. This will bring up the Table Dialog where you can specify number of columns/rows, cellspacing, cellpadding, border, width, etc., When you hit OK, the table is created.

Tip: Instead of dropping the table on the VE, you can also drop the table onto the Structure Window.

Selecting table elements

Selecting a table or row or column is little bit tricky. You have to be really good at handling the mouse!

To select a table
move the mouse to the right or bottom edge of the table; when the mouse is near the right or bottom edge of the table, the cursor will change to table select icon
when the table select icon shows up, click to select the table
Tip: You can select the table from the Structure Window by clicking on the table node. You can also select the table from the Table Context Menu (see below)

To select a Row

move the mouse to the left edge of the table and the cursor will change to row select icon
when the row select icon appears, click to select the row

To select a Column

move the mouse to the top edge of the table and the cursor will change to column select icon
when the column select icon appears, click to select the column

To select a cell

Press Ctrl & click inside the cell will select the cell.

Tip: While Ctrl key is pressed, you can select multiple cells by simply clicking inside those cells.
Note: When you select a cell, take a look at the bottom of the Property Inspector. You will see two links (Split Cell... and Insert Rows or Columns...). Go ahead and click on them and see what happens!

Click and drag select

You can mouse press anywhere in a cell and drag the mouse across other cells to make selection.

Resizing table elements

You can resize the table or table row or table column from the visual editor.

To resize table

move the mouse to the right-bottom corner of the table
the cursor will change to resize icon (we call it resize handle)
mouse press and drag to resize the table
TIP: If you want to cancel the resize, simply hit Esc while resizing, but if you have done the resizing, hit Ctrl+Z to undo the resize.

To resize row or column

move the mouse to the border of any row or column
the cursor will change to row/column resize icon
mouse press and drag to resize column/row
Tip: If you want to cancel the resize, simply hit Esc while resizing. You can also use undo (Ctrl+Z) to undo the resize.

Reordering table row or column

Visual editor allows you to reorder a row or column.

To reorder

first select the row or column you want to reorder
drag the selected row/column.
while dragging the mouse, there will be a visual indication (a thick black line with an arrow in the middle) to show where the selected row/column will be moved to.
release the mouse to move the selected row/column to the desired new location.

Tip: If you want to copy an entire row/column, do the same as above, but with one difference. Hold the Ctrl key first and then drag the mouse. When you release the mouse, the selected row/column is copied to the new location.
Note: In the above steps, try dragging the selected row/column outside the table and see what happens!

Setting background color

The background color button in the Toolbar can be used to set background color on table or row or column or cell.

To apply background color

make the selection (select the table or row or column or cell)
select the background color from the Toolbar background color button. The selected color is applied to the selection

Note: bgcolor property of the table/tr/td is set with the selected color value.

Table Context Menu

Visual Editor provides various context menu options for the table. Simply right click inside the table and look at the various options provided under Table-> sub menu. Through the context menu, you can insert new row/column, delete a row/column, merge cells, split a cell and increase/decrease col/row span of a cell.

Others...

Put the cursor at the last cell of the last row of a table and hit Tab. A new row is created.
You can use Tab to forward navigate between cells in a table
You can use Shift+Tab to backward navigate between cells in a table
Be careful with align property of the table. Setting it to left or right will float the table (Please see HTML and CSS specification about float)
Ctrl-click inside a cell. The cell is selected. Now, drag the cell onto some other cell. The contents of the selected cell is moved to the cell where it's droppped. Instead of simply dragging, hold the Ctrl key and drag and see what happens. Now, the contents of the selected cell is copied.

Working with Table and Custom Tags

In this section, I will show how you can combine table and custom tag, especially struts's iterator tag and JSTL's foreach tag.

One of the common use case in a web application is to use the iterator tag or foreach tag along with table.

Take a look at this code snippet

<table> 
 <logic:iterate id="order" name="searchResults" type="com.foo.bar.Order"> 
  <tr>
    <td><bean:write name="order" property="orderNumber"/><td>
    <td>..other properties...</td>
  </tr>
 </logic:iterate>
</table>

How would I create the above from the visual editor? It's pretty easy to create the table with one row and two columns. But, inserting the iterate/foreach tag around tr might be impossible (ie., without going to code editor) with other tools. In visual editor, you can do this very easily.

Drag and drop the table element from the HTML page of the palette (specify 1 row and 2 columns in the Table dialog).
Switch to Struts Logic or JSTL Core Page in the component palette
Now, drag the iterator/foreach element from the palette, using the *right* mouse and onto the left edge of the table
When the mouse is dragged near the left edge of the table, the table row is highlighted to indicate that the table row is the drop location
Release the mouse and a popup menu shows up with two options, "Wrap" and "Cancel".
Select Wrap to wrap the iterator/foreach tag around the table row
Enter appropriate values in the iterator/foreach dialog and press OK
You are done!. Wasn't that easy!

Tip: If you find it difficult to do step 3 and 4, you can use Structure Pane to drop the tag. Simply drop the tag onto the tr in Structure Pane.

Note: Using right mouse, you can wrap any element from the component palette around the drop location in Visual Editor.

Hope you find this article useful.

Wed, 14 Apr 2004 16:58:03 GMT

Oracle JDeveloper 10g Production Released

Oracle has released 10g production of JDevelolper. You can download it from OTN.