6.
Designing a JSF Page
The first thing you want to do after getting the page open in the
designer is to expand the palette on the right hand side of the
design by clicking the left arrow on the top of it:
The palette will read the tag libraries out of your build path
and load them so you can utilize the Drag and Drop interactions
with building your web pages.
Some of the more important tag groups to be aware of are as
follows:
|
JSF HTML
|
JSF Core
|
JSTL Core
|
|
|
|
There are the most common sets of tags you will likely be using
while designing your pages. Let's use these items to Drag and
Drop a login form onto our new page.
First we drag a JSF HTML
form onto the page and update the page text a bit:
Now we want to layout a typical login form with a username,
password and login buttons. To lay these items out nicely, it
sounds like it would be a 3x2 table, but if we want to include space for login error messages, we would likely want a 3x3 table. In JSF there is a component that will layout it's contents in a table automatically for us, it's called a panelGrid. Let's go ahead and drag a panelGrid into our form and be sure to set the columns value to 3: 
The first thing to notice is that when the panelGrid is added, the designer automatically adds 4 sample components to it, to get an idea of how output will work.
For this tutorial, we are going to place the following components in the panelGrid in the given order: - outputText: "Username:" label
- inputText: username text field (ID=username)
- message: display username error messages (FOR=username)
- outputText: "Password:" label
- inputSecret: password text field (ID=password)
- message: display password error messages (FOR=password)
So we haven't added the buttons yet, but at this point our form is done and properly laid out and looks like this: 
It's important to note that the message components will only be rendered when they have messages to display. Now let's add our buttons. Given the layout of our login form, we may want to left-align the buttons under the input boxes to make the form look nice. If we simply place a single button in each cell (1 under Password, 1 under inputSecret) they are going to be unevenly spaced. However, the way the panelGrid works is to take components added directly to it, and lay them out in a table, cell-by-cell. To be able to group our two buttons together, and place them under the input fields, we will need to use a panelGroup. The first thing we need to do is add an empty component (we used an empty outputText) to the panelGrid, so it places it under the Password label. Second, we need to add a panelGroup, so it places it under the input fields. Then inside the panelGroup, we will add our two buttons. The result looks like this: 
Once that panelGroup is added, we don't have to add another component to be placed under the existing message components. The panelGrid will keep everything laid out correctly. Now the design portion of our page is done and has given you a good idea of how the designer works. Of course, if you were building a real JSF application, you would need to step back into the page, and using the designer, assign action handlers to the buttons, and value bindings to the input fields to make sure your managed bean was correctly backing the values on this page. These steps are outside the realm of this tutorial, which was simply intended to introduce you to the new Visual JSF Designer. If you'd like to see how to design a real JSF application, please check out the JSF Tutorial in the MyEclipse help documents or available from the MyEclipse site.
|
