CN102880708A

CN102880708A - 用于实现html页面的可视化设计的系统和方法

Info

Publication number: CN102880708A
Application number: CN2012103713618A
Authority: CN
Inventors: 何冠宇
Original assignee: Yonyou Software Co Ltd
Current assignee: Yonyou Software Co Ltd
Priority date: 2012-09-28
Filing date: 2012-09-28
Publication date: 2013-01-16
Anticipated expiration: 2032-09-28
Also published as: CN102880708B

Abstract

本发明提供了一种用于实现HTML页面的可视化设计的系统，包括：工具箱创建单元，用于建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；控件选择单元，用于从所述工具箱中选择用于HTML页面设计的指定UI控件；动作执行单元，用于对所述指定UI控件执行设计动作；通知单元，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。本发明还提出了一种用于实现HTML页面的可视化设计的方法。通过本发明的技术方案，可以很好地适应各种UI框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。

Description

用于实现HTML页面的可视化设计的系统和方法

技术领域

本发明涉及页面设计技术领域，具体而言，涉及一种用于实现HTML页面的可视化设计的系统和一种用于实现HTML页面的可视化设计的方法。

背景技术

HTML技术是互联网中最重要的技术之一，HTML新一代规范HTML5移动互联网的发展得到了迅速的普及和推广。如今的HTML应用不再只是应用于WEB开发中，它在本地原生应用的开发也开始普及，并具有一些成功的案例。

但HTML由于其灵活性，一直以来都欠缺好的可视化设计器。著名的可视化设计器DreamWeaver对静态的页面具有良好的设计效果，但是对利用JavaScript/CSS等技术进行动态渲染的页面，可视化设计效果一直不够理想。现在存在一些支持个别控件框架的HTML可视化设计器如Maqetta，它支持完全基于WEB的可视化设计，主要是支持dojo的UI框架，但由于只能在WEB中使用，与传统的开发工具集成性差，可用性不强，而且Maqetta的整个逻辑都用JavaScript编写，性能、稳定性都不够好。

因此，需要一种新的用于实现HTML页面的可视化设计的技术，可以很好地适应各种UI框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。

发明内容

本发明正是基于上述问题，提出了一种新的用于实现HTML页面的可视化设计的技术，可以很好地适应各种UI框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。

有鉴于此，本发明提出了一种用于实现HTML页面的可视化设计的系统，包括：工具箱创建单元，用于建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；控件选择单元，用于从所述工具箱中选择用于HTML页面设计的指定UI控件；动作执行单元，用于对所述指定UI控件执行设计动作；通知单元，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。

在该技术方案中，通过使用纯粹的语义标签定义UI控件，与现有的使用JavaScript描述的控件相比，更为直观，并且能够与已有的可视化设计器进行集成，具有优秀的扩展性，将动态化的UI控件转换为静态的标签描述，能够方便地组合，从而形成丰富灵活的界面。

在上述技术方案中，优选地，所述动作执行单元执行的所述设计动作包括：将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述UI控件、删除所述UI控件、修改所述UI控件的属性、保存所述UI控件源代码。

在上述任一技术方案中，优选地，所述通知单元包括：标签添加子单元，用于将所述指定UI控件的语义标签添加至所述渲染引擎渲染的DOM（Document Object Model，文档对象模型）对象中。

在上述任一技术方案中，优选地，还包括：标签树创建单元，用于根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及页面处理单元，用于在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。

在上述任一技术方案中，优选地，还包括：兼容性设置单元，用于设置每个所述UI控件与其他UI控件的兼容性；以及兼容性判断单元，用于在所述动作执行单元对所述指定UI控件进行移动时，若目标位置存在其他UI控件，则判断所述指定UI控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。

根据本发明的又一方面，还提出了一种用于实现HTML页面的可视化设计的方法，包括：步骤202，建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；步骤204，从所述工具箱中选择用于HTML页面设计的指定UI控件，并对所述指定UI控件执行设计动作，其中，若所述设计动作为可触发动作，则通知渲染引擎对所述指定UI控件进行渲染。

