CN102207872A - 按照用户需求定制Web UI控件的方法和系统 - Google Patents

Abstract

提出了一种按照用户需求定制Web UI控件的方法和系统，属于Web技术领域，所述方法包括：接收用户定制Web UI控件的请求以及用户定制的样式信息，将用户定制的样式信息按照样式文件规定的格式编写为样式文件，将该样式文件加载到定制页面中，并可响应用户的其他请求实现对可定制UI控件的保存、修改以及下载等等操作；所述系统包括定制系统、控件库等模块以承载所述方法的运行。本方法和系统解决了在Web应用系统中用户体验差异化、开发工作重复和浪费的技术问题。

Description

按照用户需求定制Web UI控件的方法和系统

技术领域

本发明属于Web技术领域，尤其涉及一种按照用户需求定制Web UI控件的方法和系统。

背景技术

在基于Web的应用系统中，UI控件是支撑用户的可视化操作以及完成系统和用户动态交互的基础，是承载Web应用系统美学风格和用户体验的重要实体。当前，在Web应用系统开发过程中，通常是由Web应用系统的开发人员进行各自Web应用系统UI控件的开发，这种方式带来了两个问题：1.如果同一单位的若干Web应用系统由不同的开发人员开发，会使得各Web应用系统的美学风格和用户体验迥异，难以实现Web应用系统的统一和规范化；2.同一开发人员在实现不同的Web应用系统时，需要重新开发相应的UI控件，造成了工作的重复和浪费。同时，现有的完成Web UI控件定制的相关技术方案，大都不是基于Web的定制模式，并且存在可定制的控件的种类较少、粒度较粗的问题，定制生成的控件通常难以满足实际开发工作的需求。

发明内容

为了解决用户体验差异化、开发工作重复和浪费的问题，需要一种能够按需进行Web UI控件定制，进而完成Web UI控件统一发布和下载的技术。为此，本发明提出了一种按照用户需求定制Web UI控件的方法，该方法包括：

接收用户定制Web UI控件的请求以及用户定制的样式信息；

将用户定制的样式信息按照样式文件规定的格式编写为样式文件；

将该样式文件加载到定制页面中。

更进一步地，该方法还包括下述一个或几个步骤：

接收用户保存定制主题的请求，其中，该请求中包括了定制编码，所述主题定义了一套Web UI控件的样式，将用户定制的数据处理成样式文件规定的格式，将处理后的数据存入数据库，并生成备份主题包；

接收用户查看所有主题的请求，从数据库中获取主题信息并返回数据，将返回的数据生成主题列表并显示；

接收用户查看主题的请求，其中，该请求中包括了主题序号，调用备份主题包中的样式文件，将样式文件加载到控件展示页面；

接收用户修改主题的请求，其中，该请求中包括主题序号，将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中，接收并保存用户修改的样式数据；

接收用户下载主题的请求，其中，该请求中包括了主题序号，从数据库中获取与该主题序号对应的主题相关信息，生成主题包，对主题包进行压缩，返回并提示用户下载；

接收用户删除主题的请求，其中，该请求中包括了主题序号，从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录；

接收用户点评某个主题的请求，其中包括主题序号和点评内容，将点评内容添加至数据库中。

根据本发明提出的方法的一个方面，将所述样式文件暂存在一个临时文件中，并将该临时的样式文件加载到定制页面中。

根据本发明提出的方法的另一方面，接收用户定制Web UI控件的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息；以及将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。

根据本发明提出的方法的另一方面，在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则执行随后的步骤，否则，不执行随后的步骤，返回错误信息。

根据本发明提出的方法的另一方面，所述方法运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。

根据本发明提出的方法的另一方面，使用控件框架、样式、配置、方法、事件这五个方面对Web UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；每个Web UI控件都具有与上述五个方面一一对应的定义和描述文件，并采用所述方法对上述五个文件进行相应的操作。

根据本发明提出的方法的另一方面，所述应用服务器中还存储有Web UI控件库，Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新；所述控件库共提供了18类Web应用系统开发中常用的UI控件，具体包括：折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表；所述控件库还定义了Web UI控件的10类样式，这10类样式分别从字体、文字、边框等不同方面定义控件的外观。

