Main Tutorials

JSF 2.0 Tutorial

jsf2-tutorials

JavaServer Faces (JSF) 2.0, is an MVC web framework which focus on simplifies building user interfaces (comes with 100+ ready UI tags) for Java web application and make reusable UI component easy to implement. Unlike JSF 1.x, almost everything is declared in faces-config.xml, with JSF 2.0, you are allowed to use annotation to declare navigating, managed bean or CDI bean, which make your development easier and faster.

In this tutorial, it provides many step by step examples and explanations on using JavaServer Faces (JSF) 2.0 framework.

Happy learning JSF 2.0 🙂

Quick Start

Some quick start examples for JSF 2.0

  • JSF 2.0 hello world example
    A JavaServer Faces (JSF) 2.0 hello world example, shows the JSF 2.0 dependencies, basic annotations and configurations. Let you have a quick idea about how JSF 2.0 look like, and also how it differs from JSF 1.x.
  • JSF 2.0 + Ajax hello world example
    In JSF 2.0, coding Ajax has been just like coding a normal HTML tag, it’s extremely easy. In this tutorial, you will restructure the last JSF 2.0 hello world example, so that, when the button is clicked, it will make an Ajax request instead of submitting the whole form.
  • How to make Eclipse IDE supports JSF 2.0
    Here’s a quick guide to show how to enable the JSF 2.0 features in Eclipse projects.
  • Resources (library) in JSF 2.0
    In JSF 2.0, all your resources files like css, images or JavaScript, should put into a “resources” folder in the root of your web application. In JSF 2.0 terminology, all the sub-folder name of the “resources” folder is considered as a “library” in JSF 2.0 web application. Later, you can reference this “library” with JSF tag’s library attribute.

Managed Bean

About managed bean configuration and injection in JSF 2.0

  • Configure Managed Beans in JSF 2.0
    In JSF 2.0, Java bean that can be accessed from JSF page is called Managed Bean. The managed bean can be a normal Java bean, which contains the getter and setter methods, business logic or even a backing bean (a bean contains all the HTML form value).
  • Injecting Managed beans in JSF 2.0
    In JSF 2.0, a new @ManagedProperty annotation is used to dependency injection (DI) a managed bean into the property of another managed bean.

Navigation

How the navigation works in JSF 2.0

  • Implicit Navigation in JSF 2.0
    Now, JSF 2 come out a new “auto view page resolver” mechanism named “implicit navigation“, where you don’t need to declare the above navigation rule, instead, just put the “view name” in the action attribute and JSF will find the correct “view page” automatically.
  • Conditional Navigation Rule in JSF 2.0
    JSF 2 comes with a very flexible conditional navigation rule to solve the complex page navigation flow.
  • JSF “form-action” navigation rule example
    In JSF navigation rule, you may encounter a situation where two separate actions return a same “outcome” in a page. In this case, you can use “form-action” element to differentiate the two navigation cases.
  • JSF : Page Forward vs Page Redirect
    By default, JSF performs a server page forward while navigating to another page. See following example to differentiate between the page forward and page redirect.

Resource Bundles

JSF’s message manipulation and Internationalization.

  • JSF 2.0 and Resource Bundles example
    In this tutorial, we show you the use of resource bundle to display the messages in the JSF 2.0. For maintainability concern, it’s recommended to put all the messages in the properties file, instead of hard-code the message in the page directly.
  • JSF 2 Internationalization example
    JSF 2.0 Internationalization or multiple language example.

JSF Tag Library

Standard JSF 2 form’s tag component.

Table Manipulation

Add, update, delete and sorting data in via JSF’s dataTable.

Facelets Tags

Doing layout template with JSF 2.0 facelets tags.

Converters & Validation

Standard Convertors and validator tags in JSF 2.0

Composite Components

Reusable components in JSF 2.0

Event Handler

JSF 2 comes with many event handler to hijack the JSF’s life cycle.

Integrate with Other Frameworks

How to integrate JSF with external services.

FAQ

Some Frequent ask questions in JSF 2.0

Common Errors

Some common error messages in JSF 2.0

Reference

Some useful reference site for further study on JSF 2.0

  1. JSF official Website
  2. The JSF application lifecycle
  3. Converter and Validation
  4. Communication in JSF

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
117 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
jhm
10 years ago

Thank you for your excellent JSF tutorials! Would you happen to have an example of a custom tag using a Renderer subclass?

Ashwin
10 years ago

Hi, Please consider me as your new fan. I am starting a new J2EE financial project which will also have lots of menus, graphs, charts. I was thinking using JSF2 with PrimeFaces, do you think that is a good approach or is any other MVC a preferred framework of choice (Spring MVC or something else). Many thanks in advance.

ope
5 years ago

Please how do i set data from database to primefaces charts

Ngoc Khuong
6 years ago

Very helpful. Great tutorial!

