CN105068815A - 页面编辑器交互装置和方法 - Google Patents

Abstract

本发明提供了一种页面编辑器交互装置，包括：环境准备单元，用于创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；编辑器和java交互单元，用于基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。本发明还提供了一种页面编辑器交互方法。通过本发明的技术方案，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。

Description

页面编辑器交互装置和方法

技术领域

本发明涉及计算机技术领域，具体地，涉及一种页面编辑器交互装置和一种页面编辑器交互方法。

背景技术

在使用eclipse开发web应用时，很多前端开发会显得捉襟见肘，原因就是没有一款合适的图形化编辑界面。传统的eclipse图形化编辑的方案就是利用SWT组件以及GEF图形化编辑框架实现的，因为eclipse就是使用swt开发的，GEF是eclipse的一个开源工具项目，所以优点是可以和eclipse实现完美集成和交互，但是缺点也很明显，就是开发出来的页面具有太多的eclipse原生特质，无法实现所见即所得的开发和预览，参见图6。

然而浏览器端的web页面编辑器却有很多，随着html5和JavaScript技术的发展，在浏览器端实现可视化可拖拽的html编辑器变得很容易。如何将这些好用的web页面编辑器嵌入eclipse，并实现和eclipse的交互便成了急需要解决的问题。

要实现将网页版编辑器集成进eclipse就需要先实现浏览器的嵌入，然后设置URL即可在eclipse打开网页编辑器。目前比较常用的方法是利用SWT的Browser控件嵌入浏览器，然后使用COM与IE通信，使用XPCOM与Firefox通信。以Firefox为例，为了使用基于Mozilla的SWT浏览器部件，需要在操作系统中预先安装和注册XulRunner（一个单独的“Mozilla运行时”安装包），然后通过简单代码创建一个浏览器部件，通过代码监听浏览器部件的事件触发相应方法完成和eclipse的交互。

但是这种方法提供的交互功能比较单一，在处理频繁的交互或者eclipse端发出请求需要动态刷新浏览器内容时，会显得不是那么得心应手。XulRunner还会面临需要及时更新版本的问题，不然可能会出现开发的控件不能正常在内嵌浏览器中使用等。

因此，需要一种新的页面编辑器交互技术，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。

发明内容

本发明正是基于上述问题，提出了一种新的页面编辑器交互技术，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。

有鉴于此，本发明提出了一种页面编辑器交互装置，包括：环境准备单元，用于创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；编辑器和java交互单元，用于基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。在该技术方案中，可以使用ActiveX控件（OCX）作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度和版本稳定性均有很大的提升。

在上述技术方案中，优选地，该页面编辑器交互装置，还包括：页面处理单元，用于基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。在该技术方案中，可以有效地通过代码调用控件中的函数，达到和浏览器交互的目的。

在上述技术方案中，优选地，所述页面处理单元，具体包括：页面元素拖拽模块，用于通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；页面元素属性修改模块，用于点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；页面保存模块，用于触发编辑器的doSave事件，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。在该技术方案中，可以基于java与编辑器的交互，实时更新页面信息，人性化和通信直观性大大提高。

在上述技术方案中，优选地，所述环境准备单元，具体包括：控件生成模块，用于创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；视图扩展模块，用于扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；监听器创建模块，用于在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。在该技术方案中，可以编写ActiveX控件（OCX），以在和浏览器的交互中可靠实现相应信息的调用和交互，相应速率和可靠性均大大提高。

在上述技术方案中，优选地，所述编辑器和java交互单元，具体包括：从java到编辑器的通信模块，用于通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；从编辑器到java的通信模块，用于对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。在该技术方案中，可以基于预先创建的OCX控件，绑定浏览器的URL，在eclipse中调用OCX控件的方式，可以有效的通过代码调用控件中的函数，达到和浏览器交互的目的，通信可靠性大大提高。

根据本发明的又一个方面，还提出了一种页面编辑器交互方法，包括：步骤202：创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；步骤204：基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。在该技术方案中，可以使用ActiveX控件（OCX）作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度和版本稳定性均有很大的提升。

在上述技术方案中，优选地，该页面编辑器交互方法，还包括：步骤206：基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。在该技术方案中，可以有效地通过代码调用控件中的函数，达到和浏览器交互的目的。

在上述技术方案中，优选地，所述步骤206，具体包括：步骤502：通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；步骤504：点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；步骤506：触发编辑器的doSave事件，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。在该技术方案中，可以基于java与编辑器的交互，实时更新页面信息，人性化和通信直观性大大提高。

