专利名称：按照用户需求定制Web UI控件的方法和系统的制作方法
技术领域：
本发明属于Web技术领域，尤其涉及一种按照用户需求定制ffeb UI控件的方法和系统。
背景技术：
在基于Web的应用系统中，UI控件是支撑用户的可视化操作以及完成系统和用户动态交互的基础，是承载Web应用系统美学风格和用户体验的重要实体。当前，在Web应用系统开发过程中，通常是由Web应用系统的开发人员进行各自Web应用系统UI控件的开发，这种方式带来了两个问题1.如果同一单位的若干Web应用系统由不同的开发人员开发，会使得各Web应用系统的美学风格和用户体验迥异，难以实现Web应用系统的统一和规范化；2.同一开发人员在实现不同的Web应用系统时，需要重新开发相应的UI控件，造成了工作的重复和浪费。同时，现有的完成Web UI控件定制的相关技术方案，大都不是基于 Web的定制模式，并且存在可定制的控件的种类较少、粒度较粗的问题，定制生成的控件通常难以满足实际开发工作的需求。
发明内容
为了解决用户体验差异化、开发工作重复和浪费的问题，需要一种能够按需进行 Web UI控件定制，进而完成ffeb UI控件统一发布和下载的技术。为此，本发明提出了一种按照用户需求定制Web UI控件的方法，该方法包括接收用户定制ffeb UI控件的请求以及用户定制的样式信息；将用户定制的样式信息按照样式文件规定的格式编写为样式文件；将该样式文件加载到定制页面中。更进一步地，该方法还包括下述一个或几个步骤接收用户保存定制主题的请求，其中，该请求中包括了定制编码，所述主题定义了一套ffeb UI控件的样式，将用户定制的数据处理成样式文件规定的格式，将处理后的数据存入数据库，并生成备份主题包；接收用户查看所有主题的请求，从数据库中获取主题信息并返回数据，将返回的数据生成主题列表并显示；接收用户查看主题的请求，其中，该请求中包括了主题序号，调用备份主题包中的样式文件，将样式文件加载到控件展示页面；接收用户修改主题的请求，其中，该请求中包括主题序号，将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中，接收并保存用户修改的样式数据；接收用户下载主题的请求，其中，该请求中包括了主题序号，从数据库中获取与该主题序号对应的主题相关信息，生成主题包，对主题包进行压缩，返回并提示用户下载；接收用户删除主题的请求，其中，该请求中包括了主题序号，从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录；
6
接收用户点评某个主题的请求，其中包括主题序号和点评内容，将点评内容添加至数据库中。根据本发明提出的方法的一个方面，将所述样式文件暂存在一个临时文件中，并将该临时的样式文件加载到定制页面中。根据本发明提出的方法的另一方面，接收用户定制ffeb UI控件的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息；以及将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。根据本发明提出的方法的另一方面，在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则执行随后的步骤，否则，不执行随后的步骤，返回错误信息。根据本发明提出的方法的另一方面，所述方法运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。根据本发明提出的方法的另一方面，使用控件框架、样式、配置、方法、事件这五个方面对ffeb UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；每个ffeb UI控件都具有与上述五个方面一一对应的定义和描述文件，并采用所述方法对上述五个文件进行相应的操作。根据本发明提出的方法的另一方面，所述应用服务器中还存储有ffeb UI控件库， Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新；所述控件库共提供了 18类Web应用系统开发中常用的UI控件，具体包括折叠面板、按钮、颜色提取器、 下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、 滑动条、选项卡、文本框、工具条、树形列表；所述控件库还定义了 Web UI控件的10类样式， 这10类样式分别从字体、文字、边框等不同方面定义控件的外观。同时，本发明还提出了一种按照用户需求定制ffeb UI控件的系统，该系统包括定制系统，其中所述定制系统包括控件定制模块，所述控件定制模块包括主题定制模块；所述主题定制模块接收用户定制Web UI控件的请求以及用户定制的样式信息，将用户定制的样式信息按照样式文件规定的格式编写为样式文件，并将该样式文件加载到定制页面中。根据本发明提出的系统的一个方面，所述主题定制模块还接收包括定制编码的用户保存定制主题的请求，所述主题定义了一套Web UI控件的样式；将用户定制的数据处理成样式文件规定的格式；将处理后的数据存入数据库，并生成备份主题包。根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收用户查看所有主题的请求，从数据库中获取主题信息并返回数据，将返回的数据生成主题列表并显示。根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户查看主题的请求，调用备份主题包中的样式文件，并将样式文件加载到控件展示页面。根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户修改主题的请求，将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中，接收并保存用户修改的样式数据。根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户下载主题的请求，从数据库中获取与该主题序号对应的主题相关信息，生成主题包，对主题包进行压缩，返回并提示用户下载。根据本发明提出的系统的另一方面，所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户删除主题的请求，从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录。根据本发明提出的系统的另一方面，所述控件定制模块还包括主题点评模块，所述主题点评模块接收包括主题序号和点评内容的用户点评某个主题的请求，并将点评内容添加至数据库中。根据本发明提出的系统的另一方面，将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。根据本发明提出的系统的另一方面，所述定制系统还包括验证模块；在所述主题定制模块接收用户定制Web UI控件的请求后，所述验证模块检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，主题定制模块将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息；以及将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。根据本发明提出的系统的另一方面，所述定制系统中还包括验证模块，所述验证模块在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则允许相关模块执行随后的操作，否则，不允许相关模块执行随后的操作，返回错 T^fn 息。根据本发明提出的系统的另一方面，所述按照用户需求定制ffeb UI控件的系统运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。根据本发明提出的系统的另一方面，使用控件框架、样式、配置、方法、事件这五个方面对ffeb UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；每个ffeb UI控件都具有与上述五个方面一一对应的定义和描述文件，所述按照用户需求定制 Web UI控件的系统对上述五个文件进行相应的操作。根据本发明提出的系统的另一方面，所述按照用户需求定制ffeb UI控件的系统还包括ffeb UI控件库，Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新。根据本发明提出的系统的另一方面，所述控件库共提供了 18类Web应用系统开发中常用的UI控件，具体包括折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、 文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、 树形列表；所述控件库还定义了 ffeb UI控件的10类样式，这10类样式分别从字体、文字、 边框等不同方面定义控件的外观。
8
根据本发明提出的系统的另一方面，所述定制系统使用MVC结构实现，其包括前台界面，作为视图部分，用于组织显示模型并获取用户操作，使用异步请求与服务器端应用程序模块进行交互；还包括服务器端应用程序模块、业务逻辑模块、数据访问接口模块和实体模块，这些模块共同构成控制器部分，负责对来自视图的用户请求进行解释，并把这些请求映射成相应的行为，这些行为由模型负责实现；还包括持久化对象模块、对象关系映射框架以及数据库，这些模块共同组成模型部分，管理应用程序的数据以及用于访问控制和修改这些数据的业务过程。本发明提出的按照用户需求定制ffeb UI控件的方法和系统，提供了一种基于Web 在线的模式、以“所见即所得”的可视化操作完成Web UI控件按需定制的技术方案，其中包含了 18类Web应用系统开发中常见的UI控件，涵盖了每类控件常用的操作方式和10类风格样式，覆盖了控件的定制、查询、修改、下载和删除等完整的控件管理环节，用户可以在 Web应用开发过程中直接调用定制下载的控件、嵌入不同的应用系统，能够较好地解决不同应用系统用户体验差异化、开发工作重复和浪费的问题，极大提高Web应用系统的开发效率。
图1是按照用户需求定制Web UI控件的系统运行原理图
图2是控件库的架构图3是定制系统的架构图4是查看所有主题的流程图5是查看定制主题的流程图6是修改主题的流程图7是下载主题的流程图8是删除主题的流程图9是控件定制的流程图10是定制主题保存的流程图11是点评主题的流程图。
具体实施例方式图1示出了按照用户需求定制ffeb UI控件的系统运行原理图，涉及用户终端11、 应用服务器12和按需定制ffeb UI控件的系统13三部分，其中按需定制ffeb UI控件的系统(1 运行于应用服务器上。用户通过用户终端访问应用服务器上运行的按需定制Web UI控件的系统，进行Web UI控件的定制，定制完成后进行控件描述文件的下载，下载内容包括控件的美学风格描述文件和控件操作样式定义文件。下载到本地之后，用户就可以在 Web应用系统的开发过程中对定制的控件进行引用，保持定制时的美学风格，同时可以调用控件的相关操作函数，完成相应的功能。按需定制ffeb UI控件的系统13实现和承载了按照用户需求定制ffeb UI控件的方法，具体地说，该系统分为定制系统和控件库两部分，其中定制系统主要支撑用户以可视化、“所见即所得”的方式进行UI控件定制的过程；控件库则对可定制的控件进行管理，同时完成定制控件的美学风格、操作方式等的定义和描述文件的管理和更新。控件库是定制系统的支撑功能部分，定制系统根据用户的定制操作完成对控件库中相应控件风格、操作等的修改和更新，同时将控件库中更新后的控件样式展示给用户；另外，当用户对定制的控件进行下载的时候，定制系统会调用控件库中的控件反馈给用户。如上所述，按需定制ffeb UI控件的系统承载了按照用户需求定制ffeb UI控件的方法，下面对该技术方案所包含的控件库和定制系统进行描述。1.控件库图2中示出了控件库的架构图。其中，控件库21对控件22进行管理和描述。控件库21的设计及其对控件22的管理主要从图2中的五个方面考虑，其中控件框架23定义了控件在页面中的容器；样式M定义了控件外观；配置25定义了控件配置参数；方法沈定义了对控件进行功能调用的方法；事件27定义了事件响应的函数和接口。控件库21中的控件22通过初始化函数进行初始化，初始化可以传入配置，事件作为初始化参数。按需定制ffeb UI控件的系统中的每一个控件，都从图2中的所述五个方面进行描述，从而每个控件都有与这五个方面对应的定义和描述文件。定制系统对控件的更新，也主要是按照用户的需求对上述五个文件进行相应的修改，即，在本发明提出的定制系统中进行控件类型的选择、控件外观的调整过程中，会相应地影响到上述五个方面，系统会根据需要对控件描述文件中的相应部分做出修改。控件库共提供了 18类Web应用系统开发中常用的UI控件，具体包括折叠面板、 按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、 编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表。控件库中每个控件的外观是由样式控制的，在控件库中，根据需求定义了 10类样式，这10类样式分别从字体，文字，边框等不同方面定义控件的外观，详见表1所述。表1 控件风格的定义样式
权利要求
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控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；每个ffeb UI控件都具有与上述五个方面一一对应的定义和描述文件，并采用所述方法对上述五个文件进行相应的操作。
13.根据权利要求11的方法，其特征在于，其中所述应用服务器中还存储有Web UI控件库，Web UI控件库对可定制的控件进行管理， 完成控件描述文件的管理和更新；所述控件库共提供了 18类Web应用系统开发中常用的UI控件，具体包括折叠面板、 按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、 编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表；所述控件库还定义了 Web UI控件的10类样式，这10类样式分别从字体、文字、边框等不同方面定义控件的外观。
14.一种按照用户需求定制Web UI控件的系统，其特征在于，该系统包括定制系统，其中所述定制系统包括控件定制模块，所述控件定制模块包括主题定制模块； 所述主题定制模块接收用户定制Web UI控件的请求以及用户定制的样式信息，将用户定制的样式信息按照样式文件规定的格式编写为样式文件，并将该样式文件加载到定制页面中。
15.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中 所述主题定制模块还接收包括定制编码的用户保存定制主题的请求，所述主题定义了一套ffeb UI控件的样式；将用户定制的数据处理成样式文件规定的格式；将处理后的数据存入数据库，并生成备份主题包。
16.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中所述控件定制模块还包括主题感知模块，所述主题感知模块接收用户查看所有主题的请求，从数据库中获取主题信息并返回数据，将返回的数据生成主题列表并显示。
17.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户查看主题的请求，调用备份主题包中的样式文件，并将样式文件加载到控件展示页面。
18.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中 所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户修改主题的请求，将从备份主题包中获取的与主题序号对应的主题样式文件显示在定制页面中，接收并保存用户修改的样式数据。
19.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户下载主题的请求，从数据库中获取与该主题序号对应的主题相关信息，生成主题包，对主题包进行压缩，返回并提示用户下载。
20.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中 所述控件定制模块还包括主题感知模块，所述主题感知模块接收包括主题序号的用户删除主题的请求，从数据库中删除与该主题序号对应的主题的所有记录，并删除相关数据表中的记录。
21.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中所述控件定制模块还包括主题点评模块，所述主题点评模块接收包括主题序号和点评内容的用户点评某个主题的请求，并将点评内容添加至数据库中。
22.根据权利要求14的按照用户需求定制ffebUI控件的系统，其特征在于，其中 所述定制系统还包括验证模块；在所述主题定制模块接收用户定制Web UI控件的请求后，所述验证模块检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，主题定制模块将默认的控件样式内容或者上次定制后的控件样式内容显示在定制页面中，然后接收用户定制的样式信息； 以及将所述样式文件暂存在一个临时文件中，将该临时的样式文件加载到定制页面中。
23.根据权利要求14-21中任一所述的按照用户需求定制ffebUI控件的系统，其特征在于，其中所述定制系统中还包括验证模块，所述验证模块在接收用户的请求后，检查浏览器暂存数据文件中的用户信息，对用户进行验证，若验证通过，则允许相关模块执行随后的操作，否则，不允许相关模块执行随后的操作，返回错误信息。
24.根据权利要求14-21中任一所述的按照用户需求定制ffebUI控件的系统，其特征在于，其中所述按照用户需求定制Web UI控件的系统运行于应用服务器中，用户通过用户终端访问所述应用服务器，并通过网页的形式异步发送请求以及接收返回的信息。
25.根据权利要求M的按照用户需求定制ffebUI控件的系统，其特征在于，其中 使用控件框架、样式、配置、方法、事件这五个方面对Web UI控件进行定义，其中控件框架定义了控件在页面中的容器，样式定义了控件外观，配置定义了控件配置参数，方法定义了对控件进行功能调用的方法，事件定义了事件响应的函数和接口，通过所述接口对控件的外观进行修改、对控件的操作功能进行调用；每个ffeb UI控件都具有与上述五个方面一一对应的定义和描述文件，所述按照用户需求定制ffeb UI控件的系统对上述五个文件进行相应的操作。
26.根据权利要求M的按照用户需求定制ffebUI控件的系统，其特征在于，其中 所述按照用户需求定制W^eb UI控件的系统还包括Wfeb UI控件库，Web UI控件库对可定制的控件进行管理，完成控件描述文件的管理和更新。
27.根据权利要求沈的按照用户需求定制ffebUI控件的系统，其特征在于，其中 所述控件库共提供了 18类Web应用系统开发中常用的UI控件，具体包括折叠面板、按钮、颜色提取器、下拉列表、日期选择器、对话框、文件上传、表格、面板、进度条、提示框、编辑框、选择列表、滑动条、选项卡、文本框、工具条、树形列表；所述控件库还定义了 Web UI控件的10类样式，这10类样式分别从字体、文字、边框等不同方面定义控件的外观。
28.根据权利要求M的按照用户需求定制ffeb UI控件的系统，其特征在于，其中 所述定制系统使用MVC结构实现，其包括作为视图部分的前台界面，用于组织显示模型并获取用户操作，使用异步请求与服务器端应用程序模块进行交互；还包括服务器端应用程序模块、业务逻辑模块、数据访问接口模块和实体模块，这些模块共同构成控制器部分，负责对来自视图的用户请求进行解释，并把这些请求映射成相应的行为，这些行为由模型负责实现；还包括持久化对象模块、对象关系映射框架以及数据库，这些模块共同组成模型部分，管理应用程序的数据以及用于访问控制和修改这些数据的业务过程。
全文摘要
提出了一种按照用户需求定制Web UI控件的方法和系统，属于Web技术领域，所述方法包括接收用户定制Web UI控件的请求以及用户定制的样式信息，将用户定制的样式信息按照样式文件规定的格式编写为样式文件，将该样式文件加载到定制页面中，并可响应用户的其他请求实现对可定制UI控件的保存、修改以及下载等等操作；所述系统包括定制系统、控件库等模块以承载所述方法的运行。本方法和系统解决了在Web应用系统中用户体验差异化、开发工作重复和浪费的技术问题。
文档编号G06F17/30GK102207872SQ20111015954
公开日2011年10月5日 申请日期2011年6月4日 优先权日2011年6月4日
发明者孙卫国, 李丹, 李丽, 王晓宏, 陈熠 申请人:中国移动通信集团内蒙古有限公司