aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 134279|回复: 38

使用 web.kit 开发桌面软件

  [复制链接]

166

主题

2154

回帖

1万

积分

管理员

积分
13056
发表于 2014-11-15 14:50:18 | 显示全部楼层 |阅读模式
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等各种文件用相对路径就可以了(跟做网站的规则完全一样)。

使用 web.kit.fileSystem 支持嵌入资源文件,生成独立 EXE 程序

aardio 工程目录的「内嵌资源」属性如果设为 true ,则该目录下的文件在发布后会嵌入 EXE 资源,典型的例如 /res/ 目录:

res.png
使用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();

使用嵌入式 HTTP 服务器支持嵌入资源文件,生成独立 EXE 程序

导入  wsock.tcp.simpleHttpServer 或 wsock.tcp.asynHttpServer 都可以创建嵌入式 HTTP 服务器,自动就可以支持嵌入资源文件,而且可以支持用  aardio 模板语法写网页。

wsock.tcp.asynHttpServer 是单线程异步 HTTP 服务器,wsock.tcp.simpleHttpServer 是多线程 HTTP 服务器,任选其一就可以。

wsock.tcp.simpleHttpServer 为例:

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;  
var webkit = web.kit.form(winform);

import wsock.tcp.simpleHttpServer;
var indexUrl = wsock.tcp.simpleHttpServer.startUrl("/res/index.aardio");
webkit.go( indexUrl );

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

我们需要调用 wsock.tcp.simpleHttpServer.startUrl() 创建一个迷你型的web服务端,这个函数很有意思,创建的服务端自动获取可用端口,所以不用端心端口冲突的问题,并且支持多线程并发请求,自动开始,自动退出,不需要你做任何线程操作,所有事他全部做好,只会返回给你一个可以访问的网址。如果不指定任何参数,wsock.tcp.simpleHttpServer.startUrl()  返回的网址指向当前工程根目录,并且保证网址尾部不带斜杠。 如果指定一个路径参数,则会转换为通过 HTTP 嵌入服务器访问该文件的地址。

aardio 10支持在服务端使用HTML模板语言,参考:《 aardio 模板语法 》

这种语言级的 HTML 模板语法非常方便,其实在 web.kit 中只要通过 wsock.tcp.simpleHttpServer 或 wsock.tcp.asynHttpServer  访问网页也可以使用模板语法。

我们也可在在 HTMLayout 中使用 HTML 模板语法,参考:《 HTMLayout 中使用 aardio 模板语法 》

评分

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

查看全部评分

166

主题

2154

回帖

1万

积分

管理员

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

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2014-11-15 15:18:37 | 显示全部楼层
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、 如何使用 NPAPI 插件

web.kit会在当前EXE目录下的 plugins 子目录下搜索插件,
另外会在 %localappdata%\aardio\std\np-plugin\plugins  目录下搜索 NPAPI 插件。
web.kit也支持在注册表中自动搜索HKCU\Software\MozillaPlugins下面注册的 NPAPI 插件路径并加载。

在 aardio 中可以使用扩展库添加新的 NPAPI 插件。
例如  import web.npPlugin.flash 引入 flash 插件,import web.npPlugin.vlc 引入 VLC 插件。
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、 如何设置代理
很简单,通过环境变量设置代理,格式: string.setenv("HTTP_proxy","http://代理服务器IP:代理端口/")

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

//设置webkit代理
string.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";
})


166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2017-10-22 19:39:20 | 显示全部楼层
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:
//Firebug Lite
import win.ui;
/*DSG{{*/
winform = win.form(text=
"请稍候正在加载 firebug-lite.js......";right=1095;bottom=687)
winform.add()
/*}}*/

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

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

wbKit.html =
/**
<!doctype html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/gh/firebug/firebug-lite@firebug1.4/build/firebug-lite.js#startOpened"></script>
</head>
<body>
    <div id="header">现在主流的浏览器都提供开发工具,都可以通过按F12打开开发工具非常方便</div>
    <div id="container">
        在 web.kit 里只要简单的在代码中加上下面的代码也可以启动一个简单的开发工具:<br><br>
        <script src="https://cdn.jsdelivr.net/gh/firebug/firebug-lite@firebug1.4/build/firebug-lite.js#startOpened"></script>
    </div>
</body>
</html>
**/


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

/*
firebug lite支持的参数如下:
    saveCookies - false
    startOpened - false
    startInNewWindow - false
    showIconWhenHidden - true
    overrideConsole - true
    ignoreFirebugElements - true
    disableXHRListener - false
    disableWhenFirebugActive - true
    enableTrace - false
    enablePersistent - false

可以直接写在js网址后面,多个参数用逗号分开,例如:
    path/to/firebug-lite.js#enableTrace=true,overrideConsole=false

只写选项不写值默认就是(true)例如:
    path/to/firebug-lite.js#enableTrace,overrideConsole=false

也可以这样写:
    <script type="text/javascript"
    src="https://cdn.jsdelivr.net/gh/firebug/firebug-lite@firebug1.4/build/firebug-lite.js">
    {
        overrideConsole: false,
        startInNewWindow: true,
        startOpened: true,
        enableTrace: true
    }
    </script>
   
注意:
    不要改为压缩版 firebug-lite.min.js,这个JS压缩后会出错
*/


   

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2017-12-26 02:14:52 | 显示全部楼层
新版改进了一下(升级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();


166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2017-12-26 02:16:36 | 显示全部楼层
大家知道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();

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2017-12-26 02:17:29 | 显示全部楼层
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加载,转换,存储,详细的请看库函数文档。

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2017-12-29 02:10:36 | 显示全部楼层
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();

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2017-12-29 02:11:26 | 显示全部楼层
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();
   

166

主题

2154

回帖

1万

积分

管理员

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

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 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="WKE 浏览器简单示例";right=1123;bottom=570;border="none";mode="popup")
/*}}*/

import web.npPlugin.flash;
import web.kit.layeredWindow;
var mb = web.kit.layeredWindow(winform);//创建透明分层窗口

mb.html =
/**
<!doctype html>
<html>
<body>
    <object width="500" height="500" type="application/x-shockwave-flash" >
        <param name="movie" value="https://update.aardio.com/v10.files/demo/transparent.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();

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2014-11-15 15:40:13 | 显示全部楼层
此示例演示了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)
winform.add()
/*}}*/

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="https://lib.baomitu.com/echarts/4.8.0/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();


如果要使用本地 echarts.js,导入 web.kit.fileSystem 就可以了,示例工程见附件:
wke.echarts.7z (213.82 KB, 下载次数: 1071)

166

主题

2154

回帖

1万

积分

管理员

积分
13056
 楼主| 发表于 2014-11-15 15:40:13 | 显示全部楼层
示例:
import win.ui;
/*DSG{{*/
var winform = win.form(text="FontAwesome 图标字体演示";right=759;bottom=469)
/*}}*/

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

wb.html =
/**
<head>
<link href="https://cdn.jsdelivr.net/gh/aardio/font-awesome-wke/font-awesome.min.css" rel="stylesheet">
</head>
<body>

<i class="fa fa-film  fa-3x" ></i>
<span class="sr-only">Loading...</span>
<pre>

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

winform.show();

win.loopMessage();

0

主题

30

回帖

344

积分

培训班

积分
344
QQ
发表于 2014-11-21 08:40:54 | 显示全部楼层
教程真不错。

0

主题

1

回帖

17

积分

新手入门

积分
17
发表于 2014-11-28 12:53:07 | 显示全部楼层
不错哦,多种方式选择。

6

主题

150

回帖

925

积分

三级会员

积分
925
发表于 2014-12-10 22:09:41 | 显示全部楼层
学习了。谢谢!

0

主题

10

回帖

56

积分

一级会员

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

4

主题

22

回帖

203

积分

二级会员

积分
203
QQ
发表于 2015-4-19 12:59:21 | 显示全部楼层
不多说,支持

0

主题

1

回帖

10

积分

新手入门

积分
10
发表于 2015-5-13 22:09:37 | 显示全部楼层
6.web.kit 支持aardio嵌入资源文件。。。  这一节,怎么嵌入呀?例子好像不全吧,新手求全码

1

主题

11

回帖

76

积分

一级会员

积分
76
发表于 2015-5-22 08:17:50 | 显示全部楼层
老大的这段代码够我学习好久

0

主题

3

回帖

22

积分

新手入门

积分
22
发表于 2015-7-22 09:55:00 | 显示全部楼层
这条腿够我玩好久

2

主题

3

回帖

64

积分

一级会员

积分
64
发表于 2016-1-7 22:20:03 | 显示全部楼层
Jacen.He 发表于 2014-11-15 15:25
5.1、 如何使用插件
web.kit会在EXE目录下加载plugins目录下的插件,并且在注册表中自动搜索HKCU\Software ...

请问怎么设置代理IP的用户名和密码呢??

41

主题

81

回帖

950

积分

荣誉会员

积分
950
发表于 2016-1-8 05:50:53 | 显示全部楼层
本帖最后由 cad 于 2016-1-8 05:56 编辑
又一只耳朵 发表于 2016-1-7 22:20
请问怎么设置代理IP的用户名和密码呢??


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


0

主题

1

回帖

6

积分

新手入门

积分
6
发表于 2016-1-10 20:56:47 | 显示全部楼层
这得看看了!

1

主题

9

回帖

79

积分

一级会员

积分
79
发表于 2016-1-18 22:07:20 | 显示全部楼层
暂停按任意键后继续的代码怎么写哦
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2025-1-13 13:52 , Processed in 0.096247 second(s), 32 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

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