搜索
aardio官方社区 门户 查看主题

使用webkit开发桌面软件

发布者: Jacen.He | 发布时间: 2014-11-15 14:50| 查看数: 53312| 评论数: 31|帖子模式

一、webkit 扩展库简介


aardio中的web.kit扩展库基于wke,一般基于webkit内核的组件都比较大打包也有几十MB,但是wke这个非常小打包仅3MB多一点,当然这里面精简掉了一些桌面UI不常用的功能,例如音频、视频有关的功能,如果你需要播放音频或视频,可以在网页中嵌入flash。

aardio中可以嵌入的web浏览器内核比较多,有 web.kit, web.layout(HTMLayout内核), web.form(IE内核)。
其中 webform是体积最小的(因为IE内核系统自带),而开发软件界面HTMLayout则是最方便的,webkit的优势是可以使用HTML5,CSS3,以及bootstrap等CSS3框架,但webkit的体积较大(精简后仍然比HTMLayout大几倍)。

HTML5,CSS3虽然用起来很时尚,但是注意这些技术并不是为桌面软件的界面开发所设计的,
如果是做软件界面的话,HTMLayout要方便快捷的多,例如HTMLayout里的自适应大小单位%%,布局CSS属性flow,以及背景前景九宫格、标准库提供的一堆behavior,以及自己扩展behavior的方便快捷,等等,这些用传统CSS都是非常麻烦的。

webform的优势是体积小,可以支持Javascript等,一般可以用HTMLayout做界面,再嵌入webform放传统的网页,HTMLayout可以支持自定义控件,两者可以非常方便的结合。

另外,web.kit 核心只是将网页解析并渲染到位图,通过web.kit.gdiRender等显示在窗口上,就是说他主要的功能是绘图(这样带来的好处是接口更简洁,做桌面透明窗口这些非常方便),他并不提供一个完整的浏览器所具有的一些交互窗口以及相关功能,例如上传下载文件对话框,右键菜单等等交互窗口,这是缺点同时也是他的优点( 使用IE内核做界面时可能要煞费苦心的设计怎么隐藏掉这些交互窗口 ),所以这个扩展库的目的是用来嵌入网页界面的,并不太适合用来做普通网页浏览器。


二、使用webkit创建窗口


用下面的代码创建webkit视图对象:
var wbKitView = web.kit.form(winform); //winform是win.form创建的窗体对象

那么
wbKitView.window 就是JS的全局对象,而 wbKitView.document 就是文档对象。
获取到JS或文档对象以后,就可以直接调用该对象的属性或函数了,例如:
import win.ui;
/*DSG{{*/
var winform = win.form(text="调用JS测试";right=1123;bottom=570)
/*}}*/

import web.kit.form;  
var wbKitView = web.kit.form(winform);
wbKitView.document.write("测试");

winform.show();
win.loopMessage();
那么我们怎么在网页里调用 aardio 函数呢?
很简单,与 web.form 的用法类似,使用 wbKitView.external 就可以导出aardio函数给网页使用了,下面是一个简单示例:
import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器简单示例";right=1123;bottom=570)
/*}}*/

//导入webkit支持库
import web.kit.form;  
var wbKitView= web.kit.form(winform); //创建webkit浏览器窗口

//使用external接口定义网页脚本可调用的本地函数
wbKitView.external = {

    hitCaption =
function(){
        winform.hitCaption();
    };
    close =
function(){
        winform.close();
    };
    aardioCall =
function(str){
        winform.msgbox(str);
    };
}

wbKitView.html =
/**
    <a href='javascript:external.close();'>关闭窗口</a>
   
    <div onmousedown='javascript:  
        external.hitCaption();
        return false;
    ' style="-webkit-user-select: none;cursor:default;background:#cce;padding:25px;margin:10px;">拖动窗口</div>
   
    <a href='javascript:
        external.aardioCall("你好,我是webkit");
    '>调用aardio函数external.aardioCall()</a>
**/


winform.show()
win.loopMessage();
很简单很简单对吧?

大家有没有注意到 wbKitView.external 的用法与 web.form 中的  wb.external 用法很象? 这样设计是让实现一个兼容的接口成为可能,web.form基于IE内核,现在支持HTML5的IE11基本已普及并且在不久的将来会完全普及,所以大家可以先做一个检测,如果用户已经有IE11可以用web.form来显示网页,否则提醒用户下载webkit插件,这样就能兼顾到体积小与兼容性


本教程使用的所有示例代码请点击这里下载

评分