同时，本发明还提出了一种按照用户需求定制Web UI控件的系统，该系统包括定制系统，其中：所述定制系统包括控件定制模块，所述控件定制模块包括主题定制模块；所述主题定制模块接收用户定制Web UI控件的请求以及用户定制的样式信息，将用户定制的样式信息按照样式文件规定的格式编写为样式文件，并将该样式文件加载到定制页面中。

根据本发明提出的系统的一个方面，所述主题定制模块还接收包括定制编码的用户保存定制主题的请求，所述主题定义了一套Web UI控件的样式；将用户定制的数据处理成样式文件规定的格式；将处理后的数据存入数据库，并生成备份主题包。

根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收用户查看所有主题的请求，从数据库中获取主题信息并返回数据，将返回的数据生成主题列表并显示。

根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户查看主题的请求，调用备份主题包中的样式文件，并将样式文件加载到控件展示页面。

根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户修改主题的请求，将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中，接收并保存用户修改的样式数据。

根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户下载主题的请求，从数据库中获取与该主题序号对应的主题相关信息，生成主题包，对主题包进行压缩，返回并提示用户下载。

根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户删除主题的请求，从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录。

根据本发明提出的系统的另一方面，所述控件定制模块还包括主题点评模块，所述主题点评模块接收包括主题序号和点评内容的用户点评某个主题的请求，并将点评内容添加至数据库中。

根据本发明提出的系统的另一方面，将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。

根据本发明提出的系统的另一方面，所述定制系统还包括验证模块；在所述主题定制模块接收用户定制Web UI控件的请求后，所述验证模块检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，主题定制模块将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息；以及将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。

根据本发明提出的系统的另一方面，所述定制系统中还包括验证模块，所述验证模块在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则允许相关模块执行随后的操作，否则，不允许相关模块执行随后的操作，返回错误信息。

根据本发明提出的系统的另一方面，所述按照用户需求定制Web UI控件的系统运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。

根据本发明提出的系统的另一方面，使用控件框架、样式、配置、方法、事件这五个方面对Web UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；每个Web UI控件都具有与上述五个方面一一对应的定义和描述文件，所述按照用户需求定制Web UI控件的系统对上述五个文件进行相应的操作。

根据本发明提出的系统的另一方面，所述按照用户需求定制Web UI控件的系统还包括Web UI控件库，Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新。

根据本发明提出的系统的另一方面，所述控件库共提供了18类Web应用系统开发中常用的UI控件，具体包括：折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表；所述控件库还定义了Web UI控件的10类样式，这10类样式分别从字体、文字、边框等不同方面定义控件的外观。

根据本发明提出的系统的另一方面，所述定制系统使用MVC结构实现，其包括前台界面，作为视图部分，用于组织显示模型并获取用户操作，使用异步请求与服务器端应用程序模块进行交互；还包括服务器端应用程序模块、业务逻辑模块、数据访问接口模块和实体模块，这些模块共同构成控制器部分，负责对来自视图的用户请求进行解释，并把这些请求映射成相应的行为，这些行为由模型负责实现；还包括持久化对象模块、对象关系映射框架以及数据库，这些模块共同组成模型部分，管理应用程序的数据以及用于访问控制和修改这些数据的业务过程。

本发明提出的按照用户需求定制Web UI控件的方法和系统，提供了一种基于Web在线的模式、以“所见即所得”的可视化操作完成Web UI控件按需定制的技术方案，其中包含了18类Web应用系统开发中常见的UI控件，涵盖了每类控件常用的操作方式和10类风格样式，覆盖了控件的定制、查询、修改、下载和删除等完整的控件管理环节，用户可以在Web应用开发过程中直接调用定制下载的控件、嵌入不同的应用系统，能够较好地解决不同应用系统用户体验差异化、开发工作重复和浪费的问题，极大提高Web应用系统的开发效率。

附图说明

图1是按照用户需求定制Web UI控件的系统运行原理图；

图2是控件库的架构图；

图3是定制系统的架构图；

图4是查看所有主题的流程图；

