Tagged: jsf

JSF2: Databinding with ManagedBeans

First create a standard POJO with a @ManagedBean annotation so it can be accesssed via databinding. Give it a @SessionScoped annotation to say it exists for the entirity of the user’s session:

    import java.io.Serializable;
    import javax.faces.bean.ManagedBean;
    import javax.faces.bean.SessionScoped;

    public class SomeData implements Serializable {

        private String name = "";

        public SomeData() {

        public String getName() {
       return name;

        public String getNameInfo() {
       if(name.equals("Dave")) {
         return "David, huh. Intereseting...";
       } else {
         return "Hmmm! Nothing on you.";

        public void setName(String user_name) {
       this.name = user_name;

Now in your JSF page you can edit the name variable by the following InputText and see it’s result also:

        <h:inputText value="#{someData.name}">
    <br />
java jsf jsf-resource-bundle

JSF2: Templates

You can have templates in your JSF pages. First create a template as such. Note the ui namespace and the ui:insert placeholders:

    <div xmlns:ui="http://java.sun.com/jsf/facelets">
       From template <br />
       <ui:insert name="left">Will be replaced</ui:insert> | <ui:insert name="right">Will be replaced</ui:insert>

We’ve also put a ui:debug in this template. In the resulting file, we can press ctl shift d for popup debugging information.

Now again in another file, we can use this template within the ui namespace, decorate in this case. You can also use composition, but that will delete anything not involved in the template from the page. We use ui:define to declare the data for the ui:insert tags above.

    <ui:decorate template ="templ.xhtml">
       <ui:define name="left">
         The left
       <ui:define name="right">
         The right

More info is here http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html

jsf jsf-templates

JSF2: Composites

You can also have a composite in a JSF, which is like a template but acts in its own namespace, with validators, listeners, etc, etc.

First create a resources/mycomp/comp.xhtml file in your web directory.. It has to be in this resources directory for JSF can find it as a composite.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <div xmlns="http://www.w3.org/1999/xhtml"
           <composite:attribute name="thevalue" required="true"/>

           <h:outputLabel value="#{cc.attrs.thevalue}"></h:outputLabel>

You see the composite namespace, and interface tag that defines the parameters passed to this, and the implementation tag that uses such in as cc.attrs.thevalue. (cc standards for composite and attrs the… attributes).

Now in your calling file, add the namespace. Note the mycomp directory relating to your directory after web/resources.


Now in your calling file you can call.

<thecomp:comp value="HITHERE" />

The ‘comp’ part comes from the filename we gave above.

jsf jsf-composites

JSF2: Resource bundles / localisation

In your WEB-INF folder place a faces-config.xml file:

    <?xml version='1.0' encoding='UTF-8'?>
    <faces-config version="2.0"
             xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">


You’re saying your resource bundle is called things.properities in the root your your classes directory, and you can access it in your JSF page via ‘bundle’. We’re saying we support both english and french.

Now create that things.properties file. I’m putting it in my resources/ folder. You need to make sure this ends up in the root of your classes directory.


In your jsf page you can access it via:


If you have a things_fr.properties file, and your browser is set to French, it will use the french version for the resources bundle.

jsf jsf-resource-bundle

JSF2: Resources

We can reference resource we put in a ‘resources’ directory in the main ‘web’ or ‘webapp’ directory of your project. The css include below is in the subdirectory ‘css’, and the image is in the subdirectory images.

<h:outputStylesheet library="css" name="default.css"/>
<h:graphicImage value="#{resource['images:animage.png']}"/>
jsf jsf-resources

Page 1 of 2