import javax.faces.component.*;
public class CSSComponent extends UIOutput {
	private Boolean link; 
	public String getFamily() { 
		return "faces.CSSFamily"; 
	} 
	public boolean isLink() { 
		if (link != null) 
			return link.booleanValue(); 
			ValueBinding vb = getValueBinding("link"); 
	if (vb != null) { 
		Boolean bvb = (Boolean) vb.getValue(
			FacesContext.getCurrentInstance()); 
		if (bvb != null) 
			return bvb.booleanValue(); 
	} 
	return false; 
	} 
	public void setLink(boolean link) { 
		this.link = new Boolean(link); 
	} 
	public Object saveState(FacesContext context) { 
		return new Object[] { super.saveState(context), 
			link }; 
	} 
	public void restoreState(FacesContext context, 
	Object stateObj) { 
		Object[] state = (Object[]) stateObj; 
		super.restoreState(context, state[0]); 
		link = (Boolean) state[1]; 
	} 
}

  

開發呈現程序。 呈現程序有兩個作用。第一，呈現程序負責發送適當的HTML程序段，該程序段能在客戶端中呈現組件。通常情況下，這個HTML程序段由一些適于呈現整個Web瀏覽器的HTML標簽組成。此JSF生存周期稱作編碼階段或呈現—響應階段。該響應階段還能發送增強客戶端交互性的JavaScript代碼。

　　呈現程序的第二個作用是解析來自客戶端的數據，從而對服務器端的組件狀態進行更新（如用戶在文本字段輸入的文本）。標準呈現程序軟件包具有強制性，但也可以提供其他呈現程序軟件包，用于提供可替換的客戶端表示法或SVG之類的語言（參見參考資料）。通過檢驗組件的連接屬性，您實現的呈現程序（參見清單2）將選擇在HTML頁面中發送的CSS樣式。

清單 2. 標準呈現程序軟件包具有強制性，但是，您可以使用其他呈現程序軟件包，來提供可替換的客戶端表示法或語言。通過檢驗組件的連接屬性，您實現的呈現程序將選擇在HTML頁面中發出的CSS樣式。

    import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
import javax.faces.render.Renderer;
public class CSSRenderer extends Renderer {
public void encodeEnd(FacesContext context,
UIComponent component)
	throws IOException {
		super.encodeEnd(context, component);
		if (component instanceof CSSComponent) {
			CSSComponent cssComponent  =
				(CSSComponent) component;
			String css = (String)cssComponent.getValue();
			boolean isLink = cssComponent.isLink();
			if (css != null) 
				if (isLink)  
				context.getResponseWriter().write(
				"<link type='text/css' rel='stylesheet' 
				href='" + css + "'/>");
			else 
				context.getResponseWriter().write(
					"<style>;\n" + css + "\n<style/>\n"); 
		}
	}
}

  

開發標簽類。 同樣，JSF框架提供了用于擴展的基類，來編寫與組件相關的標簽。該標簽類負責定義并呈現將在faces-config.xml文件中應用的組件樣式（這種樣式的描述很簡短）。它還負責創建JSF組件（由JSF框架來處理），傳遞JSF標簽中所包含的屬性，該屬性用于初始化組件（參見清單3）。

清單 3. 該標簽類定義了將在faces-config.xml文件中應用的組件的樣式和組件呈現方式。