在上述技术方案中，优选地，所述步骤202，具体包括：步骤302：创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；步骤304：扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；步骤306：在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。在该技术方案中，可以编写ActiveX控件（OCX），以在和浏览器的交互中可靠实现相应信息的调用和交互，相应速率和可靠性均大大提高。

在上述技术方案中，优选地，所述步骤204，具体包括：骤402：通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；步骤404：对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。在该技术方案中，可以基于预先创建的OCX控件，绑定浏览器的URL，在eclipse中调用OCX控件的方式，可以有效的通过代码调用控件中的函数，达到和浏览器交互的目的，通信可靠性大大提高。

通过以上技术方案，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。

附图说明

图1示出了根据本发明的实施例的页面编辑器交互装置的框图；

图2示出了根据本发明的实施例的页面编辑器交互方法的流程图；

图3示出了根据本发明的实施例的环境准备单元的流程图；

图4示出了根据本发明的实施例的编辑器和java交互单元的流程图；

图5示出了根据本发明的实施例的页面处理单元的流程图；

图6示出了现有技术中ECLIPSEhtml页面编辑器的界面截图；

图7示出了常用Browser方式eclipse与web页面交互流程图；

图8示出了根据本发明的实施例的页面的格局的整体配置流程图；

图9示出了根据本发明的网页版web编辑器的界面截图；

图10示出了根据本发明的页面编辑器交互过程的详细流程图；

图11示出了根据本发明的从java到编辑器的通信流程图；

图12示出了根据本发明的从编辑器到java的通信流程图；

图13示出了根据本发明的实现页面元素拖拽的界面截图。

具体实施方式

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

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

图1示出了根据本发明的实施例的页面编辑器交互装置的框图。

如图1所示，根据本发明的实施例的页面编辑器交互装置100，包括：环境准备单元102，用于创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；编辑器和java交互单元104，用于基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。在该技术方案中，可以使用ActiveX控件（OCX）作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度和版本稳定性均有很大的提升。

在上述技术方案中，优选地，该页面编辑器交互装置100，还包括：页面处理单元106，用于基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。在该技术方案中，可以有效地通过代码调用控件中的函数，达到和浏览器交互的目的。

在上述技术方案中，优选地，页面处理单元106，具体包括：页面元素拖拽模块1062，用于通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；页面元素属性修改模块1064，用于点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；页面保存模块1066，用于触发编辑器的doSave事件，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。在该技术方案中，可以基于java与编辑器的交互，实时更新页面信息，人性化和通信直观性大大提高。

在上述技术方案中，优选地，环境准备单元102，具体包括：控件生成模块1022，用于创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；视图扩展模块1024，用于扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；监听器创建模块1026，用于在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。在该技术方案中，可以编写ActiveX控件（OCX），以在和浏览器的交互中可靠实现相应信息的调用和交互，相应速率和可靠性均大大提高。

在上述技术方案中，优选地，编辑器和java交互单元104，具体包括：从java到编辑器的通信模块1042，用于通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；从编辑器到java的通信模块1044，用于对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。在该技术方案中，可以基于预先创建的OCX控件，绑定浏览器的URL，在eclipse中调用OCX控件的方式，可以有效的通过代码调用控件中的函数，达到和浏览器交互的目的，通信可靠性大大提高。

图2示出了根据本发明的实施例的页面编辑器交互方法的流程图。

如图2所示，根据本发明的实施例的页面编辑器交互方法，包括：步骤202：创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；步骤204：基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。在该技术方案中，可以使用ActiveX控件（OCX）作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度和版本稳定性均有很大的提升。

在上述技术方案中，优选地，该页面编辑器交互方法，还包括：步骤206：基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。在该技术方案中，可以有效地通过代码调用控件中的函数，达到和浏览器交互的目的。

在上述技术方案中，优选地，如图5所示，步骤206，具体包括：步骤502：通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；步骤504：点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；步骤506：触发编辑器的doSave事件，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。在该技术方案中，可以基于java与编辑器的交互，实时更新页面信息，人性化和通信直观性大大提高。

在上述技术方案中，优选地，如图3所示，步骤202，具体包括：步骤302：创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；步骤304：扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；步骤306：在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。在该技术方案中，可以编写ActiveX控件（OCX），以在和浏览器的交互中可靠实现相应信息的调用和交互，相应速率和可靠性均大大提高。

在上述技术方案中，优选地，如图4所示，步骤204，具体包括：骤402：通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；步骤404：对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。在该技术方案中，可以基于预先创建的OCX控件，绑定浏览器的URL，在eclipse中调用OCX控件的方式，可以有效的通过代码调用控件中的函数，达到和浏览器交互的目的，通信可靠性大大提高。