在上述技术方案中，优选地，所述设计动作包括：将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述UI控件、删除所述UI控件、修改所述UI控件的属性、保存所述UI控件源代码。

在上述任一技术方案中，优选地，所述通知渲染引擎对所述指定UI控件进行渲染的步骤包括：将所述指定UI控件的语义标签添加至所述渲染引擎渲染的DOM对象中。

在上述任一技术方案中，优选地，还包括：根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。

在上述任一技术方案中，优选地，所述步骤204之前，还包括：设置每个所述UI控件与其他UI控件的兼容性；以及所述步骤204还包括：对所述指定UI控件进行移动时，若目标位置存在其他UI控件，则判断所述指定UI控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。

通过以上技术方案，可以很好地适应各种UI框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。

附图说明

图1示出了根据本发明的实施例的用于实现HTML页面的可视化设计的系统的框图；

图2示出了根据本发明的实施例的用于实现HTML页面的可视化设计的方法的流程图；

图3示出了根据本发明的实施例的可视化设计器的结构框图；

图4是图3所示的可视化设计器的设计界面的示意图；

图5是图3所示的可视化设计器中的一种UI控件的示意图；

图6是利用图3所示的可视化设计器的进行HTML页面设计的流程图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

图1示出了根据本发明的实施例的用于实现HTML页面的可视化设计的系统的框图。

如图1所示，根据本发明的实施例的用于实现HTML页面的可视化设计的系统100，包括：工具箱创建单元102，用于建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；控件选择单元104，用于从所述工具箱中选择用于HTML页面设计的指定UI控件；动作执行单元106，用于对所述指定UI控件执行设计动作；通知单元108，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。

在上述技术方案中，优选地，所述动作执行单元106执行的所述设计动作包括：将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述UI控件、删除所述UI控件、修改所述UI控件的属性、保存所述UI控件源代码。

在上述任一技术方案中，优选地，所述通知单元108包括：标签添加子单元1080，用于将所述指定UI控件的语义标签添加至所述渲染引擎渲染的DOM（Document Object Model，文档对象模型）对象中。

在上述任一技术方案中，优选地，还包括：标签树创建单元110，用于根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及页面处理单元112，用于在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。

在上述任一技术方案中，优选地，还包括：兼容性设置单元114，用于设置每个所述UI控件与其他UI控件的兼容性；以及兼容性判断单元116，用于在所述动作执行单元对所述指定UI控件进行移动时，若目标位置存在其他UI控件，则判断所述指定UI控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。

图2示出了根据本发明的实施例的用于实现HTML页面的可视化设计的方法的流程图。

如图2所示，根据本发明的实施例的用于实现HTML页面的可视化设计的方法，包括：步骤202，建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；步骤204，从所述工具箱中选择用于HTML页面设计的指定UI控件，并对所述指定UI控件执行设计动作，其中，若所述设计动作为可触发动作，则通知渲染引擎对所述指定UI控件进行渲染。

图3示出了根据本发明的实施例的可视化设计器的结构框图。

如图3所示，根据本发明的实施例的可视化设计器包括工具箱、设计引擎、渲染引擎，其中，采用纯粹的基于语义标签的UI（用户界面）控件，实现了一个模板化的工具箱。封装和定制的渲染引擎可用于可视化展现，而工具箱中的基于语义标签的UI控件，可以通过拖拽的方式，与设计引擎交换，为页面开发人员提供了一个所见即所得的可视化设计器。

图4是图3所示的可视化设计器的设计界面的示意图。由于本发明采用基于语义标签的UI控件，这与大部分的UI框架不同，传统的UI框架提供的UI控件都以JavaScript的方式提供。而为了适应传统的UI框架，因而提供了一个基于语义标签的UI控件封装，例如对如图5所示的滚动式的日期控件，一般的使用方式是采用JavaScript的方式，例如：

这种方式非常灵活，但是不够直观，不易于集成到已有的可视化设计器中，而本发明通过基于语义标签的方式重新定义该控件：

