CN106484393A - 一种可视化视图设计方法 - Google Patents

Abstract

本发明涉及一种可视化视图设计方法，该方法由设计服务器向用户的浏览器提供HTML5格式的设计视图系统，该系统包括工具栏、控件库、视图区、自由区、属性区，用户可以从控件库拖拽控件到视图区进行视图设计。本发明同时还提供了多用户协同情况下的可视化视图设计方法。

Description

一种可视化视图设计方法

【技术领域】

本发明属于计算机和Web应用设计领域，尤其涉及一种可视化的视图设计器的设计方法。

【背景技术】

近些年来，随着Web应用系统所处的环境越来越开放和难控，构成系统的组件也越来越异构和复杂。使得系统的维护与演化的成本不断增加。现有的软件开发方法并不能很好地满足Web应用软件的设计需求，逐渐显示出实用性和交互性的限制。如何在开放和动态环境下快速响应需求，构造柔性架构的Web应用，有效降低应用开发复杂性成为了新的技术挑战。

可视化WEB设计器提供了良好的解决方案。基于可复用组件库的可视化界面建模、代码生成及实时预览的快速开发工具，是提高Web应用系统开发效率与产品质量的一种重要手段，其关键技术是Web组件复用方法和可视化建模设计方法。实现Web组件复用的主要方法是Web系统架构与Web组件开发技术，通过Web系统架构设计把系统各模块组件化，将Web组件组装成一个完整的Web应用系统。传统的可视化设计器侧重于仿真界面原型设计，适用于用户需求确认，对应用开发工作帮助有限，特别是在应用开发的前后端联调测试时实用化程度较弱。且Web页面是根据具体需求由专业程序员开发设计和实现，非专业人员无法着手建立个性化网站。因此，现有的可视化设计包括如下缺陷：1)传统视图设计器大部分是基于胖客户端模式，不便于更新、部署与维护,且兼容性有限；2)传统视图设计器控件类型有限，不够丰富；3)传统视图设计器无法在线进行操作；4)代码的复用性差，模块间耦合度高。

【发明内容】

为了解决现有技术中的上述问题，本发明提出了一种可视化视图设计方法。通过利用HTML5技术构建基本工具模块和高级工具模块，结合模块化和对象化设计理念，实现简单易懂的网页设计系统。该系统具有类似于桌面应用软件的交互界面，操作简单。利用该系统开发网站不仅可以减少开发成本，提高Web页面的开发效率，而且能够让用户方便快捷地打造属于自己的网站，进而实现Web的个性化服务机制。

本发明采用的技术方案如下：

一种可视化视图设计方法，该方法包括如下步骤：

(1)用户使用浏览器连接设计服务器，设计服务器向浏览器返回初始登录页面；

(2)如果用户需要登录一个已有的设计项目，则在初始登录页面中输入项目代码和密码进行登录；如果用户需要新建一个新的设计项目，则在初始登录页面中注册并登录一个新的设计项目，包括注册该新设计项目的代码和密码。

(3)在用户登录后，设计服务器根据用户登录的项目代码，将相应设计项目的当前设计视图发送给所述浏览器；

(4)用户在当前设计视图的视图区中使用鼠标画出矩形区域作为锁定区域，浏览器将该矩形区域的位置信息上报给设计服务器，所述设计服务器检查该矩形区域是否与其他用户的锁定区域冲突。如果冲突，则向浏览器发送锁定失败消息，如果不冲突，则记录该矩形区域为该用户的锁定区域，向浏览器发送锁定成功消息；

(5)当用户在视图区选择了一个不在该用户锁定区域内的控件时，浏览器将该控件的标识符，以及控件选择消息发送给设计服务器，设计服务器检查该控件所在的区域是否与其他用户的锁定区域有冲突，如果冲突，则设计服务器向浏览器发送控件冲突消息，浏览器将该控件的属性区的所有属性设置为不可编辑状态；如果不冲突，则设计服务器锁定该控件，将该控件所在的区域设置为该用户的锁定区域，向浏览器发送控件锁定消息，用户即可编辑该控件；

(6)用户在其锁定区域内进行视图设计工作，但任何超出锁定区域的视图设计都会被拒绝；