    import javax.faces.webapp.UIComponentTag;
public class CSSTag 
	extends UIComponentTag {
	private String value;
	private String link;
	public String getComponentType() {
		return "faces.CSSComponent";
	}
	public String getRendererType() {
		return “HTML.LinkOrInlineRenderer";
	}
	protected void setProperties(UIComponent component) {
		super.setProperties(component);
		Application app = 
			getFacesContext().getApplication();
		if (value != null)
			if (isValueReference(value)) 
				component.setValueBinding("value", 
				app.createValueBinding(value));
			else
				component.getAttributes().put("value", value);
		if (link != null) 
			if (isValueReference(link))
				component.setValueBinding("link",
				app.createValueBinding(link));
			else
				component.getAttributes().put("link",
				new Boolean(link));
	}
	public String getLink() {
		return link;
	}
	public void setLink(String link) {
		this.link = link;
	}
	public String getValue() {
		return value;
	}
	public void setValue(String value) {
		this.value = value;
	}
}

  

　　該標簽提供setter和getter來管理鏈接和值屬性。組件一旦創建，便會調用setProperties()方法，對標簽屬性進行初始化。每個標簽屬性都無外乎兩種：要么是文字值，要么是bean屬性的一個綁定。

編寫標簽庫定義（TLD ）。 TLD是一個XML文件，它通過將標簽名與相應的Java類相關聯來描述標簽。TLD還描述了標簽所允許的屬性（參見清單4）。這個TLD定義了一個名為css的標簽，該標簽綁定到CSSTag類。它還聲明了鏈接和值標簽屬性。

清單 4. TLD是一個通過將標簽名與相應的Java類相關聯來描述標簽的XML文件。TLD定義了名為css的標簽，使其與CSSTag類綁定。它還聲明了鏈接和值標簽屬性。

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC 
	"-//Sun Microsystems, Inc.//
	DTD JSP Tag Library  1.2//EN" 
	"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<taglib>
	<tlib-version>1.0</tlib-version>
	<jsp-version>1.2</jsp-version>
	<short-name>custom</short-name>
	<uri>http://www.ilog.com/jviews/tlds/css.tld</uri>
	<description>This tag library contains a tag for a 
		sample custom JSF Component.</description>
	<tag>
		<name>css</name>
		<tag-class>path.to.CSSTag</tag-class>
		<description>A component that displays the style 
			inline or a link a to a css file</description>
		<attribute>
			<name>id</name>
			<required>false</required>
			<rtexprvalue>false</rtexprvalue>
			<type>java.lang.String</type>
			<description>The id of this component.
			</description>
		</attribute>
		<attribute>
			<name>binding</name>
			<required>false</required>
			<rtexprvalue>false</rtexprvalue>
			<type>java.lang.String</type>
			<description>The value binding expression 
				linking this component to a property in a
				backing bean. If this attribute is set, the 
				tag does not create the component itself but
				retrieves it from the bean property. This
				attribute must be a value binding.
			</description>
		</attribute>
		<attribute>
			<name>value</name>
			<required>true</required>
			<rtexprvalue>false</rtexprvalue>
			<type>java.lang.String</type>
			<description>The inline css text or the url to 
				the css file to link.</description>
		</attribute>
		<attribute>
			<name>link</name>
			<required>false</required>
			<rtexprvalue>false</rtexprvalue>
			<type>java.lang.String</type>
			<description>Whether the value is a link or 
				the inline style.</description>
		</attribute>
	</tag>
</taglib>

  

編寫JSF 配置文件。 為了將某個JSF組件集成到框架中，您必須提供一個名為faces-config.xml的配置文件。該文件將組件類型和呈現程序類型（用于JSP定制標簽處理程序）與對應的Java類關聯起來。它還能描述與每個組件一同使用的呈現程序（參見清單5）。該文件定義了faces.CSSFamily組件家族。在本例中，該家族由faces.CSSComponent這一個組件類型（該類型與CSSComponent類綁定）組成。最后，HTML.LinkOrInlineRenderer類型的呈現程序（由CSSComponent類實現）要與faces.CSSFamily家族相關聯。