基于语义标签的方式描述，把动态化的UI控件转化为静态的标签描述，屏蔽了JavaScript的复杂性，它符合静态的HTML使用习惯，是一种声明式的描述，能够方便的组合，形成丰富灵活的界面。

有了基于语义标签的控件，本发明使用模板化的工具箱对所有需要可视化设计的控件进行了模板化的描述。工具箱由一系列的工具构成，工具主要是包装了语义标签的UI控件，以模板的方式表示。

通过选定工具箱中的工具，以拖拽的方式与设计引擎交互，实现UI设计的各种动作。UI设计的动作主要包括：从工具箱到浏览器的拖拽设计动作、UI控件在浏览器内部的拖拽移动动作、删除UI控件、修改控件属性、保存源代码等。这些设计动作由设计引擎负责。设计引擎采用本地语言编写，而不是JavaScript，其中的一个实现，在Eclipse集成开发环境中采用Java语言编写，非常方便的利用了Eclipse的集成开发能力，如编辑器、视图、工具面板、源代码编辑等等。采用本地语言实现的设计引擎稳定性、效率、工程质量都得到大幅提高，还充分利用了现有集成开发环境的优势。

渲染引擎是浏览器功能的核心，渲染引擎渲染设计引擎设计的页面，流行的渲染引擎有Webkit（chrome浏览器和Safari浏览器使用）、Gecko（FireFox使用）、Trident(IE使用)。通过封装任一渲染引擎，都可以达到所见即所得的效果。一个实现上，本发明采用了WebKit作为渲染引擎。渲染引擎一般在浏览器对HTML页面的DOM对象装载完毕时，执行JavaScript进行控件的动态渲染。

设计引擎的设计动作执行时，把工具箱中选定的工具定义的语义标签模板添加到渲染引擎渲染的DOM对象中。经常发生的情况是，页面中插入了一个控件，但是由于没有触发控件动态的渲染的javascript脚本，使得语义标签控件在页面中没有产生所需要的渲染效果，从而失去了所见即所得的特性。为了解决这一问题，设计引擎和工具箱按照下面的约定工作：

1.工具箱中的每个工具包括下面的内容：

语义标签模板,如<input type='submit'value='submitBtn'/>。

工具属性：如type,value，用来通过动态的属性调整控制控件的展现内容和形态。

设计时动作：描述设计交互时，可以触发的动作，例如通知渲染引擎渲染特定的控件。设计时动作，采用动态语言进行描述，如采用javascript、ruby，动态语言的支持，使设计器的工具具有良好的可扩展性。本发明的一个实现采用了javascript描述设计时动作，可在拖拽设计时，根据不同的UI控件和多个UI控件之间的组合关系触发不同的渲染动作。

兼容性设置:描述UI控件之间的兼容性，包括是否原子控件、是否容器型控件，允许放置的控件清单。原子控件不允许在其中放置其他控件，如上述的滚动日期控件；容器型控件可支持在其中放置其他控件，但有些容器型控件只支持放置特定类型的UI控件，如工具栏只允许放工具条控件。

2.设计引擎，在设计动作发生时，检查当前工具关联的设计时动作，如果存在与该设计动作匹配的设计时动作，那么会触发执行该动作。

3.设计引擎在拖拽UI控件的过程中，对拖拽的焦点和当前工具对应的控件进行按照兼容性设置匹配性选择，如果当前工具对应的控件在焦点所在的控件的允许放置清单中，则允许在其上放置控件，否则就拒绝放置。

4.设计引擎为每个渲染之前的标签都会分配一个唯一的标识符，设计引擎通过该标识识别标签，并根据标签的父子关系建立树形结构的标签树。

5.设计引擎在发生保存动作时，会把整个标签树保存，并强制刷新整个页面，这样可以清理前面一些设计动作遗留下来的资源。

下面以拖拽设计为例，结合图6来描述设计引擎、工具箱工具、渲染引擎的工作过程：

步骤602，页面设计人员选择工具箱中的工具（即UI控件）。

步骤604，通过拖拽的方式，将工具拖拽到可视化设计器。