(7)当用户不再需要某个锁定区域时，选择该锁定区域，并点击工具栏上的“取消锁定”按钮，浏览器将向设计服务器发送该锁定区域取消锁定的消息，设计服务器取消该锁定区域的锁定记录，并且浏览器将用户在该锁定区域的设计结果发送给设计服务器保存，设计服务器同时将该设计结果发送给在线的其他用户；

(8)对于步骤5中被用户锁定的控件，当用户不再选择该控件时，浏览器将向设计服务器发送该控件的解锁消息，设计服务器取消对该控件及其所在区域的锁定，并且浏览器将用户对该控件的编辑结果发送给设计服务器保存，设计服务器同时将该编辑结果发送给在线的其他用户；

(9)当用户退出或关闭浏览器时，浏览器将该用户的所有设计结果都发送给设计服务器保存，设计服务器取消该用户的所有锁定区域，并将该用户的所有设计结果发送给在线的其他用户。

进一步地，所述设计视图是基于HTML5格式的设计页面。

进一步地，所述设计视图包括工具栏、控件库、视图区、自由区和属性区。

进一步地，在所述视图区中显示其他用户的锁定区域。

进一步地，所述工具栏是提供设计视图的工具按钮的区域；所述控件库用于提供设计中可用的控件列表；所述视图区是用户进行视图设计的核心区域，用户可将控件拖拽到视图区中进行编辑，在视图区中设计Web应用的布局。所述自由区是用于临时存放控件的区域；所述属性区用于视图区中各个控件的属性编辑。

进一步地，所述控件库包括资源库、功能库、组件库和预设动作列表；其中

所述资源库包括系统中可用的视图属性组件；

所述功能库包括历史上已配置好的功能控件；

所述组件库包括所有基本控件；

所述预设动作列表多个包括带有完整事件和方法的事件按钮。

进一步地，所述视图区具有多个标签页，用户可在不同标签页中设计不同的Web页面或页面区域。

本发明的有益效果包括：可视化设计表单，表单设计器也在页面上工作，易于使用，控件齐全，展现层和数据层分离，开发人员无需了解底层代码，所见即所得，适合团队开发，程序大量复用，易于部署、更新和远程调试，稳定性高，不受技术人员流动的影响。

【附图说明】

此处所说明的附图是用来提供对本发明的进一步理解，构成本申请的一部分，但并不构成对本发明的不当限定，在附图中：

图1是本发明控件拖拽设计的基本流程。

【具体实施方式】

下面将结合附图以及具体实施例来详细说明本发明，其中的示意性实施例以及说明仅用来解释本发明，但并不作为对本发明的限定。

本发明提出了一种可视化Web页面设计系统，通过利用HTML5技术构建基本工具模块和高级工具模块，结合模块化和对象化设计理念，实现简单易懂的网页设计系统。该系统具有类似于桌面应用软件的交互界面，操作简单。利用该系统开发网站不仅可以减少开发成本，提高Web页面的开发效率，而且能够让用户方便快捷地打造属于自己的网站，进而实现Web的个性化服务机制

可视化的Web页面设计系统利用HTML5技术的优点，实现了把浏览器中的一个具体页面作为网站设计的开发环境，它是基于B/S结构的可视化、软件化的Web页面设计系统，具有友好的人机交互界面。只要用户按着要求使用该系统并上传网站内容，就可以建立自己的个性化网站。根据对象模块化设计原理，将Web页面设计元素整合为各类通用工具模块，并实现工具模块的综合管理。每个工具模块都是一个独立的对象，它们都具有配制参数设置窗口、属性设置窗口和内容填充窗口，通过设置窗口参数可以产生丰富多彩的、形式多样的模块。该系统开发的网站具有个性化特色，同时具备动态管理功能；改变了传统的页面人机交互方式，优化了界面设计，提高了各项操作效率，带来全新的用户体验。

本发明具有类似桌面应用软件一样的操作界面，操作方法简单方便，用户只需使用鼠标就可以完成业务视图的建设。与传统Web设计方法相比，该系统不需要专业的Web程序设计知识便可以完成满足用户自己需要的个性化页面。同时，通过简单的鼠标操作和可视化交互界面参数的设定，便可建立具有不同特点的Web页面，进而实现快捷有效的建站模式。

为了实现本发明的可视化视图设计，本发明提供了一个设计服务器，该设计服务器用于提供本发明可视化设计的HTML5页面，并协调多个用户之间的设计过程。

每个用户可使用其客户端计算机上的浏览器连接所述设计服务器，并在该浏览器中展现设计服务器提供的HTML5的Web网页，作为本发明的可视化的视图设计系统。

根据本发明的一个实施例，所述基于HTML5的视图设计系统的页面可以分为下述模块：工具栏、控件库、自由区、视图区和属性区。

所述工具栏是提供设计视图的工具按钮的区域，可视化视图设计中所需要的一些系统级别的工具按钮可以放在工具栏中，例如：保存、撤销、退出等等常见的软件系统功能。本发明不对工具栏中具体的工具按钮做出限定，本领域技术人员可以根据具体需求自行设计所需要的工具栏按钮。

所述控件库包括资源库、功能库、组件库、预设动作。

所述资源库包括系统中可使用的视图属性组件，即可配置的属性控件。

所述功能库包括了历史上已配置好的功能控件，以用于嵌套功能。

所述组件库包括了本发明提供所有基本控件，例如：Text(不可编辑文本框)、textfield(文本框)、Hidden(隐藏域)、Select(下拉框)、Number(数字框)、Button(按钮)、TextArea(文本域)、Label(标签域)、DateTime(时间框)、Date(日期)、ButtonBox(按钮组)、ResetButton(重置按钮)、File(文件框)、Image(图片框)、Div(div)、Frame(frame)、LinkedSelect(联动下拉框)、SelectField(可编辑下拉框)、MultiSelect(多选下拉框)、Suggestion(快速选择框)、GridSelect(表格下拉框框)、TreeSelect(树下拉框)、ChooseDataGrid(表格选择框)、ChooseTree(树选择框)、UserSelect(人员下拉框)、OrgSelect(组织下拉框)、Radio(单选框)、RadioGroup(单选框组)、CheckBox(复选框)、CheckBoxGroup(复选框组)、Tree(树)、Chart(图表)CKEditor(富文本框)、Custom(自定义)、Fun(功能)。

所述预设动作包括本发明提供的、带有完整事件和方法的事件按钮。如执行状态(更改记录状态)、撤销状态(撤销修改记录状态)、返回(返回上一级)、保存(提交单据数据到服务器)、新增(弹出新增单据记录窗口)、删除(删除列表记录并提交到服务器)、添加(操作可编辑列表时，添加列表记录。不提交数据到服务器)、移除(操作可编辑列表时，删除列表记录。不提交数据到服务器)、重置(重置单据数据)。编辑(修改列表数据)、查询(列表数据加载)、查看(查看列表数据详情)、关闭(关闭窗口)、自定义事件(调用指定方法的按钮事件)、任务事件、组合事件。

除了上述库以外，本发明的在设计页面上提供了三个用于视图设计的区域，包括视图区、自由区和属性区。

所述视图区是本发明可视化视图设计系统的核心区域，用户可以将资源库、功能库、组件库和预设动作中的控件拖拽到视图区中。参见附图1，其示出了本发明控件拖拽设计的一个基本流程：用户用鼠标在系统页面上所显示的资源库、功能库、组件库和预设动作中选中需要的控件；按住鼠标左键进行拖拽，将该控件拖拽到视图区中需要的位置，然后松开鼠标左键，完成拖拽，从而该控件就放置在了视图区的指定位置。

所述视图区可以有多个标签(tab)页，用户可以在不同标签页中设计不同的Web页面或页面区域。

所述自由区是一个临时存放控件的区域。通过该自由区可以完成多种设计功能，例如：当视图区具有多个标签页时，用户可以从一个标签页将控件拖放到自由区，再将视图区切换到另一个标签页，然后将自由区的控件拖拽到所述另一个标签页中，如此可以完成跨标签页的操作。另外，也可以将视图设计过程中，临时不用的控件拖拽到自由区中存放。

所述属性区用于视图区中各个控件的属性编辑。用户在视图区中选择一个需要编辑的控件，所述属性区将自动展现该控件的所有属性，从而用户可以在该属性区编辑该控件的属性。属性的类型可以包括以下五种：

基本属性：可编辑控件的一些基本信息，如名称、默认值、组件类型、资源类型、资源等信息；

高级属性：可编辑控件的显示格式化器、错误提示信息等；

验证属性：可编辑控件的验证方式以及长度等信息。本发明提供一些通用的验证信息，如手机号码、邮箱等；

