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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
Ashwin
Guest
Ashwin

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.

jhm
Guest
jhm

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

Ngoc Khuong
Guest
Ngoc Khuong

Very helpful. Great tutorial!

Praveen Kalawad
Guest
Praveen Kalawad

Great tutorial Yong:-)

sandeep kiran
Guest
sandeep kiran

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
Guest
Revanth Krishna Kumar

Great tutorial series Yong Mook Kim !!!

Alabama Mothman
Guest
Alabama Mothman

Will you people PLEASE quit using annotation beans in JSF. It is the worst of all bad ideas. It is hardcoding config data inside java source. Nothing could be worse.

If you have only a few years experience in programming, PLEASE do not write these blogs.

Mateo Cuervo Taylor
Guest
Mateo Cuervo Taylor

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

Niks
Guest
Niks

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.

Alabama Mothman
Guest
Alabama Mothman

Hello, Just my personal preference but I have a strong negative thinking about annotations. To me this is what we call “hard-coding” which I believe should be avoided at all cost. Using xml configuration the server doesnt have to be restarted.

All configuration should be table/xml driven. Other wise you have to re-generate the war file and re-install it for the smallest of changes. Not practical, and goes against the entire principal of JSF.

Ashok
Guest
Ashok

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
Guest
Ramon Rangel Osorio

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
Guest
Zengfan

so easy,I can help you

Cyn Hache
Guest
Cyn Hache

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
Guest
Az MaYo

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
Guest
Abhishek

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
Guest
venky

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

Rakesh
Guest
Rakesh

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 ..

Roshan
Guest
Roshan

Yes both are same in the JSF

blip
Guest
blip

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.

Abdul
Guest
Abdul

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

trackback
JSF odkazy | BRAIN SNIPPETS

[…] Mkyong […]

souvik
Guest
souvik

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
Guest
Roshan

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

Diva
Guest
Diva

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

Mohan
Guest
Mohan

Hi Mkyong,

No words to express. it’s reallhy awesome.

thank you very much!!!!

Howard
Guest
Howard

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
Guest
Fareed Mohammed

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

keep posting Thanks !…

Fareed Mohammed
Guest
Fareed Mohammed

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

Thanks Q very much

Mohamed Rafeeque
Guest
Mohamed Rafeeque

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
Guest
Rohan

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
Guest
Xuqian

Nice tutorial, got it! Thank you!

Venkat
Guest
Venkat

hi,

how to configure jsf+jpa please can you guide me

Thanks in advance

Venkat

rahul
Guest
rahul

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.