    <!DOCTYPE faces-config PUBLIC 
	"-//Sun Microsystems, Inc.//
	DTD JavaServer Faces Config 1.0//EN" 
	"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
	<component>
		<component-type>faces.CSSComponent
		</component-type>
		<component-class>path.to.CSSComponent
		</component-class>
		<component-extension>
			<component-family>faces.CSSFamily
			</component-family>
			<renderer-type>HTML.LinkOrInlineRenderer
			</renderer-type>
		</component-extension>
	</component>
	<render-kit>
		<renderer>
			<component-family>faces.CSSFamily
			</component-family>
			<renderer-type> HTML.LinkOrInlineRenderer 
			</renderer-type>
			<renderer-class>path.to.CSSRenderer
			</renderer-class>
		</renderer>
	/render-kit>
</faces-config>

  

開始制圖

　　如果您希望將自己的組件集成到JSF-enabled IDE中，您還可以提供補充說明。比如說，除提供其他的設計時信息外，還可以提供一個名為sun-faces-config.xml的XML配置文件，用于描述應在IDE中公開的組件屬性。

　　既然已經看到如何創建一個簡單的JSF組件，不妨再來看看怎樣創建一個圖形JSF組件。我們將遵循同樣的基本步驟來設計一個高級JSF圖形組件。讓我們以一個圖形組件（如ILOG JSF圖形組件）為例，通過一組分類，該組件為數據值分布提供了可視化表示。該圖形能夠以條型統計圖、圓形分格統計圖和氣泡式統計圖等各種顯示方法來顯示數據集合。該JSF圖形組件有兩個初始設計限制：

　　我們已經擁有Java圖形bean組件，它具備所有圖形顯示能力。該組件可以顯示很多圖形，而且可定制性很高。在理想情況下，我們希望利用bean組件，使用它的功能來構成我們的JSF組件的基礎。

　　普通JSF應用程序需要重新載入整個頁面以更新視圖。這種方法適合基于表單的應用程序，但在很多情況下卻不適用于高度圖形化的用戶界面。因此，我們的JSF圖形組件必須能在不更新整個頁面的前提下處理某些簡單的導航，以提供更好的用戶體驗。

　　以下是滿足這些需求的解決方案：該JSF圖形組件將管理圖形bean組件，包括創建圖形bean、定制該bean以及使該bean可用于服務器端操作。呈現JSF組件將分為兩個階段完成。JSF呈現程序會產生一個<img>標簽和一套JavaScript對象（參見圖2）。客戶端將請求服務器發回一張圖像。這一請求由某個servlet完成，該servlet獲得圖形bean，并利用圖形提供的方法生成一幅圖像（參見圖3）。任何只改變該圖形外觀的進一步用戶交互（放大、掃視、更改樣式表等）都會引起圖形的一次增量更新。如果客戶端不只是要求對圖形圖像進行更新，那么將提交該頁面（參見圖4）。

　　圖2JSF圖形組件管理圖形bean組件，包括創建圖形bean、對其進行定制，并使其可用于服務器端動作。JSF呈現程序生成一個<img>標簽和一套JavaScript對象。

　　圖3 客戶機通過servlet要求服務器獲得一張圖像。該servlet獲得圖形bean，并通過由圖形提供的方法生成一幅圖像。

　　圖4如果客戶端不只是要求對圖形外觀的進行更新，那么頁面將被提交。

　　JSF圖形組件還配有一套附加的JSF組件。 overview 可顯示該圖形整體視圖，顯示一個代表圖形視圖的長方形，還應允許用戶掃描可視區域。 legend 組件可顯示數據集合的相關信息，還能自行在圖形中顯示，依被顯示數據的樣式而定。也能提供客戶端的 interactors 如掃描和放大，這些功能可看成是客戶端交互，表示與圖形的交互不會像一次正常的JSF交互那樣重新載入整個頁面。

　　要想呈現圖形組件，只需使用chartView標簽：

<jvcf:chartView id="c" style="width:500px;height:300px" … />

　　該數據在HTML頁面中作為圖像顯示。該圖像由servlet創建，旨在響應一次HTTP請求（該請求包括指定結果圖像、生成圖像映射以及生成內聯式圖例等各種參數）。結果圖像隨之被嵌入客戶端DOM，頁面中只有圖像自身這一部分被更新。

應用程序核心部件

　　讓我們看看簡單的定制JSF組件和高級圖形組件之間的一些區別。JSF圖形組件類很像一個標準組件，不過是多了一個可訪問圖形bean（該圖形bean負責生成在HTML頁面中顯示的圖像）的圖形屬性。JSF組件可以通過某個綁定值或在當前會話中對這個圖形bean進行局部檢索。當JSF圖形組件成為某個應用程序的核心部件時，可選的JSF組件（如概覽或圖例）便與主圖形相關聯，來顯示附加信息（見清單6）。

清單 6. 當JSF圖形組件成為某個應用程序的核心部件時，可選的JSF組件便與主圖形相關聯，來顯示附加信息。