样式属性：设置控件的宽高、对齐方式以及间距；

操作属性：设置控件的“自定义参数”和“自定义脚本”等配置；

操作结果属性：配置控件执行自定义脚本后的回调方法以及提示信息等。

以上内容说明了本发明可视化视图设计的基本过程，用户通过从控件库中拖拽控件到视图区，构成视图的显示布局，通过控件属性的编辑，设计视图中控件的显示效果，以及控件的相关脚本和程序，从而完成最终的Web应用。

根据本发明的另一个实施例，本发明进一步提供了多个用户协同地设计方法，由于本发明是通过设计服务器提供的HTML5页面来进行在线设计，这给了多个用户共同的在线设计提供了一个基础。但是，多个用户在协同设计时可能会出现冲突，例如不同用户如果在设计同一个控件的属性，就可能会出现冲突。因此本发明解决的另一个问题就是多用户协同设计的冲突问题。

在可视化视图设计中的冲突可能有两种情况：第一种是对同一个控件的设计冲突；第二种是对同一个区域的设计冲突。因此本发明针对这两种情况都进行了考虑。下面是基于多用户协同设计的本发明可视化视图设计方法的的步骤：

(1)用户使用浏览器连接设计服务器，设计服务器向浏览器返回初始登录页面。

(2)如果用户需要登录一个已有的设计项目，则在初始登录页面中输入项目代码和密码进行登录；如果用户需要新建一个新的设计项目，也可以在初始登录页面中注册一个新的设计项目，即通过输入新项目的代码和密码进行注册，该用户或其他用户就可以在以后通过该新项目的代码和密码进行登录。

(3)在用户登录后，设计服务器根据用户登录的项目代码，将相应设计项目的当前设计视图发送给所述浏览器。

所述设计视图就是前述的可视化视图设计系统，其是基于HTML5格式的设计页面，并包括了工具栏、控件库、视图区、自由区和属性区。每个设计项目都具有其各自的进度，因此其当前设计视图里就包括了目前已经设计好的控件及其属性。

在获得当前设计视图的HTML5设计页面后，用户就可以基于当前设计视图进行Web应用的设计，浏览器将设计结果上传到设计服务器进行保存。但是，考虑到多用户协同，用户的设计需要使用后续的步骤。

(4)用户在视图区中使用鼠标画出矩形区域作为锁定区域，浏览器将该矩形区域的位置信息上报给设计服务器，所述设计服务器检查该矩形区域是否与其他用户的锁定区域冲突，如果冲突，则向浏览器发送锁定失败消息，如果不冲突，则记录该矩形区域为该用户的锁定区域，向浏览器发送锁定成功消息。

为了方便用户识别，其他用户的锁定区域可以在视图区中以适当地形式进行显示，例如可以用红框进行标识。

当用户设置锁定区域后，该锁定区域就为该用户所独占，该用户可以在锁定区域内进行设计工作，而不用担心与其他用户的工作冲突。

(5)当用户在视图区选择了一个不在该用户锁定区域内的控件时，浏览器将该控件的标识符，以及控件选择消息发送给设计服务器，设计服务器检查该控件所在的区域是否与其他用户的锁定区域有冲突，如果冲突，则设计服务器向浏览器发送控件冲突消息，浏览器将该控件的属性区的所有属性设置为不可编辑状态；如果不冲突，则设计服务器锁定该控件，将该控件所在的区域设置为该用户的锁定区域，向浏览器发送控件锁定消息，用户即可随意编辑该控件。

(6)用户在其锁定区域内进行视图设计工作，任何超出锁定区域的视图设计都会被拒绝。

(7)当用户不再需要某个锁定区域时，其可以选择该锁定区域，并点击工具栏上的“取消锁定”按钮，浏览器将向设计服务器发送该锁定区域取消锁定的消息，设计服务器取消该锁定区域的锁定记录，并且浏览器将用户在该锁定区域的设计结果发送给设计服务器保存，设计服务器同时将该设计结果发送给在线的其他用户。

(8)对于步骤5中被用户锁定的控件，当用户不再选择该控件时，浏览器将向设计服务器发送该控件的解锁消息，设计服务器取消对该控件及其所在区域的锁定，并且浏览器将用户对该控件的编辑结果发送给设计服务器保存，设计服务器同时将该编辑结果发送给在线的其他用户。

