Sciter.js 指南 - GUI的窗口管理特性详解

如果第一次写桌面的 GUI 程序，可能对不同的窗口，还有窗口特殊的一些参数不了解，在这我专门来介绍一下在创建一个新窗口出来时，Sciter.js 作为一个跨平台的 HTML/CSS/JS 桌面应用程序引擎，提供哪些丰富的窗口管理功能，这些功能可以直接通过在根<html>元素上定义特定属性来实现。下面我将详细介绍这些窗口管理特性。

窗口类型与外观

窗口框架(window-frame)

Sciter.js支持多种窗口框架类型，通过window-frame属性设置：

"default" - 标准系统窗口
"standard" - 类似default
"extended" - 可自定义窗口标题栏，没有系统的哪些部分了，需要完全自己来画。比如关闭，前一个文章有介绍。
"solid" - 无边框窗口
"solid-with-shadow" - 带阴影的无边框窗口
"transparent" - 透明窗口，这个是创建异形窗口的关键

示例： 在samples.sciter/window/window-chrome-types.htm中，提供了多种窗口框架类型的演示：

html 复制代码

<html window-frame="extended" 
      window-width="50%"
      window-height="50%">
    <head>
        <title>Test</title>
        <style src="extended-window-crome.css" />
    </head>
    
    <window-header>
      <window-icon role="window-icon" />
      <window-caption role=window-caption>Extended window</window-caption>
      <window-buttons>
        <window-button role="window-minimize"></window-button>
        <window-button role="window-maximize"></window-button>
        <window-button role="window-close"></window-button>
      </window-buttons>
    </window-header>
    <body>...</body>
</html>

窗口尺寸

Sciter.js允许控制窗口的初始大小和限制：

window-width/window-height - 窗口初始尺寸
window-min-width/window-min-height - 窗口最小尺寸
window-max-width/window-max-height - 窗口最大尺寸

这些值可以是像素值、百分比或CSS单位。

示例： 在samples.sciter/window/chrome-types/window-frame-solid-with-shadow.htm中：

html 复制代码

<html window-frame="solid-with-shadow"
    window-width="50%"
    window-height="50%">
    <!-- ... -->
    <script>
    Window.this.minSize = [400*devicePixelRatio,300*devicePixelRatio];
    Window.this.maxSize = [1000*devicePixelRatio,800*devicePixelRatio];
    </script>
</html>

窗口调整大小(window-resizable)

控制窗口是否可调整大小及调整区域大小：

true - 允许调整大小
false - 禁止调整大小
<length> - 指定边缘调整区域大小，如"6px"

示例： 在演示文件demos/integration/res/default.htm中：

html 复制代码

<html window-corners="not-round" 
      window-resizable="6px">
    <!-- ... -->
</html>

窗口圆角(window-corners)

在支持的操作系统(如Windows 11)上设置窗口圆角：

"default" - 系统默认圆角
"not-round" - 无圆角
"round" - 圆角
"round-small" - 小圆角

示例：

html 复制代码

<html window-corners="not-round" 
      window-resizable="6px">
    <!-- ... -->
</html>

窗口位置与对齐

窗口对齐(window-alignment)

可以控制窗口相对于桌面或父窗口的位置：

1..9 - 相对于桌面对齐(如小键盘布局)
-1..-9 - 相对于父窗口对齐

示例： 在samples.sciter/window/window-center.htm中：

html 复制代码

<html window-frame="standard"
      window-width="max-content"
      window-height="max-content"
      window-alignment="5">
    <!-- 5表示居中 -->
</html>

窗口视觉效果

背景模糊(window-blurbehind)

在支持的平台上启用窗口背景模糊效果：

示例： 在samples.sciter/window/blurbehind-modes.htm中：

html 复制代码

<script type="module">
document.on("change","form", (_,form) => {
    const props = form.value;
    Window.this.blurBehind = [props.ambience, props.tone, props.source].join(" ");
    if(props.ambience == "dark")
      document.attributes["theme"] = "dark";
    else 
      document.attributes["theme"] = "light";
});
</script>

窗口状态控制

窗口状态(window-state)

设置窗口的初始状态：

"shown" - 正常显示
"minimized" - 最小化
"maximized" - 最大化
"full-screen" - 全屏
"hidden" - 隐藏

示例： 在samples.sciter/window/chrome-types/window-frame-default.htm中：

html 复制代码

<script|module>
document.on("change","#full-screen", function(evt,checkbox) {
  Window.this.state = checkbox.value ? Window.WINDOW_FULL_SCREEN : Window.WINDOW_SHOWN;
});
</script>

窗口控制按钮

控制窗口是否显示最小化和最大化按钮：

window-minimizable - 是否可最小化
window-maximizable - 是否可最大化

结语

Sciter.js通过在<html>元素上定义特定属性，提供了强大的窗口管理功能，使开发者能够创建各种类型的窗口界面。这种方法既简单又灵活，适合开发各种桌面应用程序。与传统前端开发不同，Sciter.js直接控制原生窗口，使得桌面应用开发变得更加便捷。

上面是我找出来的示例，大家也可以在 sdk 的目录下见到，这介绍了如何通过HTML属性和JavaScript API来控制窗口的外观、大小、位置和行为。