本发明技术方案的基于ActiveX的可视化web页面编辑器交互方案，主要介绍一种利用ActiveX控件完成可视化web编辑页面嵌入，并与eclipse原生功能实现交互的插件开发方案。颠覆了传统的利用SWT，GEF开发图形化编辑器的方法，将使用html5，JQuery以及动态渲染技术的网页版编辑器完美整合进eclipse，实现真正的所见即所得的web页面开发。

本发明的技术方案通过编写ActiveX控件（OCX）绑定浏览器URL，然后在eclipse中调用OCX控件的方式，可以有效的通过代码调用控件中的函数，达到和浏览器交互的目的。

本发明的技术方案需要解决的问题主要有以下几种：

⑴浏览器运行时环境的安装、注册以及更新

常用的eclipse与浏览器交互方式使用SWT的Browser控件，通过安装XulRunner包，获得浏览器运行时环境。使用这种方式首先需要选择一个合适版本的XulRunner，因为不同版本对应Firefox版本也不同。对于很多自定义web组件来说，不同的Firefox版本的显示效果会不同甚至会出现不支持的情况。选择合适的XulRunner是个很头疼的问题。

⑵浏览器行为的精确控制

常用Browser方式eclipse与web页面交互流程图，参见图7：

首先创建一个浏览器部件（Browser），监听当前请求的响应行状态（StatusText），通过给不同的响应行状态附加代表需eclipse处理的事件字符串，在嵌入的浏览器中操作web页面编辑器，eclipse端可获得监听数据，处理后可得到事件方法。

这种方法交互方式比较单一，适合编辑器一体化程度比较高的情况，即web页面设计整体在编辑器中处理，只反馈给eclipse一些web组件的属性信息或者调用一些java方法完成编辑器的保存工作。

⑶浏览器性能比较

对于内嵌浏览器来说，我们的要求是：速度快，性能高，可扩展。

可供选择的不同内核的浏览器有IE、Firefox、Chrome等几种。首先说IE，IE的可扩展性较差，而且对HTML5的支持不够，速度也落后与其他两种。Firefox的速度落后与Chrome，捆绑了太多插件，而且版本差异太大，相对来说Chrome更稳定，高效，我们最终还是选用了Chrome。

为了解决现有技术存在的技术问题，本发明的技术方案提出了使用ActiveX控件实现eclipse与web页面编辑器交互的方案：

首先介绍一下我们要设计的web页面的业务模型：一个页面由多个组成部分，主要包括布局和控件：

控件：页面的基本组成部分，在应用系统中，控件是一种具有图形表示的对象，它可以显示在屏幕上并与用户实现交互。

布局：页面的格局的整体配置，可以放置其它控件的容器，参见图8。

我们的网页版web编辑器如图9所示。

基于以上的系统，我们的交互方案的关键步骤如下：

⑴使用Delphi创建一个ActiveX控件（UIEditor.ocx），实现setUrl，execScript，regEditorEvent等procedure。

⑵在插件工程中扩展一个Editor，使用OleFrame，OleControlSite，OleAutomation包装OCX控件，嵌入Editor。OCX是对象类别扩充组件【ObjectLinkingandEmbedding（对象连接与嵌入，简称OLE技术）ControleXtension】。

⑶扩展工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以JSON（JavaScriptObjectNotation，是一种轻量级的数据交换格式）形式保存在节点DATA中。扩展属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示。

⑷实现execScriptToEditor方法，在java中调用execScriptToEditor方法，将相应的JS方法传入OCX控件中的execScript方法中，通过execScript找到编辑器页面所在的JS脚本，实现从java到编辑器的通信。

⑸新建监听器实现OleListener接口，监听编辑器的动作，编辑器页面的js脚本中定义了相应动作的事件，并将需要传入的参数（方法名，方法参数等）转码后作为后缀加入事件argument。Java中通过获取监听事件，解码后得到需要执行的java方法，实现从编辑器到java的通信。

本发明技术方案的具体方案流程如图10所示。

下面我们来针对以上方案分成三个阶段进行具体分析：

阶段1：环境的准备

这里使用delphi2010设计一个用于嵌入chrome浏览器的ocx控件。使用Delphi的ActiveX向导可以方便的生成，其中使用到CEF库（Chrome浏览器控件）。通过定义chrome实例（TChromium对象），可以使用Chrome.browser很容易的获取到chrome浏览器。我们需要在控件中定义几个方法：setUrl（用于浏览器显示web页面编辑器），execScript（用于执行编辑器js中的方法），regEditorEvent用于注册CEF和JavaScript扩展。