(9)当用户退出或关闭浏览器时，浏览器将该用户的所有设计结果都发送给设计服务器保存，设计服务器取消该用户的所有锁定区域，再将该用户的所有设计结果发送给在线的其他用户。

以上所述仅是本发明的较佳实施方式，故凡依本发明专利申请范围所述的构造、特征及原理所做的等效变化或修饰，均包括于本发明专利申请范围内。

Claims (7)

1.一种可视化视图设计方法，其特征在于，该方法包括如下步骤：

(1)用户使用浏览器连接设计服务器，设计服务器向浏览器返回初始登录页面；

(2)如果用户需要登录一个已有的设计项目，则在初始登录页面中输入项目代码和密码进行登录；如果用户需要新建一个新的设计项目，则在初始登录页面中注册并登录一个新的设计项目，包括注册该新设计项目的代码和密码。

(3)在用户登录后，设计服务器根据用户登录的项目代码，将相应设计项目的当前设计视图发送给所述浏览器；

(4)用户在当前设计视图的视图区中使用鼠标画出矩形区域作为锁定区域，浏览器将该矩形区域的位置信息上报给设计服务器，所述设计服务器检查该矩形区域是否与其他用户的锁定区域冲突。如果冲突，则向浏览器发送锁定失败消息，如果不冲突，则记录该矩形区域为该用户的锁定区域，向浏览器发送锁定成功消息；

(5)当用户在视图区选择了一个不在该用户锁定区域内的控件时，浏览器将该控件的标识符，以及控件选择消息发送给设计服务器，设计服务器检查该控件所在的区域是否与其他用户的锁定区域有冲突，如果冲突，则设计服务器向浏览器发送控件冲突消息，浏览器将该控件的属性区的所有属性设置为不可编辑状态；如果不冲突，则设计服务器锁定该控件，将该控件所在的区域设置为该用户的锁定区域，向浏览器发送控件锁定消息，用户即可编辑该控件；

(6)用户在其锁定区域内进行视图设计工作，但任何超出锁定区域的视图设计都会被拒绝；

(7)当用户不再需要某个锁定区域时，选择该锁定区域，并点击工具栏上的“取消锁定”按钮，浏览器将向设计服务器发送该锁定区域取消锁定的消息，设计服务器取消该锁定区域的锁定记录，并且浏览器将用户在该锁定区域的设计结果发送给设计服务器保存，设计服务器同时将该设计结果发送给在线的其他用户；

(8)对于步骤5中被用户锁定的控件，当用户不再选择该控件时，浏览器将向设计服务器发送该控件的解锁消息，设计服务器取消对该控件及其所在区域的锁定，并且浏览器将用户对该控件的编辑结果发送给设计服务器保存，设计服务器同时将该编辑结果发送给在线的其他用户；

(9)当用户退出或关闭浏览器时，浏览器将该用户的所有设计结果都发送给设计服务器保存，设计服务器取消该用户的所有锁定区域，并将该用户的所有设计结果发送给在线的其他用户。

2.根据权利要求1所述的可视化视图设计方法，其特征在于，所述设计视图是基于HTML5格式的设计页面。

3.根据权利要求1-2所述的可视化视图设计方法，其特征在于，所述设计视图包括工具栏、控件库、视图区、自由区和属性区。

4.根据权利要求3所述的可视化视图设计方法，其特征在于，在所述视图区中显示其他用户的锁定区域。

5.根据权利要求3所述的可视化视图设计方法，其特征在于，

所述工具栏是提供设计视图的工具按钮的区域；

所述控件库用于提供设计中可用的控件列表；

所述视图区是用户进行视图设计的核心区域，用户可将控件拖拽到视图区中进行编辑，在视图区中设计Web应用的布局。

所述自由区是用于临时存放控件的区域；

所述属性区用于视图区中各个控件的属性编辑。

6.根据权利要求5所述的可视化视图设计方法，其特征在于，所述控件库包括资源库、功能库、组件库和预设动作列表；其中

所述资源库包括系统中可用的视图属性组件；

所述功能库包括历史上已配置好的功能控件；

所述组件库包括所有基本控件；

所述预设动作列表多个包括带有完整事件和方法的事件按钮。

7.根据权利要求5所述的可视化视图设计方法，其特征在于，所述视图区具有多个标签页，用户可在不同标签页中设计不同的Web页面或页面区域。