Praveen Kalawad
6 years ago

Great tutorial Yong:-)

sandeep kiran
7 years ago

i have been developing web application since 5 days .i’m using spring+Hibernate+jsf when i run .xhtml file its showing “Uh-oh, something went wrong! Error Code: 404 ” this error in browser and

Revanth Krishna Kumar
8 years ago

Great tutorial series Yong Mook Kim !!!

Mateo Cuervo Taylor
8 years ago

This site is very useful and the UX is great. Hope you can add tutorials on JSF authentication and authorization

Niks
8 years ago

Hello, I have a quick question about icefaces tag outputResource. I am trying to remove icefaces completely out of my projects and use myfaces instead, can you give me an equivalent implementation of ice:outputResource in myfaces, it could be a myface tag or equivalent implementation using html and js that i could use. Also checked tomahawk, trinidad component libraries for this.

Ashok
9 years ago

Really helpful info.

Small request:
It will be useful if you could add a tutorial on how to extend JSF components

I have a quick request:
Do you know how to make primefaces panel component on a dashboard component resizable?

Ramon Rangel Osorio
9 years ago

Hi, I want to know how can I move the jsf (xhtml) file to a folder, for example: from /web (root folder) to /web/faces? Could you help me with that?

Zengfan
5 years ago

so easy,I can help you

Cyn Hache
9 years ago

Hello im looking for a example of BLOB upload to database using hibernate to save the pdf and jsf 2.0 (xhtml pages) to display the upload buttons .I only found examples of upload only with jsf or only with hibernate , not integrated.Can anyone help me with that? thank you.

Az MaYo
9 years ago

Hi MkYong,

Please tell me how to generate / Export pdf from JSF 2.0 OR you can say how to convert xhtml to PDF.?

Abhishek
10 years ago

Hey , i created a jsf2.2 web application and deployed it to a free web hosting service . I found that the text boxes are not editable and the commandButton does not appear however it works very el on Glassh Fish 4.0 local server . What’s the problem ? Please answer asap .

venky
10 years ago

Can you give an example where we dont use JSF managed bean and we use spring bean..its tricky to manage two containers

Rakesh
10 years ago

Can u please tell me the difference between Backing Bean and Manged Bean ?
Is both are same ..?
Can you explain with an example.
Please replay ..

blip
10 years ago
Reply to  Rakesh

Both are used interchangeably usually. But as such managed beans contain data for the screen, while backing beans hold references of components of the screen. You may not need to hold the references of components on the screen in a backing bean if you don’t plan to add components dynamically. If it all sounds too complicated then you can simply assume that both are same.

Roshan
10 years ago
Reply to  Rakesh

Yes both are same in the JSF

Abdul
10 years ago

Hi
I am facing some problem while setting up an environment.
I have to use jsf 2.x with facelets and richfaces on Glassfish V2.
please help me to setup this
Thanks
Abdul

souvik
10 years ago

hi
I have included peimefaces jar in lib. and added it in deployment assembly.
tags are coming in the pages with no errors.
But when I am running it the primefaces is not working.
what to do ?

Roshan
10 years ago
Reply to  souvik

Go to primefaces site there you will find kickstart tutorial. Might be web.xml entries are missing

Diva
10 years ago

you can find some more details in the below link,”http://javadomain.in/hello-world-jsf-example-steps/”

Mohan
10 years ago

Hi Mkyong,

No words to express. it’s reallhy awesome.

thank you very much!!!!

Howard
10 years ago

Wow, I just saw this tutorial after visiting BalusC’s zeef.com. I am an active user of PrimeFaces and participate in the forums, there, almost daily. I need to start recommending your tutorial! 🙂

Fareed Mohammed
10 years ago

this is always best choice to start any java related stuff with this website

keep posting Thanks !…

Fareed Mohammed
10 years ago

it is a excellent resource for JSF as well as any technologies which is belong to Java

Thanks Q very much

Mohamed Rafeeque
10 years ago

Hi Mkyong,
I am new in jsf 2 using primefaces libraries.But whats the correct jsf project Structure for devoloping A standard project.I mean Creating P pure MVC Project in JSF.Please Help Me

Rohan
10 years ago

Hi Mkyong,
I am new to Richfaces and Jsp. I dont know how to configure Pom.xml file. So can u please give me a step by step tutorial for creating a project using richfaces4 using jsf2.0 in Eclipse using Maven.

Xuqian
10 years ago

Nice tutorial, got it! Thank you!

Venkat
10 years ago

hi,

how to configure jsf+jpa please can you guide me

Thanks in advance

Venkat

rahul
10 years ago

You have’t explained the 2 new scopes added in ver 2.0 – View scope. This is a major addition in ver 2.0. Also 2.2 has some @Flow scope added.

chanakyan xavierrajan
10 years ago

Really helpful.

Luis
10 years ago

I like this tutorial.
A good job.
Thanks