页面编辑器交互装置和方法
【专利说明】页面编辑器交互装置和方法
[0001]
技术领域
[0002]本发明涉及计算机技术领域，具体地，涉及一种页面编辑器交互装置和一种页面编辑器交互方法。
[0003]
【背景技术】
[0004]在使用eclipse开发web应用时，很多前端开发会显得捉襟见肘，原因就是没有一款合适的图形化编辑界面。传统的eclipse图形化编辑的方案就是利用SWT组件以及GEF图形化编辑框架实现的，因为eclipse就是使用swt开发的，GEF是eclipse的一个开源工具项目，所以优点是可以和eclipse实现完美集成和交互，但是缺点也很明显，就是开发出来的页面具有太多的eclipse原生特质，无法实现所见即所得的开发和预览，参见图6。
[0005]然而浏览器端的web页面编辑器却有很多，随着html5和JavaScript技术的发展，在浏览器端实现可视化可拖拽的html编辑器变得很容易。如何将这些好用的web页面编辑器嵌入eclipse，并实现和eclipse的交互便成了急需要解决的问题。
[0006]要实现将网页版编辑器集成进eclipse就需要先实现浏览器的嵌入，然后设置URL即可在eclipse打开网页编辑器。目前比较常用的方法是利用SWT的Browser控件嵌入浏览器，然后使用COM与IE通信，使用XPCOM与Firefox通信。以Firefox为例，为了使用基于Mozilla的SWT浏览器部件，需要在操作系统中预先安装和注册XulRunner (—个单独的“Mozilla运行时”安装包)，然后通过简单代码创建一个浏览器部件，通过代码监听浏览器部件的事件触发相应方法完成和eclipse的交互。
[0007]但是这种方法提供的交互功能比较单一，在处理频繁的交互或者eclipse端发出请求需要动态刷新浏览器内容时，会显得不是那么得心应手。XulRunner还会面临需要及时更新版本的问题，不然可能会出现开发的控件不能正常在内嵌浏览器中使用等。
[0008]因此，需要一种新的页面编辑器交互技术，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。
[0009]
【发明内容】
[0010]本发明正是基于上述问题，提出了一种新的页面编辑器交互技术，可以在现有的页面编辑器交互方式基础上，充分利用单对象类型完成多对象类型的页面编辑器交互，建立多对象类型参与的面向复杂类页面编辑器交互的通用、统一交互思路。
[0011]有鉴于此，本发明提出了一种页面编辑器交互装置，包括:环境准备单元，用于创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；编辑器和java交互单元，用于基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。在该技术方案中，可以使用ActiveX控件(OCX)作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度和版本稳定性均有很大的提升。
[0012]在上述技术方案中，优选地，该页面编辑器交互装置，还包括:页面处理单元，用于基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。在该技术方案中，可以有效地通过代码调用控件中的函数，达到和浏览器交互的目的。
[0013]在上述技术方案中，优选地，所述页面处理单元，具体包括:页面元素拖拽模块，用于通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；页面元素属性修改模块，用于点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；页面保存模块，用于触发编辑器的doSave事件，保存时需将sess1n中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。在该技术方案中，可以基于java与编辑器的交互，实时更新页面信息，人性化和通信直观性大大提高。
[0014]在上述技术方案中，优选地，所述环境准备单元，具体包括:控件生成模块，用于创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；视图扩展模块，用于扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；监听器创建模块，用于在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。在该技术方案中，可以编写ActiveX控件(0CX)，以在和浏览器的交互中可靠实现相应信息的调用和交互，相应速率和可靠性均大大提高。
[0015]在上述技术方案中，优选地，所述编辑器和java交互单元，具体包括:从java到编辑器的通信模块，用于通过eclipse插件工程包含的内容，调用自定义OCX控件的execScript方法，控制编辑器的修改，在对应的方法体中将需要编辑器执行的JS方法作为字符串传入；从编辑器到java的通信模块，用于对编辑器端得操作进行监听，当监听到的编辑器操作时，对获得的event进行处理，通过解码获得需要执行的方法和参数，通过反射调用java方法使eclipse的相关视图对编辑器的操作做出反应。在该技术方案中，可以基于预先创建的OCX控件，绑定浏览器的URL，在eclipse中调用OCX控件的方式，可以有效的通过代码调用控件中的函数，达到和浏览器交互的目的，通信可靠性大大提高。
[0016]根据本发明的又一个方面，还提出了一种页面编辑器交互方法，包括:步骤202:创建页面编辑器交互所需控件，扩展页面编辑器交互所需工具箱视图，创建用于跟踪页面编辑器交互过程的监听器；步骤204:基于创建的控件、扩展的视图和新建的监听器，实现java与编辑器之交的信息交互。在该技术方案中，可以使用ActiveX控件(OCX)作为中介连接编辑器和eclipse环境，并根据OCX控件特性，实现eclipse和编辑器的相互通信，在响应速度和版本稳定性均有很大的提升。
[0017]在上述技术方案中，优选地，该页面编辑器交互方法，还包括:步骤206:基于java与编辑器之交的信息交互，实现实现页面元素拖拽、页面元素属性修改和页面保存，并呈现在浏览器页面。在该技术方案中，可以有效地通过代码调用控件中的函数，达到和浏览器交互的目的。
[0018]在上述技术方案中，优选地，所述步骤206，具体包括:步骤502:通过监听鼠标事件mouseDown，将json对象转化成字符串写入JS的对象，并通过OCX控件的execScript，将对象传入编辑器脚本；再结合编辑器脚本中的拖拽方法，将对象解析后进行页面渲染，编辑器中即出现相应的页面元素；步骤504:点击编辑器中的页面元素，触发编辑器的onSelected事件，编辑器中获得页面元素的属性并将属性以及需要调用java的方法名转化成json字符串，并写入事件；修改监听器eclipse属性栏中的属性，将修改后的属性值写入JS对象，调用OCX控件execScript方法，在编辑器JS脚本中实现JS对象中的方法，完成对页面属性的修改；步骤506:触发编辑器的doSave事件，保存时需将sess1n中的页面模型取出，序列化后保存在本地，然后在经过渲染最终呈现在浏览器页面。在该技术方案中，可以基于java与编辑器的交互，实时更新页面信息，人性化和通信直观性大大提高。
[0019]在上述技术方案中，优选地，所述步骤202，具体包括:步骤302:创建页面编辑器交互所需对象类别扩充组件控件，嵌入编辑器；步骤304:扩展页面编辑器交互所需工具箱视图工具箱视图，将组成页面的布局和控件作为树节点显示在工具箱视图中，对象数据以轻量级的数据交换格式保存在节点数据；扩展页面编辑器交互所需属性视图和大纲视图，以接收编辑器中的对象属性和dom树结构，并予以显示；步骤306:在java中将相应的JS方法传入OCX控件中；新建监听器监听编辑器的动作，在编辑器页面的js脚本中定义相应动作的事件，并将页面编辑器交互所需需参数加入事件主题中。在该技术方案中，