Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Home/JSF/Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Create JSF project in eclipse (JSF 2.2)

In this section, we walk through about creating a JSF project in Eclipse and test it in a browser. The following steps are covered in this section

1. Create a JSF Project in Eclipse

2. Download JSF libraries in eclipse and add it to the Project

3. Create an XHTML file with simple text

4. Add Tomcat server in Eclipse and deploy the project

5. Test the Project

Installation Required

Eclipse Java EE IDE for Web Developers (Version Mars)

Java SDK

Apache Tomcat.

Download ‘JSTL API jar’ and ‘JSTL Implement jar’ file and place it in your Tomcat lib directory – You also add JSTL jar files in your project. Click here for the instruction.

1. Create a JSF Project in Eclipse

Open Eclipse >> Choose the Workspace >> Click Ok

020716_1903_Creatingfir1 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

In the Eclipse Workspace >> Click File >> Select Dynamic Web Project

020716_1903_Creatingfir2 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Input a Project Name >> Choose the latest version in Dynamic Web Module Version >> Click Next

020716_1903_Creatingfir3 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Click Next

020716_1903_Creatingfir4 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Enable the ‘Generate web.xml deployment descriptor‘ >> Click Finish

020716_1903_Creatingfir5 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

2. Download JSF libraries and add it into the Project

The Project get created in the Workspace >> Right-click the newly created project >> Select properties to add JSF libraries

020716_1903_Creatingfir6 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

In the Project property window >> Select Project Facets >> Enable Java Server Faces >> Click Further Configuration Window

It will download and configure the corresponding JSF version in eclipse

020716_1903_Creatingfir7 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Click the download icon as shown below >> Click Ok

020716_1903_Creatingfir8 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Select a JSF in the library >> Click Next

020716_1903_Creatingfir9 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Accept the license agreement >. Click Finish

020716_1903_Creatingfir10 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Click Ok

020716_1903_Creatingfir11 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

See the Further configuration required has changed into Further configuration available >> click Ok

020716_1903_Creatingfir12 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

The downloaded JSF library has been added to your project.

020716_1903_Creatingfir13 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

3. Create a XHTML file with simple text

Right click the Web content folder>> Click New >> Click HTML file

020716_1903_Creatingfir14 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Name it index.xhtml as shown below >> Click Next

020716_1903_Creatingfir15 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Scroll up >> Select New Facelet Composition Page >> Click Finish

020716_1903_Creatingfir16 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Delete the following section of code in index.xhtml

020716_1903_Creatingfir17 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Paste the following line in your index.xhrml file , the final file is similar like below

<h:outputLabel value=”Hello JSF”></h:outputLabel>

020716_1903_Creatingfir18 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

4. Add Tomcat server in Eclipse and deploy the project

Select the Servers tab at the bottom of the screen>> Right click and select New >> Select Server

020716_1903_Creatingfir19 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Choose the Tomcat server >> click Next

020716_1903_Creatingfir20 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

1. Click Browser >> Select your Tomcat Server directory

2. Click Installed JRE’s >> Cick Add >> Select Standard VM >> Click Next >> Click Directory in JRE Home >> Choose your JDK HOME >> Click Finish >> Choose the JDK >> Click Ok

3. Click Finish

020716_1903_Creatingfir21 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Move the project from left to Right

020716_1903_Creatingfir22 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

5. Test the Project

Open the URL in browser >> the text HELLO JSF in the index.html appears in the browser

http://HOSTNAME:PORT/catgovind/faces/index.xhtml

020716_1903_Creatingfir23 Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

 

Click the following section to configure WTP tools and enable Visual editor in eclipse. This Visual Editor provides you drag and drop  UI components in your JSF page and much more.

Introduction to JSF2.0 << Previous                                                                                                                                            Next >>  Install Visual Editor for JSF

pgn Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)

Govind

Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
pgn Create JSF project in Eclipse – Step by Step tutorial (JSF 2.2)
By | 2016-08-28T23:10:36+00:00 February 7th, 2016|Categories: JSF|Tags: , |3 Comments
  • Literate Aspects

    Excellent! Any tutorials on JSF template?

    Love your site, thank you for your examples.

    I am having a difficult time creating a JSF Facelets template JNDI connection pool to a JQuery data table to display AWS RDS dynamic remote data.

    Q. Any examples of placing a search box in the header template section to produce the filter AJAX results on body template section of the JSF Facelets Template web app page?

    Any suggestions greatly appreciated.

    • Govindan Padmanaban

      Would love to write one on JSF template. Am currently on vacation for a couple of weeks more. Will write post that.

      Bear with me please. Sorry.

      • Literate Aspects

        Enjoy! Thank you for your reply.

Like us on Facebook.
Connect!