跳到主要内容

GUI 编程

提示
  • 盘古 OS 的设计仍在逐步改进与完善中，本文将随时发生变化，感兴趣的朋友们可以时刻保持关注；
  • 在下方的版权声明中有本文作者的联系方式，有不同意见和相关建议的朋友可以与其保持联系；
  • 也可在本文底部的评论区登录 Github 后，直接发表您的观点；
版权声明

基于函数化、数据结构化的图形用户界面（GUI）语言， 其用于构建 盘古OS 的用户交互界面。

该语言为开箱即用的GUI编程语言， 编程模式类似于 Elm（数据也集中管理和更新）， 但运行方式类似于 HTML， 可直接执行，不需要编译，不需要特定的执行器（由 盘古OS 提供运行支持）， 也不需要记忆各类复杂的组件，可快速编写并验证用户界面。

同时，将为该语言实现一套标准的可视化设计器和设计流程，方便进行统一、规范化的用户界面开发。

架构模式为：底层图形绘制引擎+纯函数 GUI 语言。

各个组件均为对象，且与代码可双向联动更新，即，调整组件时可立即反馈到对函数的修改， 修改函数时可即刻显示组件的变化。

实现目标​

  • 函数式 UI 编码
  • 结构化数据模型，包含UI视图、业务模型，视图与业务双向联动
  • 高性能、跨平台
    • 跨平台指的是跨设备的能力，而非跨操作系统
  • 自适应、响应式
    • 布局方式，一种叫 Box Layout，一种叫 Constraint-based Layout
    • 元素尺寸实时更新，元素自动增长
  • 矢量绘图
    • 矢量字体: TrueType
  • 2D、3D 支持
  • 随时均可快速编写可用界面
  • 统一国际化机制，支持为不同设备设计不同界面
    • 通过可逆计算的差量机制实现国际化

实现流程​

  • 图形渲染引擎绘制图形
    • OpenGL: 3D图形库，不适合绘制2D图形
    • SDL: 2D图形窗口库，可与OpenGL集成以支持3D绘制
    • Vulkan: 跨平台的2D和3D绘图应用程序接口，OpenGL替代者。Vulkan支持多线程，OpenGL不支持多线程
    • Skia: Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and ChromeOS, Android, Flutter, Mozilla Firefox and Firefox OS, and many other products.
  • 事件、布局、动画管理

实现细节​

  • 滚动条可自定义样式，设置监听等
  • 仅为应用提供透明窗口，窗口内及窗口边框由应用处理
    • 根据系统或窗口管理器的要求，对外提供窗口标题、状态等信息
    • 内置窗口放大、缩小、缩放等处理函数
  • 窗口状态管理、业务模型管理
  • 组件自身独立处理其内部的消息和状态，但可对外提供监听
  • 独立窗口展示应用窗口状态树和调试信息，并可进行调试
  • 视图可自动实现路由，支持任意层级的切换
  • 独立启动的应用自动放在window组件中，应用内启动的其他应用以内嵌视图形式集成
  • 远程GUI共享就是在设备间传递窗口的绘制函数和数据
  • 界面只能局部无响应，不能出现整体假死，也不能阻塞鼠标、键盘等输入
  • 能够确切地知道页面中所有元素就绪的时间，并可触发监听
    • 任何规模和复杂度的组件都发送就绪事件
    • 引擎是能够知道以组件为单位的渲染起止时间的
  • 组件边缘可配置变化的样式和触发的事件，实现拖动、滚动、缩放等操作
  • 桌面自身就是视窗容器
    • 基础组件即为容器。无形状，无边界，只有从属，可以通过样式，从视觉上感知其边界范围
    • 统一管理和查看隐藏和透明窗口，以消除安全隐患
os.gui.desktop.window
os.gui.message
div({
  id: 'panel',
  style: {
    color: Color.Red,
    fontSize: 10,
  },
  onClick: onClickFn,
}, [])

function onClickFn(e) {
  alter('Clicked');
}

开发实验​

export http_proxy=http://192.168.10.47:6418; export https_proxy=$http_proxy

apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 648ACFD622F3D138 0E98404D386FA1D9 605C66F00D6C9793

apt-get install gcc bash-completion vim openssh-server terminator fonts-noto git rsync

参考​

编辑此页
最后由 flytreeleft 于 更新