参与人数 5银币 +47 收起 理由
xuefu3858 + 5 很给力!
qopani + 5 很给力!
zhangys + 5 很给力!
楼下的小黑 + 2 赞一个!
小X + 30 很给力!

查看全部评分

最新评论

Jacen.He 发表于 2014-11-15 15:15:22

事件、常用函数

3.1、事件:
wbKitView.onTitleChanged 事件在网页标题改变时触发
wbKitView.onURLChanged 事件在网址改变时触发
wbKitView.onNavigation //打开链接时触发
wbKitView.onDocumentReady //文档加载完成时触发

3.2、常用函数:
webkit.wait() 等待网页加载就绪,如果页面上有调用执行JS这些最好在打开网页后加上这句。
webkit.waitDoc() 等待文档准备就绪并返回文档对象。
webkit.doScript("") 用于执行JS代码  
webkit.
eval("") 运行JS表达式并返回结果,例如 webkit.eval("window") 返回JS中的window对象
webkit.querySelector(
"CSS选择器") 查找节点, web.form虽然也支持这函数但IE6就不行了,这个不用受这个限制。
webkit.querySelectorAll(
"CSS选择器") 查找多个匹配节点并返回集合

3.3、简单示例
import win.ui;
/*DSG{{*/
var winform = ..win.form(text="Web Kit";right=848;bottom=585)
winform.add()
/*}}*/

import web.kit.form;
wbKitView = web.kit.form(winform)

//网页标题改变时触发此事件
wbKitView.onTitleChanged = function(title){
   
owner.getForm().text = title;
}

//网址改变时触发此事件
wbKitView.onURLChanged = function(url){
   
//if(#url) owner.getForm().text = url;
}

//打开链接时触发
wbKitView.onNavigation = function(url,navigationType){
   
if( navigationType == 0/*_WKE_NAVIGATION_TYPE_LINKCLICK*/ ){
        
//navigationType可以判断打开链接类型
    }
}

//文档加载完成时触发
wbKitView.onDocumentReady = function(url,mainFrameJSState,frameJSState){
   
if( mainFrameJSState == frameJSState ){
        
//判断是否主框架
    }
}

wbKitView.go(
"http://www.so.com")
winform.show();

wbKitView.wait();
wbKitView.querySelector(
"#input").value = "aardio";
wbKitView.querySelector(
"#search-button").click();

wbKitView.wait();
wbKitView.doScript(
"alert('欢迎使用搜索引擎');");
winform.text = wbKitView.eval(
"document").location.href

win.loopMessage();

Jacen.He 发表于 2014-11-15 15:18:37

注册JS全局函数、加载插件、设置User Agent

5.1、 注册JS全局函数注册JS全局函数很简单,先看一个例子:
//webkit没有提供alert函数,这里我们自己注册一个alert函数
web.kit.jsBindFunction("alert",1/*JS回调时的参数个数*/,function(str){
   
var wbKitView = owner; //owner是当前调用此函数的webkit视图对象
    var winform = wbKitView.getForm(); //这是显示网页视图的win.form窗体对象
    if( winform ) winform.msgbox(str);
})

在创建webkit窗口视图以前就可以先注册这些全局函数。


5.2、 如何使用插件

web.kit会在EXE目录下加载plugins目录下的插件,并且在注册表中自动搜索HKCU\Software\MozillaPlugins下面注册的插件路径并加载。web.kit扩展库已经默认包含了flash插件,但这个插件不是必须的,如果不使用flash可以在发布时选择不需要该插件,那么最后需要发布的文件体积就比较小了(7z压缩后大概 3.xMB, 因为7z已经非常流行了,建议用7z压缩)
5.3、 设置User Agent
import win.ui;
/*DSG{{*/
var winform = win.form(text="Web Kit";right=848;bottom=585)
/*}}*/

import web.kit.form;
wbKitView = web.kit.form(winform)

wbKitView.userAgent =
"Mozilla/5.0"
wbKitView.go(
"http://httpbin.org/headers")
winform.show();

win.loopMessage();

5.4、 如何设置代理
很简单,通过环境变量设置代理,格式: win.setenv("HTTP_proxy","http://代理服务器IP:代理端口/")

示例程序:
import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit form";right=811;bottom=497)
/*}}*/

//设置webkit代理
win.setenv("HTTP_proxy","http://代理服务器IP:代理端口/")

import web.kit.form
var wbKit = web.kit.form(winform)
wbKit.go(
"http://www.ip.cn/")

winform.show()
win.loopMessage();

调用下面的代码也可以设置代理:

web.kit.configure({
    proxy = {
        type = "HTTP";
        hostname =
"127.0.0.1";
        port = 8080;
        username =
"";
        password =
"";
    };
    cookieFilePath =
"/cookie";
})


Jacen.He 发表于 2014-11-15 15:25:22

通过嵌入式Web服务器使用aardio模板语法

aardio 10支持在服务端使用HTML模板语言,
也可在在HTMLayout中使用HTML模板语言,参考:
HTMLayout中使用aardio10模板语法

这种语言级的HTML模板语法非常方便,其实在web.kit中也可以使用模板语法。
我们需要调用 wsock.tcp.simpleHttpServer.startUrl() 创建一个迷你型的web服务端,这个函数很有意思,创建的服务端自动获取可用端口,所以不用端心端口冲突的问题,并且支持多线程并发请求,自动开始,自动退出,不需要你做任何线程操作,所有事他全部做好,只会返回给你一个可以访问的网址。

wsock.tcp.simpleHttpServer.startUrl()  返回的网址指向当前工程根目录,并且保证网址尾部不带斜杠。
用起来非常简单,一个例子( 当然,你需要建议一个 aardio工程,把下面的代码复制到工程的启动文件 main.aardio中):
import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器简单示例";right=1123;bottom=570)
/*}}*/

import web.kit.form;  
var wbKitView= web.kit.form(winform);

import wsock.tcp.simpleHttpServer;
wbKitView.
go( wsock.tcp.simpleHttpServer.startUrl("/html/main.aardio") );

winform.show()
win.loopMessage();

上面的方法也可以用于其他浏览器控件,例如 web.form 等等。
Jacen.He 发表于 2017-2-12 12:46:10

RE: 使用webkit调用echarts

此示例演示了aardio与Javascript间使用JSON交换数据的方法。

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio echarts";right=909;bottom=669;border="dialog frame";max=false;min=false)
/*}}*/

import web.form;
var wb = web.form( winform );

import web.json;
wb.external = {
    getOption =
function( num ){
        
var data = {
            calculable =
true;
            legend = {
                data = {
"直接访问"; "邮件营销"; "联盟广告"; "视频广告"; "搜索引擎" };
                orient =
"vertical";
                x =
"left"
            };
            series = {
                {
                    center = {
"50%"; "60%" };
                    data = {
                        { name =
"直接访问"; value = 335 };
                        { name =
"邮件营销"; value = 310 };
                        { name =
"联盟广告"; value = 234 };
                        { name =
"视频广告"; value = 135 };
                        { name =
"搜索引擎"; value = 1548 }
                    };
                    name =
"访问来源"; radius = "55%"; type = "pie"
                }
            };
            title = { subtext =
"纯属虚构"; text = "某站点用户访问来源"; x = "center"    };
            toolbox = {
                feature = {
                    dataView = { readOnly =
false; show = true };
                    magicType = {
                        option = { funnel = { funnelAlign =
"left"; max = 1548; width = "50%"; x = "25%" }};
                        show =
true;
                        
type = { "pie"; "funnel" }
                    };
                    mark = { show =
true };
                    restore = { show =
true };
                    saveAsImage = { show =
true }
                }; show =
true
            };
            tooltip = { formatter =
"{a} <br/>{b} : {c} ({d}%)"; trigger = "item" }
        }
        
        
return web.json.stringify(data);
    }
}

wb.html =
/**
<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">  
</head>
<body>
    <div id="main" style="height:600px;"></div>
    <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption( JSON.parse( external.getOption() ) );
    </script>
</body>
</html>
**/

winform.show();
//显示窗体

//启动消息循环
win.loopMessage();

Jacen.He 发表于 2017-3-7 16:43:54

webkit使用Font Awesome字体例子

import win.ui;
/*DSG{{*/
var winform = win.form(text="图标字体演示 - 注意字体从服务器下载需要一点时间";right=759;bottom=469)
/*}}*/

import web.kit.form;
var wb = web.kit.form( winform );
wb.go(
"http://download.aardio.com/v10.files/demo/font-awesome/test.html")
winform.show();

win.loopMessage();

Jacen.He 发表于 2014-11-15 15:30:03

无边框窗口示例

webkit.png

import win.ui;
/*DSG{{*/
var winform = ..win.form(text="webkit浏览器支持库";right=544;bottom=362;border="none")
winform.add()
/*}}*/

//导入webkit支持库
import web.kit.form;

//创建webkit浏览器窗口
var wbKitView = web.kit.form(winform);

