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

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

【技术实现步骤摘要】

本专利技术涉及页面设计
，具体而言，涉及一种用于实现HTML页面的可视化设计的系统和一种用于实现HTML页面的可视化设计的方法。
技术介绍
HTML技术是互联网中最重要的技术之一，HTML新一代规范HTML5移动互联网的发展得到了迅速的普及和推广。如今的HTML应用不再只是应用于WEB开发中，它在本地原生应用的开发也开始普及，并具有一些成功的案例。但HTML由于其灵活性，一直以来都欠缺好的可视化设计器。著名的可视化设计器DreamWeaver对静态的页面具有良好的设计效果,但是对利用JavaScript/CSS等技术进行动态渲染的页面，可视化设计效果一直不够理想。现在存在一些支持个别控件框架的HTML 可视化设计器如Maqetta,它支持完全基于WEB的可视化设计,主要是支持do jo的UI框架，但由于只能在WEB中使用，与传统的开发工具集成性差，可用性不强，而且Maqetta的整个逻辑都用JavaScript编写,性能、稳定性都不够好。因此，需要一种新的用于实现HTML页面的可视化设计的技术，可以很好地适应各种UI框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。
技术实现思路
本专利技术正是基于上述问题，提出了一种新的用于实现HTML页面的可视化设计的技术，可以很好地适应各种Π框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。有鉴于此，本专利技术提出了一种用于实现HTML页面的可视化设计的系统，包括工具箱创建单元，用于建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；控件选择单元，用于从所述工具箱中选择用于HTML页面设计的指定Π控件；动作执行单元，用于对所述指定Π控件执行设计动作；通知单元，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。在该技术方案中，通过使用纯粹的语义标签定义Π控件，与现有的使用JavaScript描述的控件相比，更为直观，并且能够与已有的可视化设计器进行集成，具有优秀的扩展性，将动态化的UI控件转换为静态的标签描述，能够方便地组合，从而形成丰富灵活的界面。在上述技术方案中，优选地,所述动作执行单元执行的所述设计动作包括将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述UI控件、删除所述UI控件、修改所述UI控件的属性、保存所述UI控件源代码。在上述任一技术方案中，优选地，所述通知单元包括标签添加子单元，用于将所述指定UI控件的语义标签添加至所述渲染引擎渲染的D0M(Document Object Model,文档对象模型)对象中。在上述任一技术方案中，优选地，还包括标签树创建单元，用于根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及页面处理单元，用于在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。在上述任一技术方案中，优选地，还包括兼容性设置单元，用于设置每个所述Π控件与其他Π控件的兼容性；以及兼容性判断单元，用于在所述动作执行单元对所述指定UI控件进行移动时，若目标位置存在其他Π控件，则判断所述指定Π控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。根据本专利技术的又一方面，还提出了一种用于实现HTML页面的可视化设计的方法，包括步骤202，建立工具箱，所述工具箱中包含基于语义标签定义的Π控件；步骤204，从所述工具箱中选择用于HTML页面设计的指定Π控件，并对所述指定Π控件执行设计动作，其中，若所述设计动作为可触发动作，则通知渲染引擎对所述指定Π控件进行渲染。在该技术方案中，通过使用纯粹的语义标签定义Π控件，与现有的使用JavaScript描述的控件相比，更为直观，并且能够与已有的可视化设计器进行集成，具有优秀的扩展性，将动态化的UI控件转换为静态的标签描述，能够方便地组合，从而形成丰富灵活的界面。在上述技术方案中，优选地,所述设计动作包括将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述Π控件、删除所述Π控件、修改所述UI控件的属性、保存所述UI控件源代码。在上述任一技术方案中，优选地，所述通知渲染引擎对所述指定UI控件进行渲染的步骤包括将所述指定UI控件的语义标签添加至所述渲染引擎渲染的DOM对象中。在上述任一技术方案中，优选地，还包括根据所有被添加至所述DOM对象中的语义标签之间的父子关系，创建树形结构的标签树；以及在完成对所述HTML页面的设计后进行保存时，保存所述标签树，并根据所述标签树对所述HTML页面进行刷新。在上述任一技术方案中，优选地，所述步骤204之前，还包括设置每个所述Π控件与其他UI控件的兼容性；以及所述步骤204还包括对所述指定UI控件进行移动时，若目标位置存在其他UI控件，则判断所述指定UI控件与所述目标位置上的UI控件的兼容性，若兼容，则允许移动，否则禁止移动。通过以上技术方案，可以很好地适应各种Π框架，具有良好的扩展性，并且能够通过与本地的开发工具集成，实现一个支持各种功能的集成开发环境。附图说明图I示出了根据本专利技术的实施例的用于实现HTML页面的可视化设计的系统的框图；图2示出了根据本专利技术的实施例的用于实现HTML页面的可视化设计的方法的流程图；图3示出了根据本专利技术的实施例的可视化设计器的结构框图；图4是图3所示的可视化设计器的设计界面的示意图5是图3所示的可视化设计器中的一种Π控件的示意图；图6是利用图3所示的可视化设计器的进行HTML页面设计的流程图。具体实施例方式为了能够更清楚地理解本专利技术的上述目的、特征和优点，下面结合附图和具体实施方式对本专利技术进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。在下面的描述中阐述了很多具体细节以便于充分理解本专利技术，但是，本专利技术还可以采用其他不同于在此描述的其他方式来实施，因此，本专利技术的保护范围并不受下面公开的具体实施例的限制。图I示出了根据本专利技术的实施例的用于实现HTML页面的可视化设计的系统的框 图。如图I所示，根据本专利技术的实施例的用于实现HTML页面的可视化设计的系统100，包括工具箱创建单元102，用于建立工具箱，所述工具箱中包含基于语义标签定义的Π控件；控件选择单元104，用于从所述工具箱中选择用于HTML页面设计的指定UI控件；动作执行单元106，用于对所述指定UI控件执行设计动作；通知单元108，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。在该技术方案中，通过使用纯粹的语义标签定义Π控件，与现有的使用JavaScript描述的控件相比，更为直观，并且能够与已有的可视化设计器进行集成，具有优秀的扩展性，将动态化的UI控件转换为静态的标签描述，能够方便地组合，从而形成丰富灵活的界面。在上述技术方案中，优选地,所述动作执行单元106执行的所述设计动作包括将所述UI控件从所述工具箱中拖拽至所述HTML页面的设计界面、在所述设计界面中拖拽所述UI控件、删除所述UI控件、修改所述UI控件的属性、保存所述U本文档来自技高网...

【技术保护点】
一种用于实现HTML页面的可视化设计的系统，其特征在于，包括：工具箱创建单元，用于建立工具箱，所述工具箱中包含基于语义标签定义的UI控件；控件选择单元，用于从所述工具箱中选择用于HTML页面设计的指定UI控件；动作执行单元，用于对所述指定UI控件执行设计动作；通知单元，用于在所述设计动作为可触发动作的情况下，通知渲染引擎对所述指定UI控件进行渲染。

【技术特征摘要】

【专利技术属性】
技术研发人员：何冠宇，
申请(专利权)人：用友软件股份有限公司，
类型：发明
国别省市：