一、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等显示在窗口上，就是说他主要的功能是绘图（这样带来的好处是接口更简洁，做桌面透明窗口这些非常方便），他并不提供一个完整的浏览器所具有的一些交互窗口以及相关功能，例如alert，上传下载文件对话框，右键菜单等等交互窗口，这是缺点同时也是他的优点（ 使用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();
很简单，与 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插件，这样就能兼顾到体积小与兼容性
本教程使用的所有示例代码请点击这里下载
|
评分
-
查看全部评分
|
|
|
|
|
|
|
|
|
|
沙发
楼主 |
发表于 2014-11-15 15:15:22
|
只看该作者
[b]3.1、事件：[/b]
wbKitView.onTitleChanged 事件在网页标题改变时触发
wbKitView.onURLChanged 事件
3.1、事件：
wbKitView.onTitleChanged 事件在网页标题改变时触发
wbKitView.onURLChanged 事件在网址改变时触发
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.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();
|
|
|
|
|
|
|
|
|
|
板凳
楼主 |
发表于 2014-11-15 15:18:37
|
只看该作者
[b]5.1、 如何使用插件[/b]注册JS全局函数很简单，先看一个例子：[quote][color=#008000]//webkit没有提供alert函数，这
5.1、 如何使用插件注册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、 如果设置代理
很简单，通过环境变量设置代理，格式： 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./")
winform.show()
win.loopMessage();
|
|
|
|
|
|
|
|
|
|
地板
楼主 |
发表于 2014-11-15 15:25:22
|
只看该作者
aardio 10支持在服务端使用HTML模板语言，
也可在在HTMLayout中使用HTML模板语言，参考：
[url=http://bbs.aardi
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(); |
|
|
|
|
|
|
|
|
|
5#
楼主 |
发表于 2014-11-15 15:30:03
|
只看该作者
[align=left][font=新宋体][color=#0000ff][attach]4358[/attach]
[/color][/font][/ali
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();
|
|
|
|
|
|
|
|
|
|
6#
楼主 |
发表于 2014-11-15 15:32:10
|
只看该作者
[align=left]首先我们在aardio里显示flash透明窗口是很简单的，例如[/align][align=left][quote][color=#00
|
首先我们在aardio里显示flash透明窗口是很简单的，例如 import win.flashBox
var flash = win.flashBox(text="aardio Form";right=599;bottom=399)
flash.movie = "http://update./aardio/samples/transparent.swf";
flash.show()
win.loopMessage(); 而且普通控件也可以使用aardio中的orphanWindow非常方便的浮动透明、显示透明flash控件这些，详细的请参考： 系列教程：使用plus控件制作精美界面，所以仅仅是让透明flash控件显示在网页上面，这在aardio中是非常简单的。
web.kit 也支持这种不规则的透明分层窗口，这里用来显示透明flash动画只是举个例子， 透明窗口上具体显示些什么，当然不用FLASH用HTML也可以，下面我们先上效果图：
再来看看完整的源码( 注意在小企鹅上面点一下会关闭示例 )： 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>
<!--注意页面上一定要放一点什么空白的内容,不然透明Flash无法自己绘制背景导致产生重影-->
</body>
</html>
**/
winform.wndproc = function(hwnd,message,wParam,lParam){
if( message == 0x201/*_WM_LBUTTONDOWN*/ )
winform.close();
}
winform.show()
win.loopMessage(); |
|
|
|
|
|
|
大家都知道aardio里大多数的支持库或者程序发布以后都是个独立EXE，不用安装绿色便携非常小也非常方便。
但是[size=14px]web.kit 默认不支
大家都知道aardio里大多数的支持库或者程序发布以后都是个独立EXE，不用安装绿色便携非常小也非常方便。
但是web.kit 默认不支持把HTML,CSS这些内嵌入EXE文件的资源文件，其实这也并没有多大关系，要知道我们平时使用的桌面软件，大多都是一大堆的文件做成的安装包，并不都是独立EXE文件。而且我也看到一些明明生成的是一个独立EXE文件，却也要想办法多弄几个文件再做个安装包让用户一步下一步的点击安装。所以独立EXE是很方便，但也并不是非独立EXE就不行。
当然webkit还是可以通过 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();
|
|
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
