Java Tutorial Blog

JSF 2 Tutorials

//  by 

This page (JSF 2 Tutorials) is regularly updated with latest information and articles on Java Server Faces (JSF) technology.  If you come across any good JSF tutorials and not listed here, please send a mail to krishnas at javabeat.net or write it in the comments section.

JavaServer Faces (JSF) which provides a Component-Based Architecture for developing reusable User Interface Components hides most of the complex stuffs that are happening in the View portion of the MVC-2 Architecture. The framework is not only limited to developing customized User Interface Components but also provides support for various Advanced Features like Event handling Mechanism, Validating User Inputs that are sent by the clients, Easy Page Navigation Mechanism etc.

The good thing about JavaServer Faces is that the degree of coupling between the UI Components that represent the various behaviour/properties and its Rendering is very low. In fact it is almost nill. So, HTML browsers are not the only target client applications. JSF Applications works even well with WML Browsers. (Read : Introduction to JSF)

Unlike JSF 1.x, everything is declared in faces-config.xml configuration files, with the release of JSF 2.0, developers are allowed to use annotation to declare navigating, managed bean or CDI bean, which make your development easier and faster.

  • JSF 2 released on 2009-July-01.
  • Core theme of the major release is ease of use, enhanced functionality, and performance.
JSF Simple Architecture Diagram
JSF Simple Architecture Diagram
JSF Phases LifeCycle Diagram
JSF Phases LifeCycle Diagram

JSF Version History

Latest stable version is JSF 2.2.12

  • JSF 2.3.0 M3 – This release is going through Milestones release. 2.3.0 is not yet a stable release.
  • JSF 2.2 (2013-05-21) — Introduced new concepts like stateless views, page flow and the ability to create portable resource contracts.
    • JSF 2.2.12 (You can find the list of issues fixed in this release here).
  • JSF 2.1 (2010-11-22) — Maintenance release 2 of JSF 2.0. Only very minor amount of spec changes.
  • JSF 2.0 (2009-07-01) — Major release for ease of use, enhanced functionality, and performance. Coincides with Java EE 6.
  • JSF 1.2 (2006-05-11) — Many improvements to core systems and APIs. Coincides with Java EE 5. Initial adoption into Java EE.
  • JSF 1.1 (2004-05-27) — Bug fix release. No specification changes.
  • JSF 1.0 (2004-03-11) — Initial specification released.

JSF 2 Tutorials

The following sections gives you lot of information about the list of tutorials published on JSF / JSF 2 technology in JavaBeat and other websites. The tutorials are categorized under different headings.

Beginner JSF Tutorials

This section have the list of JSF tutorials for the beginners who are first time reading about JSF technology.

  • Injecting Managed Beans : This tutorial intended for providing a complete example of how could wire (connect/inject/reference) a managed beans from/into another managed bean. In our previous tutorial I have explained how to configure a managed bean.
  • Custom Tags Example : This tutorial highlights the way how you can define a custom tags using facelets. A custom tag looks like a regular JSF tag, but it uses the facelets composition mechanism to insert content into your page.

Access and Scopes

  • Flash Scope : In short, variables stored in the flash scope will survive a redirection and they will be discarded afterwards.
  • ViewScoped :  View scope was added in the JSF 2.0. A bean in view scope persists while the same JSF view (page) is re displayed. Once the user has navigated into another view the viewscoped bean goes out of scope. If your application has a page has been getting re displayed, then you can put the data for this page into view scope, thereby reducing the size of the session scope. You can put the managed bean in the view scope using the @ViewScoped annotation. This scope lies between the request and session scope.
  • ConversationScoped : The conversation scope ranges over a set of related pages, by that the data has persisted until a particular goal has been reached without needs for using the session scope. That is, a single session can have multiple conversations in different pages.
  • FlowScoped : With JSF 2.2, the JavaServer Faces technology allows you to create a set of pages with the new scope FlowScoped, that scope is greater than request scope and less than session scope. The FlowScoped scope depends on the concept of procedure where is declared a well defined entry point and a return value. The entry point should be used for starting the flow whereas the return is used for finishing the flow. In between the managed beans are defined for that scope, so once the flow has entered by its entry point the all managed beans that are defined as FlowScoped for that flow have created and once the flow has finished the FlowScoped managed beans are destroyed.

JSF Event Handlers and Listeners

  • SystemEventListener Example : At this tutorial, you are going to examine the using of <system-event-listener> in an application configuration to add application scoped listener.
  • JSF SystemEventListener – UIComponent Events Example : UIComponent – UIComponent is the base class for all user interface components in JavaServer Faces. The set of UIComponent instances associated with a particular request and response are organized into a component tree under a UIViewRoot that represents the entire content of the request or response – is also have a set of predefined system events could be listened.

