如何封装页面数据对象

[ 转载请注明出处 CSDN wangkaisine http://blog.csdn.net/wangkaisine/article/details/47832859 ]

前言&主题

最近在重构一个比成熟的Web应用，对这个应用页面中的数据对象进行了封装，对于很多系统甚至其他网站页面都用通用性，现在将主要的内容写出来，予以交流。

• 页面数据对象
• 页面对象组合
• 页面对象抽象
• 页面对象代码重用
• Java代码示例

---

页面数据对象

为什么要封装页面数据对象？

Web数据如何显示放在页面上，是我们需要解决的问题，数据对象能够实现通用的页面数据封装，大大减少后端代码数量，方便我们使用页面实例向页面中填塞数据，且程序更易读懂。

这是我们常见的web页面布局，其中header和footer区域，一般来说都是固定不变的，所以我们需要考虑content区域的数据元素。

而在content中，常见的数据对象包括以下的navigator、title、form、table等，其中navigator是统一的，因此也不必封装成后台对象。那么主要就是form和table对象需要在后台进行封装了。

navigator在页面中，可以直接使用js和静态div，来陈列它的内容和样式。我们已经说了导航栏完全可以放在前端去生成和操作，因此不再这里叙述。

下面我们来讲讲详细的页面数据封装：

我们定义页面中最小的数据元素就是cell，用来承载数据、保存链接以及定义样式class，我们从cell中分化成两种cell，一种叫做name cell，另外一种是data cell，它们有着不同的行为模式和方法。只在表现上有相同的地方，就是都属于表格或表单的一小块内容。然而name cell用来保存table表头的变量名值，或者form表单的属性名值，而data cell用来保存数据。

页面对象组合

如上图所示，我们使用cell了组合成不同的row，作为form或者table的行，多个cell组成一个row。例如，多个data cell组成了一个data row，它用来包括表格内的数据。多个name cell组成了一个name row，它用来表示table的第一行表头变量。一个name cell和一个data cell组成了form row，它用来表示form中的每一行属性（attribute）以及值（value）。

这样一个form的数据格式就如下图所示：

一个datatable的数据格式就如下图所示：

一个from的content的布局就如下图所示：

如果你认为本文就是在简单讲这样的页面元素封装方法，那你就错了，这样的封装真的就只是方法，而不是技术。下面我们就讲讲技术的事情。

页面对象抽象

name cell：

name cell是一行属性数据，或者一列数据的表头，因此可以在它的属性中包括name，dbName，来映射它和数据库中某一字段的对应关系。在初始化页面content的时候，将table中的name row初始化，加入一个一个的name cell。

name cell还应该拥有一个helper类，来帮助我们改变和控制显示数据的格式与样式。可以创建接口NameCellHelper，其他的DefaultNameCellHelper，LinkNameCellHelper，NumberNameCellHelper，DateNameCellHelper等，来实现这个接口，这些类可以在后端对数据进行处理。

name cell helper作为一个属性（String）放在name cell中，在这个name cell被添加到table时，使用工厂获取这个属性对应的helper类示例，同时这个cell就有了对应的helper。像这样的helper，以及表格中的name cell，在启动应用的时候，就可以加载到应用中，也就是说，创建出了一个一个表格或表单的模板，它们只是还没有数据而已。在用户查询之后，表格才显示。

data table：

是从table类继承来的数据表格类，保存查询结果数据，作为一个通用的表格对象，它的name row和每一个data row都是等长的。

data table的列控制器主要就是由表头的NameCellHelper决定的，我们初始化的helper不多，但是每个name cell映射的helper确实绑定在每一个表的某一列上的，在每一行数据在输入时，需要每一列数据得到该列的helper，并输出自己的样式。

页面对象代码重用

在之前我在写Java Web的时候，需要为每一个不同的功能模块的表格或者表单写一个form或者table类，来承载这些搜索前后的数据。但是有了这样统一化的数据对象，就可以实现更高层次的代码重用。

这样的数据对象定义我写到了一个文件夹下（domain），可以理解为一个页面数据对象的资源库，再使用这些资源库中的元素，拼装成我们需要完成的功能的content页面，content的属性就包括title、form、table等这些动态数据对象。方便content做统一的数据输出。

完成一个简单的搜索功能时，你只需要定义一个servlet（其实对于servlet也可以封装的更好，没必要每个功能都定义），在servlet执行完后，转到这个功能的搜索结果页面，在这个页面中引用通用的result页面，在页面中写的是设置table的各个属性，以及数据的值，这样所有的搜索功能都可以在跳转页面之后，共同引用这个页面，数据就被加载出来了。

Java示例代码

name cell定义：

public class NameCell extends Cell {
    private String name;
    private String dbName;
    private String nameCellHelper;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDbName() {
        return dbName;
    }

    public void setDbName(String dbName) {
        this.dbName = dbName;
    }

    public String getNameCellHelper() {
        return nameCellHelper;
    }

    public void setNameCellHelper(String nameCellHelper) {
        this.nameCellHelper = nameCellHelper;
    }

    public NameCell(String name,String dbName){
        this.name = name;
        this.dbName = dbName;
    }

    public NameCell(String name,String dbName,String nameCellHelper){
        this.name = name;
        this.dbName = dbName;
        this.nameCellHelper = nameCellHelper;
    }

}

使用cell、row拼装的table可以这样写：

import java.util.List;

public class Table {
    private String title;
    private String sql;
    private List<String> paramaternames;
    private String sqlForTotal;
    private String sqlForCount;
    private String emptyMessage = "";
    private String dbTableName;
    private int columnIndex = 0;

    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getSql() {
        return sql;
    }
    public void setSql(String sql) {
        this.sql = sql;
    }
    public List<String> getParamaternames() {
        return paramaternames;
    }
    public void setParamaternames(List<String> paramaternames) {
        this.paramaternames = paramaternames;
    }
    public String getSqlForTotal() {
        return sqlForTotal;
    }
    public void setSqlForTotal(String sqlForTotal) {
        this.sqlForTotal = sqlForTotal;
    }
    public String getSqlForCount() {
        return sqlForCount;
    }
    public void setSqlForCount(String sqlForCount) {
        this.sqlForCount = sqlForCount;
    }
    public String getEmptyMessage() {
        return emptyMessage;
    }
    public void setEmptyMessage(String emptyMessage) {
        this.emptyMessage = emptyMessage;
    }
    public String getDbTableName() {
        return dbTableName;
    }
    public void setDbTableName(String dbTableName) {
        this.dbTableName = dbTableName;
    }
    public int getColumnIndex() {
        return columnIndex;
    }
    public void setColumnIndex(int columnIndex) {
        this.columnIndex = columnIndex;
    }

}

data table就可以按照这样的方式封装：

import java.util.List;

import cn.***.com.wangkaisine.domain.row.DataRow;
import cn.***.com.wangkaisine.domain.row.NameRow;

public class DataTable extends Table {
    private NameRow nameRow;
    private List<DataRow> dataRow;

    public NameRow getNameRow() {
        return nameRow;
    }
    public void setNameRow(NameRow nameRow) {
        this.nameRow = nameRow;
    }
    public List<DataRow> getDataRow() {
        return dataRow;
    }
    public void setDataRow(List<DataRow> dataRow) {
        this.dataRow = dataRow;
    }

}

后记

虽然用了很多的文字来说明这一方法，但还没有很详尽的表述如何封装和具体使用这些对象，希望以后继续加油！