[发明专利]用于实现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控件，与现有的使用JavaScript描述的控件相比，更为直观，并且能够与已有的可视化设计器进行集成，具有优秀的扩展性，将动态化的UI控件转换为静态的标签描述，能够方便地组合，从而形成丰富灵活的界面。

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