1.1.14.5.10.1 fejezet, Primefaces konfigurálása

Beküldte pzoli - 2012, január 18 - 8:05du

A Primefaces konfigurációt nem igénylő JSF megvalósítása igen vonzó vizuális komponenseket tartalmaz. A bemutató igen meggyőző.

Bean konfigurációra kiszolgáló oldalon mégis szükség van, ha nem EJB konténerrel (pl.: JBoss, GlassFish) dolgozunk. A konfigurációt a WEB-INF könyvtárba kell elhelyezni. Ezt a csatolt faces-config.xml-ben tehetjük meg:

    <managed-bean>
        <managed-bean-name>greetingBean</managed-bean-name>
        <managed-bean-class>com.primefaces.demo.GreetingBean</managed-bean-class>
        <managed-bean-scope>application</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>dateBean</managed-bean-name>
        <managed-bean-class>com.primefaces.demo.DateBean</managed-bean-class>
        <managed-bean-scope>application</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>autoCompleteBean</managed-bean-name>
        <managed-bean-class>com.primefaces.demo.AutoCompleteBean</managed-bean-class>
        <managed-bean-scope>application</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>messagesController</managed-bean-name>
        <managed-bean-class>com.primefaces.demo.MessagesController</managed-bean-class>
        <managed-bean-scope>application</managed-bean-scope>
    </managed-bean>

A fent látható konfiguráció négy Java osztályt határoz meg (JavaServerFaces Driven objektumok). A csatolt web.xml-ben a megjelenítéskor használt XHTML fájlok elérése konfigurálható.

Tegyük fel hogy egy lokális Tomcat 6.0-ás kiszolgálón dolgozunk, Eclipse-el egy WebApp dinamikus projekten. A Bean metódusai a http://localhost:8080/WebApp/faces/greeting.xhtml -ben #{bean.metodus} formában használhatók az alábbiak szerint.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Greetings</title>
</h:head>
 
<h:body>
<h:outputText value="Status: #{facesContext.application.projectStage}"/>
	<h:form>
		<p:button id="myButton" value="My Button">
		</p:button>
		<p:ajaxStatus>
			<f:facet name="start">
				<h:outputText value="Loading..." />
			</f:facet>
			<f:facet name="complete">
				<h:outputText value="Done!" />
			</f:facet>
		</p:ajaxStatus>
 
		<p:accordionPanel>
			<p:tab title="FirstTabTitle">
				<h:outputText value="Lorem" />
			</p:tab>
			<p:tab title="Date Picker">
				<h:outputText value="Ipsum" />
				<p:messages id="msg" showDetail="true"/>
				<p:calendar value="#{dateBean.date}" mode="inline">
				      <p:ajax event="dateSelect" listener="#{dateBean.handleDateSelect}" update="msg" />  
				</p:calendar>
			</p:tab>
			<p:tab title="Auto Complete">
				<p:autoComplete value="#{autoCompleteBean.text}"
					completeMethod="#{autoCompleteBean.complete}" />
			</p:tab>
		</p:accordionPanel>
		<h:outputText value="#{greetingBean.greeting}" />
	</h:form>
</h:body>
</html>

Fontos, hogy legyen az xhtml-nek <h:head></h:head> tagja, mert máskülönben hiányozni fognak a skin és a JQuery elemek. Végül két minta Bean, amit az XHTML használ AJAX hívásokkal:

DateBean.java

package com.primefaces.demo;
 
import java.util.Date;
 
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
 
import org.primefaces.event.DateSelectEvent;
 
public class DateBean {
    private Date date;
 
    // Getter and Setter
 
    public void setDate(Date date) {
        this.date = date;
    }
 
    public Date getDate() {
        return date;
    }
 
    public void handleDateSelect(DateSelectEvent event) {
        FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Date updating","New date:"+event.getDate());
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}

AutoCompleteBean.java

package com.primefaces.demo;
 
import java.util.ArrayList;
import java.util.List;
 
public class AutoCompleteBean {
	private String text;
 
	public List<String> complete(String query) {
		List<String> results = new ArrayList<String>();
		for (int i = 0; i < 10; i++)
			results.add(query + i);
		return results;
	}
 
	public void setText(String text) {
		this.text = text;
	}
 
	public String getText() {
		return text;
	}
}

A szükséges segédkönyvtárak:

  • jsf-api.jar
  • jsf-impl.jar
  • jstl.jar
  • standard.jar
  • primfaces-{verzió}.jar (a felhasznált működő verzió jelenleg a 3.1.0)

    • Az XHTML-ből generált kód formátuma hagy némi kivetni valót maga után, de ez talán nem annyira zavarja a mai modern böngészőkben használt JavaScript hibakereső modulokat.

    CsatolmányMéret
    Fájl faces-config.xml1.26 KB
    Fájl web.xml973 byte