专利名称：extjs组件的封装方法及装置、用户界面的生成方法及系统的制作方法
技术领域：
本发明涉及数据处理技术领域，尤其涉及一种extjs组件的封装方法及装置、用 户界面的生成方法及系统。
背景技术：
extjs是一个强大的js类库，主要用于创建前端用户界面，通过参考JavaSwing等 机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可 算是一款不可多得的JavMcript客户端技术的精品。现有技术中，用户界面的创建或生成方法是根据extjs框架提供的组件，直接编 写至Jav必cript代码，通过运行代码调用extjs组件来生成相应的用户界面，然而，由于对 extjs框架提供的组件没有固定的使用模板或限制，一个用户界面的组件可能存在多种编 写方式，这使得调用组件生成用户界面的过程变得复杂和多样化，后续若要重复使用一段 代码而无需重新编写，以提高工作效率时，也很难确定需要复用的代码段，从而增加了代码 复用的难度。
发明内容
本发明实施例提供一种extjs组件的封装方法及装置、用户界面的生成方法及系 统，能够形成模板化的用户界面组件，以便于形成用户界面和代码复用。为了解决上述技术问题，本发明实施例的技术方案如下一种extjs组件的封装方法，包括确定extjs组件的名称和功能参数；根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标 签，以完成对所述extjs组件的封装，其中，所述jsp标签的名称与所述extjs组件的名称 相对应。进一步，还包括在生成所述jsp标签之前，确定所述extjs组件的属性；所述根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的 jsp标签，具体为根据标记库描述符生成规则，生成具有所述功能参数及所述属性的所述extjs组 件的jsp标签。进一步，还包括设置调取所述jsp标签的路径。一种用户界面的生成方法，包括确定extjs组件的名称和功能参数；根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标签，其中，所述jsp标签的名称与所述extjs组件的名称相对应；根据用户界面所需extjs组件的名称，调取与所述所需extjs组件的名称相对应 的jsp标签；根据调取的jsp标签生成所述用户界面。进一步，还包括在生成所述jsp标签之前，确定所述extjs组件的属性；所述根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的 jsp标签，具体为所述根据标记库描述符生成规则，生成具有所述功能参数及所述属性的所述 extjs组件的jsp标签。进一步，在所述生成所述用户界面之前，还包括设置调取的所述jsp标签的属性值。进一步，所述根据用户界面所需extjs组件的名称，调取与所述所需extjs组件的 名称相对应的jsp标签，具体为根据用户界面所需extjs组件的名称，确定与所述所需extjs组件的名称相对应 的jsp标签，根据所述jsp标签的调取路径，调取所述jsp标签。一种extjs组件的封装装置，包括组件确定单元，用于确定extjs组件的名称和功能参数；标签生成单元，用于根据标记库描述符生成规则，生成具有所述功能参数的所述 extjs组件的jsp标签，以完成对所述extjs组件的封装，其中，所述jsp标签的名称与所述 extjs组件的名称相对应。进一步，所述组件确定单元，还用于在所述标签生成单元生成所述jsp标签之前， 确定所述extjs组件的属性；所述标签生成单元，具体用于根据标记库描述符生成规则，生成具有所述功能参 数及所述属性的所述extjs组件的jsp标签。进一步，还包括路径设置单元，用于设置调取所述jsp标签的路径。一种用户界面的生成系统，包括组件确定模块，用于确定extjs组件的名称和功能参数；标签生成模块，用于根据标记库描述符生成规则，生成具有所述功能参数的所述 extjs组件的jsp标签，其中，所述jsp标签的名称与所述extjs组件的名称相对应；标签调取模块，用于根据用户界面所需extjs组件的名称，调取与所述所需extjs 组件的名称相对应的jsp标签；界面生成模块，用于根据调取的jsp标签生成所述用户界面。进一步，所述组件确定模块，还用于在所述标签生成模块生成所述jsp标签之前， 确定所述extjs组件的属性；所述标签生成模块，具体用于根据标记库描述符生成规则，生成具有所述功能参 数及所述属性的所述extjs组件的jsp标签。进一步，还包括
属性设置模块，用于在所述界面生成模块生成所述用户界面之前，设置调取的所 述jsp标签的属性值。进一步，所述标签调取模块，具体用于根据用户界面所需extjs组件的名称，确定 与所述所需extjs组件的名称相对应的jsp标签，根据所述jsp标签的调取路径，调取所述 jsp标签。进一步，所述extjs组件包括下列之一或任意组合显示数字金额时同步显示汉字金额的组件、右键菜单组件、工具栏位置设置组件、 表格联动同屏编辑组件、树形列表窗口组件、对列表中的数据实现小计的组件、对列表中的 数据实现总计的组件、汇总表头组件、信息提示组件、表单注释组件、联想输入组件。在本发明实施例中，通过生成extjs组件的对应jsp (Java Server Images)标签， 将复杂的extjs组件封装成简单易用的jsp标签，封装了复杂的页面逻辑代码，可简单的实 现代码的复用，使用方便，易于理解，满足了银行业等应用系统复杂多变的界面展示需求， 节省了开发时间、降低了开发难度，为信息系统前端开发提供了充分的支持。
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可 以根据这些附图获得其他的附图。图1是本发明实施例一种extjs组件的封装方法流程图；图2是本发明实施例一种用户界面的生成方法流程图；图3是本发明实施例一种extjs组件的封装装置结构示意图；图4是本发明实施例一种用户界面生成系统的结构示意图。
具体实施例方式为了使本领域技术人员能进一步了解本发明的特征及技术内容，请参阅以下有关 本发明的详细说明与附图，附图仅提供参考与说明，并非用来限制本发明。下面结合附图和实施例，对本发明的技术方案进行描述。参见图1，为本发明实施例一种extjs组件的封装方法流程图。该方法可以包括步骤101，确定extjs组件的名称和功能参数。在本实施例中，首先确定出需要生成标签的extjs组件，并确定该组件的名称和 功能参数，以文本框组件进行说明，名称为文本框，功能参数为用于表征该文本框所具有的 功能的参数，可以根据用户的需求设定或选择该文本框所具有的功能，例如文本的横向、纵 向输入。设定组件的功能参数后，生成的标签也具有相同的功能，也即规定了该组件对应的 标签只具有设定的功能。其中，extjs组件也即用于生成用户界面的组件，该组件可以是现有的表格组件、 表单组件、工具栏等，还可以是根据组件的生成规则生成的新组件，如显示数字金额时同步 显示汉字金额的组件(Money组件)、右键菜单组件、工具栏位置设置组件(可以用于form，，tree，region中，其中重要的属性是Position，为工具栏在容器内的位置， 可以在容器顶部或底部，默认为在顶部)、表格联动同屏编辑组件(该组件可以实现表格组 件中的记录详细信息以表单方式在同一页面显示，并可以实现同屏编辑)、树形列表窗口组 件(可以用于弹出一个窗口，左侧树形结构，右侧表格数据)、对列表中的数据实现小计的 组件(可以对列表中的数据实现小计功能)、对列表中的数据实现总计的组件(可以对列表 中的数据实现总计功能)、汇总表头组件(可以对列表中的数据实现汇总表头功能)、信息 提示组件(可以对列表中的某条记录实现悬浮提示信息)、表单注释组件(表单field等显 示注释)、联想输入组件(可以根据用户输入的不完整信息进行联想匹配)等。步骤102，根据标记库描述符生成规则，生成具有该功能参数的extjs组件的jsp 标签，以完成对该extjs组件的封装。设定该extjs组件后，即可根据标记库描述符生成规则生成标记库描述文件，也 即jsp标签，该标记库描述符生成规则为已知规则，根据该规则生成标记库描述文件的过 程为现有技术，此处不再赘述。其中，jsp标签的名称与extjs组件的名称相对应，在本实 施例中，文本框组件生成文本框标签。JSP(Java Server Pages)是在传统的网页HTML文件(*· htm,*, html)中插入 Java 程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*. jsp)。用JSP开发的Web应 用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。jsp标签是很简单而且 可重用的代码结构。标签实际是一种模板化，把可以复用的代码封装起来对用户不可视，但是为了适 应用户的个性化需求，还需要给出一些用户可定义的参数，比如一个文本域，我们需要用户 给出宽度和高度参数，这样结合用户给出的高度和宽度，我们就可以绘制出一个文本域。在本发明另一实施例中，在步骤101中，还可以进一步确定该extjs组件的属性， 例如组件标识ID、触发事件onClick等等；还有一些个性属性，比如菜单menu组件的属性 有菜单上显示的文字text，菜单的提示信息tooltip等等。则在步骤102中可以根据标记 库描述符生成规则，生成具有该功能参数及该属性的extjs组件的jsp标签，以便于在后续 应用该标签式可以设置该标签的属性。在生成该jsp标签后，还可以进一步设置调取该jsp标签的URL路径，标签库的 描述文件中指定了标签库的url路径，在jsp页面头引入该路径就可以查找到对应的标签 库，例如 Otaglib uri = “ /plantix-ui-ext “ prefix = “ ρ" ，代码中，指定了 uri就是标签库的路径，那jsp页面就知道到哪里去取得标签代码，此外还指定了该标签库 中的标签前缀为P，那该jsp标签库的标签都以该前缀开始。例如<p:ajaxc0mb0b0xdata data = “ $ {data. dataMap}“ total = “ 2“ valueProperty = “ key" dispIayProperty ="value" />。设置调取该jsp标签的URL路径，以便在后续调取该标签时，直接根据该 URL路径调取标签，生成用户界面。在本发明实施例中，通过生成extjs组件的对应jsp标签，将复杂的extjs组件封 装成简单易用的jsp标签，封装了复杂的页面逻辑代码，可简单的实现代码的复用，使用方 便，易于理解，满足了银行业等应用系统复杂多变的界面展示需求，节省了开发时间、降低 了开发难度，为信息系统前端开发提供了充分的支持。参见图2，为本发明实施例一种用户界面的生成方法流程图。7
该方法可以包括步骤201，确定extjs组件的名称和功能参数。在本步骤中，还可以进一步确定extjs组件的属性。步骤202，根据标记库描述符生成规则，生成具有功能参数的extjs组件的jsp标签。其中，jsp标签的名称与extjs组件的名称相对应。若在上步骤中，同时确定了组件的属性，则在本步骤中可以生成具有前述功能参 数及属性的extjs组件的jsp标签。以上步骤201 202与前述实施例类似，此处不再赘述。步骤203，根据用户界面所需extjs组件的名称，调取与所需extjs组件的名称相 对应的jsp标签。若上步骤中同时确定了组件的属性，则在本步骤之前，还可以先设置调取的jsp 标签的属性值，然后再调取相应的jsp标签，并且根据预先设置的该jsp标签的调取路径调 取jsp标签。步骤204，根据调取的jsp标签生成用户界面。jsp是由应用服务器解释的，并被翻译成html代码，最终在浏览器显示。不管标准 标签，自定义标签，包括其它的jsp元素，都是由服务器解释。浏览器只显示服务器解释完 后的html静态网页。本发明实施例对extjs组件封装完善，不需要开发人员编写javascript代码，只 需要在jsp页面中写入封装后的jsp标签即可生成用户界面。本发明实施例不仅实现了 extjs框架下组件的标签化，而且提供了大量可以应用于银行业行业的新组件。既可简单的 实现代码的复用，使用方便，易于理解，又满足了银行业等应用系统复杂多变的界面展示需 求，节省了开发时间、降低了开发难度，为信息系统前端开发提供了充分的支持。以上是对本发明实施例方法的描述，下面对实现上述方法的装置和系统进行介 绍。参见图3，为本发明实施例一种extjs组件的封装装置结构示意图。该封装装置可以包括组件确定单元301，用于确定extjs组件的名称和功能参数。标签生成单元302，用于根据标记库描述符生成规则，生成具有功能参数的extjs 组件的jsp标签，以完成对extjs组件的封装，其中，jsp标签的名称与extjs组件的名称 相对应。在本实施例中，组件确定单元301确定出需要生成标签的extjs组件，并确定该 组件的名称和功能参数，设定组件的功能参数后，生成的标签也具有相同的功能，也即规 定了该组件对应的标签只具有设定的功能。其中，extjs组件也即用于生成用户界面的组 件，该组件可以是现有的表格组件、表单组件、工具栏等，还可以是根据组件的生成规则生 成的新组件，如显示数字金额时同步显示汉字金额的组件(Money组件)、右键菜单组件、工 具栏位置设置组件(可以用于form，grid, editgrid, tree, region中，其中重要的属性是 Position，为工具栏在容器内的位置，可以在容器顶部或底部，默认为在顶部)、表格联动同 屏编辑组件(该组件可以实现表格组件中的记录详细信息以表单方式在同一页面显示，并可以实现同屏编辑)、树形列表窗口组件(可以用于弹出一个窗口，左侧树形结构，右侧表 格数据)、对列表中的数据实现小计的组件(可以对列表中的数据实现小计功能)、对列表 中的数据实现总计的组件(可以对列表中的数据实现总计功能)、汇总表头组件(可以对列 表中的数据实现汇总表头功能)、信息提示组件(可以对列表中的某条记录实现悬浮提示 信息)、表单注释组件(表单field等显示注释)、联想输入组件(可以根据用户输入的不 完整信息进行联想匹配)等。设定该extjs组件后，标签生成单元302即可根据标记库描 述符生成规则生成标记库描述文件，也即jsp标签，其中，jsp标签的名称与extjs组件的 名称相对应。在本发明另一实施例中，组件确定单元301，还可以用于在标签生成单元302生成 所述jsp标签之前，确定extjs组件的属性。标签生成单元302，可以用于根据标记库描述 符生成规则，生成具有功能参数及属性的extjs组件的jsp标签。该装置也还可以进一步 包括路径设置单元，用于设置调取jsp标签的路径。在本发明实施例中，通过上述单元生成extjs组件的对应jsp标签，将复杂的 extjs组件封装成简单易用的jsp标签，封装了复杂的页面逻辑代码，可简单的实现代码的 复用，使用方便，易于理解，满足了银行业等应用系统复杂多变的界面展示需求，节省了开 发时间、降低了开发难度，为信息系统前端开发提供了充分的支持。参见图4，为本发明实施例一种用户界面生成系统的结构示意图。该系统可以包括组件确定模块401，用于确定extjs组件的名称和功能参数。标签生成模块402，用于根据标记库描述符生成规则，生成具有该功能参数的 extjs组件的jsp标签，其中，jsp标签的名称与extjs组件的名称相对应。标签调取模块403，用于根据用户界面所需extjs组件的名称，调取与所需extjs 组件的名称相对应的jsp标签。界面生成模块404，用于根据调取的jsp标签生成用户界面。其中，组件确定模块401、标签生成模块402与前述extjs组件的封装装置中的组 件确定单元和标签生成单元类似，且组件确定模块401，也还可以用于在标签生成模块402 生成jsp标签之前，确定extjs组件的属性；标签生成模块402，具体可以用于根据标记库 描述符生成规则，生成具有该功能参数及属性的extjs组件的jsp标签。本实施例中，在组件确定模块401、标签生成模块402对组件封装形成j sp标签后， 标签调取模块403根据用户界面所需extjs组件的名称，调取与所需extjs组件的名称相 对应的jsp标签，具体地，可以根据用户界面所需extjs组件的名称，确定与所需extjs组 件的名称相对应的jsp标签，根据jsp标签的调取路径，调取jsp标签。若在组件确定模 块401中确定了组件的属性，则本实施例中，该系统还可以包括属性设置模块，用于在界面 生成模块404生成用户界面之前，设置调取的jsp标签的属性值。然后，再由界面生成模块 404根据调取的jsp标签生成用户界面。本发明实施例通过上述单元对extjs组件封装完善，不需要开发人员编写 javascript代码，只需要在jsp页面中写入封装后的jsp标签即可生成用户界面。本发明 实施例不仅实现了 extjs框架下组件的标签化，而且提供了大量可以应用于银行业行业的 新组件。既可简单的实现代码的复用，使用方便，易于理解，又满足了银行业等应用系统复杂多变的界面展示需求，节省了开发时间、降低了开发难度，为信息系统前端开发提供了充 分的支持。以上装置和系统中各单元、模块的具体实现过程请参照前述方法实施例中的相应 描述，此处不再赘述。以上所述的本发明实施方式，并不构成对本发明保护范围的限定。任何在本发明 的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明的权利要求保护范 围之内。
权利要求
1.一种extjs组件的封装方法，其特征在于，包括 确定extjs组件的名称和功能参数；根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标签， 以完成对所述extjs组件的封装，其中，所述jsp标签的名称与所述extjs组件的名称相对应。
2.根据权利要求1所述的方法，其特征在于，还包括 在生成所述jsp标签之前，确定所述extjs组件的属性；所述根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标 签，具体为根据标记库描述符生成规则，生成具有所述功能参数及所述属性的所述extjs组件的 jsp标签。
3.根据权利要求1所述的方法，其特征在于，还包括 设置调取所述jsp标签的路径。‘
4.一种用户界面的生成方法，其特征在于，包括 确定extjs组件的名称和功能参数；根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标签，其 中，所述jsp标签的名称与所述extjs组件的名称相对应；根据用户界面所需extjs组件的名称，调取与所述所需extjs组件的名称相对应的jsp 标签；根据调取的jsp标签生成所述用户界面。
5.根据权利要求4所述的方法，其特征在于，还包括 在生成所述jsp标签之前，确定所述extjs组件的属性；所述根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标 签，具体为所述根据标记库描述符生成规则，生成具有所述功能参数及所述属性的所述extjs组 件的jsp标签。
6.根据权利要求5所述的方法，其特征在于，在所述生成所述用户界面之前，还包括 设置调取的所述jsp标签的属性值。
7.根据权利要求4所述的方法，其特征在于，所述根据用户界面所需extjs组件的名 称，调取与所述所需extjs组件的名称相对应的jsp标签，具体为根据用户界面所需extjs组件的名称，确定与所述所需extjs组件的名称相对应的jsp 标签，根据所述jsp标签的调取路径，调取所述jsp标签。
8.—种extjs组件的封装装置，其特征在于，包括 组件确定单元，用于确定extjs组件的名称和功能参数；标签生成单元，用于根据标记库描述符生成规则，生成具有所述功能参数的所述extjs 组件的jsp标签，以完成对所述extjs组件的封装，其中，所述jsp标签的名称与所述extjs 组件的名称相对应。
9.根据权利要求8所述的装置，其特征在于，所述组件确定单元，还用于在所述标签生成单元生成所述jsp标签之前，确定所述extjs组件的属性；所述标签生成单元，具体用于根据标记库描述符生成规则，生成具有所述功能参数及 所述属性的所述extjs组件的jsp标签。
10.根据权利要求8所述的装置，其特征在于，还包括路径设置单元，用于设置调取所述jsp标签的路径。
11.一种用户界面的生成系统，其特征在于，包括组件确定模块，用于确定extjs组件的名称和功能参数；标签生成模块，用于根据标记库描述符生成规则，生成具有所述功能参数的所述extjs 组件的jsp标签，其中，所述jsp标签的名称与所述extjs组件的名称相对应；标签调取模块，用于根据用户界面所需extjs组件的名称，调取与所述所需extjs组件 的名称相对应的jsp标签；界面生成模块，用于根据调取的jsp标签生成所述用户界面。
12.根据权利要求11所述的系统，其特征在于，所述组件确定模块，还用于在所述标签生成模块生成所述jsp标签之前，确定所述 extjs组件的属性；所述标签生成模块，具体用于根据标记库描述符生成规则，生成具有所述功能参数及 所述属性的所述extjs组件的jsp标签。
13.根据权利要求12所述的系统，其特征在于，还包括属性设置模块，用于在所述界面生成模块生成所述用户界面之前，设置调取的所述jsp 标签的属性值。
14.根据权利要求11所述的系统，其特征在于，所述标签调取模块，具体用于根据用户界面所需extjs组件的名称，确定与所述所需 extjs组件的名称相对应的jsp标签，根据所述jsp标签的调取路径，调取所述jsp标签。
15.根据权利要求11至14中任意一项所述的系统，其特征在于，所述extjs组件包括 下列之一或任意组合显示数字金额时同步显示汉字金额的组件、右键菜单组件、工具栏位置设置组件、表格 联动同屏编辑组件、树形列表窗口组件、对列表中的数据实现小计的组件、对列表中的数据 实现总计的组件、汇总表头组件、信息提示组件、表单注释组件、联想输入组件。
全文摘要
本发明提供一种extjs组件的封装方法及装置、用户界面的生成方法及系统。一种extjs组件的封装方法，包括确定extjs组件的名称和功能参数；根据标记库描述符生成规则，生成具有所述功能参数的所述extjs组件的jsp标签，以完成对所述extjs组件的封装，其中，所述jsp标签的名称与所述extjs组件的名称相对应。在本发明实施例中，通过生成extjs组件的对应jsp标签，将复杂的extjs组件封装成简单易用的jsp标签，封装了复杂的页面逻辑代码，可简单的实现代码的复用，使用方便，易于理解，满足了银行业等应用系统复杂多变的界面展示需求，节省了开发时间、降低了开发难度，为信息系统前端开发提供了充分的支持。
文档编号G06F9/44GK102043626SQ20101060341
公开日2011年5月4日 申请日期2010年12月23日 优先权日2010年12月23日
发明者朱玥, 杨鹏, 邹德庆 申请人:中国农业银行股份有限公司