Wednesday 30 March 2016

JSF-5

JSF - Expression Language

JSF provides a rich expression language. We can write normal operations using #{operation-expression} notation. Some of the advantages of JSF Expression languages are following.

Can reference bean properties where bean can be a object stored in request, session or application scope or is a managed bean.
Provides easy access to elements of a collection which can be a list, map or an array.
Provides easy access to predefined objects such as request.
Arithmetic, logical, relational operations can be done using expression language.
Automatic type conversion.
Shows missing values as empty strings instead of NullPointerException.

Example Application

Let us create a test JSF application to test expression language.

Step	Description
1	Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter.
8	Modify UserData.java under package com.tutorialspoint.test as explained below.
9	Modify home.xhtml as explained below. Keep rest of the files unchanged.
10	Compile and run the application to make sure business logic is working as per the requirements.
11	Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
12	Launch your web application using appropriate URL as explained below in the last step.

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;
import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {

private static final long serialVersionUID = 1L;

   private Date createTime = new Date();
   private String message = "Hello World!";

   public Date getCreateTime() {
      return(createTime);
   }
   public String getMessage() {
      return(message);
   }
}

home.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://java.sun.com/jsf/core"    
   xmlns:h="http://java.sun.com/jsf/html">
   <h:head>
      <title>JSF Tutorial!</title>
   </h:head>
   <h2>Expression Language Example</h2>
   Creation time: 
   <h:outputText value="#{userData.createTime}"/>
   <br/><br/>Message: 
   <h:outputText value="#{userData.message}"/>
   </h:body>
</html>

Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce following result:

JSF Expression Language Result

JSF - Internationalization

Internationalization is a technique in which status messages, GUI component labels, currency, date are not hardcoded in the program instead they are stored outside the source code in resource bundles and retrieved dynamically. JSF provide a very convenient way to handle resource bundle.
Following steps are required to internalize a JSF application

Step 1. Define properties files

Create properties file for each locale.Name should be in <file-name>_<locale>.properties format.
Default locale can be omitted in file name.

messages.properties

greeting=Hello World!

messages_fr.properties

greeting=Bonjour tout le monde!

Step 2. Update faces-config.xml

faces-config.xml

<application>
   <locale-config>
      <default-locale>en</default-locale>
      <supported-locale>fr</supported-locale>
   </locale-config>
   <resource-bundle>
      <base-name>com.tutorialspoint.messages</base-name>
      <var>msg</var>
   </resource-bundle>
</application>

Step 3. Use resource-bundle var

home.xhtml

<h:outputText value="#{msg['greeting']}" />

messages.properties

greeting=Hello World!

messages_fr.properties

greeting=Bonjour tout le monde!

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
   xmlns="http://java.sun.com/xml/ns/javaee"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
   http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
   version="2.0">
   <application>
      <locale-config>
         <default-locale>en</default-locale>
         <supported-locale>fr</supported-locale>
      </locale-config>
      <resource-bundle>
         <base-name>com.tutorialspoint.messages</base-name>
         <var>msg</var>
      </resource-bundle>
   </application>
</faces-config>

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Locale;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ValueChangeEvent;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {

   private static final long serialVersionUID = 1L;
   private String locale;

   private static Map<String,Object> countries;
   
   static{
      countries = new LinkedHashMap<String,Object>();
      countries.put("English", Locale.ENGLISH);
      countries.put("French", Locale.FRENCH);
   }

   public Map<String, Object> getCountries() {
      return countries;
   }

   public String getLocale() {
      return locale;
   }

   public void setLocale(String locale) {
      this.locale = locale;
   }

   //value change event listener
   public void localeChanged(ValueChangeEvent e){
      String newLocaleValue = e.getNewValue().toString();
      for (Map.Entry<String, Object> entry : countries.entrySet()) {
         if(entry.getValue().toString().equals(newLocaleValue)){
            FacesContext.getCurrentInstance()
               .getViewRoot().setLocale((Locale)entry.getValue());         
         }
      }
   }
}

home.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
>
   <h:head>
      <title>JSF tutorial</title>   
   </h:head>
   <h:body> 
      <h2>Internalization Language Example</h2>
   <h:form>
      <h3><h:outputText value="#{msg['greeting']}" /></h3>
      <h:panelGrid columns="2"> 
         Language : 
         <h:selectOneMenu value="#{userData.locale}" onchange="submit()"
            valueChangeListener="#{userData.localeChanged}">
            <f:selectItems value="#{userData.countries}" /> 
         </h:selectOneMenu> 
      </h:panelGrid> 
   </h:form>
</h:body>
</html>