JSF Integration with Other Frameworks

  • JSF and Groovy Integration : The JSF reference implementation  supports hot deployment of your Groovy code. When you change the groovy source files, the JSF implementation automatically recompile it and deploys the class files to the web application.
  • JSF and Scala Integration :  Scala does support calling a code in the Java Library from it, so it’s possible to integrate the JavaServer Faces (JSF Framework) with Scala. This tutorial you’re going to install and configure the created jsf maven project to support using of Scala.

JSF Tag Library

  • InputText Example : This tutorial highlights the use of form inputs and how the values are managed by the bean and how the views are rendered.
  • OutputText Example : The outputText is a component that has a value, optionally retrieved from a model tier bean via expression, that is displayed to the user. The user cannot directly modify the rendered value; it is for display purpose only
  • OutputFormat Example : The outputFormat tag renders parameterized text, in that the text itself containing a placeholders to be replaced by actual values that are passed at rendering phase. “h:outputFormat” tag is similar with “h:outputText” tag, but with extra function to render parameterized message.
  • GraphicImage Example : One of the most important component is a <h:graphicImage/> component. The graphicImage component renders an HTML image tag. This tag renders the HTML “img” element.
  • TextArea Example : one of the most important component is a <h:inputTextarea/> component. The inputTextarea component renders an HTML AreaText element.
  • OutputStyleSheet Example :  JavaServer Faces 2 provides you a resources newly concept that’s ever provided before; it is now possible to include your style sheet using <h:outputStyleSheet/> tag. You can place style sheets files into a resources directory in the root of your web application. Sub directories of this directory are called libraries, you can create any libraries that you would.
  • OutputScript Example : JavaServer Faces 2 provides you a resources newly concept that’s ever provided before; it is now possible to include your JavaScript using <h:outputScript/> tag. You can place script files into a resources directory in the root of your web application. Sub directories of this directory are called libraries, you can create any libraries that you would.
  • SelectOneMenu Example : JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a <h:selectOneMenu/> component. The selectOneMenu is a component that been used for making selection. The using of selectOneMenu component can be achieved by means of using an inline selection values or by using a list of option.
  • SelectManyMenu Example : This JSF tutorial provides details about how the selectManyMenu is a component that been used for making multiple selection. The using of selectManyMenu component can be achieved by means of using an inline selection values or by using a list of options defined in the managed bean. This tutorial explains how to use this tag with simple example.
  • SelectOneListBox Example : The selectOneListBox is a component that been used for making selection from the list. The using of selectOneListBox component can be achieved by means of using an inline selection values, a list of options defined in the managed bean or by using a pre-defined object is applicable.
  • SelectManyListBox Example : JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a selectManyListBox component. The selectManyListBox is a component that been used for making multiple selection. The using of selectManyListBox component can be achieved by means of using an inline selection values, a list of options defined in the managed bean or by using a pre-defined objects.
  • SelectBooleanCheckbox Example : JSF 2 provides additional attributes for selectBooleanCheckbox, those added attributes are mainly related to the styles and the way that the data is displayed within it; enabledClass, disabledClass, selectedClass, unSelectedClass,hideNoSelectionOption and collectionType are the main newly attributes that added since JSF 2 has took place.
  • SelectManyCheckbox Example : JSF 2 provides additional attributes for selectManyCheckbox, those added attributes are mainly related to the styles and the way that the data is displayed within it; enabledClass, disabledClass, selectedClass, unSelectedClass,hideNoSelectionOption and collectionType are the main newly attributes that added since JSF 2 has took place.
  • SelectOneRadio Example : The selectOneRadio component is one of the most component that already had provided in JSF 1 and included in the JSF 2. Radio buttons are implemented in the JavaServer Faces using the selectOneRadio that translated into <input type=”radio”/> while the HTML gets rendition. The selectOneRadio isn’t consider as a replacement for selectBooleanCheckbox, cause the latter doesn’t enforce one selection, but the selectOneRadio component does enforce the user to select one option inherently.
  • DataTable Example : The h:dataTable is one of the most important component that’s coming from the starting of JSF page. JSF 2 support the using of h:dataTable by means of iterating a list of data that’s filled inside a bean’s list to create an HTML table. The most important attribute at the h:dataTable is the value attribute that represents the data over which h:dataTable iterates
  • Repeat Example : The ui:repeat component is one of the most popular component that could be used as an alternative way for iterating the data. The using of h:dataTable may be tedious specifically when the user comes to worry about headers, footers, captions and styles. But if the developer was familiar with HTML tables and has a good knowledge , there is nothing wrong with using a ui:repeat instead of h:dataTable.
  • InputSecret Example : The h:inputSecret component is one of the most popular JSF Tags or components, it’s like h:inputText component with a one big difference in that it is hiding the text that’s typed within it. The main attribute of the h:inputSecret component is a value attribute that can be associated (binded) into a bean property. This tutorial will show the proper use of h:inputSecret as a placeholder for the password in a login form.
  • CommandButton Example : This JSF tutorial teaches you about how component does render an HTML submit button that work as a simple <input type=”submit”/>. JSF 2 does enhance the h:commandButton by allowing the command to invoke an associated action by passing a parameters for it.
  • JSF 2 CommandLink Example : This JSF tutorial explains about how command link component does render an HTML anchor tag <a href/>. JSF 2 does enhance the h:commandLink by allowing it to invoke an associated action by passing a parameters for it. The main attribute of the h:commandLink is an action attribute that accepts a method-binding expression for a backing bean action (method) to be invoked.