阶段2：编辑器和java之间的交互过程。要从两方面来分析：

⑴从java到编辑器的通信

Java是指eclipse端，即eclipse插件工程包含的内容。这方面的内容包括控件的拖拽，属性的修改，事件的编辑，大纲的定位，页面的保存等等。为的是使用eclipse的常用操作可以控制编辑器的修改，从而提高集成的体验。这一步的核心就调用自定义OCX控件的execScript方法。Eclipse的常用操作都有其对应的方法，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入。参见图11。

⑵从编辑器到java的通信

编辑器端的操作包括控件位置的变化，页面元素的选中，页面样式的改变同样需要通知eclipse端，以便属性视图、大纲视图、事件编辑器等做出相应的显示。这一步的核心就是OleListener监听器。新建监听器BRListener实现OleListener接口。编辑器的JS脚本中对相关操作对应的方法进行处理，将需要调用的java方法的方法名以及参数作为字符串存入event的arguments数组中。当监听到的编辑器操作是，对获得的event进行处理，通过解码获得需要执行的方法和参数。通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。流程如图12所示。

阶段3：具体功能。我们从以下几个具体功能分析交互过程：

⑴实现页面元素拖拽

可拖拽的页面元素对象显示在web工具箱视图中，对象的内容以JSON数据的形式存在树节点中。通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本。再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素。界面如图13所示。

⑵实现页面元素属性修改

点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入event。Java中的OleListener监听器获取event后解析字符串获得showPropertySheet方法，在方法中进一步解析json字符串，获得各个属性值，将其显示在eclipse属性栏视图中。修改属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法（如setWidth，setFont等），就完成了对页面属性的修改。

⑶实现页面保存

点击工具栏中的保存按钮，触发Editor的doSave事件，因为在保存之前的所有操作都是存在session中，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。

与现有技术相比，本发明的技术方案至少可以达到的有益效果是：本发明的技术方案针对eclipse插件开发中嵌入网页版web页面编辑器，并实现和eclipse原生功能对接的需求，区别于以往常用的内嵌方式，本发明的技术方案使用ActiveX控件（OCX）作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度，版本稳定性，以及通信实现的难易程度上均较以前有了很大的提升。

以上结合附图详细说明了本发明的技术方案，考虑到相关技术中没有简便的、统一的针对复杂类型元数据交互的解决办法。现有的页面编辑器交互无法完成有复杂类型参与的页面编辑器交互过程。因此，本发明提出了一种页面编辑器交互装置和一种页面编辑器交互方法，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。

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

Claims (10)

1.一种页面编辑器交互装置，其特征在于，包括：

环境准备单元，用于创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；

编辑器和java交互单元，用于基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。

2.根据权利要求1所述的页面编辑器交互装置，其特征在于，该页面编辑器交互装置，还包括：

页面处理单元，用于基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。

3.根据权利要求2所述的页面编辑器交互装置，其特征在于，所述页面处理单元，具体包括：

页面元素拖拽模块，用于通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；

页面元素属性修改模块，用于点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；

页面保存模块，用于触发编辑器的doSave事件，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。

4.根据权利要求1-3中任一项所述的页面编辑器交互装置，其特征在于，所述环境准备单元，具体包括：

控件生成模块，用于创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；

视图扩展模块，用于扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；

监听器创建模块，用于在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。

5.根据权利要求1-3中任一项所述的页面编辑器交互装置，其特征在于，所述编辑器和java交互单元，具体包括：

从java到编辑器的通信模块，用于通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；

从编辑器到java的通信模块，用于对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。

6.一种页面编辑器交互方法，其特征在于，包括：

步骤202：创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；

步骤204：基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。

7.根据权利要求6所述的页面编辑器交互方法，其特征在于，该页面编辑器交互方法，还包括：

步骤206：基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。

8.根据权利要求7所述的页面编辑器交互方法，其特征在于，所述步骤206，具体包括：

步骤502：通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；

步骤504：点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；

步骤506：触发编辑器的doSave事件，保存时需将session中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。

9.根据权利要求6-8中任一项所述的页面编辑器交互方法，其特征在于，所述步骤202，具体包括：

步骤302：创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；

步骤304：扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；

步骤306：在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。

10.根据权利要求6-8中任一项所述的页面编辑器交互方法，其特征在于，所述步骤204，具体包括：

步骤402：通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；

步骤404：对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。