1.概述
新的WTP2.0帶了一個叫做WebPageEditor的編輯器，打開一開，不得了，是帶圖型的編輯器耶～～
既然有了這個功能，那它肯定有擴(kuò)展機(jī)制，能夠讓我們把自己的Taglib標(biāo)簽通過該編輯器的圖形功能顯示出來。
注意：此文認(rèn)為閱讀者都已經(jīng)具備了最基本的Eclipse Plugin開發(fā)能力。示例項目下載
2.如何擴(kuò)展
WebPageEditor的如何工作的倪？其實它的工作原理很簡單。
首先它支持了對最基本的HTML元素的現(xiàn)實功能，然后如果需要顯示我們自己定義的Tag的話，則要將這個自定義的Tag轉(zhuǎn)換成普通的HTML模型。
下面我們開始做一個例子。
首先我們建一個簡單的TLD文件，我們命名為：mytest.tld.我們在這個文件中定義一個mybutton標(biāo)簽，它具有三個屬性，text,width,height。
我們這么規(guī)定該標(biāo)簽在頁面上的顯示：基本現(xiàn)實為一個按鈕，按鈕上的文字是根據(jù)text值來確定的，該按鈕的大小則是由width和height值來確定的:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.0</jsp-version>
<short-name>m</short-name>
<uri>http://mytagconvert.com</uri>
<description>test</description>
<tag>
<name>mybutton</name>
<tag-class>null</tag-class>
<tei-class>null</tei-class>
<body-content>empty</body-content>
<description>test</description>
<attribute>
<name>text</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<name>width</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
<attribute>
<name>height</name>
<required>false</required>
<rtexprvalue>false</rtexprvalue>
</attribute>
</tag>
</taglib>
然后我們新建一個動態(tài)web項目，然后新建一個JSP文件，用WebPageEditor打開它，你會發(fā)現(xiàn)，畫板中僅僅只有HTML的工具欄：
肯定有人會問：工具欄就只有HTML和jsp，怎么創(chuàng)建我所需要的拖拽我自定義的標(biāo)簽啊！
別急，這里我說一下。WebPageEditor的工具欄跟所編輯的頁面所在項目中，
能夠讀到的TLD文件是有關(guān)系的（準(zhǔn)確說應(yīng)該是這個項目的classpath能夠讀到的TLD）。就是說，如果你在該項目下放有一些TLD文件，那當(dāng)你打開WebPageEditor的時候，它會自己讀到這些TLD文件（必須保證這些文件能夠被讀出來），然后根據(jù)TLD文件中對tag的定義，再在畫板上顯示出所能繪制的tag標(biāo)簽工具Entry。所以，我們這個例子也需要將剛才建好的那個test.tld文件放置到這個項目中去。然后我們重新用WebPageEditor打開新建好的JSP文件，你會發(fā)現(xiàn)，工具欄中出現(xiàn)了我們剛才所定義好的那個tld：
你可以試著把工具欄中的TestButton托到編輯器中，不過它顯示出現(xiàn)的是一個空白的玩意兒，上面還有該標(biāo)簽的名稱。
ok，準(zhǔn)備工作算是做好了，現(xiàn)在我們開始真正討論如何讓自定義標(biāo)簽可以顯示，而且還能進(jìn)行編輯。
首先讓我們看一個擴(kuò)展點：
org.eclipse.jst.pagedesigner.pageDesignerExtension
這個擴(kuò)展點就是我們需要擴(kuò)展的。下面幾個元素比較重要：
tagConverterFactory
elementEditFactory
attributeCellEditorFactory
我們目前只討論tagConverterFactory，其他的擴(kuò)展點會在以后進(jìn)行講解。
tagConverterFactory有一個屬性值：class。這個class是需要我們給出一個實現(xiàn)了org.eclipse.jst.pagedesigner.converter.IConverterFactory接口的類。
這個接口有兩個方法需要我們實現(xiàn)：
getSupportedURI
這個方法什么意思呢？打開TLD文件，大家可以看到，TLD文件中有一個URI的屬性值，這個屬性值我們可以看成是XML文件中Schema的名字空間，用來唯一確定該TLD文件的一個標(biāo)識。WebPageEditor需要我們給出這么一個URI，其目的很明顯，就是能夠和它將讀出的TLD進(jìn)行匹配。
createConverter
這個方法有點讓人很茫然，首先看它的參數(shù)：
Element element，int mode
第一個參數(shù)element是指，在我們拖拽進(jìn)入一個標(biāo)簽后，該標(biāo)簽對應(yīng)的element模型；mode是指現(xiàn)實模式，前面忘記說了，
WebPageEditor是多頁編輯器，一頁是編輯頁面的，一頁是預(yù)覽頁面的。這里的mode就是指在編輯頁面模式還是預(yù)覽頁面模式。我們現(xiàn)在可以不考慮這個參數(shù)，在下面的所有文字中，該mode參數(shù)一律被視為編輯頁面模式。
該方法返回的是一個ITagConverter接口。
可以說，ITagConverter接口詮釋了WebPageEditor的如何對標(biāo)簽進(jìn)行解析并形成一個圖形的過程。根據(jù)上面我們給出的一個簡單的流程圖可以看出，ITagConverter其實就是專門轉(zhuǎn)換taglib中定義的tag到標(biāo)準(zhǔn)HTML DOM的這么一個接口類。
話說多了是水，先看看怎么實現(xiàn)把。
先羅嗦一下步驟：
1.新建一個插件項目，加入依賴項：
org.eclipse.jst.pagedesigner,
org.eclipse.wst.sse.core,
org.eclipse.wst.xml.core
2.新建一個為mybutton標(biāo)簽進(jìn)行轉(zhuǎn)換的Converter類
3.新建一個映射標(biāo)簽名和Converter的ConverterFactory類
4.建立一個在插件項目中實現(xiàn)剛才提到的
org.eclipse.jst.pagedesigner.pageDesignerExtension 擴(kuò)展點
新建項目我不就不說了。從新建Converter說起。
3.MyButtonTagConverter
一般情況下，我不建議大家直接實現(xiàn)ITagConverter，很累人的，而且其實里面還有很多需要考慮的東西。所以我們應(yīng)該從一個抽象類開始繼承：
AbstractTagConverter。
這個類實現(xiàn)了大部分ITagConverter的功能，并且還提供了好些方法可供使用，它只將轉(zhuǎn)換DOM的這個工作利用一個抽象函數(shù) doConvertRefresh暴露出來——
doConvertRefresh函數(shù)的返回值就是我們最終轉(zhuǎn)換成的DOM。
另外兩個抽象函數(shù)是isMultiLevel和isWidget，這兩個以后介紹。
我們繼承這個類后只要將doConvertRefresh函數(shù)實現(xiàn)就可以了。
剛才我們新建了一個TLD文件，里面描述了一個mybutton標(biāo)簽，現(xiàn)在我們來實現(xiàn)這個標(biāo)簽的轉(zhuǎn)換。
新建一個類，名為MyButtonTagConverter,然后我們實現(xiàn)這個類的doConvertRefresh方法：
public class MyButtonTagConverter extends AbstractTagConverter{
@Override
protected Element doConvertRefresh() {
// 創(chuàng)建一個HTML 的button element
Element button = createElement(IHTMLConstants.TAG_BUTTON);
// 獲得屬性值
String text = getHostElement().getAttribute("text");
if(text == null) text = "";
// 將text值給button，作為button的content，以便顯示
button.appendChild(createText(text));
// 將host element的屬性全部復(fù)制給新建的button element中：
JSFConverterUtil.copyAllAttributes(getHostElement(), button, null);
return button;
}
}
我說一下這幾個方法：
createElement
這個方法是AbstractTagConverter提供的，它是專門用于創(chuàng)建一個DOM元素的方法，傳入的值則是生成該DOM得元素名，這里我用到了一個維護(hù)常量的類IHTMLConstants，它是JST提供的，很有用。如果你有興趣可以看看AbstractTagConverter如何實現(xiàn)這個方法的，很簡單，但是很麻煩。
getHostElement
這個方法是AbstractTagConverter提供的。返回的是一個被稱為host element的DOM對象，什么是host element？它就是我們在頁面上寫的那個<mybutton/>的dom對象。
createText
這個方法是AbstractTagConverter提供的。創(chuàng)建一個content節(jié)點
JSFConverterUtil.copyAllAttributes
一個工具類提供的復(fù)制屬性的方法。很實用。之所以要進(jìn)行復(fù)制所有的屬性，是因為，我們單獨創(chuàng)建按出來的HTML DOM只是一個光禿禿的東西，不具備任何屬性，那么host element的屬性值有一部分是可以賦給生成的HTML DOM的，比如說，代碼中給出了這么一段：讀出host element的text屬性值，然后給button dom的 屬性，這樣它就可以顯示出文字來了，而其他一些屬性名相同的屬性，在host element和生成的html dom中具有相同的功效，我們是需要復(fù)制過來的。
我們可以這么想：
我們所寫的<mybutton text="button"/> 被轉(zhuǎn)換成了<button>button</button>HTML dom。
4 MyTagConverterFactory
這個類很簡單：
public class MyConverterFactory implements IConverterFactory {
/* (non-Javadoc)
* @see org.eclipse.jst.pagedesigner.converter.IConverterFactory#createConverter(org.w3c.dom.Element, int)
*/
public ITagConverter createConverter(Element element, int mode) {
String name = element.getLocalName().trim();
if(name.equalsIgnoreCase("mybutton")){
return new MyButtonTagConverter(element);
}
return new DefaultUnknownTagConverter(element,mode);
}
/* (non-Javadoc)
* @see org.eclipse.jst.pagedesigner.converter.IConverterFactory#getSupportedURI()
*/
public String getSupportedURI() {
return "http://mytagconvert.com";
}
}
這里需要強(qiáng)調(diào)的是三點：
1.
getSupportedURI方法返回的URI必須和TLD里的一致。
2.返回的Converter的構(gòu)造函數(shù)的參數(shù)必須給出，因為這個參數(shù)就是我們要的Hostelement，而createConverter傳進(jìn)的element正好就是這個host lement。
3.不要讓createConverter返回null，給出一個默認(rèn)的Converter
5 寫好擴(kuò)展點
我們新建一個
org.eclipse.jst.pagedesigner.pageDesignerExtension，然后寫好tagConverterFactory元素，將它的class設(shè)成我們新建好的
MyTagConverterFactory：
<extension
point="org.eclipse.jst.pagedesigner.pageDesignerExtension">
<tagConverterFactory
class="tagconverters.MyConverterFactory">
</tagConverterFactory>
</extension>
6.運行
讓我們運行這個插件。
在運行后，建立一個動態(tài)的web項目，然后把我們的tld文件復(fù)制到項目的WebContent下。再新建一個jsp文件，用WebPageEditor打來，然后我們再將右側(cè)畫板上的mybutton拖入編輯器：
怎么樣，不錯吧。
7.未完待續(xù)
其實這只是一個開始，記得一開始為什么我會將mybutton設(shè)置上width和height，但后面就沒說了，這些都要留到后面。
后續(xù)文章我還會講一些其他的東西，比如如何擴(kuò)展IElementEdit、屬性的頁、Palette的顯示等等。
謝謝大家，再見。