®

IBM Software Group

© 2006 IBM Corporation

JSF Progress Bar

This Learning Module shows how to integrate EGL/JSF functionality into a run-time progress bar for a web page.

2

Progress Bar Workshop

Many web applications have at least one process that could take more than a few seconds to return to the user. Especially common culprits are open-ended (and long-running) search pages, and functionality that accesses remote systems.

To mitigate the impatience of certain classes of users (especially Type “A” personality users – you probably know a few), you could add a traditional progress bar, that displays the status of your server-side functionality in a graphic (see below).

Let’s create a page that utilizes a JSF progress bar. Below is a screenshot of what your page will look like when we complete this workshop.

3

Progress Bar Workshop – 1 of 3

First, create a new web page called progressBar.jsp and add the following header text to the top of your page (or something else representative of the functionality)

Once you’ve done that, from Enhanced Faces Components, drag a Progress Bar onto the page It is found under the enhanced faces components drawer of the palette.

Once the progress bar is on the page, click on it and go to the Properties View.Check: Do not display when page initially loads

This will make the bar initially hidden on page load

4

Progress Bar Workshop – 2 of 3 Copy the code in the slide ***Notes and completely replace the boiler plate page

code. Notice the following function:

Note that the contents of this function are immaterial. In this workshop we implement the progress bar so that it will start counting and not stop until the page is returned (the function has finished executing).

Return to Page Designer, and your JSP and drag the “doLongServerSideProcessdoLongServerSideProcess” function onto the screen to create a Submit Button. Also add an Enhanced Faces Components: “Error Messages” control beneath the button

Notice the JSF Properties and options provided for the hx:progressBar Update interval etc.

5

Progress Bar Workshop – 3 of 3

Next, click on the “doLongServerSideProcess” button and go to the “quick edit” view. From there add the following onClick event code.

This code sets the progress bar to visible, then tells it to start. The text passed to the start function will be displayed above the bar

When ready, run the page on the server. Experiment with the for/loop in the JSFHandler, to see different Progress Bar effects

pb=hX.getComponentById('form1:bar1');

pb.visible();

pb.start('Please wait while your action is being executed on the server...');

6

Progress Bar Workshop – Optional

The page we just implemented is a very simple use case for the progress bar. By setting the progress bar type to manual, you can adjust where the bar is through

the below JavaScript code.

This can be achieved by using the following JavaScript code.

Take a look at the link in the notes section of the slide for more info on this

function advancePB() { pb=hX.getComponentById('form1:bar2'); pb.upDatePercentage(pb.percentageDone + 5); pb.redraw();

}

function resetPB() { pb=hX.getComponentById('form1:bar2'); pb.upDatePercentage(0);pb.redraw();

}