eXtremeTable使用View接口來生成HTML。你可以使用發行包已經提供的視圖,或者你可以插入自己的視圖實現。
現在,創建你自己的視圖相對比較簡單,但討論一些設計想法和如何著手實現一個定制的視圖還是有價值的。
我想使創建定制視圖簡單,但不是想構造一個更復雜的類似swing的模型,原因是那需要創建大量的對象來處理對應的內部工作。
eXtremeTable以高效為目標,我也想在視圖的實現上貫徹這種想法,所以我決定創建一系列的靜態構造器類來實現分解的最小功能。你可以通過組合這些功能來實現你的定制視圖。
學習定制視圖的最好途徑是閱讀已經存在的視圖的源代碼,修改它來滿足你的需求。如果我示范所有東西的話,這篇指南將變的非常冗長。取而代之的是我將直接修改默認視圖的工具條作為定制視圖的一個示例。
對于不同構造器的具體細節我建議你閱讀源代碼。我也將盡量更新javadocs來提供更好的幫助。
實現View接口的類有3次插入內容的機會。beforeBody()方法會被立刻調用,body()方法在每一行的每一列處理的時候調用。
afterBody()方法是被eXtremeTable調用的最后方法,它將返回代表視圖的一個對象。在這個HTML視圖示例里,它將是一個字符串。
public interface View {
public void beforeBody(TableModel model);
public void body(TableModel model, Column column);
public Object afterBody(TableModel model);
}
在這篇指南里我將直接修改工具條來實現這網站上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);
}
}
這里使用的是默認視圖,因此它擴展了虛擬視圖來修改工具條和狀態條。如何修改工具條和(或)狀態條也是開發人員問的最多問題。
默認視圖的工具條位于表的上方包括翻頁鏈接和標題。工具條使用TwoColumnTableLayout,它是一個用于提供在自己表中實現左右兩列布局的虛擬類。
它將實現能夠浮在表上方的完美布局。下面就是你需要關心的虛擬方法,在實際的html視圖中已經為你完成了這個布局。
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()方法用來阻止或導致布局的展現。在我的定制視圖中如果翻頁或(和)導出顯示那么工具條將展現。
protected boolean showLayout(TableModel model) {
boolean showPagination = BuilderUtils.showPagination(model);
boolean showExports = BuilderUtils.showExports(model);
if (!showPagination && !showExports) {
return false;
}
return true;
}
下面顯示了左列和右列的部分代碼。注意在我的定制視圖中首頁和前一頁使用了文字來替代圖片顯示。我真正希望示范的是你需要做的:找到正確的構造器類并且僅僅是擴展HtmlBuilder的標簽。
構造器類對于示范如何找到模型里的信息(以便你能夠做比他們能夠提供的更多的定制工作)也非常有用,。
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也將設置視圖屬性來使用MessagesView視圖。
<ec:table view="messages">
如果不清楚Preferences和TableTag定義語法請參考Preferences指南。