primefaces_meterGauge實現流程

參考網站http://www.primefaces.org/showcase-labs/ui/meterGaugeChart.jsf

建立普通的web項目：

在建立web項目時，加入jboss runtime、選擇jsf包：

finish。

加入primefaces包：

下載地址：http://www.primefaces.org/downloads.html

加入頁面index.xhtml：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"

xmlns:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>

<h:body>

<p:panelheader="MeterGaugeChart"style="width:100%">

<p:meterGaugeChartid="sample"value="#{ChartBean.meterGaugeModel}"

style="width:320px;height:250px"title="SimpleMeterGauge"/>

<p:meterGaugeChartid="custom"value="#{ChartBean.meterGaugeModel}"

labelHeightAdjust="110"intervalOuterRadius="130"

seriesColors="66cc66,93b75f, E7E658, cc6666"

style="width:400px;height:250px"title="CustomOptions"/>

</p:panel>

</h:body>

</html>

加入bean：ChartBean.java

packagecom.metergauge.bean;

importjava.util.ArrayList;

importjava.util.List;

importorg.primefaces.model.chart.MeterGaugeChartModel;

publicclassChartBean {

privateMeterGaugeChartModelmeterGaugeModel=newMeterGaugeChartModel();

publicMeterGaugeChartModel getMeterGaugeModel() {

List<Number>intervals =newArrayList<Number>(){

{

add(20);

add(50);

add(120);

add(220);

}

};

this.meterGaugeModel.setValue(130);

this.meterGaugeModel.setIntervals(intervals);

this.meterGaugeModel.setLabel("km/h");

returnmeterGaugeModel;

}

publicvoidsetMeterGaugeModel(MeterGaugeChartModel meterGaugeModel) {

this.meterGaugeModel= meterGaugeModel;

}

}

配置web.xml（按項目建立的配置文件，加入紅色背景部份）：

<?xmlversion="1.0"encoding="UTF-8"?>

<web-appxmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee"xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"

version="3.0">

<display-name>MeterGauge</display-name>

<servlet>

<servlet-name>FacesServlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>FacesServlet</servlet-name>

<url-pattern>*.xhtml</url-pattern>

<url-pattern>*.jsp</url-pattern>

</servlet-mapping>

</web-app>

配置faces-config.xml（按項目建立的配置文件，加入紅色背景部份）：

<?xmlversion="1.0"encoding="UTF-8"?>

<faces-config

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaeehttp://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd"

version="2.1">

<managed-bean>

<managed-bean-name>ChartBean</managed-bean-name>

<managed-bean-class>

com.metergauge.bean.ChartBean

</managed-bean-class>

<managed-bean-scope>session</managed-bean-scope>

</managed-bean>

</faces-config>

將項目部署到jboss7，訪問http://localhost:8081/MeterGauge/index.xhtml：