Getting started with Java Server Faces (JSF) using Apache MyFaces – in JDeveloper 10.1.3EA

Seen so much, heard so much, read so much: time to actually do a
little with Apache MyFaces. I am using the blog article by Jonas Jacobi
as my guide along the (first steps of the) way: MyFaces and the JDeveloper 10.1.3 EA release . I will be using the 10.1.3EA release of JDeveloper – to be downloaded from OTN. Apache MyFaces can be downloaded from the Apache website. This article will get a very simple JSF application running. Nothing more.

Steps

1. Download and install JDeveloper 10.1.3EA1
2. Download and install Apache MyFaces (binary distribution myfaces-1.1.1.zip 27Mb) and the Samples (myfaces-1.1.1-examples.zip
   14Mb). I unpack the two zip-files to a JDEV_1013_HOME\myfaces
   directory. Per the suggestion from Jonas I unpack the simple.war
   example.
   
3. I have downloaded the Jakarta ORO binary distribution from http://jakarta.apache.org/site/downloads/index.html
4. I downloaded a relatively random selection of Commons jars from http://jakarta.apache.org/site/downloads/downloads_commons.html
   
5. Select Tools-> Manage Libraries… menu
6. In the first tab “Libraries”, create a new library by clicking on the New button
7. Enter
   MyFaces as the name and add the following libraries from your MyFaces
   download: myfaces-impl.jar,myfaces-api.jar, commons-[something].jar
   (fileupload and logging are optional), jakarta-oro.jar;  Close the Open
   dialog (Stay in the main dialog “Manage Libraries”)
   
8. Now
   click on the JSP Tag Libraries tab; Click on the New button to create a
   new JSP tag library; Select the myfaces-impl.jar from the same location
   as above and click Open. You should now see two JSP tag libraries JSF
   Core 1.0.10 and JSF
   HTML 1.0.10. Make sure that “Execute in JSP visual editor” is checked
   for each library before you close the Manage Libraries dialog.
   
9. If you want to add the Tomahawk library, repeat steps 7 and 8.

Now Jonas suggests we are ready to start developing an application. Let’s see.

Building an application using MyFaces

1. Create a new Application workspace and a new Project.
2. Double click on the Project to get to the Project Properties dialog.
3. In this dialog, select the Libraries node in the left pane.
4. Add the MyFaces library and the JSTL library to your project.

5. Now select the JSP tag libraries node in the left pane.

6. Add the JSF Core and the HTML tag libraries to your project (Optionally add your Tomahawk tag library)
7. Close the dialog.
8. You are now setup to start working with MyFaces. Right click on the Project node and select New…
9. In the new gallary select Web Tier -> JSF -> JSF JSP and click OK.

10. Step through the wizard and select optional component libraries.
Finish the wizard and your done with your first MyFaces page.
11. Drag and drop components from the Component Palette to populate
your page with cool MyFaces components. Let’s take it easy for now and
use a single, simple component. What about the Data Input (and I have
made use of the examples in Marty Hall’s tutorial, see below):

First create the JSP with InputDate component:

Now
clearly we need two things: a backing bean and a naviagtion rule to
deal with the show-date situation. First the backing bean:

And the faces-config.xml to go with it:

I also made use of the faces-config console in JDeveloper – which may be the James Holmes console, I am not sure –

Now I can run my first application by simply running the JSP. The outcome is this HTML page:

A
simple but quite nice Date Entry popup – actually not a popup but a
sort of floating DIV element. After choosing a date and submitting the
query, the navigation rule takes me back to the same page, displaying
the selected date:

Running the Simple Example application

The MyFaces distribution includes the Core JSF Components as well as the extended set Tomahawk components. See MyFaces Components and Features for details.

Let’s
first get a sample application up and running. I have copied the entire
contents of C:\jdev10_1_3_EA1\myfaces\demos\simple to my just created
JDeveloper 10.1.3 project
(C:\glassfish\MyFirstMyFaces\MyFacesProject1\public_html). I have
included all that’s in the public_html directory in the project:

Now I can run the index.jsp file and see whether my first MyFaces project is doing okay.

The index.jsp apparently immediately hands over to index.jsf. And that shows up in the browser:

Okay.
It is actually working, Now I can go and develop a simple page myself.
See my next article on getting the Tree2 Component to work with EJB 3.0
Persistence based model data.

Resources

My Next Article on MyFaces: Apache MyFaces (open source JSF implementation) – Using the Tree2 Component with JDeveloper 10.1.3

Getting started with Apache MyFaces tutorial by Marty Hall

MyFaces and the JDeveloper 10.1.3 EA release by Jonas Jacobi

MyFaces Wiki

Getting started with  Apache MyFaces – tutorial/quick start guide from Apache MyFaces website