AutoComplete primefaces component provides the developer a more powerful capability for adding a tool tip upon suggestions. Sometimes the developer want a more explanation about suggestions, something like descriptive text, images and so on. Primefaces provides additional facet for AutoComplete component, that facet has the name itemtip, Itemtip is an advanced built-in tooltip when mouse is over on suggested items. Content of the tooltip is defined via the itemtip facet.
At this tutorial you are going to use the itemtip as a way for giving more descriptive about the suggestions that the user could see.
- Read : PrimeFaces Tutorials
1. The View
index.xhtml
[code lang=”xml”]
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<f:view afterPhase="#{autoComplete.phaseListener}">
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – AutoComplete + Ajax Behavior</h2>
<h:outputText value="Enter name of the player you wish to see statistics for :"/>
#{‘ ‘}
<p:autoComplete id="auto" value="#{autoComplete.players}"
completeMethod="#{autoComplete.complete}"
var="player"
itemValue="#{player}"
itemLabel="#{player.playerName}"
converter="#{playerConverter}"
multiple="true">
<f:facet name="itemtip">
<h:panelGrid>
<f:facet name="header">
<h:graphicImage value="/resources/images/#{player.playerImage}"></h:graphicImage>
</f:facet>
<h:outputText value="Name: "/>
<h:outputText value="#{player.playerName}"/>
<h:outputText value="Position: "/>
<h:outputText value="#{player.playerPosition}"/>
</h:panelGrid>
</f:facet>
<p:ajax event="itemSelect" listener="#{autoComplete.handleSelect}" update="msg"></p:ajax>
<p:ajax event="itemUnselect" listener="#{autoComplete.handleUnSelect}" update="msg"></p:ajax>
</p:autoComplete>
<br/>
<p:messages id="msg"/>
</h:form>
</f:view>
</html>
[/code]
2. Managed Bean
AutoComplete.java
[code lang=”java”]
package net.javabeat.primefaces;
import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.PhaseEvent;
import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
@ManagedBean
@SessionScoped
public class AutoComplete {
@ManagedProperty("#{playerDataSource}")
private PlayerDataSource ds;
private List<Player> players;
public AutoComplete (){
}
public List<Player> complete(String query){
// Assumed Datasource
return ds.queryByName(query);
}
public List<Player> getPlayers() {
return players;
}
public void setPlayers(List<Player> players) {
this.players = players;
}
public PlayerDataSource getDs() {
return ds;
}
public void setDs(PlayerDataSource ds) {
this.ds = ds;
}
public void handleSelect(SelectEvent e){
Player p = (Player)e.getObject();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO,
"Add Player :: Player Info: ID :: "+ p.getPlayerId() + " :: Name :: "+p.getPlayerName(),""));
}
public void handleUnSelect(UnselectEvent e){
Player p = (Player)e.getObject();
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_WARN,
"Remove Player :: Player Info: ID :: "+ p.getPlayerId() + " :: Name :: "+p.getPlayerName(),""));
}
public void phaseListener(PhaseEvent e){
List<FacesMessage> messages = e.getFacesContext().getMessageList();
System.out.println(messages.size());
}
}
[/code]
3. Player DataSource
PlayerDataSource.java
[code lang=”java”]
package net.javabeat.primefaces.util;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import net.javabeat.primefaces.data.Player;
@ManagedBean
@SessionScoped
public class PlayerDataSource {
public List<Player> players = new ArrayList<Player>();
public PlayerDataSource(){
// Assumed Player
Player player = new Player();
player.setPlayerId("1");
player.setPlayerName("Anderias Muller");
player.setPlayerPosition("CF");
player.setPlayerAge("24");
player.setPlayerImage("am.png");
// Add Player
players.add(player);
// Assumed Player
player = new Player();
player.setPlayerId("2");
player.setPlayerName("Olaf Thon");
player.setPlayerPosition("CM");
player.setPlayerAge("29");
player.setPlayerImage("ot.png");
// Add Player
players.add(player);
// Assumed Player
player = new Player();
player.setPlayerId("3");
player.setPlayerName("Oliver Khan");
player.setPlayerPosition("GK");
player.setPlayerAge("31");
player.setPlayerImage("ok.png");
// Add Player
players.add(player);
}
public List<Player> getPlayers() {
return players;
}
public void setPlayers(List<Player> players) {
this.players = players;
}
public List<Player> queryByName(String name){
// Assumed search using the startsWith
List<Player> queried = new ArrayList<Player>();
for(Player player: this.players){
if(player.getPlayerName().startsWith(name)){
queried.add(player);
}
}
return queried;
}
}
[/code]
4. The Converter
PlayerConverter.java
[code lang=”java”]
package net.javabeat.primefaces.converter;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;
import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;
//To be considered by the JavaServer Faces As Managed Bean
// & Make the converter Eligible for use @ManagedProperty
@ManagedBean
@RequestScoped
@FacesConverter
public class PlayerConverter implements Converter{
@ManagedProperty(value="#{playerDataSource}")
private PlayerDataSource ds;
public PlayerDataSource getDs() {
return ds;
}
public void setDs(PlayerDataSource ds) {
this.ds = ds;
}
@Override
public Object getAsObject(FacesContext context, UIComponent component,String value) {
for(Player p : ds.getPlayers()){
if(p.getPlayerId().equals(value)){
return p;
}
}
return null;
}
@Override
public String getAsString(FacesContext context, UIComponent component,Object value) {
if(value instanceof Player){
Player player = (Player)value;
return player.getPlayerId();
}
return "";
}
}
[/code]
5. Player Pojo
Player.java
[code lang=”java”]
package net.javabeat.primefaces.data;
public class Player {
private String playerId;
private String playerName;
private String playerPosition;
private String playerAge;
private String playerImage;
public String getPlayerId() {
return playerId;
}
public void setPlayerId(String playerId) {
this.playerId = playerId;
}
public String getPlayerName() {
return playerName;
}
public void setPlayerName(String playerName) {
this.playerName = playerName;
}
public String getPlayerPosition() {
return playerPosition;
}
public void setPlayerPosition(String playerPosition) {
this.playerPosition = playerPosition;
}
public String getPlayerAge() {
return playerAge;
}
public void setPlayerAge(String playerAge) {
this.playerAge = playerAge;
}
public String getPlayerImage() {
return playerImage;
}
public void setPlayerImage(String playerImage) {
this.playerImage = playerImage;
}
public boolean equals(Object obj){
if(obj instanceof Player){
Player player = (Player)obj;
if(this.playerId.equals(player.getPlayerId())){
return true;
}
}
return false;
}
public int hashCode(){
return this.playerId.hashCode();
}
}
[/code]
6. Primefaces AutoComplete + ItemTip Demo
The below snapshot shows you how could add itemtip for the suggested options.
[wpdm_file id=67]