图5是查看定制主题的流程图；

图6是修改主题的流程图；

图7是下载主题的流程图；

图8是删除主题的流程图；

图9是控件定制的流程图；

图10是定制主题保存的流程图；

图11是点评主题的流程图。

具体实施方式

图1示出了按照用户需求定制Web UI控件的系统运行原理图，涉及用户终端11、应用服务器12和按需定制Web UI控件的系统13三部分，其中按需定制Web UI控件的系统(13)运行于应用服务器上。用户通过用户终端访问应用服务器上运行的按需定制Web UI控件的系统，进行Web UI控件的定制，定制完成后进行控件描述文件的下载，下载内容包括控件的美学风格描述文件和控件操作样式定义文件。下载到本地之后，用户就可以在Web应用系统的开发过程中对定制的控件进行引用，保持定制时的美学风格，同时可以调用控件的相关操作函数，完成相应的功能。

按需定制Web UI控件的系统13实现和承载了按照用户需求定制Web UI控件的方法，具体地说，该系统分为定制系统和控件库两部分，其中：定制系统主要支撑用户以可视化、“所见即所得”的方式进行UI控件定制的过程；控件库则对可定制的控件进行管理，同时完成定制控件的美学风格、操作方式等的定义和描述文件的管理和更新。控件库是定制系统的支撑功能部分，定制系统根据用户的定制操作完成对控件库中相应控件风格、操作等的修改和更新，同时将控件库中更新后的控件样式展示给用户；另外，当用户对定制的控件进行下载的时候，定制系统会调用控件库中的控件反馈给用户。

如上所述，按需定制Web UI控件的系统承载了按照用户需求定制Web UI控件的方法，下面对该技术方案所包含的控件库和定制系统进行描述。

1.控件库

图2中示出了控件库的架构图。其中，控件库21对控件22进行管理和描述。控件库21的设计及其对控件22的管理主要从图2中的五个方面考虑，其中：控件框架23定义了控件在页面中的容器；样式24定义了控件外观；配置25定义了控件配置参数；方法26定义了对控件进行功能调用的方法；事件27定义了事件响应的函数和接口。控件库21中的控件22通过初始化函数进行初始化，初始化可以传入配置，事件作为初始化参数。

按需定制Web UI控件的系统中的每一个控件，都从图2中的所述五个方面进行描述，从而每个控件都有与这五个方面对应的定义和描述文件。定制系统对控件的更新，也主要是按照用户的需求对上述五个文件进行相应的修改，即，在本发明提出的定制系统中进行控件类型的选择、控件外观的调整过程中，会相应地影响到上述五个方面，系统会根据需要对控件描述文件中的相应部分做出修改。

控件库共提供了18类Web应用系统开发中常用的UI控件，具体包括：折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表。

控件库中每个控件的外观是由样式控制的，在控件库中，根据需求定义了10类样式，这10类样式分别从字体，文字，边框等不同方面定义控件的外观，详见表1所述。

表1：控件风格的定义样式

2.定制系统

为了将表现逻辑和业务逻辑进行分离，使得系统各功能部分的职责更加清晰，定制系统采用MVC架构模式进行设计。MVC即模型---视图---控制器(Model-View-Controller)，MVC架构提供了一种按功能对各种对象进行分割的方法，其目的是为了将各对象间的耦合程度降至最低。在MVC架构中一个应用被分割成三个部分：模型、视图、控制器。其中：模型，代表应用程序的数据以及用于访问控制和修改这些数据的业务逻辑；视图，用来组织模型的内容，它从模型那里获得数据并制定这些数据如何表现；控制器，定义了应用程序的行为，它负责对来自视图的用户请求进行解释，并把这些请求映射成相应的行为，这些行为由模型负责实现。

