Html视图定制指南

1. 引言

eXtremeTable使用View接口来生成HTML。你可以使用发行包已经提供的视图，或者你可以插入自己的视图实现。现在，创建你自己的视图相对比较简单，但讨论一些设计想法和如何着手实现一个定制的视图还是有价值的。

我想使创建定制视图简单，但不是想构造一个更复杂的类似swing的模型，原因是那需要创建大量的对象来处理对应的内部工作。 eXtremeTable以高效为目标，我也想在视图的实现上贯彻这种想法，所以我决定创建一系列的静态构造器类来实现分解的最小功能。你可以通过组合这些功能来实现你的定制视图。

学习定制视图的最好途径是阅读已经存在的视图的源代码，修改它来满足你的需求。如果我示范所有东西的话，这篇指南将变的非常冗长。取而代之的是我将直接修改默认视图的工具条作为定制视图的一个示例。对于不同构造器的具体细节我建议你阅读源代码。我也将尽量更新javadocs来提供更好的帮助。

1.1. View接口

实现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);
}

1.2. Messages示例

在这篇指南里我将直接修改工具条来实现这网站上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指南。

Html视图定制指南