本文來自IBM developerworks，原文標(biāo)題為《Eclipse e4 的亮點(diǎn)》。

簡(jiǎn)介

還處于初級(jí)階段的 e4 項(xiàng)目是下一代的 Eclipse。Eclipse V4.0 將在 2010 發(fā)布。以當(dāng)前的 Eclipse 和 OSGi 技術(shù)作為堅(jiān)實(shí)的基礎(chǔ)，e4 的一個(gè)主要目標(biāo)就是讓您能更輕松地編寫和重用組件。將來，跨各種計(jì)算環(huán)境（Web/RIA、桌面、服務(wù)器、云、嵌入式設(shè)備）將會(huì)有一個(gè)統(tǒng)一的通用平臺(tái)，并且將會(huì)有更多的技術(shù)被集成進(jìn) Eclipse。 比如：

• 一個(gè)基于 OSGi 的增強(qiáng)編程模型，它可提供更好的軟件組件隔離。
• XWT，一個(gè)新的工具包或框架，用于聲明性地定義 SWT/JFace 應(yīng)用程序的結(jié)構(gòu)。
• Cascading Style Sheets (CSS) 可以在不必顯式地修改應(yīng)用程序代碼的情況下呈現(xiàn) UI 組件。
• 標(biāo)準(zhǔn)小部件工具包（SWT）的一個(gè)新端口，也被稱為 SWT 瀏覽器版本，它可以讓當(dāng)前的 SWT 應(yīng)用程序在瀏覽器的 Flash 播放器中被執(zhí)行。
• 用 JavaScript 編寫軟件以便在 Eclipse 運(yùn)行時(shí)內(nèi)執(zhí)行。

在本文中，了解 e4 的一些主要特性。我們還會(huì)創(chuàng)建一個(gè)使用 e4 的新 XWT 界面和數(shù)據(jù)綁定特性的示例應(yīng)用程序。XWT 是一個(gè)聲明式工具包，用來以 XML 編寫 SWT/JFace UI 組件。

新特性

從編程模型到運(yùn)行時(shí)擴(kuò)展，e4 增加了不少新特性。這些新特性讓 Eclipse 平臺(tái)有了可擴(kuò)展性。本節(jié)將簡(jiǎn)要介紹一些值得關(guān)注的新特性。

服務(wù)編程模型

在最初的服務(wù)編程模型（OSGi 或 Eclipse 擴(kuò)展注冊(cè)表）內(nèi)有三個(gè)參與者：服務(wù)代理、服務(wù)提供者和服務(wù)使用者。服務(wù)提供者將自已注冊(cè)到服務(wù)代理，而服務(wù)使用者則會(huì)在服務(wù)代理中尋求自已需要的服務(wù)。這很好地拆分了服務(wù)提供者與使用者，但它要求服務(wù)提供者與使用者對(duì)特定的服務(wù)代理有清晰的了解。

e4 中的增強(qiáng)服務(wù)編程模型引入了上下文（它是服務(wù)代理的一部分）的概念作為一種存儲(chǔ)和知道該如何定位這些服務(wù)并將其提供給服務(wù)使用者的機(jī)制。在運(yùn)行時(shí)，服務(wù)使用者使用依賴注入技術(shù)來注入所需的服務(wù)提供者實(shí)現(xiàn)。這消除了對(duì)服務(wù)代理的了解。服務(wù)提供者可以使用各種技術(shù)來將自已聲明或注冊(cè)給服務(wù)代理。圖 1 展示了服務(wù)編程模型的發(fā)展和演變。

圖 1. 服務(wù)編程模型

模型化的 UI

在 Eclipse 平臺(tái) UI 的早期版本中，workbench 被顯式地硬編碼來布局 workbench 窗口、workbench 頁面、編輯器區(qū)域或視圖堆棧。定制基于 Eclipse 的應(yīng)用程序是不允許的。

e4 引入了額外的一層，可將 UI 元素提取和抽象成一個(gè)模型。應(yīng)用程序可以重新配置或擴(kuò)展這個(gè)模型來制作不同的外觀。這個(gè)模型也可被動(dòng)態(tài)操縱；模型的改變可以立即反映出 UI 的變化。

聲明式樣式處理

e4 引入了一個(gè)可插入的樣式引擎，用于定制小部件的顯示樣式，例如小部件的大小、字體、顏色等。樣式可以在支持標(biāo)準(zhǔn) CSS 選擇器和偽類的外部 CSS 文件中定義。

分離樣式與內(nèi)容是為 Web 引入的一個(gè)很好的想法，我們用 HTML 開發(fā) Web 內(nèi)容，而將樣式處理留給 CSS 文件。這個(gè)想法可同樣被應(yīng)用于 SWT 的開發(fā)。您不必硬編碼小部件的樣式處理，可以將它留給外部 CSS 文件。

Web 到桌面

