Html視圖定制指南
eXtremeTable使用View接口來生成HTML。你可以使用發(fā)行包已經(jīng)提供的視圖,或者你可以插入自己的視圖實現(xiàn)。 現(xiàn)在,創(chuàng)建你自己的視圖相對比較簡單,但討論一些設(shè)計想法和如何著手實現(xiàn)一個定制的視圖還是有價值的。
我想使創(chuàng)建定制視圖簡單,但不是想構(gòu)造一個更復(fù)雜的類似swing的模型,原因是那需要創(chuàng)建大量的對象來處理對應(yīng)的內(nèi)部工作。 eXtremeTable以高效為目標,我也想在視圖的實現(xiàn)上貫徹這種想法,所以我決定創(chuàng)建一系列的靜態(tài)構(gòu)造器類來實現(xiàn)分解的最小功能。你可以通過組合這些功能來實現(xiàn)你的定制視圖。
學習定制視圖的最好途徑是閱讀已經(jīng)存在的視圖的源代碼,修改它來滿足你的需求。如果我示范所有東西的話,這篇指南將變的非常冗長。取而代之的是我將直接修改默認視圖的工具條作為定制視圖的一個示例。 對于不同構(gòu)造器的具體細節(jié)我建議你閱讀源代碼。我也將盡量更新javadocs來提供更好的幫助。
實現(xiàn)View接口的類有3次插入內(nèi)容的機會。beforeBody()方法會被立刻調(diào)用,body()方法在每一行的每一列處理的時候調(diào)用。 afterBody()方法是被eXtremeTable調(diào)用的最后方法,它將返回代表視圖的一個對象。在這個HTML視圖示例里,它將是一個字符串。
public interface View {
public void beforeBody(TableModel model);
public void body(TableModel model, Column column);
public Object afterBody(TableModel model);
}
在這篇指南里我將直接修改工具條來實現(xiàn)這網(wǎng)站上Messages示例的定制視圖。
public class MessagesView extends AbstractHtmlView {
protected void toolbar(TableModel model) {
TwoColumnTableLayout toolbar = new MessagesToolbar();
toolbar.layout(getHtmlBuilder(), model);
}
protected void statusBar(TableModel model) {
TwoColumnRowLayout statusBar = new MessagesStatusBar();
statusBar.layout(getHtmlBuilder(), model);
}
}
這里使用的是默認視圖,因此它擴展了虛擬視圖來修改工具條和狀態(tài)條。如何修改工具條和(或)狀態(tài)條也是開發(fā)人員問的最多問題。
默認視圖的工具條位于表的上方包括翻頁鏈接和標題。工具條使用TwoColumnTableLayout,它是一個用于提供在自己表中實現(xiàn)左右兩列布局的虛擬類。 它將實現(xiàn)能夠浮在表上方的完美布局。下面就是你需要關(guān)心的虛擬方法,在實際的html視圖中已經(jīng)為你完成了這個布局。
public abstract class TwoColumnTableLayout {
protected abstract boolean showLayout(TableModel model);
protected abstract void columnLeft(HtmlBuilder html, TableModel model);
protected abstract void columnRight(HtmlBuilder html, TableModel model);
}
showLayout()方法用來阻止或?qū)е虏季值恼宫F(xiàn)。在我的定制視圖中如果翻頁或(和)導(dǎo)出顯示那么工具條將展現(xiàn)。
protected boolean showLayout(TableModel model) {
boolean showPagination = BuilderUtils.showPagination(model);
boolean showExports = BuilderUtils.showExports(model);
if (!showPagination && !showExports) {
return false;
}
return true;
}
下面顯示了左列和右列的部分代碼。注意在我的定制視圖中首頁和前一頁使用了文字來替代圖片顯示。我真正希望示范的是你需要做的:找到正確的構(gòu)造器類并且僅僅是擴展HtmlBuilder的標簽。 構(gòu)造器類對于示范如何找到模型里的信息(以便你能夠做比他們能夠提供的更多的定制工作)也非常有用,。
protected void columnLeft(HtmlBuilder html, TableModel model) {
html.td(2).close();
TableBuilder.title(html, model);
html.tdEnd();
}
protected void columnRight(HtmlBuilder html, TableModel model) {
boolean showPagination = BuilderUtils.showPagination(model);
...
if (showPagination) {
html.td(4).close();
ToolbarBuilder.firstPageItemAsText(html, model);
html.tdEnd();
html.td(4).close();
ToolbarBuilder.prevPageItemAsText(html, model);
html.tdEnd();
...
}
...
}
為了使用這個視圖你需要在Preferences定義一個別名。 你可以省略這部而在JSP直接給出這個視圖的完整有效的類名,不過Preferences更為簡潔。
table.view.messages=org.extremesite.view.MessagesView
TableTag也將設(shè)置視圖屬性來使用MessagesView視圖。
<ec:table view="messages">
如果不清楚Preferences和TableTag定義語法請參考Preferences指南。
posted on 2006-02-17 10:36 Lucky 閱讀(602) 評論(0) 編輯 收藏 所屬分類: extremeComponents