aardio 官方社区

 找回密码
 注册会员

QQ登录

只需一步,快速开始

搜索
查看: 24796|回复: 4

一个简单的Sciter窗口

[复制链接]

3

主题

37

回帖

614

积分

培训班

积分
614
发表于 2017-12-1 12:09:18 | 显示全部楼层 |阅读模式
Sciter.png



import win.ui;
/*DSG{{*/
winform = win.form(text=
"sciter";right=759;bottom=469;exmode="none")
winform.add()
/*}}*/

import win.ui;
import web.sciter;
//winform.enableDpiScaling();
wbSciter = web.sciter( winform );  

if( _STUDIO_INVOKED ){
   
import web.sciter.debug;
    wbSciter.attachEventHandler( web.sciter.debug );
}
/*---------------------------------------------------------------*/

winform.adjust =
function( cx,cy,wParam ) {
   
var ltRoot = wbSciter.documentElement;
   
var elMax = ltRoot.querySelector('btn.max[role="window-maximize"]')
    ltRoot.querySelector(
'caption').innerText=winform.text;
   
   
select(wParam) {
        
case 0x2 {
            
if (elMax) {
                elMax.innerText =
"2";//最大化时替换为还原按钮符号
                ltRoot["window-resizable"]="false";//关闭resizable
               
            }
        }
        
case 0x0 {
            
if (elMax) {
                elMax.innerText =
"1";//还原时替换为最大化按钮符号
                ltRoot["window-resizable"]="true";//打开resizable
            }
        }
else {
            
return;
        }
    }

   
import console;
   
//console.dump(ltRoot["window-resizable"])
   
}

/*---------------------------------------------------------------*/
wbSciter.html =
/**
<!doctype html>
<html window-frame="solid-with-shadow" window-resizable >

<head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<header id="window" role="window-maximize">
    <icon role=window-icon></icon><!-- 窗口图标按钮 -->
    <caption role="window-caption">edit</caption><!-- 窗口标题元素 – 用户可以在它之上按住鼠标来拖动窗口。 -->
    <btn.min role="window-minimize">0</btn><!-- 最小化按钮 -->
    <btn.max role="window-maximize">1</btn><!-- 最大化/还原按钮 -->
    <btn.close role="window-close">r</btn><!-- 关闭按钮 -->
</header>

<body>
    <main>
        <frameset cols="200dip,*"> <!-- 一侧200dip,另一侧占满 -->
            <div id="left">
            </div>
            <div id="right">
            </div>
        </frameset>
    </main>
</body>

</html>
**/


wbSciter.css =
/**

html {
    //background:transparent;
    font:system;
    color:#ddd;
    max-width:1000dip;/*最大宽度*/
    max-height:600dip;
    min-width:500dip;/*最小宽度*/
    min-height:300dip;
}
body {
    margin:0;
    padding:0;
}
header#window {
    height:30dip;
    flow:horizontal;
    font:system;
    background:#47484B;
}
header#window > icon {
    margin:* 5dip;
    width:16dip;
    height:16dip;
    display:inline-block;
    text-align:center;
    background-image:url(https://im.qq.com/favicon.ico) cover;
    background-size:cover;
}
header#window > caption {
    width:*;
    text-align:center;
    margin:* 0;
}
header#window > btn {
    background-color:#47484B;
    behavior:clickable;/*可点击*/
    width:30dip;
    font-family:"Marlett";/*该字体显示按钮符号*/
    display:inline-block;
    font-size:16dip;
    padding:4dip;
    text-align:center;
}
header#window > btn.close:hover {
    background-color:#ff4b00;
}
header#window > btn:hover {
    background-color:#0000002c;
    color:#fff;
}
main {
    size:*;
    flow:horizontal;
    background-color:#fff;
}
frameset {
    background-color:#fff;
}
div#left {
    font:system;
    border:none;
    size:*;
    overflow-y:scroll-indicator;
    background-color:#00a2ff;
}
div#right {
    font:system;
    border:none;
    size:*;
    overflow-y:scroll-indicator;
}

**/

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

170

主题

2182

回帖

1万

积分

管理员

积分
13226
发表于 2017-12-1 12:10:39 | 显示全部楼层
感谢分享

7

主题

33

回帖

428

积分

二级会员

积分
428
发表于 2017-12-1 14:31:32 | 显示全部楼层
感谢。。。

0

主题

1

回帖

6

积分

新手入门

积分
6
发表于 2018-1-3 17:20:49 | 显示全部楼层
感觉很不错.不知道有没有aar+sciter的教程.很想将现有的网页模板稍稍改动一下就可以做成一个桌面应用

170

主题

2182

回帖

1万

积分

管理员

积分
13226
发表于 2018-1-3 18:16:07 | 显示全部楼层
lovecruel 发表于 2018-1-3 17:20
感觉很不错.不知道有没有aar+sciter的教程.很想将现有的网页模板稍稍改动一下就可以做成一个桌面应用

在aardio扩展库管理器里,双击 web.sciter可以下载范例,
里面有网友翻译的中文教程和例子。

sciter的用法跟htmlayout是基本一样的,可以先学习htmlayout,htmlayout和教程很多。
sciter就是多了tiscript脚本,关于这个脚本可以看官方提供的文档学习。

sciter虽然用了HTML,CSS语法,但直接移植现有的网页不是很适合的,他更像一个界面引擎,
不是 web.form,web.kit,electron那样的浏览器组件。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

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

GMT+8, 2024-5-29 03:42 , Processed in 0.057732 second(s), 25 queries .

Powered by Discuz! X3.5

Copyright © 2001-2023 Tencent Cloud.

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