步骤606，可视化设计器的设计引擎检测到该拖拽动作，并向渲染引擎发送消息，请求获取当前鼠标焦点所在的HTML标签信息，渲染引擎给设计引擎返回焦点所在的UI控件的HTML标签信息。

步骤608，设计引擎根据标签信息，对照已有的设计内容形成的标签树结构信息，计算出合适的拖拽焦点控件。

步骤610，判断是否允许放置当前工具，如果焦点所在的UI控件是原子控件就不允许放置；如果是容器型控件，设计引擎将取出该控件的允许的控件清单，如果当前工具所选择的控件在清单中，则允许放置。具体地，若允许放置，则进入步骤616，否则进入步骤612。

步骤612，提示拒绝，则拖拽的工具必须移动到其他控件上。

步骤614，判断是否发生继续拖拽，若发生，则返回步骤606，否则结束流程。

步骤616，提示可以接收该工具。

步骤618，判断是否放置该工具，若是，则进入步骤620，否则结束。

步骤620，放置发生后，设计引擎更新设计内容，形成新的标签树，并发送消息给渲染引擎，动态的更新其渲染的DOM树。

步骤622，检查放置的工具是否具有放置时的可触发动作，如果有，则立即触发动作。

步骤624，渲染引擎因此成功地渲染了UI控件（工具）。

以上结合附图详细说明了本发明的技术方案，本发明提供了一种用于实现HTML页面的可视化设计的系统和一种用于实现HTML页面的可视化设计的方法，可以很好地适应各种UI框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种用于实现HTML页面的可视化设计的系统，其特征在于，包括：

工具箱创建单元，用于建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；

控件选择单元，用于从所述工具箱中选择用于HTML页面设计的指定UI控件；

动作执行单元，用于对所述指定UI控件执行设计动作；

通知单元，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。

2.根据权利要求1所述的用于实现HTML页面的可视化设计的系统，其特征在于，所述动作执行单元执行的所述设计动作包括：

将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述UI控件、删除所述UI控件、修改所述UI控件的属性、保存所述UI控件源代码。

3.根据权利要求1所述的用于实现HTML页面的可视化设计的系统，其特征在于，所述通知单元包括：

标签添加子单元，用于将所述指定UI控件的语义标签添加至所述渲染引擎渲染的DOM对象中。

4.根据权利要求3所述的用于实现HTML页面的可视化设计的系统，其特征在于，还包括：

标签树创建单元，用于根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及

页面处理单元，用于在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。

5.根据权利要求1至4中任一项所述的用于实现HTML页面的可视化设计的系统，其特征在于，还包括：

兼容性设置单元，用于设置每个所述UI控件与其他UI控件的兼容性；以及

兼容性判断单元，用于在所述动作执行单元对所述指定UI控件进行移动时，若目标位置存在其他UI控件，则判断所述指定UI控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。

6.一种用于实现HTML页面的可视化设计的方法，其特征在于，包括：

步骤202，建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；

步骤204，从所述工具箱中选择用于HTML页面设计的指定UI控件，并对所述指定UI控件执行设计动作，其中，若所述设计动作为可触发动作，则通知渲染引擎对所述指定UI控件进行渲染。

7.根据权利要求6所述的用于实现HTML页面的可视化设计的方法，其特征在于，所述设计动作包括：

8.根据权利要求6所述的用于实现HTML页面的可视化设计的方法，其特征在于，所述通知渲染引擎对所述指定UI控件进行渲染的步骤包括：

将所述指定UI控件的语义标签添加至所述渲染引擎渲染的DOM对象中。

9.根据权利要求8所述的用于实现HTML页面的可视化设计的方法，其特征在于，还包括：

根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及

在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。

10.根据权利要求6至9中任一项所述的用于实现HTML页面的可视化设计的方法，其特征在于，所述步骤204之前，还包括：

设置每个所述UI控件与其他UI控件的兼容性；以及

所述步骤204还包括：

对所述指定UI控件进行移动时，若目标位置存在其他UI控件，则判断所述指定UI控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。