CN102455914A - 一种基于浏览器扩展的跨平台gui快速原型开发方法 - Google Patents

Abstract

本发明公开了一种基于浏览器扩展的跨平台GUI快速原型开发方法，涉及跨操作系统平台应用程序GUI界面快速原型开发的设计实现技术，旨在针对现有的GUI开发方法不统一、初学者难以掌握的缺陷，提供一基于浏览器扩展的跨平台GUI快速原型开发方法。本发明技术要点包括：步骤1：启动原始软件部分，调用当前系统的基本图形设备接口初始化浏览器核心引擎，并为浏览器引擎注册GUI事件消息循环；步骤2：利用HTML构造用于绘制控件的控件区域；步骤3：利用HTML或XML定义控件；步骤4：利用JavaScriptNative语言在所述控件上定义扩展对象方法。

Description

一种基于浏览器扩展的跨平台GUI快速原型开发方法

技术领域

本发明涉及跨操作系统平台应用程序GUI界面快速原型开发的设计实现技术。

背景技术

GUI是现代计算机软件的主要人机界面，由于操作系统平台的多样性和不同图形库、编程语言、开发框架的异构分散性，形成了多种GUI开发技术并存、不统一的格局。HTML超文本标记语言和浏览器技术的兴起，给图形界面应用带来了新的发展阶段，以XML结合脚本语言的方式开发GUI软件正逐渐成为一种主流。

现代GUI应用程序的核心组成通常以各种控件形成的工具栏、菜单栏的形式出现，不同的应用开发平台和操作系统环境提供的开发框架都各不相同。对快速原型的应用开发者来说，学习多种编程接口、使GUI软件得以跨平台无疑具有一定的难度。

发明内容

本发明的目的是针对现有的GUI开发方法不统一、初学者难以掌握的缺陷，提供一基于浏览器扩展的跨平台GUI快速原型开发方法。

本发明采用的技术方案是这样的：一种基于浏览器扩展的跨平台GUI快速原型开发方法，包括：

步骤1：启动原始软件部分，调用当前系统的基本图形设备接口初始化浏览器核心引擎，并为浏览器引擎注册GUI事件消息循环；

步骤2：利用HTML构造用于绘制控件的控件区域；

步骤3：利用HTML或XML定义控件；

步骤4：利用JavaScript Native语言在所述控件上定义扩展对象方法。

优选地，在步骤4中，利用JavaScript Native语言调用原始软件的程序接口实现控件上的对象方法定义。

优选地，还包括利用CSS为控件添加背景图片、设置控件上文字标识以及设定控件宽高的步骤。

综上所述，由于采用了上述技术方案，本发明的有益效果是：

本方法开发出来的GUI可以在各种操作系统上使用；统一了GUI开发风格；最大程度上利用了HTML/XML/CSS/JavaScript的既有成熟技术和先进的内容布局面、样式风格面、应用逻辑面相互分离独立的架构，GUI原型开发速度大大提高。

具体实施方式

本说明书中公开的所有特征，或公开的所有方法或过程中的步骤，除了互相排斥的特征和/或步骤以外，均可以以任何方式组合。

本说明书（包括任何附加权利要求、摘要）中公开的任一特征，除非特别叙述，均可被其他等效或具有类似目的的替代特征加以替换。即，除非特别叙述，每个特征只是一系列等效或类似特征中的一个例子而已。

当原始软件基本功能实现之后，为其增添GUI控件接口，形成一用户界面友好的原型，其界面可划分为两部分：需要添加的控件GUI区域和原有文档内容区域。文档内容区域可以存在，也可能不存在（不存在的情况即原始软件没有任何GUI部分）。

首先，启动原始软件部分，调用当前系统的基本图形设备接口初始化浏览器核心引擎，并为浏览器引擎注册GUI事件消息循环；

然后，利用HTML构造用于绘制控件的控件区域；利用HTML或XML定义控件；利用JavaScript Native语言在所述控件上定义扩展对象方法。

其中，利用JavaScript Native语言在所述控件上定义方法的具体做法是利用JavaScript Native语言调用原始软件的程序接口。当页面控件区域的用户事件如鼠标点击、键盘按键发生时，页面的JavaScript脚本调用对应的JavaScript扩展对象方法，进而调用原始软件的程序接口，完成控件的控制和交互功能。

 为了使控件更加美观，还可以利用CSS细化控件外观，为控件添加背景图片、设置控件上文字标识以及设定控件宽高。

进一步举例说明本发明中定义控件的步骤，以单行多列控件栏为例，控件依次为按钮1、按钮2、输入框，则其HTML可写为：

<table>

      <tr>

           <td>

                 <button  id = “controlButton1”> .. </button>

           </td>

           <td>

                 <button  id = “controlButton2”> .. </button>

           </td>

           <td>

                 <input  id = “controlInput1”> .. </input>

           </td>

      </tr>

</table>

进一步，可以为按钮1、按钮2及输入框添加背景图片、文字标识，设定宽高等等，这可以藉由页面中的CSS部分完成。

当用户事件发生时，相关控件的对象方法调用原始软件接口完成相应的功能。再以onClick事件实现某重启接口reload()为例，阐述本发明中为控件定义对象方法的步骤：

首先为浏览器引擎添加JavaScript扩展对象方法Application.reload()，Application.reload()为原始软件中的程序接口；假设控件元素id为button1，则在<script>中加入document.getElementById('button1').onclick=function() { Application.reload()；}；或直接写入button1元素的属性中。

本发明并不局限于前述的具体实施方式。本发明扩展到任何在本说明书中披露的新特征或任何新的组合，以及披露的任一新的方法或过程的步骤或任何新的组合。

Claims (3)

1.一种基于浏览器扩展的跨平台GUI快速原型开发方法，其特征在于，包括：

步骤1：启动原始软件部分，调用当前系统的基本图形设备接口初始化浏览器核心引擎，并为浏览器引擎注册GUI事件消息循环；

步骤2：利用HTML构造用于绘制控件的控件区域；

步骤3：利用HTML或XML定义控件；

步骤4：利用JavaScript Native语言在所述控件上定义扩展对象方法。

2.根据权利要求1所述的一种基于浏览器扩展的跨平台GUI快速原型开发方法，其特征在于，在步骤4中，利用JavaScript Native语言调用原始软件的程序接口实现控件上的对象方法定义。

3.根据权利要求1或2所述的一种基于浏览器扩展的跨平台GUI快速原型开发方法，其特征在于，还包括利用CSS为控件添加背景图片、设置控件上文字标识以及设定控件宽高的步骤。