在MVC架构模式下，定制系统的架构如图3所示。前台界面31作为视图部分，用于组织显示模型并获取用户操作，使用异步请求与服务器端应用程序模块进行交互。服务器端应用程序模块32、业务逻辑模块33、数据访问接口模块34、实体模块35共同构成控制器部分，负责对来自视图的用户请求进行解释，并把这些请求映射成相应的行为，这些行为由模型负责实现。实体模块35是数据表的映射；数据访问接口模块34是对实体模块的一系列操作即对数据表的操作；业务逻辑模块33主要用来实现业务逻辑，通过调用数据访问接口模块34中的方法实现对数据库的操作；服务器端应用程序模块32获取视图传递的数据并调用业务逻辑的方法来实现目标功能。持久化对象模块36、对象关系映射框架37和数据库38共同组成模型部分，管理应用程序的数据以及用于访问控制和修改这些数据的业务逻辑。

在定制系统的前台界面31部分，包括了控件定制311、技术控件库312以及页面素材库313三部分，它们的作用如表2所示。

表2：前台界面的功能模块部分

在按照用户需求定制Web UI控件的方法和系统中，表2中的控件定制是面向用户、体现系统功能的核心部分，系统的定制过程主要涉及控件定制部分的三个模块，即主题感知、主题定制和主题点评，通过这三个模块用户完成对所需控件的定制、下载和点评，以及对定义了一套控件样式的主题的定制、下载和点评。即，用户可以将每次定义的一套控件(例如18类控件)定义为一个主题，进行下载；并且需要针对其中每一个Web UI控件进行定制来完成对主题具体的定制过程。在下文中，所出现的对主题的操作也可对某个控件执行，而对控件执行的操作也可对某个主题执行，例如，下文中出现的主题序号可用控件序号或种类来代替，从而对某个主题实现的感知、定制、点评也可对某个或某种控件实现。

下面分别对主题感知、主题定制和主题点评三个用户定制相关过程的实现方法进行介绍。

(1)主题感知

主题感知模块允许登录人员管理主题，该模块提供了查看所有主题，查看定制主题，修改主题，删除主题，下载主题等功能，其中只有拥有权限的用户可以删除其所创建的主题。下面分别对上述功能进行描述。

I.查看所有主题

查看所有主题的流程图如图4所示。用户点击打开主题感知页面并提交查看所有主题的请求，浏览器页面使用异步方式向后台发送该请求，然后，该流程开始执行：步骤401，接收用户提交的查看所有主题的请求；步骤402，浏览器页面使用异步方式向后台发送请求，后台检查浏览器暂存文件中的用户信息；步骤403，后台对用户身份进行验证；若验证通过，则执行步骤404，访问主题存储数据库，返回所有主题信息，其中返回的数据在前台需要经过脚本的处理，用来进行分页和组织显示方式，最终生成主题列表显示给用户；若验证未通过，则执行步骤405，返回错误信息。

II.查看定制主题

查看定制主题的流程图如图5所示。用户点击某个主题并提交查看主题请求后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤501，接收用户提交的查看主题请求，该请求中包括定制主题序号；步骤502，后台检查浏览器暂存数据文件中的用户信息；步骤503，后台对用户身份进行验证；若验证通过，则顺序执行步骤504和505，访问主题存储数据库，返回相应的主题查询接过，根据主题内容生成相应样式文件内容，返回样式，具体为：浏览器调用服务器端的备份主题包中的样式文件，将样式文件动态加载到控件展示的页面上实现主题浏览的效果，其中备份主题包是用来减少数据库的读取，减少数据库的压力，加快页面处理时间，给用户带来更好的体验；若验证未通过，则执行步骤506，返回错误信息。

III.修改主题

修改主题的流程图如图6所示。用户点击修改某个主题后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤601，接收用户提交的修改定制主题的请求，该请求中包括主题序号；步骤602，后台检查浏览器暂存数据文件中的用户信息；步骤603，后台对用户身份进行验证；若验证通过，则顺序执行步骤604，605以及606，访问主题存储数据库，返回相应的主题查询结果，具体为：浏览器跳转到主题定制页面，从服务器端的备份主题包中获取到主题样式文件，样式文件返回前台后经过脚本的处理将样式数据显示在定制页面中的各项输入框内，并显示出这些样式，用户修改后，前台页面将修改的样式数据组织在一起，异步传递给后台对应的处理模块中进行保存，操作成功则返回执行结果；若验证未通过，则执行步骤607，返回错误信息。