Change language from dropdown. You will see the following output.
JSF Internationalization Result1

Tuesday 29 March 2016

JSF-4

JSF - Event Handling

JSF Event Handling

When a user clicks a JSF button or link or changes any value in text field, JSF UI component fires event which will be handled by the the application code.
To handle such event, event handler are to be registered in the application code or managed bean.
When a UI component checks that a user event has happened, it creates an instance of the corresponding event class and adds it to an event list.
Then, Component fires the event, i.e., checks the list of listeners for that event and call the event notification method on each listener or handler.
JSF also provide system level event handlers which can be used to do some tasks when application starts or is stopping.

Following are important Event Handler in JSF 2.0:

S.N. Event Handlers & Description

1 valueChangeListener
Value change events get fired when user make changes in input components.

2 actionListener
Action events get fired when user clicks on a button or link component.

Application Events
Events firing during JSF lifecycle: PostConstructApplicationEvent, PreDestroyApplicationEvent , PreRenderViewEvent.

JSF Event Listener Model Example

JSF Event and Listener model is based on the JavaBeans Specification. An event is defined as a signal triggered based upon the user actions such as click of button, hyperlink, changing the input value etc. JSF tells the component to invoke the appropriate listener class that process the event generated by the user.
Lets now look in detail about the event classes and listener interfaces.

Event Classes

The classes related to the JSF events are defined in the javax.faces.event package. While implementing the event classes in JSF, the javax.faces.event package has to be extended. The generated event can be obtained by calling event.getComponent as

UIComponent ui = new UIComponent();

MyFacesEvent ev1 = new MyFacesEvent(ui); 

UIComponent sc1 = ev1.getComponent(); 

The events can be queued at the end of request processing lifecycle by using the queue() method. The queuing at a particular stage can be done by using the following code

MyFacesEvent ev1 = new MyFacesEvent();

ev1.setPhaseId(PhaseId.PROCESS_VALIDATIONS);

In the above code, the events will occur at the end of the process validation phase.

Listener Classes

An event is associated with the listener class for all the events. For instance, if the event is a valuechange event then the corresponding listener class ValueChangeListener is associated with it. SImilarly the ActionListener is for the action event.
JavaBeans specifications makes the methods mandatory for registering a particular listener to an event. For example if the event name is MyOwnEvent and the Listener class is MyOwnListener and want this event to be called on MyOwnComponent then the following methods have to be defined for registering the listener class.

public void addMyOwnComponentListener(MyOwnListener l1)

public void removeMyOwnListener(MyOwnListener l1)

public void MyOwnListener[] getMyOwnListeners()

JSF Events

The JSF events fall into one of the three categories namely

Action Events
Value Change Events
Phase Events

Action Events

Action events are the events that are generated for the ui components like command button or command hyperlink. Any number of listeners can be attached to a single event.
Consider an example of submitting a form.
Create a JSF view page mobile.xhtml as shown below.

mobile.xhtml
<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

    xmlns:h="http://java.sun.com/jsf/html">

<h:head>

    <title>Text fields</title>

</h:head>

<h:body>

    <h3>Mobile details</h3>

    <h:form>

        <h:panelGrid columns="3">

            <h:outputLabel for="mname">Company Name:</h:outputLabel>

            <h:inputText id="mname"></h:inputText>

            <br />

            <br />

            <h:outputLabel for="model">Model Number:</h:outputLabel>

            <h:inputText id="model"></h:inputText>

            <br />

            <br />

            <h:outputLabel for="color">Color:</h:outputLabel>

            <h:inputText id="color"></h:inputText>

            <br />

            <br />

            <h:commandButton value="Mobile Action Listener"

                actionListener="#{mobileActionListener.processAction}" />

        </h:panelGrid>

    </h:form>

</h:body>

</html>

Here we define attribute actionListener calling the method processAction of MobileActionListener class.
Create MobileActionListener.java class as;

MobileActionListener.java
package com.journaldev.jsf.beans;

import javax.faces.FactoryFinder;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

import javax.faces.component.UIComponent;

import javax.faces.event.AbortProcessingException;

import javax.faces.event.ActionEvent;

import javax.faces.event.ActionListener;

import javax.faces.event.PhaseListener;

import javax.faces.lifecycle.Lifecycle;

import javax.faces.lifecycle.LifecycleFactory;

@ManagedBean

@SessionScoped

public class MobileActionListener implements ActionListener {

    public MobileActionListener() {

    }

    @Override

    public void processAction(ActionEvent ae) throws AbortProcessingException {

        UIComponent ui = ae.getComponent();

        System.out.println("Event source is" + ui.getClass().getName());

    }

