Introduction to JSF 2: JSF Wizard

Java™enterprise Edition (Java EE) 6 contains a lot of powerful technologies like JSF 2. Contexts and Dependency injection (CDI) are one of these technologies, which largely standardizes concepts that have been in the pipeline for years in other frameworks.

In this article, I show you how to combine JSF 2 and CDI to implement an online quiz wizard. CDI brings me a dependency injection, producer method, and a conversation scope. I use these three to implement a wizard that you can easily use for any multiple-selection online test.

This series is not only focused on CDI. I'll explain how to:

Use the facelets template to minimize code and maximize reuse

Ajax Wizard for a smoother user experience

Use CDI's dependency injection to simplify code

Implement and use the CDI producer method to seamlessly use beans in the view

Using CDI's conversation scope to implement multiple-request user cases

All of the sample source code in this article can be downloaded. See Run Sample code sidebar for download links and a pointer to deployment guidance.

Quiz Wizard

Figure 1 shows the running Quiz Wizard:

Figure 1. Quiz Wizard

Initially, this application contains only one separate link to open the wizard:

The Start the wizard link will take the user to the Quiz wizard page where the user will be asked a question at a time, as shown in the two images at the bottom of Figure 1. I control the enabled state of this wizard button through some simple Ajax and a server-side bean, which I will show you in the Ajax section of this article.

Figure 2 shows a final question followed by a summary of the user's answer. When the user is in the last question, only the Finish button is enabled, and clicking the button takes the user to the summary page.

Figure 2. Summary page