IV.下载主题

下载主题的流程图如图7所示。用户点击下载某个主题后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤701，接收用户提交的下载定制主题请求，该请求中包括定制主题序号；步骤702，后台检查浏览器暂存文件中的用户信息；步骤703，后台对用户身份进行验证；若验证通过，则顺序执行步骤704-707，查询主题存储数据库，返回定制编码，根据查询结果中的定制编码，生成打包文件，若打包成功则返回打包文件，具体为：后台从数据库中获取主题的相关信息，在后台通过调用相关模块生成主题包，最后对主题包进行压缩，返回给前台，在浏览器中提示用户下载已压缩好的主题包；若验证未通过，则执行步骤708，返回错误信息。

V.删除主题

删除主题的流程如图8所示。用户点击删除某个主题后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤801，接收用户提交的删除主题请求，该请求中包括主题序号；步骤802，后台检查浏览器暂存文件中的用户信息；步骤803，后台对用户身份进行验证；若验证通过，则顺序执行步骤804-706，访问主题存储数据库，删除指定主题，具体为：在后台调用有关删除主题的相关模块，从数据库中删除选定主题的所有记录，并删除相关数据表中的记录，从而实现主题删除，若操作成功则返回提示信息；若验证未通过，则执行步骤807，返回错误信息。

(2)主题定制

主题定制模块支持控件定制功能，支持用户动态修改控件显示属性，然后在页面上动态更新控件的显示效果。即用户在客户端页面修改了某项控件属性，则页面会将修改后的定制信息发送给服务端，服务端动态修改样式文件以及其他资源文件，等待服务端处理完毕后，返回修改后的效果主题。定制模块提供了控件定制、定制主题保存等功能，下面分别对上述功能进行描述。

I.控件定制

控件定制的流程图如图9所示。用户提交定制请求后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤901，接收用户提交的定制请求，其中包含控件种类信息，例如按钮、文本框等，或者控件的编号信息，例如按钮1，按钮2等；步骤902，后台检查浏览器暂存文件中的用户信息；步骤903，后台对用户身份进行验证；若验证通过，用户可以开始进行控件样式的定制和调整：步骤904，系统将与上述种类信息或编号信息对应的默认的控件样式内容或者上次定制后的控件样式内容返回给用户，即，显示在定制页面内；步骤905，用户调整控件样式；步骤906，系统将用户调整的样式转换为临时样式文件，暂存在一个临时文件中；步骤907，将临时的样式文件加载到定制页面中，实现定制后的即时显示；步骤908，和用户确认是否调整结束；若调整结束，则结束整个定制过程；若调整尚未结束，则进入步骤905，继续进行控件样式的调整和定制；若用户验证未通过，则执行步骤909，返回错误信息。

在步骤901接收用户提交的定制请求中，该请求还可包括主题序号；与此对应的，在步骤904中，将与该主题序号对应的主题或者默认的主题样式内容显示在定制页面内；步骤905中用户对该主题所包含的多个控件的样式进行调整；其他步骤与上述步骤相同。以此来实现对整个主题的定制。

II.定制主题保存

定制主题保存的流程图如图10所示。用户点击保存定制的主题后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤1001，接收用户提交的保存定制主题请求，该请求中包括定制编码；步骤1002，后台检查浏览器暂存文件中的用户信息；步骤1003，后台对用户身份进行验证；若验证通过，则执行步骤1004，根据用户的请求生成主题文件，若生成成功1005，则返回提示信息1006，具体为：前台将定制的数据通过脚本处理成样式文件规定的格式，之后将定制数据传递到后台主题模块，主题模块调用相关方法将定制数据存入数据库，之后在服务器端生成备份主题包，若生成失败，则执行步骤1007，返回错误信息；若验证未通过，则执行步骤1007，返回错误信息。特别说明的是整个保存过程因为需要处理的数据过多造成页面显示缓慢，会给用户带来页面“卡”的感受，但是通过使用Ajax异步请求的技术，将复杂的操作放在后台自行处理，不影响前台用户的正常使用。大大改善了用户体验。

(3)主题点评

