Skip to main content

Java EE 6 For Beginners – JSF 2.1 Tutorial Using EL Expression

Introduction

Hello everyone! How is it going? Today I’m going to introduce EL expression in JSF. EL is short for Expression Language, which provides an important mechanism for enabling the presentation layer (web pages) to communicate with the application logic (managed beans). It not only can be used in JSF, but also in JSP.

EL provides a way to use simple expressions to performing following tasks:

  • Dynamically read application data stored in JavaBeans components, various data structures, and implicit objects
  • Dynamically write data, such as user input into forms, to JavaBeans components
  • Invoke arbitrary static and public methods
  • Dynamically perform arithmetic operations

There’re two types of EL expression: Value Expression and Method Expression. The EL also supports both immediate and deferred evaluation of expressions

Let’s see an example of EL expressions.

preparation

In this tutorial, you need Eclipse Juno and Weblogic Server 12c.

The source code: helloworld_jsf

Coding

The final project structure is like this:

el

 

The com.zxuqian.jsf.el package is where the managed bean resides in this tutorial, and el.xhtml is our facelets. Let’s see their source code.

SimpleCalculatorBean.java:

 

package com.zxuqian.jsf.el;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class SimpleCalcutlatorBean {

	private Double number1;
	private Double number2;
	private Double result;
	private final String[] operators; 

	public SimpleCalcutlatorBean() {
		operators = new String[]{"+", "-", "*", "/"};
	}

	public String add() {
		this.result = this.getNumber1() + this.getNumber2();
		return "";
	}

	public Double getNumber1() {
		return number1;
	}
	public void setNumber1(Double number1) {
		this.number1 = number1;
	}
	public Double getNumber2() {
		return number2;
	}
	public void setNumber2(Double number2) {
		this.number2 = number2;
	}

	public String[] getOperators() {
		return operators;
	}

	public Double getResult() {
		return result;
	}

	public void setResult(Double result) {
		this.result = result;
	}

}

The managed bean defined four variables, number1, number2, result and operators. The add method simply add number1 and number2, then return the empty string that indicates the logic view is current page, no forwarding or redirecting. The operators is an array that only be used to demonstrate how EL access arrays.

el.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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EL Expressions</title>
</h:head>
<body>
	<h2>EL Expressions</h2>
	<!-- math operation -->
	<p>1 + 1 = ${1 + 1}</p>
	<p>5 * 6 = ${5 * 6}</p>
	<p>is 1 &gt; 2 ? ${1 gt 2}</p>
	<!-- implicit object -->
	<p>the context path is: ${request.contextPath}</p>
	
	<!-- access array -->
	<p>You can do following operations: </p>
	<ul>
		<li>${simpleCalcutlatorBean.operators[0]}</li>
		<li>${simpleCalcutlatorBean.operators[1]}</li>
		<li>${simpleCalcutlatorBean["operators"][2]}</li>
		<li>${simpleCalcutlatorBean["operators"][3]}</li>
	</ul>
	<p>
		<h:form>
			<p>
				<!-- Deferred Evaluation -->
				<h:outputLabel value="please type number1: " for="number1" />
				<h:inputText value="#{simpleCalcutlatorBean.number1}" id="number1" />
			</p>
			<p>
				<h:outputLabel value="please type number2: " for="number2" />
				<h:inputText value="#{simpleCalcutlatorBean.number2}" id="number2" />
			</p>
			<p>
				<!-- Method Expression -->
				<h:commandButton value="doAdd" action="#{simpleCalcutlatorBean.add}" />
			</p>
		</h:form>
		<h:outputText value="#{simpleCalcutlatorBean.result}"/>
	</p>
</body>
</html>

In el.xhtml, we first use value expressions to do some math operation. The value expression can only be read-only, it can not set values for managed beans. Then, we access the implicit object request to get the contextPath of our application. After this, we access an array that defined in the managed bean by using”.” operator and “[variable_name]” operator.

In the form tag, we use deferred evaluation that to get and set property of managed beans. On the first render of the page, there’s no value of number1 and number2, when user typed the two numbers and click the submit button, the two numbers get their value, then display in they input field when the page rendered again. <h:commandButton> uses a method expression to call add mothod in SimpleCalculatorBean. The action we discussed previous that it should take a string to detect which page to jump to. Because it calls a method, the method must return a string value, or return void. And at last, we use <h:outputText> to display the result.
Don’t forget to add links in the index.html:
EL Expression Example

Conclusion

So, this is our EL expressions, it is very simple, but powerful. 😀 That’s it, thank you!