e4 也在探索如何能跨多種目標(biāo)平臺(tái)和各種語言重用組件?，F(xiàn)在您可以用 JavaScript 編寫 bundle 并將它們集成到基于 Java 的 OSGi 運(yùn)行時(shí)。Eclipse 的 JavaScript 框架負(fù)責(zé)解析清單文件（manifest）和解決 JavaScript bundle 間的依賴項(xiàng)以使其對(duì) OSGi 運(yùn)行時(shí)透明。即使在不知悉底層實(shí)現(xiàn)技術(shù)的情況下，這些 bundle 也可以注冊(cè)和查找 JavaScript 服務(wù)。

桌面到 Web

#t#一個(gè)桌面應(yīng)用程序是有可能在 Web 上運(yùn)行的。 e4 引入了一個(gè) SWT 端口，稱為 SWT 瀏覽器版（SWT/BE），可在 Flash 中顯示 SWT 組件。

SWT 提供了一個(gè)公共圖形編程界面和一個(gè)本機(jī)工具包來在 Windows®、Linux® 和瀏覽器中繪制這些組件?，F(xiàn)在，e4 支持在 Flash 或動(dòng)作腳本中呈現(xiàn) SWT 組件。將來還有技術(shù)支持 JavaScript Silverlight 版本。

XWT

XWT 即 SWT 的 XML UI，是一個(gè)框架，用來以 XML(.xwt) 聲明式地編寫 SWT/JFace 小部件。在 XWT 中，應(yīng)用程序的完整結(jié)構(gòu)或小部件分層結(jié)構(gòu)也都是以 XML 聲明式定義的。一個(gè)能實(shí)現(xiàn)小部件、事件回調(diào)和業(yè)務(wù)邏輯的 Java 文件也會(huì)被創(chuàng)建。UI 組件可以綁定一個(gè)底層應(yīng)用程序模型，以便為 UI 組件提供數(shù)據(jù)。

XWT 的好處很明顯。XWT，加上外部 CSS，可以徹底地拆分業(yè)務(wù)邏輯和 UI 相關(guān)的方面，從而節(jié)省了工作量并使 SWT 代碼更易于維護(hù)。

#p#

使用 XWT

在本節(jié)，我們將通過創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序來了解 XWT。在這個(gè)應(yīng)用程序中，您將使用 e4 的新 XWT 透視圖并會(huì)對(duì) XWT 數(shù)據(jù)綁定特性有所了解。

Hello XWT

第一步是創(chuàng)建一個(gè)基于 Eclipse V3.5 的空插件項(xiàng)目。您不必創(chuàng)建一個(gè)富客戶平臺(tái)（RCP）應(yīng)用程序或使用任何其他的應(yīng)用程序模板。只需按以下步驟操作：

1. 從零開始創(chuàng)建 XWT 示例，如圖 2和圖 3所示。

   圖 2. 創(chuàng)建一個(gè)新插件項(xiàng)目

   

   圖 3. 繼續(xù)創(chuàng)建這個(gè)新插件項(xiàng)目

   

2. 在新創(chuàng)建的 Hello 項(xiàng)目中，添加如下的插件作為項(xiàng)目依賴項(xiàng)。它們是使用 XWT 和數(shù)據(jù)綁定的最低要求。
   • org.eclipse.swt
   • org.eclipse.jface
   • org.eclipse.core.runtime
   • org.eclipse.e4.xwt
   • org.eclipse.core.databinding
   • org.eclipse.core.databinding.property
   • org.eclipse.jface.databinding
   • com.ibm.icu

   現(xiàn)在，項(xiàng)目就建立好了。

3. 創(chuàng)建一個(gè)新 UI Element 來開始 XWT 編程。Eclipse 將會(huì)自動(dòng)地為您創(chuàng)建一個(gè) XWT UI 聲明（xwt 文件）和 Java 類，如圖 4 中所示。

   圖 4. 創(chuàng)建 UI 元素

   

   您可能已經(jīng)注意到一個(gè)名為 XWT 的新透視圖已經(jīng)打開。其內(nèi)包括一個(gè)預(yù)覽應(yīng)用程序 UI 的視圖和一個(gè)調(diào)色板，通過這個(gè)調(diào)色板，可以將 SWT/JFace 組件拖放到代碼編輯器中。

4. 將一個(gè) Button 控件拖放到 XML 代碼中，如圖 5 所示。

   圖 5. 有一個(gè)按鈕的 XWT

   

   請(qǐng)注意，這個(gè)應(yīng)用程序結(jié)構(gòu)或小部件層次結(jié)構(gòu)是在 XML（.xwt）內(nèi)聲明的，比起最初在 Java 類中編寫，這種方法可以節(jié)省大量的布局工作。底層 Java 類包括事件的處理程序、構(gòu)造函數(shù)等。如果熟悉 Adobe Flex，會(huì)發(fā)現(xiàn)有很多相似之處。