    public void listAllPhaseListeners() {

        LifecycleFactory lifecycleFactory = (LifecycleFactory) FactoryFinder

                .getFactory(FactoryFinder.LIFECYCLE_FACTORY);

        Lifecycle applicationLifecycle = lifecycleFactory

                .getLifecycle(LifecycleFactory.DEFAULT_LIFECYCLE);

        PhaseListener phaseListeners[] = applicationLifecycle

                .getPhaseListeners();

        for (PhaseListener phaseListener : phaseListeners) {

            System.out.println(phaseListener.getPhaseId());

        }

    }

}

Here we implement the ActionListener class and override the processAction method. Inside this method we are just printing the event that is invoked by the user. The ui.getClass().getName() methods prints the action event triggered.
Make the following entry in faces-config.xml file to invoke the actionlistener class.

faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>

<faces-config version="2.2"

              xmlns="http://xmlns.jcp.org/xml/ns/javaee"

              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

              xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">

    <managed-bean>

        <managed-bean-name>mobileActionListener</managed-bean-name>

            <managed-bean-class>

                com.journaldev.jsf.beans.MobileActionListener

            </managed-bean-class>

        <managed-bean-scope>request</managed-bean-scope>

    </managed-bean>

    <lifecycle>

    <phase-listener>

        com.journaldev.jsf.beans.CustomPhaseListener

    </phase-listener>

</lifecycle>

</faces-config>

The managed bean Mobile Action Listener class path is specified in the faces-config.xml file.
Now run the application and go to the mobile.xhtml page in browser and click the submit button which produces the following output in the console

Event source is javax.faces.component.html.HtmlCommandButton

Since the submit button is the event fired the event is CommandButton tag which corresponds to submit button.

Value Change Event

Value change events refers to the UI components textfield, radio button, list box etc. The value change event will get fired as soon as the value is changed in the UI component. Listeners for this event usually perform validations on the fields to check whether the entered value is valid or not according to the requirements.
Consider the following example of changing a value in a listbox and displaying the new value
Create mobilevalue.xhtml as;

mobilevalue.xhtml
<?xml version='1.0' encoding='UTF-8' ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

    xmlns:h="http://java.sun.com/jsf/html"

    xmlns:f="http://java.sun.com/jsf/core">

<h:head>

    <title>Value Change Event</title>

</h:head>

<h:body>

    <h3>Value Change Event Example</h3>

    <h:form>

        <h:panelGrid columns="3">

            <h:selectOneMenu id="name" value="#{mobileValueChangeListener.name}"

                onchange="submit()"

                valueChangeListener="#{mobileValueChangeListener.onSelectNames}">

                <f:selectItem itemValue="Nokia" itemLabel="Nokia" />

                <f:selectItem itemValue="Samsung" itemLabel="Samsung" />

                <f:selectItem itemValue="Blackberry" itemLabel="Blackberry" />

                <f:selectItem itemValue="Sony" itemLabel="Sony" />

                <f:selectItem itemValue="Mi3" itemLabel="Mi3" />

            </h:selectOneMenu>

        </h:panelGrid>

    </h:form>

    <br />

    <br />

    <h:outputText value="#{mobileValueChangeListener.result}"></h:outputText>

</h:body>

</html>

Here we invoke the valueChangeListener attribute and invoke the onSelectNames method of the MobileValueChangeListener bean.
Create the MobileValueChangeListener.java bean as;

MobileValueChangeListener.java
package com.journaldev.jsf.beans;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

import javax.faces.event.ValueChangeEvent;

@ManagedBean

@SessionScoped

public class MobileValueChangeListener {

    private String name;

    private String result;

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

    public String getResult() {

        return result;

    }

    public void setResult(String result) {

        this.result = result;

    }

    public MobileValueChangeListener() {

    }

    public void onSelectNames(ValueChangeEvent vc) {

        Object oval = vc.getOldValue();

        Object nval = vc.getNewValue();

        System.out.println("oval" + oval);

        System.out.println("nval" + nval);

        if (nval != null) {

            result = "Newly changed value is:" + (String) nval;

        }

    }

}

In the onSelectNames method we obtain the new value and old value through the getOldValue and getNewValue methods and check if the new value is not equal null and if true store the new value to the result variable and display the value of this variable on the JSF view page.
Now run the application that produces the following output on changing the value in the listbox.

Phase Event

This type of event involves the events to be fired in one of the six phases of JSF lifecycle either during start or towards the end of each phase.
Consider an example of capturing the phase events by creating CustomPhaseListener.java as;

