CN102520935A - 一种用于快速开发用户界面的方法 - Google Patents

Abstract

本发明提供了一种用于快速开发用户界面的方法，实现一个通用界面框架；所述通用界面框架上方为功能按钮，左侧为树形结构，右侧为主功能区；用户根据通用界面框架提供的功能来生成页面。通过本发明提供通用的界面框架，使得开发人员可以快速的开发用户界面；在开发具有相似结构的界面时，能够通过调整框架整体样式使得用户界面风格一致；在涉及到界面整体内容的修改时，可以通过修改该框架的内容，快速的实现所有界面内容的变更。

Description

一种用于快速开发用户界面的方法

技术领域

本发明涉及界面应用开发，具体来说，涉及一种用于快速开发用户界面的方法。

背景技术

在开发人员根据需求和设计，开发用户界面的过程中，将会有很多结构相似界面。传统的界面开发方法是每个界面都会对应一份独立的代码，不同开发人员的界面可能因此，会出现多份代码中会有大量相同代码的情况，这样不仅开发的时候浪费时间，后期维护时，由于要维护多份相同的代码，增加了维护的复杂度。而且，不同的开发人员有不同的代码书写和界面展示风格，代码可读性差，人员出现变动时，会造成工作交接困难。本发明提供一个通用的可扩展的界面框架，对于拥有相似结构的界面，开发人员只需提供界面显示所需的数据以及功能性的控件，即可完成该界面的开发，后期维护时，如果需要修改整体结构和功能，只需要修改框架本身的内容，即可实现所有相关界面的变更。而且，由于拥有通用的框架，统一的接口，相同的界面风格，后期维护以及人员变动工作交接将会变得更加方便。

发明内容

本发明的目的是对于具有相似结构的界面，解决不能快速开发以及维护困难的问题。为了实现这个目的，进行了如下步骤：

1.实现一个通用的用户界面框架

通用界面框架根据不同界面的内容，显示相应的功能界面。该框架的整体布局为：上方为功能按钮，左侧为树形结构，右侧为主功能区，是用于显示数据的动态表格。

1)上方功能按钮区域默认不显示任何按钮，各界面可以通过扩展接口添加需要的功能按钮，按钮可以选择在区域的左侧或右侧显示。

2)左侧树形结构区域缺省提供树的展开、收缩和刷新按钮，提供扩展接口，各业务子系统可根据需要添加命令按钮；树的内容由各业务系统自定义；树形结构区域提供隐藏/显示功能。

3)动态表格区域提供一个可分页、刷新的表格，表格的表头和数据可以根据左侧树节点点击事件而改变；上方功能按钮可以对表格数据进行增、删、改、查、刷新等操作；对于表格的每一个单元格，鼠标悬浮其上时，会弹出一个悬浮窗显示该单元格中的内容。

2.动态表格生成类

提供表格初始化及数据刷新的接口，该接口被框架整体布局类调用，根据左侧树节点点击事件，右侧动态表格会显示相应的表头和数据。具体流程如下：

1)表格初始化：框架整体布局类调用接口：DynamicGridPanel(myPageSize，isCheckBox，config)对表格进行初始化。其中，myPageSize为表格分页时每页的行数；isCheckBox表示在表格的第一列是否为复选框列；config为Map结构，key为sm表示表格的第一列的格式，例如复选框、行编号等。

2)表格数据刷新：包括表格表头、列数量、表格数据的刷新。接口为refreshData(data，proxyUrl，paramMap)，其中，data为表格表头格式及表格数据，Map结构，Map的key分别为columnHead，fields和columns，columnHead为表格的表头，fields和columns为表格数据；proxyUrl为获取数据的URL；paramMap为左侧树节点信息，包括节点ID等为后台提供查询条件。

3.框架整体布局类

界面整体布局的基类，实现了上方为功能按钮，左侧为树形结构，右侧为动态表格的结构。通过覆盖该类的成员变量和相关事件函数，传入该界面所需的功能按钮参数，即可完成该界面的开发。该类是预加载的，在打开界面之前已经加载，所以不需要导入界面Jsp文件中，只需把其子类所在的Javascript文件导入Jsp文件中即可。具体流程如下：

1)初始化树形结构：左侧树形结构内容是由后台提供的，界面实现类继承框架整体布局类后，通过重写，可以提供获取树形结构数据所需的URL，通过该URL可以通过Ajax请求获取相关数据，所需重写的成员变量为treeUrl。

2)初始化动态表格：树形结构初始化后，会默认选中第一个有效的叶子节点，触发节点单击事件，界面子类重写成员变量gridUrl，通过Ajax请求，把树节点信息传给后台，后台返回动态表格所需数据，即完成动态表格的初始化。

3)初始化功能按钮：功能按钮的初始化不需后台参与，只需在界面子类中组织好生成功能按钮所需的信息即可完成上方功能按钮区域的初始化。

通过本发明提供通用的界面框架，使得开发人员可以快速的开发用户界面；在开发具有相似结构的界面时，能够通过调整框架整体样式使得用户界面风格一致；在涉及到界面整体内容的修改时，可以通过修改该框架的内容，快速的实现所有界面内容的变更。

附图说明

以下，结合附图来详细说明本发明的实施例，其中：

图1为通用界面框架整体布局。

图2为左侧树形结构隐藏后的布局。

具体实施方式

下面结合附图和具体实施方式对本发明的方法进行说明。

1.通过菜单项打开用户界面时，会初始化界面整体布局，包括上方功能按钮区域，左侧树形结构区域，右侧动态表格区域。