5. 要在 Say Hello 按鈕上添加一個(gè)單擊處理程序，只需在 <Button> 標(biāo)記中添加 SelectionEvent=”sayHello” 并單擊 Generate Java code。在 HelloWorld.java 中就生成了一個(gè)事件處理程序。UI 布局以及動(dòng)作/事件代碼在 XWT 內(nèi)和 Java 源代碼內(nèi)被很好地分離。圖 6 給出了一個(gè)示例。

   圖 6. 為按鈕添加 SelectionEvent

   

6. 修改 HelloWorld.java 并填入單擊處理程序，如清單 1 中所示。這會(huì)打開一個(gè)消息框并顯示 Hello XWT。

   清單 1. sayHello 方法

   public void sayHello(Event event) { Button btn = (Button) event.widget; MessageDialog.openInformation(XWT.findShell(btn), "Hello XWT", "Hello XWT"); }

   這很簡(jiǎn)單。

7. 最后一步是創(chuàng)建一個(gè)啟動(dòng)這個(gè)應(yīng)用程序的主函數(shù)。創(chuàng)建一個(gè)名為 Application 的類并編寫如清單 2 中所示的相當(dāng)直觀的 main 函數(shù)。

   清單 2. main 函數(shù)

   public static void main(String[] args) { URL content = HelloWorld.class.getResource("HelloWorld.xwt"); try { XWT.open(content); } catch (Exception e) { e.printStackTrace(); } }

   把 Application.java 作為一個(gè) Java 應(yīng)用程序運(yùn)行，它將如您所愿地工作。

數(shù)據(jù)綁定

e4 的數(shù)據(jù)綁定特性與 XWT 配合得非常好?？梢詫⒁粋€(gè)模型類綁定到一個(gè) XWT UI，而同時(shí)，模型對(duì)象中的數(shù)據(jù)字段會(huì)被自動(dòng)地提供給 UI 控件。本節(jié)中的示例代碼展示了它是如何工作的。

1. 在 sample.model 包中創(chuàng)建一個(gè)名為 Contact 的新 POJO。Contact 類將包含 name 和 phone 作為其成員字段。
2. 右鍵單擊 Contact 類并選擇 New > New UI Presentation。隨后，會(huì)出現(xiàn)一個(gè)對(duì)話框，在這里，可以為 Contact 類創(chuàng)建一個(gè) UI 表示。圖 7 給出了一個(gè)例子。

創(chuàng)建完成時(shí)，ContactUI.java 和 Contact.xwt 將會(huì)以基本的配置創(chuàng)建。

圖 7. 為 Contact 類新建 UI 表示

#t#請(qǐng)注意所生成的 xwt 文件內(nèi)的 {Binding path=phone} 和 {Binding path=name}；它們表明文本字段被綁定到這個(gè)上下文對(duì)象的 phone 和 name 字段。

但是，在這個(gè)應(yīng)用程序上下文中 contact 對(duì)象位于何處呢？當(dāng)您啟動(dòng)這個(gè)應(yīng)用程序時(shí)，它就已經(jīng)設(shè)置好了。

讓我們來創(chuàng)建另一個(gè) Application 類，其中會(huì)包含一個(gè)主函數(shù)，用來打開 ContactUI 和設(shè)置這個(gè)上下文對(duì)象。請(qǐng)?zhí)貏e留意清單 3 中的 XWT.open 方法。

清單 3. 用來打開 ContactUI 的 Application.java

				
public static void main(String[] args) {
	URL content = 
		ContactUI.class.getResource("ContactUI.xwt");
	Contact c1 = new Contact("Huang", "22771");
	try {
		XWT.open(content,c1);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

運(yùn)行這個(gè) Application.java，文本控件會(huì)被 Huang 和 22771 填充。

另一方面，您還可以很容易地在 UI 操縱過程中獲得這個(gè) context 對(duì)象。假設(shè)您向 UI 結(jié)構(gòu)添加了一個(gè)按鈕，此按鈕的目的是列出當(dāng)前的聯(lián)系信息。那么 selection 事件處理程序?qū)⑷缜鍐? 所示。

清單4. 獲取上下文對(duì)象

				
public void submitContact(Event event) {
	Contact c = (Contact) XWT.getDataContext(this);
	Button btn = (Button) event.widget;
	MessageDialog.openInformation(XWT.findShell(btn),
               c.getName(), c.getPhone());
}

結(jié)束語

e4 具有很多增強(qiáng)和新特性，可以使得平臺(tái)和編程模型更為現(xiàn)代化。雖然 e4 還尚處在孵化階段，并且代碼也并未完全穩(wěn)定，這些有趣的新特性對(duì) Eclipse 平臺(tái)開發(fā)人員和 Eclipse 技術(shù)采用者還是相當(dāng)有吸引力的。您不妨研究一下版本 0.9 并加以嘗試。