    <jvcf:chartZoomInteractor id="chartZoomInteractor" 
	XZoomAllowed="true" 
	YZoomAllowed="true" /> 
<jvcf:chartView id="chartView" 
						 chart="#{myBean.chart}" 
					 servlet="demo.ImageMapServlet" 
			interactorId="chartZoomInteractor" 
						 width="500" 
						height="300" 
			 styleSheets="/data/line.css" 
			waitingImage="data/images/wait.gif" 
			 imageFormat="PNG"  />
<jvcf:chartOverview id="chartOverview" 
					style="height:100;width:150px" 
						viewId="chartView" 
						lineWidth="3" 
						lineColor="red" />

<jvcf:chartLegend id="legendView" 
							viewId="chartView" 
							 width="400" 
							height="180" 
							layout="vertical" 
				waitingImage="data/images/wait.gif" />


  

　　呈現程序是實現這個JSF的一大難點。如前所述，呈現程序并不生成簡單的HTML，而是生成由HTML（<IMG> tag）和JavaScript proxy（代理程序）組成的動態HTML（DHTML）。

　　Proxy是一個負責管理客戶機組件圖像顯示的JavaScript類實例。該對象是服務器端Java組件類在客戶端顯示；它與組件類具有相同屬性。頁面上的每個組件、圖形及其配件都有一個proxy實例。呈現JavaScript時，在每個可視的JavaScript變量上使用facesContext.getExternalContext().encodeNamespace(name)方法是個很好的實踐。這樣做在今后方便地將組件集成到到JSR 168-compliant端口環境中。

　　為舉例說明客戶機上的proxy，必須在頁面上導入JavaScript支持庫。為保持客戶端盡量瘦，需要基于JavaScript庫支持的proxy類，對JavaScript庫進行模塊化。因此，需要給每個proxy類輸入一套不同的、有可能重疊的庫。圖形呈現的困難部分，出現在發送這些script庫的階段。每個組件的呈現程序都要聲明自己需要哪個庫，以及什么時候發送引用的庫，必須認清已發送的庫，以避免重復。僅在頁面呈現期間的存在script管理器負責這項篩選工作。每當呈現程序想要發送整套庫輸入時，它都會向篩選出已發送庫的script管理器提供列表。

　　客戶端proxy的目的在于允許編寫腳本，并避免不必要的頁面更新。一旦呈現了圖形，在客戶端便可使用proxy，以便動態安裝interactor，并顯示或隱藏圖像映射。Proxy對象也可供支持JavaScript鼠標事件處理的常規JSF組件使用。

    <jvcf:chartView id=
	"chartView" .. />
<h:selectBooleanCheckbox id=
	"genImageMap" onclick=
	"chartView.setGenerateImageMap(
	this.checked ? true : false, 
 true);" />

  

　　對組件客戶端proxy進行局部修改的問題在于，其狀態不再與服務器上的Java組件的狀態同步。為解決這個問題，proxy使用一個隱藏的輸入標簽（<INPUT TYPE="HIDDEN">）來保存客戶機上的新狀態。當執行某個標準JSF動作并提交頁面時，呈現程序將解析該隱藏狀態，使客戶機與服務器同步。這種行為需要呈現程序類中有專門的破解行為。標準破解方法得以改進，以便解析來自客戶機的狀態，并更新服務器端組件的狀態。

