My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

luni, 30 noiembrie 2015

[JSF Page Author Beginner's Guide] JSF <f:param>

The <f:param> is useful for attaching extra parameters to 
outcomes, external URLs, formatted output and commands
Common/basic usage in JSF (I) - setting parameters of a fomatted output (<f:param/> and <h:outputFormat/>):

<?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://xmlns.jcp.org/jsf/html"
 xmlns:f="http://xmlns.jcp.org/jsf/core">
 <h:head>
  <title>JSF f:param examples</title>
 </h:head>
 <h:body>
  <h:outputFormat value="Hello {0} &amp; {1} fans!">
   <f:param value="OmniFaces"/>
   <f:param value="JSF"/>
  </h:outputFormat>
 </h:body>
</html>

The <h:outputFormat/> tag will be rendered in HTML as:

Hello OmniFaces &amp; JSF fans!


Common/basic usage in JSF (II) - attach request parameters (query string) to a link (<f:param/> and <h:link/>):

<?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://xmlns.jcp.org/jsf/html"
 xmlns:f="http://xmlns.jcp.org/jsf/core">
 <h:head>
  <title>JSF f:param examples</title>
 </h:head>
 <h:body>
  <h:link value="Welcome page" outcome="welcome">
   <f:param name="name" value="Rafael Nadal"/>
  </h:link>
 </h:body>
</html>

The welcome.xhtml page looks like this:

 <<?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://xmlns.jcp.org/jsf/html">
 <h:head>
  <title></title>
 </h:head>
 <h:body>
  #{param['name']}
  <br/><br/>
  <h:link value="Back" outcome="index"/>
 </h:body>
</html>

The <h:link/> tag will be rendered in HTML as:

<a href="/JSFparamExamples/faces/welcome.xhtml?name=Rafael+Nadal">Welcome page</a> 

Data flow in image:

Note The <f:param/> tag cannot be fortified with declarative/imperative validations and/or conversions. You need to accomplish this task by yourself. Do not try to place the <f:param/> tag inside the <h:inputText/> tag or any other input component. That will simply not work.

More examples:

Attaching extra parameters via commands (command button and command link)

<?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://xmlns.jcp.org/jsf/html"
 xmlns:f="http://xmlns.jcp.org/jsf/core">
 <h:head>
  <title>JSF f:param examples</title>
 </h:head>
 <h:body>
  <h:form>
   <h:commandLink value="Send" action="#{myBean.saveAndParam()}">
    <f:param name="countryCode" value="RO"/>
    <f:param name="homepage" value="http://www.omnifaces-fans.org/"/>
   </h:commandLink>
  </h:form>
 
  <h:form>
   <h:commandButton value="Send" action="#{myBean.saveAndParam()}">
    <f:param name="countryCode" value="RO"/>
    <f:param name="homepage" value="http://www.omnifaces-fans.org/"/>
   </h:commandButton>  
  </h:form>
 </h:body>
</html>

And the MyBean managed bean is:

package beans;

// imports

@Named
@RequestScoped
public class MyBean {

 public MyBean() {
 }

 public void saveAndParam() {
  System.out.println("Saving data [saveAndParam()] ...");
  FacesContext fc = FacesContext.getCurrentInstance();
  Map<String, String> params = fc.getExternalContext().getRequestParameterMap();

  String code = params.get("countryCode");
  String webURL = params.get("homepage");

  System.out.println("Country code: " + code + " ; web url: " + webURL);
 }
}

Now, when we submit a form via <h:commandLink/> or <h:commandButton/>, the  saveAndParam() method will access the request parameter map and return:

Country code: RO ; web url: http://www.omnifaces-fans.org/

Passing extra parameters in external URLs (<f:param> and <h:outputLink>)

<?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://xmlns.jcp.org/jsf/html"
 xmlns:f=http://xmlns.jcp.org/jsf/core>
 <h:head>
  <title>JSF f:param examples</title>
 </h:head>
 <h:body>
  <h:outputLink value="#{myBean.article.url}">
   <f:param name="p" value="#{myBean.article.id}"/>
   PrimeFaces 5.3 Released
  </h:outputLink>
 </h:body>
</html>

The <h:outputLink/> tag will be rendered in HTML as:

<a href="http://blog.primefaces.org/?id=3639"> PrimeFaces 5.3 Released </a>

The managed bean is:

package beans;

// imports

@Named
@RequestScoped
public class MyBean {

 private Article article;

 public MyBean() {
  this.article = new Article("http://blog.primefaces.org/", 3639);
 }

 // Getters and setters
}

The Article class is shown below:

package beans;

import java.io.Serializable;

public class Article implements Serializable {

 private static final long serialVersionUID = 1L;

 private String url;
 private Integer id;

 public Article() {
 }

 public Article(String name, Integer id) {
  this.url = name;
  this.id = id;
 }

 // Getters and setters
}

Styling output format parameters

Check out the below example:

<h:outputFormat value="Hello {0} &amp; {1} fans!" escape="false">
 <f:param>
  <h:outputText value="OmniFaces" style="color:red"/>
 </f:param>
 <f:param>
  <h:outputText value="JSF" style="color:red"/>
 </f:param>
</h:outputFormat>

Unfortunately, <h:outputFormat/> is not capable to use its children as a value and the above code will result in something like below:


As a solution, the OmniFaces <o:param/> component has the capability to return the encoded output of its children as a value. Just replace <f:param> with <o:param>:

<h:outputFormat value="Hello {0} &amp; {1} fans!" escape="false">
 <o:param>
  <h:outputText value="OmniFaces" style="color:red"/>
 </o:param>
 <o:param>
  <h:outputText value="JSF" style="color:red"/>
 </o:param>
</h:outputFormat>
Will be rendered in HTML as:

Hello <span style="color:red">OmniFaces</span> & <span style="color:red">JSF</span> fans!

Setting parameters as managed bean properties via @ManagedProperty

<h:commandButton value="Send Rafael Nadal" action="#{playersBean.parametersAction()}">
 <f:param id="playerName" name="playerNameParam" value="Rafael"/>              
 <f:param id="playerSurname" name="playerSurnameParam" value="Nadal"/>              
</h:commandButton>

And in the managed bean do this:

@ManagedProperty(value = "#{param.playerNameParam}")
private String playerName;
@ManagedProperty(value = "#{param.playerSurnameParam}")
private String playerSurname;

AJAX and <f:param>

<h:form>
 <h:inputText id="nameInputId" value="#{ajaxBean.name}"/>
 <h:commandButton value="Send" action="#{ajaxBean.ajaxAction()}">
  <f:ajax execute ="nameInputId" render="nameOutputId">
   <f:param name="surnameInputId" value="Nadal"/>
  </f:ajax>
 </h:commandButton>
 <h:outputText id="nameOutputId" value="#{ajaxBean.name}"/>
</h:form>

Remember that the parameter that was passed is available in the request parameter map:

FacesContext fc = FacesContext.getCurrentInstance();
Map<String, String> params = fc.getExternalContext().getRequestParameterMap();

logger.log(Level.INFO, "Surname: {0}", params.get("surnameInputId"));

Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors