Getting started with Eclipse 3.3 WTP 2.0 and JSF – will this JSF editor beat JDeveloper?

A few days ago a brand new Eclipse release popped up in my RSS reader. Eclipse 3.3 with WTP 2.0. After browsing through the new features I was very surprised that it included a brand new JSF editor. I thought this sub-project died very slow and painful.

What I will try is get an existing Maven2 JSF project and open it with WTP2.0 and just see what happens and what is possible.

....

I grabbed an old JSF project of mine (with a Maven2 infrastructure) and tried to open it in Eclipse. Well that didn’t work, I’ve become too lazy I guess. So I opened the manual and read it (who does that nowadays anyway).
The first important step is including the JSF libraries in your Eclipse (not your project, Eclipse!)
Go to Window, preferences, WEB and XML, JavaServer Faces Tools, Libraries and click new.

Include the impl and api library of you JSF implementation. I picked an old MyFaces implementation because that one was bundled with my project. Don’t forget to check the ‘Is JSF Implementation’ (you can also attach other libraries to JSF, that’s why the checkbox is added)

After this you have to include a JSTL library. Finally you should have a screen like this:

Getting started with Eclipse 3.3 WTP 2.0 and JSF – will this JSF editor beat JDeveloper? e33 jsf library

Because I’m working on an existing project I had a problem. I couldn’t add a JSF facet to my project manually. Unfortunately I got a strange error saying that I needed a web.xml version 2.5 for a JSF project. The Maven2 eclipse:eclipse command only allows to create a WTP 1.0 project and what I want is a 2.0 project.

After comparing some Eclipse project files I found a (partial) solution. The solution is editing the org.eclipse.wst.common.project.facet.core.xml file in the .settings directory of your project. Just add the following element:

<installed facet="jst.jsf" version="1.1"/>

Don’t forget to restart Eclipse and now you can benefit from the new JSF features.

Let’s create a new JSP file and add some components on it.
I recently followed an ADF training at AMIS so I think it’s a good idea to recreate those pages with plain JSF (instead of ADF Faces).
When you created the JSP file you have to open it with the web page editor (right click file, open with, Web Page Editor). This also can be done automatically, consult the Eclipse help file for this, it’s explained pretty well in there.

I expected a JSF editor like JDeveloper, but this one was a little bit different (and I do not mean that it’s bad, it’s just different). There’s a Design and Preview mode. I think the Design mode is added to have a better overview of what you’re building.
When you edit your web page in the Web Page Editor 4 new icons appear on the toolbar:
Getting started with Eclipse 3.3 WTP 2.0 and JSF – will this JSF editor beat JDeveloper? e33 jsf icons

You can have a split view (with code and design/preview) when you click the first two icons. Isn’t that great? It reminds me of the good old days of HTML-editing in Dreamweaver and when Java was just an island.

The first assignment of the ADF training was to create a search page to find books for a library. It consists of some outputText and inputText elements inside a panelGrid. With the Eclipse JSF editor you can just drag and drop the elements onto the page. A little thing I miss is dragging the element inside the JSP-code, but you’re usually using your keyboard when you’re in JSP-mode (and then you have auto-completion of course)

Getting started with Eclipse 3.3 WTP 2.0 and JSF – will this JSF editor beat JDeveloper? e33 jsf screenshot1

In the upper-left corner is the wysiwig editor with a panelgrid and some outputText and inputText elements on it. The lower half of that screen is the JSP code. On the right we have a Palette with all JSF components on it and at the bottom is the properties view.

So far so good. But now the thing where it goes ‘wrong’. The next item of the search form is a list with topics. This list is bound to a managed bean. I wanted to pick the managed bean in the binding property of the selectManyListbox element. Wel that just doesn’t work, that’s a shame, that makes the wysiwig interface less useful because we have to look up the beans manually. One of the reasons JSF was developed is to provide the developers with good tooling (where the guys at Oracle did a great job with JDeveloper).
In the JSP view though the auto-completion works ok with the binding attribute. Just enter #{} move the cursor in between the curly braces and hit ctrl-space.

Getting started with Eclipse 3.3 WTP 2.0 and JSF – will this JSF editor beat JDeveloper? e33 jsf backing

The editor for Faces-config is also pretty cool it has many features. You can pretty much see all the configuration options in a nice interface. They looked good at how they did it with Jdeveloper. The nicest thing is the navigation tab:

Getting started with Eclipse 3.3 WTP 2.0 and JSF – will this JSF editor beat JDeveloper? e33 jsf navigation

Unfortunately I couldn’t get the Faces Config editor working with my Maven2 project, so this is a test with a brand new project.

Conclusion

I really like the editor but it’s only a good start. In my opinion the JSF features of Eclipse are only useful when you’re experienced with JSF. Experienced developers can build JSF manually and check the results in the wysiwig editors. But when you’re new to JSF it just isn’t good enough and maybe even frustrating because you don’t really know what you’re doing.
The fact that I can’t open the faces-config.xml and have to ‘hack’ Eclipse project files isn’t very nice either. But don’t throw Eclipse out of your window yet, this is the first final version of Eclipse that supports JSF and I’m sure the guys at Eclipse are improving the editor as we speak.
For now just stick to JDeveloper, it’s a proven tool and is also free. Or another option is to learn JSF so you can use Eclipse 😉
With Netbeans it’s also possible to edit JSF, you have to include the Visual Web Pack for this. I only saw some screenshots and dragged some JSF-elements onto a page and that all seemed to work pretty good. When you’re deciding which editor to pick it’s a tough one. If all your developers have experience with JSF the Eclipse editor is a good option. Jdeveloper and NetBeans are both safe choices.

Sources

Eclipse 3.3 new and noteworthy
NetBeans Visual Web Pack
Eclipse 3.3 WTP 2.0 download (pick the all in one if you don’t have Eclipse 3.3 yet)

14 Comments

  1. Jan Hoeve August 23, 2007
  2. mohan August 23, 2007
  3. Jeroen van Wilgenburg August 22, 2007
  4. Jan Hoeve August 21, 2007
  5. Jeroen van Wilgenburg August 9, 2007
  6. Jan Hoeve August 4, 2007
  7. Michael Schnake July 24, 2007
  8. Michael Schnake July 24, 2007
  9. Philippe Desrosiers July 22, 2007
  10. Jeroen van Wilgenburg July 19, 2007
  11. Luis Endo July 17, 2007
  12. mohan July 15, 2007
  13. Marcelo Melo July 9, 2007
  14. Dan Allen July 3, 2007