CustomPhaseListener.java
package com.journaldev.jsf.beans;

import javax.faces.event.PhaseEvent;

import javax.faces.event.PhaseId;

import javax.faces.event.PhaseListener;

public class CustomPhaseListener implements PhaseListener {

    private static final long serialVersionUID = -1395570878923714114L;

    @Override

    public void afterPhase(PhaseEvent pe) {

        System.out.println("After phase" + pe.getPhaseId());

    }

    @Override

    public void beforePhase(PhaseEvent pe) {

        System.out.println("Before phase" + pe.getPhaseId());

    }

    @Override

    public PhaseId getPhaseId() {

        return PhaseId.ANY_PHASE;

    }

}

Create a JSF view page phaseListener.xhtml as;

phaseListener.xhtml
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

    xmlns:f="http://java.sun.com/jsf/core"

    xmlns:h="http://java.sun.com/jsf/html">

<h:head>

    <title>Phase Listener example</title>

</h:head>

<h:body>

    <h3>Phase Listener example</h3>

    <h:form>

        <h:inputText id="mname" />

        <h:commandButton id="button" value="Submit" />

        <h:messages />

    </h:form>

</h:body>

</html>

Now run the application and enter some text on phaseListener page and click the submit button. Check the server logs and following output is produced.

Before phase RESTORE_VIEW 1

After phase RESTORE_VIEW 1

Before phase APPLY_REQUEST_VALUES 2

After phase APPLY_REQUEST_VALUES 2

Before phase PROCESS_VALIDATIONS 3

After phase PROCESS_VALIDATIONS 3

Before phase UPDATE_MODEL_VALUES 4

After phase UPDATE_MODEL_VALUES 4

Before phase INVOKE_APPLICATION 5

After phase INVOKE_APPLICATION 5

Before phase RENDER_RESPONSE 6

After phase RENDER_RESPONSE 6

The event id’s for each phase is printed in the console.
Finally below image shows the project structure.

You can download the final project from below link and play around with it to learn more about JSF Event and Listeners.

Saturday 26 March 2016

JSF-3

JSF - Facelets Tags

Facelets JSF Tags

JSF provides special tags to create common layout for a web application called facelets tags. These tags gives flexibility to manage common parts of a multiple pages at one place.
For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:ui="http://java.sun.com/jsf/facelets" 
>

Following are important Facelets Tags in JSF 2.0:

S.N.	Tag & Description
1	Templates We'll demonstrate how to use templates using following tags <ui:insert> <ui:define> <ui:include> <ui:composition>
2	Parameters We'll demonstrate how to pass parameters to a template file using following tag <ui:param>
3	Custom We'll demonstrate how to create custom tags.
4	Remove We'll demonstrate capability to remove JSF code from generated HTML page.

JSF - Convertor Tags

JSF Convertor Tags

JSF provides inbuilt convertors to convert its UI component's data to object used in a managed bean and vice versa.For example, these tags can convert a text into date object and can validate the format of input as well.
For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:f="http://java.sun.com/jsf/core"  
>

Following are important Convertor Tags in JSF 2.0:

S.N.

Tag & Description

f:convertNumber
Converts a String into a Number of desired format

f:convertDateTime
Converts a String into a Date of desired format

Custom Convertor
Creating a custom convertor

JSF Validator Tags

JSF provides inbuilt validators to validate its UI components. These tags can validates length of field, type of input which can be a custom object.
For these tags you need to use the following namespaces of URI in html node.

<html 
   xmlns="http://www.w3.org/1999/xhtml" 
   xmlns:f="http://java.sun.com/jsf/core"  
>

Following are important Validator Tags in JSF 2.0:

S.N.

Tag & Description

f:validateLength
Validates length of a string

f:validateLongRange
Validates range of numeric value

f:validateDoubleRange
Validates range of float value

f:validateRegex
Validate JSF component with a given regular expression.

Custom Validator
Creating a custom validator

JSF DataTable

JSF provides a rich control named DataTable to render and format html tables.

DataTable can iterate over collection or array of values to display data.
DataTable provides attributes to modify its data in easy way.

HTML Header

<html 
   xmlns="http://www.w3.org/1999/xhtml"   
   xmlns:h="http://java.sun.com/jsf/html">
</html>

Following are important DataTable operations in JSF 2.0:

S.N.	Tag & Description
1	Display DataTable How to display a datatable
2	Add data How to add a new row in a datatable
3	Edit data How to edit a row in a datatable
4	Delete data How to delete a row in datatable
5	Using DataModel Use DataModel to display row numbers in a datatable