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

14

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:

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:

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)

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.

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:

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)

Share.

About Author

14 Comments

  1. yes, you can always invoke the full qualified plugin and version, 2.4 (just released) supports
    wtp 1.5 (not 2.0). so here goes (I usually put it in a pom profile):
    mvn org.apache.maven.plugins:maven-eclipse-plugin:2.4:eclipse -Dwtpversion=1.5
    cheers
    Mohan

  2. Jeroen van Wilgenburg on

    I didn’t knew 1.5 was supported. When I do mvn eclipse:eclipse -Dwtpversion=1.5 I get an error that I only can use R7 or 1.0. I removed the .m2\repository\org\apache\maven\plugins\maven-eclipse-plugin directory and run the command again and then it worked fine. Is there a way to automatically update the plugins you’re using?
    So thanks for the tip, now my Eclipse projects are WTP 1.5 :)

  3. Jeroen van Wilgenburg on

    Thanks for the tip Jan! Now I can work with existing maven projects in Eclipse. I also think it’s a bug in WTP that the webapp folder has to be a root folder. But the maven guys should also be aware that there already is a WTP 2.0 and not 1.0

  4. Michael Schnake on

    Sorry, POM code format was destroyed (this is my first post here, did not know this blog takes HTML). So, here again (hopefully intact)…

    <plugin>
    <artifactId>maven-war-plugin</artifactId>
    <configuration>
    <warSourceDirectory>${basedir}/webapp</warSourceDirectory>
    </configuration>
    </plugin>

  5. Michael Schnake on

    I found the problem with faces-config.xml editor not working. It fails if the “WebContent” directory is not a direct child of the project dir. So the Maven2 default “/src/main/webapp” does not work. If you want to verify, create a new Dynamic Web Project in Eclipse and try to enter some text with a “/” inside into the “Content Directory”-Field on the last wizard page ;-)

    So, I got to move my /src/main/webapp to /webapp, and add the following to the POM:

    maven-war-plugin

    ${basedir}/webapp

    It is not “Maven2 Standard Directory Layout” anymore, but so far I had no problems (at least war-, eclipse- and cargo-plugin work as expected).

  6. Philippe Desrosiers on

    I’m also having the same problem opening an existing faces-config.xml file with the Faces Configuration Editor. Assertion Failed. Is anyone able to get this working in Eclipse without creating a brand new project and using the single-level directory structure they force you to use in the wizard?

  7. Jeroen van Wilgenburg on

    I haven’t found out yet how to get the faces-config.xml working. The example in the article is with a brand new project.

  8. Hi, I am having the same problem as mohan. The .metadata directory is created when you create your project on Eclipse based on the files generated by Maven. Even with this directory I also had the assertion fail problem, when I add the at my .settings/org.eclipse.wst.common.project.facet.core.xml file. When I dont add this line the faces-config.xml code appears but without the Eclipse Faces Configuration Editor. Is there any other thing that must be configured to open the Faces Config Editor?

  9. Hello,
    Thanks for the WTP2.0 and Maven2 tip. I have tried to use the maven2 structure and then hacked the project file to
    add the JSF facet. But I get exception while opening faces-config.xml with the faces xml Editor. Some sort of assertion
    failed (Loading “faces-config.xml”). When use eclipse to generate a WTP2.0, I do not get the error while opening faces-config.xml. A closer inspection reveals a new .metadata directory with some meta info of faces-config.xml, I could
    not find any documentation as to how that is generated. Did you do anything else to a maven2 project to convert it into a
    WTP 2.0? Thanks, good stuff
    Mohan

  10. Marcelo Melo on

    Working with Visual Web Pack is a real pain. It’s slow, it’s very slow, and I am using a Athlon 64 3700 HP with 2 GB RAM. It looks good, but that is all; it can’t be recommended for serious (enterprise level) Java Development.

  11. I couldn’t agree more with your conclusion. You took the thoughts right out of my head. I am glad that somebody finally said what has been obvious for a long time. WTP just isn’t useful for developing web applications. It is nice, pretty, and worthless. I have not tried JDeveloper yet, and this article has motivated me to try it out.