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.
la

Niciun comentariu:

Trimiteți un comentariu