2.该界面的JavaScript类继承界面框架基类，通过传入参数的形式，把所需的功能按钮的控件传入上方功能按钮区域，其中按钮的点击事件所需函数由子类重写，初始化该区域完成。所传参数为Map结构，其Key分别为：leftbuttons，rightbuttons。

1)leftbuttons：表示上方功能按钮区域左边区域的按钮，一般包括增加、删除、修改等操作按钮；

2)rightbuttons：表示上方功能按钮区域右边区域的按钮或输入框的控件，主要是查询条件输入框、查询按钮、刷新按钮等；

3.覆盖基类树形结构获取数据的URL成员变量，通过Ajax方式向后台请求树形结构内容所需数据，后台返回JSON格式的数据，界面框架基类把JSON字符串转换为Map结构数据，其Key为：text，isGrid，nodedType，nodedId，leaf，children，isOperate，iconCls，qtip。

1)Text：表示树节点显示的名称；

2)isGrid：true或false，表示右侧是否是表格，true表示右侧为动态表格，false表示右侧不是动态表格，需自定义；

3)nodedType：表示节点的类型，通常用于表示当前节点所显示的是什么类型的内容；

4)nodedId：表示节点ID，与text相对应；

5)leaf：true或false，true表示当前节点为叶子节点；

6)children：表示当前节点的子节点，leaf为true时，其值为Map结构的值，leaf为false，其值为空；

7)isOperate：表示上方的功能按钮区域是否显示按钮，true表示显示功能按钮；

8)iconCls：表示节点图标的样式类，在CSS文件中定义；

9)qtip：当鼠标悬浮在节点上时弹出的悬浮窗中显示的信息。

4.覆盖基类动态表格获取数据的URL成员变量，点击树节点后，通过Ajax方式向后台获取动态表格显示所需数据。

1)传入参数：需要传入树节点和查询数据所需的查询条件信息，Map结构的必须要有的Key分别为：nodedId，nodedType，limit，start。

a)nodedId：树节点的ID，通常作为查询条件筛选数据；

b)nodedType：树节点类型，表示当前节点显示数据的含义；

c)limit：动态表格控件分页时自动生成的表示每页第一行的序号，从0开始计算；

d)start：动态表格分页时每页显示数据的行数。

2)返回数据：后台根据传入的参数查询数据库后将返回一个JSON字符串，转换为Map结构后其Key分别为：total，columnHead，columns，fields。

a)total：后台根据界面提供的查询条件检索到的数据总数，用于表格分页显示；

b)columnHead：动态表格的表头名称；

c)columns：查询得到的数据，是一个List<Map>结构，List的每一项对应表格的一行数据，Map中的各项对应表格中的各列，其中的数据不一定都会显示在表格中，某些数据将用于完成一些功能，例如删除操作，删除的时候需要一行数据的ID，但是ID一般不会显示在表格中；

d)fields：包含返回的数据中的每一项的名称，对应columns中的Map中的各项，但是不包含数据，是为了组织表格数据而包含在返回结果中。

5.树节点点击、功能按钮点击、动态表格行点击事件的处理函数，在界面框架基类中已经定义，界面需要的话可以通过重写相关函数来实现所需功能：

1)handlerAddOrUpdateRecord(buttonId，handlerGrid)：上方功能按钮单击时间函数，其参数为：buttonId表示按钮的唯一标识，可通过该ID判断按钮需实现的功能，handlerGrid表示动态表格对象，通过它可以定位当前表格被选中的一行或多行；

2)isShowButton(node)：树节点单击触发，是否显示上方区域的按钮，参数node为当前选中树节点对象；

3)handleTreeClickInitTextWindowPanel(node)：当右侧区域不是动态表格时，可以自定义该区域的内容，参数node表示当前选中的树节点对象。

4)handleRowClick(grid，rowIndex)：动态表格行的单击事件触发函数，参数：grid表示表格对象，rowIndex表示表格中被点击行的索引。

5)handleRowdblClick(grid，rowIndex)：动态表格行的双击事件触发函数，参数：grid表示表格对象，rowIndex表示表格中被点击行的索引。

Claims (4)

1.一种用于快速开发用户界面的方法，其特征在于：实现一个通用界面框架；所述通用界面框架上方为功能按钮，左侧为树形结构，右侧为主功能区；用户根据通用界面框架提供的功能来生成页面。

2.如权利要求1所述的方法，其特征在于：

所述上方功能按钮区域默认不显示任何按钮，各界面可以通过扩展接口添加需要的功能按钮，按钮可以选择在区域的左侧或右侧显示；

所述左侧树形结构区域缺省提供树的展开、收缩和刷新按钮，提供扩展接口，各业务子系统可根据需要添加命令按钮；树的内容由各业务系统自定义；树形结构区域提供隐藏/显示功能；

所述主功能区用于显示数据的动态表格，该表格可分页、刷新，表格的表头和数据可以根据左侧树节点点击事件而改变；上方功能按钮可以对表格数据进行增、删、改、查、刷新操作；对于表格的每一个单元格，鼠标悬浮其上时，会弹出一个悬浮窗显示该单元格中的内容。

3.如权利要求2所述的方法，其特征在于：所述动态表格由动态表格生成类实现，动态表格生成类提供表格初始化及数据刷新的接口，该接口被框架整体布局类调用，根据左侧树节点点击事件，右侧动态表格会显示相应的表头和数据。

4.如权利要求1所述的方法，其特征在于：所述通用界面框架由框架整体布局类实现，通过覆盖该类的成员变量和相关事件函数，传入该界面所需的功能按钮参数，即可完成该界面的开发。

Images