在主题点评部分，用户可对所有主题进行点评、打分，并可查看最热主题排行、最新主题排行、最受欢迎主题排行。

主题点评的流程图如图11所示。用户执行点评某个主题操作后，浏览器页面使用异步方式向后台发送请求，然后，该流程开始执行：步骤1101，接收用户提交的点评请求，其中包括主题序号和点评内容；步骤1102，后台检查浏览器暂存文件中的用户信息；步骤1103，后台对用户身份进行验证；若验证通过，则执行步骤1104，访问主题点评存储数据库，添加新记录，具体为：前台将点评数据传递给后台点评模块，点评模块将数据写入数据库，若操作成功1105，则返回提示信息1106，若操作失败，则执行步骤1107，返回错误信息；若验证未通过，则执行步骤1107，返回错误信息。

通过上述描述可知，本发明具有如下优点：

对Web UI控件的美学风格、操作样式从配置、方法和事件三个方面进行了定义和描述，其中风格部分提供了对10类样式的定义，完整地覆盖了控件的美学样式和功能操作；

控件库中包含了Web应用系统开发中常用的18类UI控件，可以满足Web应用系统开发的绝大多数需求，能够降低开发人员的工作难度，减小工作量；

在用户进行Web UI控件定制(定制主题部分)过程中，将用户定制后的样式暂存在一个临时文件中，并在定制页面中进行加载，实现定制效果“所见即所得”的即时显示；

基于Web、以在线方式提供了Web UI控件的定制、查看、修改、下载和删除等功能，覆盖了Web UI控件定制和管理的全生命周期；

用户完成定制后下载的Web UI控件包中包含了控件美学风格描述文件和操作文件，提供了可以直接调用的接口对控件的外观进行修改、对控件的操作功能进行调用，用户在Web应用系统开发过程中可以利用这些接口将控件直接嵌入Web应用系统中，极大地提高工作效率，同时能保持不同控件外观和操作风格的一致性。

虽然在上文中参考特定实施方式对本发明进行了描述，但是本发明并不局限于该特定实施方式，对于本领域技术人员来说，可使用其他公知的手段对上述实施方式进行修改。

Claims (28)

1.一种按照用户需求定制Web UI控件的方法，其特征在于，该方法包括：

接收用户定制Web UI控件的请求以及用户定制的样式信息；

将用户定制的样式信息按照样式文件规定的格式编写为样式文件；

将该样式文件加载到定制页面中。

2.根据权利要求1的方法，其特征在于，该方法进一步包括：

接收用户保存定制主题的请求，其中，该请求中包括了定制编码，所述主题定义了一套Web UI控件的样式；

将用户定制的数据处理成样式文件规定的格式；

将处理后的数据存入数据库，并生成备份主题包。

3.根据权利要求2的方法，其特征在于，该方法进一步包括：

接收用户查看所有主题的请求；

从数据库中获取主题信息并返回数据；

将返回的数据生成主题列表并显示。

4.根据权利要求2的方法，其特征在于，该方法进一步包括：

接收用户查看主题的请求，其中，该请求中包括了主题序号；

调用备份主题包中的样式文件；

将样式文件加载到控件展示页面。

5.根据权利要求2的方法，其特征在于，该方法进一步包括：

接收用户修改主题的请求，其中，该请求中包括主题序号；

将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中；

接收并保存用户修改的样式数据。

6.根据权利要求2的方法，其特征在于，该方法进一步包括：

接收用户下载主题的请求，其中，该请求中包括了主题序号；

从数据库中获取与该主题序号对应的主题相关信息，生成主题包；

对主题包进行压缩，返回并提示用户下载。

7.根据权利要求2的方法，其特征在于，该方法进一步包括：

接收用户删除主题的请求，其中，该请求中包括了主题序号；

从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录。

8.根据权利要求2的方法，其特征在于，该方法进一步包括：

接收用户点评某个主题的请求，其中包括主题序号和点评内容；

将点评内容添加至数据库中。

9.根据权利要求1的方法，其特征在于，其中：

接收用户定制Web UI控件的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息；以及

将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。

