一、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();
我们也可以使用 web.kit.export 直接将aardio对象导出为JS全局变量,示例:
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebKit - JS直接调用WinAPI";right=1123;bottom=570)
/*}}*/
import web.kit.form; //导入WebKit支持库
var mb = web.kit.form(winform); //创建WebKit浏览器窗口
//导出DLL对象为JS全局变量
web.kit.export("user32",::User32);
mb.html = /**
<a href='javascript:
user32.MessageBox(0,"JS直接调用WinAPI","user32.MessageBox",0)
'>JS直接调用WinAPI函数试一下</a>
**/
winform.show()
win.loopMessage();
很简单很简单对吧?
友情提醒:
如果你的网页还需要在HTML中链接其他CSS,JS等资源文件,
请把上面的wbKitView.html赋值改为 wbKitView.go("要打开的文件路径或网址"),
例如你的网页位置是 /res/my.html,那么就使用代码 wbKitView.go("/res/my.html") 打开网页,注意路径中的第一个斜杠表示工程目录,HTML中链接其他CSS,JS等各种文件用相对路径就可以了(跟做网站的规则完全一样)。
如果需要把网页内置到EXE中,请看后面回帖子中的教程。
大家有没有注意到 wbKitView.external 的用法与 web.form 中的 wb.external 用法很象? 这样设计是让实现一个兼容的接口成为可能,web.form基于IE内核,现在支持HTML5的IE11基本已普及并且在不久的将来会完全普及,所以大家可以先做一个检测,如果用户已经有IE11可以用web.form来显示网页,否则提醒用户下载webkit插件,这样就能兼顾到体积小与兼容性
主题数 7 | 今日评论 0 | 今日主题 0 |