|
MyEclipse Visual JSF Designer Tutorial |
Table of Contents
1. Introduction
In this tutorial we are going to cover some of the features available in the new Visual JSF Designer available in MyEclipse 5.5 and later.
While MyEclipse has offered a Visual JSP Designer in the
past, the advanced Visual JSF designer now available in MyEclipse 5.5
and later offers many new features to JSF developer like dynamic
analysis of build path to determine the taglibs available on the
palette, and rendering of advanced components, e.g. dataTables and panelGrid.
For a more general overview of all the MyEclipse Visual JSF Designer features see the MyEclipse Visual JSF Overview document.
2. Suggested Audience
This tutorial is intended for developers who are somewhat familiar with MyEclipse or Eclipse so you recognize navigation within the IDE, and understand some of the more common views like the debugger. This tutorial also assumes knowledge of JSF page development in general.
To learn more information about the topics presented in this
tutorial please have a look at the links in our
Resources section. To
get a better feel for MyEclipse and learning more about it,
please check out our product
Documentation for more
material.
3. System Requirements
This tutorial was created with MyEclipse 5.5. If you are using a
another version of MyEclipse, most of these screens and
instructions should still be very similar.
If you are using a newer version of MyEclipse and notice portions
of this tutorial looking different than the screens you are
seeing, please
let us know and we will make sure to
resolve any inconsistencies.
4. Getting Started
To get started with the new Visual JSF Designer you must first have a Web Project that has JSF Capabilities added to it. From there you can create new JSF pages or edit existing ones using the visual designer. The designer recognizes JSF pages by the tag libraries imported and used on the page, so it's possible to use the designer with the different JSF page formats.
Creating a Web Project
To begin, we need to first create our Web Project:
Then select Web Project and hit Next:
Give the project a name, and in this tutorial we select the Java EE 5.0 specification to use for our project (which includes the JSTL and JSF JARs as part of the specification):
After MyEclipse has created the new project, it will look something like this:
Even though Java EE 5.0 contains the JSF libraries, we still need to add JSF Capabilities to our project so MyEclipse knows to treat the project like a JSF application.
Adding JSF Capabilities
We add JSF Capabilities to our project just like we add other capabilities. Start by right-clicking on the project, and going down to MyEclipse then selecting Add JSF Capabilities:
When the wizard pops up, with a Java EE 5.0 project, there are no library selections to make (e.g. Sun RI, MyFaces, etc.) because the JSF implementation is included with the libraries in your application server. Besides choosing a few of the default mappings and possibly adding Facelets support, you can just click Finish:
5. Creating a JSF Page
Once the project is setup, you can create your first JSF Page and start building it with the Visual JSF Designer. Right-click on the folder you wish to add your page to, and select New then JSP (Advanced Templates):
Then be sure to select the Default JSF template for the page template to use:
When the new page opens up in the designer, you can close it. We want to right-click on the new JSF page, and see our available editors to get a better idea of what we can edit this page with.
If you select the file that you just created and right-click on it, you will see the following:
Notice that this file can be edited with any of these editors. The two visual editors are the MyEclipse Visual JSP Designer and the newer MyEclipse Visual JSF Designer. In this tutorial we are going to open the page with and use the MyEclipse Visual JSF Designer, so go ahead and click that. Your page will open up in a designer that looks like this:
Now that our page is ready and open in the designer, let's start
editing it.
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.
7. Conclusion
We hope you have found this tutorial on the Visual JSF Designer helpful and given you a good starting point to begin using it. The goals of the Visual JSF Designer is to make the component-specific job of creating a JSF application easier to visualize and work with. JSF applications can get complex, and being able to design the pages in a JSF application visually can greatly simplify that task.
If you have any suggestions for us to help make it more informative, please let us know.
Below we would like to provide you with some more information
pertaining to the topic covered in this tutorial. We offer the
Resources
section with links to other helpful resources online that you
may want to become familiar. We realize we can't cover
every question you may have in one tutorial, but between this
tutorial contents and our additional learning resources we hope
you are on your way to feeling comfortable with the
technology.
8. Resources
In this section we want to provide you with additional links to resources that supplement the topics covered in this tutorial. While this is not an exhaustive list, we do make an effort to point to the more popular links that should provide you with diverse, high-quality information.
9. Feedback
We would like to hear from you! If you liked this tutorial, has some suggestions or even some corrections for us please let us know. We track all user feedback about our learning material in our Documentation Forum. Please be sure to let us know which piece of MyEclipse material you are commenting on so we can quickly pinpoint any issues that arise.