10.根据权利要求2-8中任一所述的方法，其特征在于，其中：

在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则执行随后的步骤，否则，不执行随后的步骤，返回错误信息。

11.根据权利要求1-8中任一所述的方法，其特征在于，其中：

所述方法运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。

12.根据权利要求11的方法，其特征在于，其中：

使用控件框架、样式、配置、方法、事件这五个方面对Web UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；

每个Web UI控件都具有与上述五个方面一一对应的定义和描述文件，并采用所述方法对上述五个文件进行相应的操作。

13.根据权利要求11的方法，其特征在于，其中：

所述应用服务器中还存储有Web UI控件库，Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新；

所述控件库共提供了18类Web应用系统开发中常用的UI控件，具体包括：折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表；

所述控件库还定义了Web UI控件的10类样式，这10类样式分别从字体、文字、边框等不同方面定义控件的外观。

14.一种按照用户需求定制Web UI控件的系统，其特征在于，该系统包括定制系统，其中：

所述定制系统包括控件定制模块，所述控件定制模块包括主题定制模块；

所述主题定制模块接收用户定制Web UI控件的请求以及用户定制的样式信息，将用户定制的样式信息按照样式文件规定的格式编写为样式文件，并将该样式文件加载到定制页面中。

15.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述主题定制模块还接收包括定制编码的用户保存定制主题的请求，所述主题定义了一套Web UI控件的样式；将用户定制的数据处理成样式文件规定的格式；将处理后的数据存入数据库，并生成备份主题包。

16.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件定制模块还包括主题感知模块，所述主题感知模块接收用户查看所有主题的请求，从数据库中获取主题信息并返回数据，将返回的数据生成主题列表并显示。

17.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户查看主题的请求，调用备份主题包中的样式文件，并将样式文件加载到控件展示页面。

18.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户修改主题的请求，将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中，接收并保存用户修改的样式数据。

19.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户下载主题的请求，从数据库中获取与该主题序号对应的主题相关信息，生成主题包，对主题包进行压缩，返回并提示用户下载。

20.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户删除主题的请求，从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录。

21.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件定制模块还包括主题点评模块，所述主题点评模块接收包括主题序号和点评内容的用户点评某个主题的请求，并将点评内容添加至数据库中。

22.根据权利要求14的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述定制系统还包括验证模块；

在所述主题定制模块接收用户定制Web UI控件的请求后，所述验证模块检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，主题定制模块将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息；以及

将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。

23.根据权利要求14-21中任一所述的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述定制系统中还包括验证模块，所述验证模块在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则允许相关模块执行随后的操作，否则，不允许相关模块执行随后的操作，返回错误信息。

24.根据权利要求14-21中任一所述的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述按照用户需求定制Web UI控件的系统运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。

25.根据权利要求24的按照用户需求定制Web UI控件的系统，其特征在于，其中：

使用控件框架、样式、配置、方法、事件这五个方面对Web UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；

每个Web UI控件都具有与上述五个方面一一对应的定义和描述文件，所述按照用户需求定制Web UI控件的系统对上述五个文件进行相应的操作。

26.根据权利要求24的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述按照用户需求定制Web UI控件的系统还包括Web UI控件库，Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新。

27.根据权利要求26的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述控件库共提供了18类Web应用系统开发中常用的UI控件，具体包括：折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表；

所述控件库还定义了Web UI控件的10类样式，这10类样式分别从字体、文字、边框等不同方面定义控件的外观。

28.根据权利要求24的按照用户需求定制Web UI控件的系统，其特征在于，其中：

所述定制系统使用MVC结构实现，其包括作为视图部分的前台界面，用于组织显示模型并获取用户操作，使用异步请求与服务器端应用程序模块进行交互；还包括服务器端应用程序模块、业务逻辑模块、数据访问接口模块和实体模块，这些模块共同构成控制器部分，负责对来自视图的用户请求进行解释，并把这些请求映射成相应的行为，这些行为由模型负责实现；还包括持久化对象模块、对象关系映射框架以及数据库，这些模块共同组成模型部分，管理应用程序的数据以及用于访问控制和修改这些数据的业务过程。

Images