wbKitView.external = {
    hitmin =
function(){
        
return winform.hitmin();   
    }
    hitmax =
function(){
        
return winform.hitmax()
    }
    hitCaption =
function(){
        
return winform.hitCaption()
    }
    close =
function(){
        
return winform.close()  
    }
};

wbKitView.html =
/**  
<!doctype html>
<html>
<style>
html,body{
    margin:0;
    background:#fff;
    height:100%;
}

*{
    -webkit-user-select: none;
}

/*标题栏*/
#header{
    position:absolute;
    top:0px;
    left:0px;
    height:28px;
    width:100%;
    background:rgb(52,152,220);
    cursor:default;
}

/*中间内容栏*/
#container{
    box-sizing:border-box;/*使高度包含padding*/
    height:100%;
    width:100%;
    padding-top:28px;
    padding-bottom:35px;
    margin:0 auto;
    overflow:auto;   
}

/*底栏*/
#footer {
    height:35px;
    width:100%;
    position: absolute;
    bottom:0;
    left:0;
    z-index:100;
    background:rgb(239,237,238);
    text-align:right;
    padding:3px 5px;
    box-sizing:border-box;
}

/*中间内容栏 左侧列*/
#container .lside{
    height:100%;
    width:150px;
    float:left;
    background:rgb(110,179,210);
}

/*中间内容栏 右侧列*/
#container .rside{
    height:100%;
    margin-left:150px;
    background:#FFF;
}

#footer button{
    padding:4px 13px;
    font-size:12px;
    background:rgb(27,174,93);
    color:white;
    border:0;
}

#footer button:hover {
    background:rgb(33,127,188);
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    cursor:pointer;
}

#footer button:active {
    background:rgb(20,110,170);
    cursor:pointer;
}

#header .title-bar{
    margin-right:75px;
    padding-left:10px;
    height:28px;
    line-height: 28px;
    font-size:9pt;
    color:#eee;
}

#header .ctrls{  
    width:75px;
    height:28px;
    float:right;
}

#header .ctrls a{
    display:block;
    float:left;
    height:14px;
    font-family:"Marlett";
    font-size:14px;
    padding:4px;
    color:#fff;
    cursor:default;
}

#header .ctrls a[id]:hover{
    background:#6ebccf;
}

#header .ctrls a[id]:active{
    background:#FF0000;
}

</style>
<body>
    <div id="header">
        <div class="ctrls">
            <a id="window-min" onclick="external.hitmin()">0</a>
            <a id="window-max" onclick="this.innerText = external.hitmax()?'2':'1';">1</a>
            <a id="window-close" onclick="external.close()">r</a>
        </div>
        <div class="title-bar" onmousedown="external.hitCaption()"> <span class=title> 我 的 软 件 </span></div>
    </div>
   
    <div id="container">
    <div class="lside"> </div>
    <div class="rside"> </div>
    </div>
   
    <div id="footer">
        <button onclick="alert('hello')">点击这里</button>
    </div>
</body>
</html>
**/


//添加可拖动边框
import win.ui.resizeBorder;
win.ui.resizeBorder(winform);

//添加阴影
import win.ui.shadow;
win.ui.shadow(winform);

//限定最大化范围
import win.ui.minmax;
win.ui.minmax(winform);

winform.show();
win.loopMessage();
Jacen.He 发表于 2014-11-15 15:32:10

创建透明窗口

首先我们在aardio里显示flash透明窗口是很简单的,例如
import win.flashBox
var flash = win.flashBox(text="aardio Form";right=599;bottom=399)
flash.movie =
"http://update.aau.cn/aardio/samples/transparent.swf";
flash.show()
win.loopMessage();
win.flashBox的详细介绍请参考:使用标准库: win.flashBox 创建Flash透明窗口
而且普通控件也可以使用aardio中的orphanWindow非常方便的浮动透明、显示透明flash控件这些,详细的请参考:系列教程:使用plus控件制作精美界面,所以仅仅是让透明flash控件显示在网页上面,这在aardio中是非常简单的。

web.kit 也支持这种不规则的透明分层窗口,这里用来显示透明flash动画只是举个例子,
透明窗口上具体显示些什么,当然不用FLASH用HTML也可以,下面我们先上效果图:

webkitlayered.png


再来看看完整的源码( 注意在小企鹅上面点一下会关闭示例 ):
import win.ui;
/*DSG{{*/
var winform = ..win.form(text="wbKitView浏览器简单示例";right=1123;bottom=570;border="none";mode="popup")
winform.add()
/*}}*/

//导入wbKitView支持库
import web.kit.layeredWindow;
var wbKitView = web.kit.layeredWindow(winform);//创建透明分层窗口

wbKitView.html =
/**
<!doctype html>
<html>
<body>
    <object width="500" height="500" type="application/x-shockwave-flash" data="http://img.pet.qq.com/xuanflash/1024900151.swf">
        <param name="movie" value="http://img.pet.qq.com/xuanflash/1024900151.swf">
        <param name="wmode" value="Transparent">
        <param name="quality" value="high" />
    </object>
     &nbsp:
    <!--注意页面上一定要放一点什么空白的内容,不然透明Flash无法自己绘制背景导致产生重影-->
     
</body>
</html>
**/


winform.wndproc =
function(hwnd,message,wParam,lParam){
   
if( message == 0x201/*_WM_LBUTTONDOWN*/ )
        winform.close();
}

winform.show()
win.loopMessage();

Jacen.He 发表于 2014-11-15 15:40:13

如何加载资源文件中的HTML文件

1、可以使用嵌入Web服务器wsock.tcp.simpleHttpServer,这个支持加载资源文件生成网页 ,关键代码演示:

import wsock.tcp.simpleHttpServer;
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl(
"/html/main.aardio") );

2、使用web.kit以前调用  import web.kit.fileSystem 就可以支持从资源文件了(可嵌入HTML,CSS,JS,SWF等文件),举个例子:

import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit支持嵌入资源";right=770;bottom=485;border="none";mode="popup")
winform.add(
button={cls=
"button";text="button";left=308;top=225;right=598;bottom=381;z=1}
)
/*}}*/

import web.kit.form;
import web.kit.fileSystem;//支持嵌入资源

//创建webkit浏览器窗口
var webkit = web.kit.form(winform);
webkit.go(
"\html\main.html");

winform.show();
win.loopMessage();

3、使用web.kit以前调用  import web.kit.portable 可以生成独立文件,这个库已经包含了 web.kit.fileSystem ,并且可以把webkit用到的DLL组件也放到EXE文件中,生成独立的EXE文件。


zjutsxj 发表于 2014-11-21 08:40:54

{:3_59:}{:3_59:}{:3_59:}教程真不错。

教程真不错。
yihong 发表于 2014-11-28 12:53:07

不错哦,多种方式选择。

不错哦,多种方式选择。
jsniu 发表于 2014-12-10 22:09:41

学习了。谢谢!

学习了。谢谢!
821165254 发表于 2015-2-11 17:41:01

学习了

学习了
a31072456 发表于 2015-4-19 12:59:21

不多说,支持

不多说,支持
qitian001 发表于 2015-5-13 22:09:37

6.web.kit 支持aardio嵌入资源文件。。。 这一节,怎么嵌入呀?例子好像不全吧,新手求全码

6.web.kit 支持aardio嵌入资源文件。。。  这一节,怎么嵌入呀?例子好像不全吧,新手求全码
淹死的鱼 发表于 2015-5-22 08:17:50

老大的这段代码够我学习好久

老大的这段代码够我学习好久
xukaiming 发表于 2015-7-22 09:55:00

这条腿够我玩好久

这条腿够我玩好久
又一只耳朵 发表于 2016-1-7 22:20:03

[quote][size=2][url=forum.php?mod=redirect&goto=findpost&pid=68036&ptid=12574][c

Jacen.He 发表于 2014-11-15 15:25
5.1、 如何使用插件
web.kit会在EXE目录下加载plugins目录下的插件,并且在注册表中自动搜索HKCU\Software ...

请问怎么设置代理IP的用户名和密码呢??
cad 发表于 2016-1-8 05:50:53

[i=s] 本帖最后由 cad 于 2016-1-8 05:56 编辑 [/i] [quote][size=2][url=forum.php?mod=redi

本帖最后由 cad 于 2016-1-8 05:56 编辑
又一只耳朵 发表于 2016-1-7 22:20
请问怎么设置代理IP的用户名和密码呢??


  1. win.setenv( "HTTP_proxy", "http[s]://[user[:pwd]@]host[:port]" );
  2. //注:未测试
复制代码


k-mitnick 发表于 2016-1-10 20:56:47

这得看看了!

这得看看了!
qopani 发表于 2016-1-18 22:07:20

暂停按任意键后继续的代码怎么写哦

暂停按任意键后继续的代码怎么写哦
12下一页

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2017-5-24 10:28 , Processed in 0.078125 second(s), 30 queries , Wincache On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表