JSF 2 UI Tag Library

  • ui:remove : Somewhat surprisingly, the XML comments <!– … –> are not useful for this purpose for example when you comment out a button in an XHTML page, JSF will process the value expression, and place the result, as a comment, in the generated HTML page. In case the expression throws an exception, then the XML comments don’t help you at all. Since JSF 2.0 a new Tag has provided for commenting the undesired components. Instead of using comments JSF provides you a new Tag ui:remove.
  • ui:debug : The ui:debug component is very useful during the development, so developers can instantly see the current page’s component tree and the application’s scoped variables; however, you will probably want to remove the tag in production. For that reason, we recommend that you put the ui:debug tag in a template, where is is specified in one place, and shared among many views, instead of replacing the tag in each view’s XHTML page.
  • ui:fragment :
  • ui:param :
  • ui:decorate : Unlike the ui:composition, the ui:decorate is more content-centric approach, in that you write your pages as usual, but you surround the contents with ui:decorate tag that has a template attribute. The decorator in its turn uses the provided template for decorating the contents that written as you’ve determined in the template. Using of ui:decorate is vary differ from the ui:composition, being the ui:decorate does consider those tags that are surrounding it, meanwhile the ui:composition trims them.
  • ui:composition, ui:insert and ui:define :

Logic Tags

  • DataTable Delete Row  : This Tutorial shows you the using of newly JSF 2 feature for removing the rows from a data table.

Navigation

  • Static Navigation : Static Navigation is one of the navigation techniques, it isn’t new for JSF 2.0, it’s already exist at the jsf 1.2 but jsf 1.1 doesn’t support this navigation.
  • Navigation using From Action : This tutorial highlights the benefits of using the navigation with from-action element in the JSF configuration file. If you have any questions, please write it in the comments section.
  • Conditional Navigation : As of JSF 2.0, you can supply an if element that activates a navigation case only when the condition is fulfilled. You can configure the condition in the faces configuration file itself to redirect to different views depends on the various conditions. This tutorial highlights the benefits of using the conditional navigation with simple example.
  • Dynamic Navigation using From Outcome : To implement dynamic navigation, the submit button must have a method expression, a method expression in an action attribute has no parameters. It can have any return type. The return value is converted to string by calling toString() as of JSF 1.2, you can use any return type. In jsf 1.1, an action method was required to have return type String.
  • Wildcard Navigation Rule : In JSF you can use wildcard in the from-view-id element of a navigation rule, that is the rule applies to all pages that start with the prefix /somePrefix. Only a single (*) is allowed, and it must be at the end of the ID string. If there are multiple matching wildcard rules, the longest match is taken.
  • Redirect Navigation : You can configure the JSF configuration to redirect to a new view. Then the JSF implementation sends an HTTP redirect to the client. The redirect response tells the client which URL to use for the next page. The client then makes a GET request to that URL. Redirecting could be very slow some times because another round trip to the browser is involved. However, the redirection gives the chance to browser for updating its address field.
  • Dynamic Target View ID (to-view-id) : The to-view-id element can be a value expression, in which case it is evaluated. The result is used as the view ID. This type of providing of to-view-id isn’t implemented before JSF 2.0.

JSF and AJAX

JSF References

JSF Debates

Those who thinks or scary of the future prospect for JSF technology, please read the below articles from JSF experts.

JSF Popularity

If you are a die hard fan of Java Server Faces technology or you are working for this technology for a long time, it makes sense to know the some great brains who are contributing to this JSF community. As we all know that this framework has been developed as specification and maintained by Oracle, there is no founder whom we can say father of this framework. But, there are few genius in the community who have immense contribution and support to this technology.

Çağatay Çivici (Founder of PrimeFaces)

cagataycivici

He is the lead developer and founder of most popular JSF components library PrimeFaces. He is also member of the Java Server Faces expert group. Also he has the major contribution to the another popular JSF components library Apache MyFaces.

You can follow him @cagataycivici.

 

 

 

 

 

 

 

I hope this page would have provided comprehensive details about the JSF technology. I would keep update this page with most interesting and quality JSF tutorials. Also this page will be publishing the list of most popular bloggers on JSF technology.

If you are blogging about JSF, please send a mail to krishnas at javabeat.net to add your blog in this page.

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.