JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

Primefaces AutoComplete + ItemTip Example

April 16, 2014 by Amr Mohammed Leave a Comment

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
// &amp; 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.

AutoComplete ItemTip

[wpdm_file id=67]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces AutoComplete + AjaxBehavior Example

April 15, 2014 by Amr Mohammed Leave a Comment

Instead of waiting for user to submit the form manually to process the selected item, you can enable instant ajax selection by using the itemSelect ajax behavior. Let’s you consider the AutoComplete that gives you set of players to select one among of them, such that behavior can be ajaxified by eliminating the needs for submission.

  • 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">
<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. The 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. The Converter

PlayerConveter.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]

4. The Datasource

PlayerDataSource

[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");

// Add Player
players.add(player);

// Assumed Player
player = new Player();
player.setPlayerId("2");
player.setPlayerName("Olaf Thon");
player.setPlayerPosition("CM");
player.setPlayerAge("29");

// Add Player
players.add(player);

// Assumed Player
player = new Player();
player.setPlayerId("3");
player.setPlayerName("Oliver Khan");
player.setPlayerPosition("GK");
player.setPlayerAge("31");

// 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]

5. Player Data Type (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;

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 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. AutoComplete Events

Your listener (if defined) will be invoked with org.primefaces.event.Select instance that contains a reference to the selected item and org.primefaces.event.UnselectEvent instance that contains a reference to the unselected item once you’ve selected and removed items, respectively. Note that autoComplete also supports events inherited from regular input text such as blur, focus, mouseover in addition to itemSelect.

7. Primefaces AutoComplete + AjaxBehavior Demo

AutoComplete AjaxBehavior Example 1

AutoComplete AjaxBehavior Example 2

AutoComplete AjaxBehavior Example 3

[wpdm_file id=68]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces BlockUI + Client Side API Example

April 15, 2014 by Amr Mohammed Leave a Comment

BlockUI Primefaces component provides you the ability control the component from a pre defined Client Side API that could be invoked through using of JavaScript code. For enabling the call of client side API, you have to define the WidgetVar for the BlockUI component.

1. The View

index.xhtml

[code lang=”xml”]
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;
xmlns:h=&quot;http://java.sun.com/jsf/html&quot;
xmlns:f=&quot;http://java.sun.com/jsf/core&quot;
xmlns:p=&quot;http://primefaces.org/ui&quot;&gt;
&lt;h:head&gt;
&lt;script name=&quot;jquery/jquery.js&quot; library=&quot;primefaces&quot;&gt;&lt;/script&gt;
&lt;script&gt;
function block(){
PF(‘blockVar’).show();
}

function unBlock(){
blockVar.hide();
}
&lt;/script&gt;
&lt;/h:head&gt;
&lt;f:view&gt;
&lt;h:form prependId=&quot;false&quot;&gt;
&lt;h1&gt;JavaBeat Primefaces Example&lt;/h1&gt;
&lt;h2&gt;Primefaces – BlockUI + Client Side API&lt;/h2&gt;
&lt;p:panel id=&quot;block&quot; columns=&quot;1&quot; header=&quot;Login Panel&quot; style=&quot;width:272px;&quot;&gt;
&lt;h:outputText value=&quot;Enter Username:&quot;/&gt;
&lt;p:inputText value=&quot;#{blockUI.username}&quot;&gt;&lt;/p:inputText&gt;
&lt;h:outputText value=&quot;Enter Password:&quot;/&gt;
&lt;p:inputText value=&quot;#{blockUI.password}&quot;&gt;&lt;/p:inputText&gt;
&lt;f:facet name=&quot;footer&quot;&gt;
&lt;p:commandButton id=&quot;trigger&quot;
value=&quot;Login&quot; action=&quot;#{blockUI.login}&quot;&gt;&lt;/p:commandButton&gt;
&lt;/f:facet&gt;
&lt;/p:panel&gt;
&lt;p:blockUI widgetVar=&quot;blockVar&quot; trigger=&quot;trigger&quot; block=&quot;block&quot;&gt;
&lt;p:graphicImage value=&quot;#{resource[‘images:ajax-loader.gif’]}&quot;&gt;&lt;/p:graphicImage&gt;
&lt;/p:blockUI&gt;
&lt;h:panelGrid columns=&quot;2&quot;&gt;
&lt;f:facet name=&quot;header&quot;&gt;
&lt;h:outputText value=&quot;JavaScript Client Side API&quot;/&gt;
&lt;/f:facet&gt;
&lt;h:outputText value=&quot;Block: &quot;/&gt;
&lt;h:commandLink value=&quot;Block&quot; onclick=&quot;block();return false;&quot;/&gt;
&lt;h:outputText value=&quot;UnBlock: &quot;/&gt;
&lt;h:commandLink value=&quot;UnBlock&quot; onclick=&quot;unBlock();return false;&quot;/&gt;
&lt;/h:panelGrid&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/html&gt;
[/code]

2. Managed Bean

BlockUI.java

[code lang=”java”]
package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class BlockUI {
private String username;
private String password;

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String login() throws Exception{
// Assumed business could too long
Thread.sleep(5000);
return &quot;&quot;;
}
}
[/code]

3. Primefaces BlockUI + Client Side API Demo

The below snapshots show you the different API that could be invoked for achieving the different behaviors of BlockUI functions.

Primefaces BlockUI Example 1

  • By clicking on the Block link, the block component will do its blocking behavior.

Primefaces BlockUI Example 2

  • By clicking the UnBlock link, the interactive jsf blocked area will be unblocked.

[wpdm_file id=69]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces BlockUI Example

April 15, 2014 by Amr Mohammed Leave a Comment

Primefaces BlockUI component is used to block interactivity of JSF components with optional Ajax integration. BlockUI requires trigger and block attributes to be defined. With the special ajax integration, ajax requests whose source are the trigger components will block the UI onstart and unblock oncomplete. When you submit the request to the server, the page interaction will be blocked and can display the progress of the server response. This is very useful in the modern web applications.

  • Read : PrimeFaces Tutorials

1. BlockUI Tag Info

BlockUI General Info

2. BlockUI Attributes

BlockUI Attributes

3. 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>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – BlockUI</h2>
<p:panel id="block" columns="1" header="Login Panel" style="width:272px;">
<h:outputText value="Enter Username:"/>
<p:inputText value="#{blockUI.username}"></p:inputText>
<h:outputText value="Enter Password:"/>
<p:inputText value="#{blockUI.password}"></p:inputText>
<f:facet name="footer">
<p:commandButton id="trigger"
value="Login" action="#{blockUI.login}"></p:commandButton>
</f:facet>
</p:panel>
<p:blockUI trigger="trigger" block="block">
<p:graphicImage value="#{resource[‘images:ajax-loader.gif’]}"></p:graphicImage>
</p:blockUI>
</h:form>
</f:view>
</html>
[/code]

4. Managed Bean

BlockUI.java

[code lang=”java”]
package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class BlockUI {
private String username;
private String password;

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public String getPassword() {
return password;
}

public void setPassword(String password) {
this.password = password;
}

public String login() throws Exception{
// Assumed business could too long
Thread.sleep(5000);
return "";
}
}
[/code]

5. PrimeFaces BlockUI Demo

The below snapshot shows you the impact of using BlockUI for blocking an interactive user interface.

BlockUI Example

[wpdm_file id=70]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces AutoComplete + POJO Example

April 13, 2014 by Amr Mohammed Leave a Comment

In my previous post, I have explained how to use Primefaces AutoComplete component in conjunction with completeMethod. But what if the user has decided to use a Plain Old Java Object (POJO) instead of using simple strings object as most of time that case it happens.

Using a domain objects within autoComplete isn’t trivial as it contains some additional component for making it works. At this tutorial you are going to develop a simple Primefaces application that adhered to using POJO for the autocomplete functionality.

  • 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>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces – AutoComplete + completeMethod + Pojo</h2>
<h:outputText value="Enter name of the player you wish to see statistics for :"/>
#{‘ ‘}
<p:autoComplete value="#{autoComplete.player}"
completeMethod="#{autoComplete.complete}"
var="player"
itemValue="#{player.playerId}"
itemLabel="#{player.playerName}"></p:autoComplete>
</h:form>
</f:view>
</html>
[/code]

2. Managed Bean

AutoComplete

[code lang=”java”]
package net.javabeat.primefaces;

import java.util.List;

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

import net.javabeat.primefaces.data.Player;
import net.javabeat.primefaces.util.PlayerDataSource;

@ManagedBean
@SessionScoped
public class AutoComplete {
@ManagedProperty("#{playerDataSource}")
private PlayerDataSource ds;

private Player player;

public AutoComplete (){

}

public List<Player> complete(String query){
// Assumed Datasource
return ds.queryByName(query);
}

public Player getPlayer() {
return player;
}

public void setPlayer(Player player) {
this.player = player;
}

public PlayerDataSource getDs() {
return ds;
}

public void setDs(PlayerDataSource ds) {
this.ds = ds;
}
}
[/code]

3. Assumed 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");

// Add Player
players.add(player);

// Assumed Player
player = new Player();
player.setPlayerId("2");
player.setPlayerName("Olaf Thon");
player.setPlayerPosition("CM");
player.setPlayerAge("29");

// Add Player
players.add(player);

// Assumed Player
player = new Player();
player.setPlayerId("3");
player.setPlayerName("Oliver Khan");
player.setPlayerPosition("GK");
player.setPlayerAge("31");

// 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 Associated Converter

PlayerConverter.java

[code lang=”java”]
package net.javabeat.primefaces.converter;

import javax.faces.bean.ManagedProperty;
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;

@FacesConverter
public class PlayerConverter implements Converter{
@ManagedProperty("#{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. The 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;

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 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 + completeMethod + POJO Demo

The below snapshot shows you using of autoComplete in conjunction with Pojo.

Primefaces AutoComplete + completeMethod + POJO Demo

[wpdm_file id=65]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces AutoComplete + completeMethod Example

April 13, 2014 by Amr Mohammed Leave a Comment

Primefaces provides incredible amount of new components that adhered the different aspect of Ajax. One of the component AutoComplete is most widely used with the web applications. That component is AutoComplete which is a core primefaces component used for providing the user prompt suggestions while the input is being typed into the input box.

This tutorial should clarify the AutoComplete component once it filled using completeMethod strategy. In the completeMethod strategy, suggestions loaded by calling the server side completeMethod that takes a single string parameter which is the text entered.

  • Read : PrimeFaces Tutorials

1. AutoComplete Tag Info

AutmComplete General Info

2. AutoComplete Attributes

AutoComplete Attributes

3. Managed Bean

AutoComplete.java

[code lang=”java”]
package net.javabeat.primefaces;

import java.util.ArrayList;
import java.util.List;

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

@ManagedBean
@SessionScoped
public class AutoComplete {
private String message;

public AutoComplete (){

}

public List<String> complete(String query){
List<String> queries = new ArrayList<String>();
for(int i = 0 ; i < 15 ; i++){
queries.add(query+i);
}
return queries;
}

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}
}
[/code]

4. 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>
<h:form prependId="false">
<h:outputText value="Type JavaBeat :"/>
<p:autoComplete value="#{autoComplete.message}" completeMethod="#{autoComplete.complete}"></p:autoComplete>
</h:form>
</f:view>
</html>
[/code]

5. Primefaces AutoComplete + completeMethod Demo

The below snapshot shows you the using of autoComplete primefaces component for rendering a suggestions for the end user that tries to type message.

AutoComplete Filling Suggestions Using completeMethod

[wpdm_file id=64]

Filed Under: JSF Tagged With: PrimeFaces

Primefaces AjaxStatus Example

April 13, 2014 by Amr Mohammed Leave a Comment

AjaxStatus is a global notifier for ajax requests, it uses facets to represent the request status. Most common used facets are start and complete. Start facet will be visible once the ajax request begins and stay until it’s completed. Once the ajax response is received and page is updated, start facet gets hidden and complete facet shows up.

  • Read : PrimeFaces Tutorials

1. AjaxStatus Tag Info

AjaxStatus General Info

2. AjaxStatus Attributes

AjaxStatus Attributes

3. AjaxStatus Events

AjaxStatus component is listening the following phases:

  • default: Initially visible when page is loaded.
  • start: Before ajax request begins.
  • success: When ajax response is received without error.
  • error: When ajax request is received with error.
  • complete: When everything is finishes.

4. Managed Bean

AjaxStatus.java

[code lang=”java”]
package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class AjaxStatus {
private String message = "";

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

public void listener(AjaxBehaviorEvent e) throws Exception{
Thread.sleep(5000);
System.out.println(e);
}

public String printMessage(){
return "";
}
}
[/code]

5. 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>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AjaxStatus – Example</h2>
<h:outputText value="Type a message: "/>
#{‘ ‘}
<p:inputText id="in" value="#{ajaxStatus.message}">
<p:ajax process="in out" update="out" event="keyup" listener="#{ajaxStatus.listener}"></p:ajax>
</p:inputText>
#{‘ ‘}
<p:outputLabel id="out" value="#{ajaxStatus.message}"/>
<br/>
<br/>
</h:form>
<p:ajaxStatus id="startAjax">
<f:facet name="start">
<h:graphicImage value="#{resource[‘images:ajax-loader.gif’]}"></h:graphicImage>
</f:facet>
<f:facet name="complete">
<h:graphicImage value="#{resource[‘images:ajax-complete.gif’]}"></h:graphicImage>
</f:facet>
</p:ajaxStatus>
</f:view>
</html>
[/code]

6. Primefaces AjaxStatus Demo – Declarative Approach

The below snapshots shows you the using of AjaxStatus primefaces component for achieving listening for different phases on Ajax Request-Response.
Primefaces AjaxStatus Start Phase
Primefaces AjaxStatus Complete Phase

7. Programmatic Approach

Facets are the declarative way to use, if you would like to implement advanced cases with scripting you can take advantage of callbacks which are the event handler counterparts of the factes.

8. The View (AjaxStatus Using Programmatic Approach)

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>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AjaxStatus – Example</h2>
<h:outputText value="Type a message: "/>
#{‘ ‘}
<p:inputText id="in" value="#{ajaxStatus.message}">
<p:ajax process="in out" update="out" event="keyup" listener="#{ajaxStatus.listener}"></p:ajax>
</p:inputText>
#{‘ ‘}
<p:outputLabel id="out" value="#{ajaxStatus.message}"/>
<br/>
<br/>
</h:form>
<p:ajaxStatus id="startAjax" onstart="PF(‘start’).show();" oncomplete="PF(‘start’).hide();">
</p:ajaxStatus>
<p:dialog widgetVar="start">
<h:graphicImage value="#{resource[‘images:ajax-loader.gif’]}"></h:graphicImage>
</p:dialog>
</f:view>
</html>
[/code]

9. Primefaces AjaxStatus – Programmatic Demo

Primefaces AjaxStatus Programmatic Way

10. Important Notes

When you come to use the AjaxStatus be sure that you are aware about the following major points:

  • Avoid updating AjaxStatus itself to prevent duplicate facet/callback bindings.
  • Provide a fixed width/height to inline ajaxStatus to prevent page layout from changing.
  • Components like commandButton has an attribute (global) to control triggering of AjaxStatus.
  • AjaxStatus also support core JSF ajax request of f:ajax as well.

[wpdm_file id=63]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces AjaxBehavior Example

April 13, 2014 by Amr Mohammed Leave a Comment

AjaxBehavior is an extension to standard of f:ajax. As already mentioned at the JavaServer Faces 2 Tutorial, different components have used the f:ajax for ajaxifying the component’s behavior. If you’ve looked into section  JSF and AJAX in the JSF 2 tutorials post, you’ll find different components having attached f:ajax for ajaxiyfing purpose.

Typically, AjaxBehavior act as the same way that the f:ajax provides, in that it’s attached to the primefaces components to ajaxify. As you will find within primefaces components series, the events will be listed and clarified at the time which the component has coming into discussion.

  • Read : PrimeFaces Tutorials

In this tutorial, I will explain how to use AjaxBehavior class and its attributes for handling the AJAX request. This class will be used with the ajax tags in the primefaces component.

1. AjaxBehavior Info

Ajax Behavior General Information

2. AjaxBehavior Attributes

Ajax Behavior Attributes

3. Managed Bean

AjaxBehavior.java

[code lang=”java”]
package net.javabeat.primefaces;

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

@ManagedBean
@SessionScoped
public class AjaxBehavior {
private String message;

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

public void listener(AjaxBehaviorEvent e){
System.out.println(e);
}
}
[/code]

  • Note listener defined method that accept AjaxBehaviorEvent as parameter

4. 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>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AjaxBehavior – Sample</h2>
<h:outputText value="Type a message: "/>
#{‘ ‘}
<p:inputText id="in" value="#{ajaxBehavior.message}">
<p:ajax process="in" update="out" event="blur" listener="#{ajaxBehavior.listener}"></p:ajax>
</p:inputText>
#{‘ ‘}
<p:outputLabel id="out" value="#{ajaxBehavior.message}"/>
</h:form>
</f:view>
</html>
[/code]

  • Primefaces JavaScript (jquery.js) library that used are defined within Primefaces JAR file.

5. PrimeFaces AjaxBehavior Example Demo

The below snapshots shows you the result of assuming use for primefaces input component either the result of the ajax behavior itself for blur client event or the listener that used for listening the ajax event.

Primefaces AjaxBehavior Example Demo

AjaxBehavior Input Listener

[wpdm_file id=62]

Filed Under: JSF Tagged With: PrimeFaces

Primefaces AccordionPanel Client Side API Example

April 12, 2014 by Amr Mohammed Leave a Comment

Primefaces defines JavaScript library called Widget. Widget – defined using WidgetVar – is the representation of the primefaces components on which the JavaScript works. However, primefaces does provide an implicit JavaScript object called PF for accessing the various functionality (behaviors) of primefaces widgets. Those widgets are defined using the primefaces’ WidgestVar attribute that all components have defined it as one of the properties that could be provided. This isn’t the only way that being used for accessing the primefaces components. However, the primefaces does allow the developer to invoke a widget functionality through using the WidgetVar directly.

  • Read : PrimeFaces Tutorials

One of the component that could be controlled through using of Client Side API by either way is the AccordionPanel. At this tutorial you will see how could Activate/Deactivate the AccordionPanel using the PF or by using the direct access of the WidgetVar. This library is part of primafaces library.

1. Managed Bean

AccodrionPanel.java

[code lang=”java”]
package net.javabeat.primefaces;

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

import org.primefaces.event.TabChangeEvent;

@ManagedBean
@SessionScoped
public class AccordionPanel {
private String messageOne = "Hello JavaBeat One";
private String messageTwo = "Hello JavaBeat Two";
private String messageThree = "Hello JavaBeat Three";

public String getMessageOne() {
System.out.println("Message One Loaded");
return messageOne;
}
public void setMessageOne(String messageOne) {
this.messageOne = messageOne;
}
public String getMessageTwo() {
System.out.println("Message Two Loaded");
return messageTwo;
}
public void setMessageTwo(String messageTwo) {
this.messageTwo = messageTwo;
}
public String getMessageThree() {
System.out.println("Message Three Loaded");
return messageThree;
}
public void setMessageThree(String messageThree) {
this.messageThree = messageThree;
}
public void changeListener(TabChangeEvent e){
System.out.println("TabChangeEvent Has Fired By ::"+e.getSource());
System.out.println("The next Tab Title is :: "+e.getTab().getTitle());
}
}
[/code]

2. 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>
<script>
function activateTab(index){
PF(‘accordionPanel’).select(index);
}

function deactivateTab(index){
accordionPanel.unselect(index);
}
</script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AccordionPanel</h2>
<br/>
<p:accordionPanel widgetVar="accordionPanel">
<p:tab title="First Tab Title">
<h:outputText value="#{accordionPanel.messageOne}"></h:outputText>
</p:tab>
<p:tab title="Second Tab Title">
<h:outputText value="#{accordionPanel.messageTwo}"></h:outputText>
</p:tab>
<p:tab title="Third Tab Title">
<h:outputText value="#{accordionPanel.messageThree}"></h:outputText>
</p:tab>
</p:accordionPanel>
<br/>
<h:link value="Activate First Tab" onclick="activateTab(0);return false;"/>
#{‘ ‘}
<h:link value="Deactivate First Tab" onclick="deactivateTab(0);return false;"/>
<br/>
<h:link value="Activate Second Tab" onclick="activateTab(1);return false;"/>
#{‘ ‘}
<h:link value="Deactivate Second Tab" onclick="deactivateTab(1);return false;"/>
<br/>
<h:link value="Activate Third Tab" onclick="activateTab(2);return false;"/>
#{‘ ‘}
<h:link value="Deactivate Third Tab" onclick="deactivateTab(2);return false;"/>
</h:form>
</f:view>
</html>
[/code]

3. Primefaces AccordionPanel JavaScript Widget Example Demo

Primefaces AccordionPanel Client Side API

  • First Tab that has been activated by default.
  • For deactivating the first Tab, you have to invoke a Deactivate First Tab that by turn invoke a JavaScript function.
  • The defined JavaScript function does access the accordion component through its WidgetVar directly.

Primefaces AccordionPanel Client Side API

  • The result of deactivating the first Tab.

Primefaces AccordionPanel Client Side API

  • To activate the second Tab, you have to click on the Active Second Tab which in turn, it would invoke a JavaScript function that does use the implicit PF object for accessing the AccordionPanel component. The passed value for the PF is the WidgetVar value that defined previously.

[wpdm_file id=60]

Filed Under: JSF Tagged With: PrimeFaces

PrimeFaces AccordionPanel – onTabChange and onTabShow Events

April 12, 2014 by Amr Mohammed Leave a Comment

This tutorial explains the event change listeners used along with the AccordionPanel component. The onTabChange is called before a tab is displayed to the user and onTabShow is called after displayed to the user. Both receive container element of the tab to show as a parameter.

At the other hand tabChange is the one and only ajax behavior event for accordion panel that’s executed when a tab is toggled. It is used inside the sub-element p:ajax. Your listener (if defined) will be invoked with an org.primefaces.event.TabChangeEvent instance that contains a reference to a new active tab and the accordion panel itself.

  • Read : PrimeFaces Tutorials

Look at the below sample code to understand how to use the tab change listener in AccordionPanel.

1. Managed Bean

AccordionPanel.java

[code lang=”java”]
package net.javabeat.primefaces;

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

import org.primefaces.event.TabChangeEvent;

@ManagedBean
@SessionScoped
public class AccordionPanel {
private String messageOne = "Hello JavaBeat One";
private String messageTwo = "Hello JavaBeat Two";
private String messageThree = "Hello JavaBeat Three";

public String getMessageOne() {
System.out.println("Message One Loaded");
return messageOne;
}
public void setMessageOne(String messageOne) {
this.messageOne = messageOne;
}
public String getMessageTwo() {
System.out.println("Message Two Loaded");
return messageTwo;
}
public void setMessageTwo(String messageTwo) {
this.messageTwo = messageTwo;
}
public String getMessageThree() {
System.out.println("Message Three Loaded");
return messageThree;
}
public void setMessageThree(String messageThree) {
this.messageThree = messageThree;
}
public void changeListener(TabChangeEvent e){
System.out.println("TabChangeEvent Has Fired By ::"+e.getSource());
System.out.println("The next Tab Title is :: "+e.getTab().getTitle());
}
}
[/code]

2. 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>
<script>
function onTabChange(panel){
alert(‘Client Callback : Before Tab Being Changed’);
}

function onTabShow(panel){
alert(‘Client Callback : After Tab Been changed’);
}
</script>
</h:head>
<f:view>
<h:form prependId="false">
<h1>JavaBeat Primefaces Example</h1>
<h2>Primefaces AccordionPanel</h2>
<br/>
<p:accordionPanel onTabShow="onTabShow(panel)" onTabChange="onTabChange(panel)">
<p:ajax event="tabChange" listener="#{accordionPanel.changeListener}"></p:ajax>
<p:tab title="First Tab Title">
<h:outputText value="#{accordionPanel.messageOne}"></h:outputText>
</p:tab>
<p:tab title="Second Tab Title">
<h:outputText value="#{accordionPanel.messageTwo}"></h:outputText>
</p:tab>
<p:tab title="Third Tab Title">
<h:outputText value="#{accordionPanel.messageThree}"></h:outputText>
</p:tab>
</p:accordionPanel>
</h:form>
</f:view>
</html>
[/code]

3. AccordionPanel onTabChange and onTabShow Events Demo

The below snapshots show you the application behavior once you’ve used the client side callbacks and the Ajax event of the p:accordionPanel component in your application.

Accordion Callback & Ajax Event

  • This client side callback has been invoked once the user has activated the second Tab.
  • The callback JavaScript method does define a parameter for the accordionPanel itself.

Accordion Callback & Ajax Event

  • The client side callback has been invoked after the user has activated the second Tab.
  • The callback JavaScript method does define a parameter for the accordionPanel itself.

Accordion Ajax TabChange Event

  • The listener of the TabChange event has been invoked.
  • The TabChangeEvent provides references for the accordion panel itself and for the tab being activated.

[wpdm_file id=61]

Filed Under: JSF Tagged With: PrimeFaces

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • …
  • 17
  • Next Page »

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved