搜索
查看: 77272|回复: 41

使用webkit开发桌面软件

    [复制链接]

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 2014-11-15 14:50:18 | 显示全部楼层 |阅读模式
建议大家使用 web.blink 替代 web.kit
请参考教程:使用web.blink (miniblink) 嵌入浏览器控件
miniblink使用新版chromium内核,并且精简了体积,兼容WKE( WebKit )组件的接口。

一、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插件,这样就能兼顾到体积小与兼容性


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

评分

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

查看全部评分

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 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可以判断打开链接类型
    }
   
return true;//允许打开此链接
}

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

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

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

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

win.loopMessage();

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2014-11-15 15:18:37 | 显示全部楼层

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

5.1、 注册JS全局函数
注册JS全局函数很简单,先看一个例子:
//自定义js中的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会在当前目录下的plugins子目录下搜索插件,
可以使用 fsys.setCurDir() 函数或 ::Kernel32.SetCurrentDirectoryW() 函数修改当前目录。

web.kit也支持在注册表中自动搜索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://eu.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";
})


回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 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 等等。
回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2017-10-22 19:39:20 | 显示全部楼层

在WebKit控件中调用Firebug Lite网页调试工具

Firebug Lite支持web.kit,web.form这些浏览器组件,
只要简单的在HTML里加上这句代码就可以了:
  1. <script src="https://getfirebug.com/firebug-lite.js#overrideConsole"></script>
复制代码

如果加载速度慢可以改用国内的CDN https://cdn.bootcss.com/firebug- ... .js#overrideConsole 或者下载JS文件到本地。

下面是一个完整的示例,打开后按F12启动Firebug Lite:
import win.ui;
/*DSG{{*/
winform = win.form(text=
"请稍候正在加载firebug-lite.js......";right=1095;bottom=687)
winform.add()
/*}}*/

import web.kit.form;//导入WebKit组件
var wbKit = web.kit.form(winform); //创建WebKit控件

wbKit.onDocumentReady =
function(url,mainFrameJSState,frameJSState){
    winform.text =
"firebug-lite.js已加载,请近F12试一试!"
}

wbKit.html =
/**
<!doctype html>
<html>
<head>
    <script src="https://cdn.bootcss.com/firebug-lite/1.4.0/firebug-lite.js#overrideConsole"></script>
</head>
<body>
    <div id="header">现在主流的浏览器都提供开发工具,都可以通过按F12打开开发工具非常方便</div>
    <div id="container">
        但有时候我们需要在内嵌的浏览器控件中使用开发工具,<br>
        这时候我们可以只要简单的在代码中加上下面的代码就可以了:<br><br>
        <script src="https://getfirebug.com/firebug-lite.js#overrideConsole" > </script>
    </div>
</body>
</html>
**/


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

   

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2017-12-26 02:14:52 | 显示全部楼层

web.kit操作JS对象和数组

新版改进了一下(升级aardio和web.kit扩展库),操作JS对象、数组更简单了:
import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit - aardio操作js对象";right=1123;bottom=570)
winform.add(
edit={cls=
"edit";left=898;top=26;right=1363;bottom=539;db=1;dr=1;dt=1;edge=1;multiline=1;vscroll=1;z=1}
)
/*}}*/

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

//使用external接口定义网页脚本可调用的本地函数
wb.external = {  
    aardioCall =
function(object){
        
        winform.edit.print(
"-----------------遍历JS对象的所有成员-----------------------");
        
for name,value in table.eachName(object){
            winform.edit.print(
"对象",name,value);
        }
        
        winform.edit.print(
"-----------------遍历JS数组的所有成员-----------------------");
        
for i,v in table.eachIndex(object.array){
            winform.edit.print(
"数组",i,v);
        
        }
        
        winform.edit.print(
"-----------------直接转换为普通的对象-----------------------");
        
var obj = web.json.strip(object);
        winform.edit.print(obj);
    };
}

wb.html =
/**  
    <a href='javascript:
    external.aardioCall({
        url:"服务端URL",
        param:{a:1,b:2,c:3},
        array:[11,12,13,14,15]
    }); '>调用aardio函数external.aardioCall()操作JS对象、数组</a>
**/


winform.edit.orphanWindow();

winform.show()
win.loopMessage();


回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2017-12-26 02:16:36 | 显示全部楼层

inet.http 与 web.kit 共享会话

大家知道inet.http与 web.form浏览器控件是可以自动共享会话的,这非常的方便,而webkit并不能与inet.http共享会话,但是没有关系,今天我已经升级了web.kit 扩展库以及标准库中的inet.http,使两者之间可以实现共享会话。

下面是演示代码,运行以下代码打开论坛以后,请输入用户名、密码登录论坛,然后点击“后台抓网页”按钮在 aardio中调用 inet.http 抓取网页,注意这时候抓取到的页面显示的是登录后的页面,可以看到 inet.http 与 web.kit 成功共享会话。
import win.ui;
/*DSG{{*/
var winform = win.form(text="web.kit/inet.http 共享会话 - 登录后再试";right=1206;bottom=795)
winform.add(
btnHttpGet={cls=
"button";text="后台抓取网页";left=1079;top=16;right=1183;bottom=60;dr=1;dt=1;z=1};
btnOpen={cls=
"button";text="打开网页";left=961;top=15;right=1062;bottom=57;dr=1;dt=1;z=5};
custom={cls=
"custom";text="custom";left=36;top=88;right=1173;bottom=766;db=1;dl=1;dr=1;dt=1;z=3};
edit={cls=
"edit";left=28;top=76;right=1190;bottom=765;db=1;dl=1;dr=1;dt=1;edge=1;hide=1;multiline=1;z=4};
editUrl={cls=
"edit";text="http://bbs.aardio.com";left=28;top=21;right=956;bottom=50;dl=1;dr=1;dt=1;edge=1;multiline=1;z=2}
)
/*}}*/

import web.kit.form;
var wb = web.kit.form( winform.custom );
winform.show();

//打开网页
wb.go("http://bbs.aardio.com/")

//自动点击登录页面
wb.waitQueryEles("a",{innerText="登录";href="login"} ).click();

import string.html;
import inet.http;
winform.btnHttpGet.oncommand =
function(id,event){
   
   
//首先取浏览器的userAgent,假装是浏览器
    var http = inet.http(wb.script.navigator.userAgent);
     
   
//禁用默认的cookie管理
    http.disableCache();
    http.disableCookies();
   
   
//把浏览器的cookie加上去
    http.addHeaders ={cookie = wb.cookie}
   
   
var str = http.get(wb.location);
   
if( str ){
        
if(!string.isUtf8(str))
            str = string.fromto(str,0,65001);   
            
        winform.edit.text = string.html.toText(str);
    }
   
else {
        winform.edit.text =
"";
    }
   
    winform.custom.hide =
true;
    winform.edit.hide =
false;
}

winform.btnOpen.oncommand =
function(id,event){
    wb.go( winform.editUrl.text );
    winform.custom.hide =
false;
    winform.edit.hide =
true;
}

wb.onURLChanged =
function(url){
    winform.editUrl.text = url;
}

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

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2017-12-26 02:17:29 | 显示全部楼层

web.kit新版提供的cookie管理函数

import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit 获取所有网站cookie")
/*}}*/

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

wb.go(
"http://www.baidu.com")
winform.show();   

win.delay(1000);

//写网站cookie
wb.cookieSet(   
    name =
"test";
    value =
"abc";
    domain =
".baidu.com";
    path =
"/";
    expires = time().addday(30)
)

//输出所有网站cookie
winform.msgbox( wb.cookieData().stringify() )

//转换为HTTP请求头格式
var cookies  = wb.cookieData().getCookies("baidu.com")

//首先取浏览器的userAgent,假装是浏览器
import inet.http;
var http = inet.http(wb.script.navigator.userAgent);

//禁用默认的cookie管理
http.disableCache();
http.disableCookies();

//把浏览器的cookie加上去
http.addHeaders ={cookie = cookies }

//跟浏览器共话
var str = http.get(wb.location);

win.loopMessage();
webkit的cookie格式支持标准库中的,可以使用 fsys.cookies加载,转换,存储,详细的请看库函数文档。

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2017-12-29 02:10:36 | 显示全部楼层

web.kit 上传文件

web.kit可以直接支持上传文件:
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebKit上传文件")
winform.add()
/*}}*/

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

wb.html =
/**
<body>
    <form action="http://eu.httpbin.org/post" method="post" enctype="multipart/form-data">
        选择文件:<input type="file" name="file1" /><br />
        <input type="submit" value="上传" />
    </form>
</body>
**/


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

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2017-12-29 02:11:26 | 显示全部楼层

web.kit 使用js调用aardio上传文件

import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit上传文件示例")
/*}}*/

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

import inet.http;
import web.multipartFormData;
import fsys.dlg;
wb.external = {

    upload =
function(userAgent,proc){
        
var postSize,contentLength = 0;
        
var filePath  = fsys.dlg.open(,"选择要上传的文件");
        
if(!filePath) return;
        
        
var form = web.multipartFormData();
        form.add(
"username","用户名");
        form.add(
"password","密码");
        form.addFile(
"filename",filePath);
        
        
//使用webkit的userAgent,假装是webkit客户端
        var http = inet.http(userAgent);
        http.disableCookies();
//禁用默认的cookie
        http.disableCache(); //强制刷新
        http.addHeaders ={
            cookie = wb.cookie;
//添加浏览器的cookie
        }
        
        http.onSendBegin =
function(){
            contentLength = form.size();
            
return contentLength;
        }
        http.onSend =
function(remainSize){
            
var str = form.read(0x2000);
            
if(!#str)return;
            postSize = postSize + #str;
            proc( contentLength,postSize,remainSize-#str );
            win.delay(10)
            
return str;
        }
        
var json = http.post("http://eu.httpbin.org/post",,{ ["Content-Type"] = form.contentType() }  );

        wb.document.write(
"<pre>"+json+"</pre>")
    };
}
wb.html =
/**
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
    <a href='javascript:external.upload(navigator.userAgent,
        function(contentLength,postSize,remainSize){
            document.write( "<br>总大小:" + contentLength +" 已上传:" + postSize + " 剩余:" + remainSize);
        });'>上传</a>
</body>
</html>
**/


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

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 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();
回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 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.aardio.com/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();

回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2014-11-15 15:40:13 | 显示全部楼层

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.kit.form;
var wb = web.kit.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();
回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2014-11-15 15:40:13 | 显示全部楼层

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();


注意:
1、wke内核使用SVG字体,如果遇到不能正常显示的图标字体,可尝试用FontForge打开重新生成一次即可。
2、字体是禁止跨域链接的,不要链接不同域名下的字体。

另外,使用 import win.fontAwesome 加载的字体也可以直接支持webkit(在CSS里可以直接使用该字体)
回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 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文件。


回复

使用道具 举报

186

主题

2542

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
 楼主| 发表于 2014-11-15 15:40:13 | 显示全部楼层

WebKit调用VLC播放器控件播放视频

注意要升级web.kit扩展库,示例代码:
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebKit播放视频测试(VLC控件)";right=759;bottom=469)
/*}}*/

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

wb.html =
/**
<object type='application/x-vlc-plugin' id='vlc' events='True' width="100%" height="100%">
    <param name='mrl' value='rtmp://live.hkstv.hk.lxdns.com/live/hks' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
</object>

**/


winform.show()
win.loopMessage();

实际上vlc网页插件还是包装libvlc,所以可以自带libvlc就不用写注册表什么的,例子:
import win.ui;
/*DSG{{*/
var winform = win.form(text="WebKit播放视频测试(VLC控件)";right=759;bottom=469)
/*}}*/

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

wb.html =
/**
<object type='application/x-vlc-plugin' id='vlc' events='True' width="100%" height="100%">
    <param name='mrl' value='rtmp://live.hkstv.hk.lxdns.com/live/hks' />
    <param name='volume' value='50' />
    <param name='autoplay' value='true' />
    <param name='loop' value='false' />
    <param name='fullscreen' value='false' />
</object>

**/


winform.show()
win.loopMessage();

自带libvlc需要在plugins目录下放npvlc.dll,这个我已经在新的web.kit扩展库里放好了。
另外libvlc要自己下载解码器,http://download.aardio.com/v10.files/demo/libvlc-plugins.7z ,不然vlc控件会崩溃。

回复

使用道具 举报

0

主题

31

帖子

337

积分

培训班

积分
337
QQ
发表于 2014-11-21 08:40:54 | 显示全部楼层

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

教程真不错。
回复

使用道具 举报

0

主题

1

帖子

16

积分

新手入门

Rank: 1

积分
16
发表于 2014-11-28 12:53:07 | 显示全部楼层

不错哦,多种方式选择。

不错哦,多种方式选择。
回复

使用道具 举报

7

主题

161

帖子

935

积分

三级会员

Rank: 4

积分
935
发表于 2014-12-10 22:09:41 | 显示全部楼层

学习了。谢谢!

学习了。谢谢!
有眼界才有境界,有实力才有魅力,有思路才有出路!
使用20%的努力,带动80%的资源,创造100%的成功!
回复

使用道具 举报

0

主题

10

帖子

56

积分

一级会员

Rank: 2

积分
56
发表于 2015-2-11 17:41:01 | 显示全部楼层

学习了

学习了
回复

使用道具 举报

4

主题

26

帖子

203

积分

二级会员

Rank: 3Rank: 3

积分
203
QQ
发表于 2015-4-19 12:59:21 | 显示全部楼层

不多说,支持

不多说,支持
回复

使用道具 举报

0

主题

1

帖子

10

积分

新手入门

Rank: 1

积分
10
发表于 2015-5-13 22:09:37 | 显示全部楼层

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

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

使用道具 举报

1

主题

12

帖子

76

积分

一级会员

Rank: 2

积分
76
发表于 2015-5-22 08:17:50 | 显示全部楼层

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

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

使用道具 举报

0

主题

3

帖子

22

积分

新手入门

Rank: 1

积分
22
发表于 2015-7-22 09:55:00 | 显示全部楼层

这条腿够我玩好久

这条腿够我玩好久
回复

使用道具 举报

2

主题

5

帖子

64

积分

一级会员

Rank: 2

积分
64
发表于 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的用户名和密码呢??
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2018-9-20 06:56 , Processed in 0.109375 second(s), 38 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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