測試實例

　　圖形及其相關組件之間的關聯由標記引用與綁定來完成。為使頁面設計具有靈活性，一個組件可以在呈現之前被引用。因此，在呈現時間內，如果某個組件屬性引用另一個尚未呈現的組件，那么，將延遲發送依賴于客戶機進行解決的JavaScript代碼，直到呈現已引用的組件。此工作可由依賴性管理器完成。

為證實這一點，不妨看一個典型實例，該實例涉及某個概覽，該概覽引用一張圖形。

    <jvcf:overview viewId=
	"chart" [...] /> 
<jvcf:chartView id=
	"chart" [....] />
  

　　存在兩種情況。被引用圖形組件已經呈現，因此不存在任何問題

    JSP:
<jvcf:chartView id=
	"chart" [....] />
<jvcf:overview viewId=
	"chart" id="overview" [...] /> 

render:
[...]
var chart = 
	new IlvChartViewProxy ( .. );
[...]

var overview= 
	new IlvFacesOverviewProxy (
	 .. );
overview.setView(chart);
[...]

  

　　已引用圖形的組件在依賴的概覽組件之前不會呈現。既然如此，可在依賴性管理器上注冊一個組件創建監視器。已引用圖形組件最終呈現時，其呈現程序會通知自己創建的依賴性管理器。此時，將發送解決依賴性所需的代碼：

    JSP:
<jvf:overview viewId=
	"chart" id="overview" [...] /> 
<jvdf:chartView id=
	"chart" [....] />

render:
[...]
var overview = 
	new IlvFacesOverviewProxy (
	 .. );
[...]

var chart = 
	new IlvChartViewProxy ( .. );
overview.setView(chart);
[...]

  

　　開發JSF組件的目的之一，是能夠將它們應用于任何與JSF兼容的IDE。盡管如此，JSF兼容性并不足以保證這種設計時集成將會有效。下面是在開發JSF組件過程中，為了便于在今后與IDE集成需要注意的一些簡單思想：

　　首先，定制JSF組件應該提供一個基本HTML呈現程序。在設計時，JSF IDE不能呈現請求有效數據或app服務器連接的動態圖形組件。因此，帶有復雜的或非傳統的（比如不是HTML）呈現程序的組件，應該使用Beans.isDesignTime()來確定是提供一個基本HTML表示法，還是提供真正的組件呈現程序。

　　另一個設計時問題是組件的位置和大小。不同IDE使用不同的標志和屬性。能夠調整大小的組件（如一幅圖像）應能處理定義大小的不同方式。

　　最后，為了與IDE集成，組件必須提供尚未被JSF說明定義的補充信息。遺憾的是，當前每個IDE都需要特殊處理程序來集成組件，即：在一種情況就需要XML文件，而在另一種情況下需要eclipse插件，如此等等。下一個JSF JSR（2.0版）的主要目的之一，將是指定附加的元數據格式。

　　如您所見，編寫一個簡單的JSF組件并不難，因為框架已經完成了大部分工作。JSF框架管理著組件狀態、呈現程序等等。在本文中，我們已經擴展了這些基本概念，來設計一個能夠顯示復雜元數據、提供增量更新、支持大量客戶端交互并與配套組件協作的高級圖形JSF組件。支持這些特點需要對基本JSF組件的結構進行許多改進。當然，增量更新的概念今后對JSF框架將是一個很好的完善，因為它只允許呈現頁面已改變的部分，避免了更新整個頁面。按照JSF說明書工作往往不足以確保組件完全集成到JSF IDE中；一個新JSR應能及時解決這些難題。盡管存在缺陷，JSF框架仍能極大地加快Web組件開發速度、方便的融合來自各種資源的組件，以創建完整的、復雜的Web應用程序。

實現圖形JSF組件