_/_/_/  _/_/_/_/  _/      _/  _/    _/  _/_/_/   
  _/        _/        _/_/    _/  _/    _/    _/      
 _/  _/_/  _/_/_/    _/  _/  _/  _/    _/    _/       
_/    _/  _/        _/    _/_/  _/    _/    _/        
 _/_/_/  _/_/_/_/  _/      _/    _/_/    _/_/_/       

Introduction

GenUI是一个创新的SFP前端框架，使用Rust语言开发，最初受到Vue3和Makepad的启发。旨在帮助用户更有效地使用Rust编写前端项目。

Why SFP

GenUI的SFP功能是指其可插拔设计，可以根据开发者的需求调整和使用不同的底层技术或框架，如Makepad或Slint。这种设计允许GenUI通过专门为这些底层框架设计的插件来扩展和自定义其功能，从而更好地适应各种开发场景。

1. 通过插件提供强大的能力
2. 不受固有底层限制
3. 同时也是一种挑战

Advantage

• 多框架兼容性
• 灵活
• 可扩展
• 社区助力
• 尊重用户

Target Group

• 前端开发人员和全栈开发人员
• 创新和实验项目的开发人员
• 开源社区
• 独立开发人员
• 中小型项目开发（现在）

Example

• gosim.org | Source Code
• shader genui | Source Code

Support Plugin

以下是当前GenUI支持的以及未来极有可能支持的底层

• Makepad
• Zed
• Dioxus

QuickStart

这个示例将向你展示如何使用GenUI框架结合Makepad作为转换底层

Step1: Create a new WorkSpace Rust Project

Step1.1 创建项目

使用cargo new {{project_name}}创建一个简单Rust项目

cargo new gen_makepad_simple

Step1.2 清理项目并改为WorkSpace

接下来删除项目中的src目录并修改Cargo.toml文件

[workspace]
members = ["ui"] # ui表示GenUI的代码编写目录

Step1.3 创建GenUI项目目录

cd ./gen_makepad_simple
cargo new ui

Step1.3 在ui目录中创建UI根文件

在ui目录中创建views目录，在views中创建root.gen和mod.gen文件

--- ui
|------ views
|-------------- mod.gen
|-------------- root.gen
|------ src
|-------------- main.rs

Step2: 创建root.gen

• template: widget结构部分(我称这三个widget为root铁三角)
  • root: makepad UI root根
    • window: 主窗口
      • view: 主视图
• style: 嵌套编写widget的props(你也可以称之为styles)

<template>
  <root id="ui">
    <window id="main_window">
      <view flow="Down" height="All" align="0.5 0.5">
        <label text="Gen + Makepad Project Hello World!!!" font_size="16.0"></label>
      </view>
    </window>
  </root>
</template>

<style>
#ui{
  #main_window{
    width: Fill;
    height: Fill;
    background_visible: true;
    background_color: #1C2128;
    flow: Down;
    window_size: 1024.0 820.0;
    window_position: 300.0;
  }
}
</style>

Step3: 编写mod.gen导出root

在.gen文件中如果直接编写Rust代码需要使用<script>标签进行包裹

#![allow(unused)]
fn main() {
<script>
pub mod root;
</script>
}

Step4: main.rs

是GenUI的编译入口，提供编译指向的能力

• 使用Target::makepad()构建了一个Makepad Plugin Config Builder，这最终指定编译底层目标为Makepad平台
  • 使用entry方法设置makepad的App入口文件为app.rs
  • 使用root方法指定E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen这个文件作为UI的根文件(通过这种方式，来切换多个UI根)
  • add_dep()方法将依赖添加到编译器中, local指定了makepad-widgets这个库依赖本地的位置
  • 最终调用build方法返回一个最终构建完成的compiler
• 使用app()函数创建一个App编译器实例并借助上方构建的compiler作为编译插件
• 调用run()方法启动编译器

use gen_compiler::{app, Target, Builder};

fn main() {
    let compiler = Target::makepad()
        .entry("app")
        .root("E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen")
        .add_dep("makepad-widgets")
        .local("E:/Rust/try/makepad/makepad/rik/makepad/widgets")
        .build()
        .build();

    // set app and specify target
    let mut app = app(Some(Box::new(compiler))).build();

    let _ = app.run();
}

Video

The following video can be used as a reference for learning

GenUI With Makepad QuickStart

2024-07

GenUI With Makepad QuickStart

Sheng (2024-06-28)

2024-08

GenUI With Makepad Full Features Display 2024-08

Sheng (2024-07-31)

GenUI Structure

• src_gen: 编译后makepad原始代码目录
• ui: GenUI代码目录
  • src/main.rs: 主入口文件
  • resources: 静态文件目录
  • views: .gen文件目录(当然这个名字可以是任意的)
• .gen_cache: GenUI缓存文件
• .gen_ignore: GenUI忽略的编译文件
• gen.toml: GenUI项目配置文件

GenUI Env

Environment variables used by the compiler.

• GENUI_TARGET: Set GenUI Compiler target
• GENUI_LOGO: Set Logo is print or not
• GENUI_LOG_LEVEL: Set GenUI Log Level

Details

How to Set Env Variable

Windows

setx GENUI_TARGET makepad

Mac/Linux

export GENUI_TARGET=makepad

Use Place

• GENUI_TARGET
• GENUI_LOGO
• GENUI_LOG_LEVEL

GenUI Config Toml

Priority

Compiler > Env > Conf

Although Conf Toml has lowest level, it is the most recommended!

Toml Description

[compiler]
target = "makepad"
log_level = "info"
logo = true

[makepad]
entry = "app"
root = "E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen"
[makepad.dependencies] 
makepad-widgets = { path = "E:/Rust/try/makepad/makepad/rik/makepad/widgets" }
[makepad.wasm]
check = false
fresh = true
port = 8016

[compiler] Args

• target: Set GenUI Compiler target
• logo: Set Logo is print or not
• logo_level: Set GenUI Log Level

[makepad] Args

• entry: makepad entry app rs file
• root: your ui dir root gen file

[makepad.dependencies]

required now!

format: makepad-widgets = { path = "the/latest/makepad-widget/package/path" }

recommand: makepad-widgets = { git = "https://github.com/makepad/makepad", branch = "rik" }

[makepad.wasm]

not required

GenUI Compiler

GenUI Compiler is used to compile the current UI project into the underlying target project code

Attention

you should write from project root path as relative path

Example No gen.toml

we can create a compiler without gen.toml file, but we need to specify the target and other configurations

compiler use builder pattern, so you can chain the method to build the compiler, and finally call build method to get the compiler.

use gen_compiler::{app, Target, Builder};

fn main() {
    let compiler = Target::makepad()
        .entry("app")
        .root("E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen")
        .add_dep("makepad-widgets")
        .local("E:/Rust/try/makepad/makepad/rik/makepad/widgets")
        .build()
        .wasm() // do not use if you don't need wasm
        .build()
        .build();

    // set app and specify target
    let mut app = app(Some(Box::new(compiler))).build();

    let _ = app.run();
}

Example With gen.toml

if you have a gen.toml file, you can create a compiler without specifying the target and other configurations the gen.toml file should be in the project root path, such as:

hello
├── src_gen
├────── // ....
├── ui
├────── src
├────── gen.toml

gen.toml

[compiler]
target = "makepad"
log_level = "info"
logo = true

[makepad]
entry = "app"
root = "E:/Rust/try/makepad/Gen-UI/examples/gen_makepad_simple/ui/views/root.gen"
[makepad.dependencies] 
makepad-widgets = { path = "E:/Rust/try/makepad/makepad/rik/makepad/widgets" }

main.rs

gen compiler will read the gen.toml file and create, so you do not need to pass the compiler

If you pass the compiler, the compiler will be used instead of the gen.toml file

use gen_compiler::{app, Builder};

fn main() {
    let mut app = app(None).build();
    let _ = app.run();
}

GenUI Logger

Logo

You can control whether the logo is printed using the system environment variable GENUI_LOGO or through the configuration file in TOML format.

• For more details, see GenUI Environment Setup.
• For configuration, see GenUI Config TOML.

Example:

#![allow(unused)]
fn main() {
GenUI-Compiler :: [2024-06-29T08:53:57Z] :: INFO >>> 

     _/_/_/  _/_/_/_/  _/      _/  _/    _/  _/_/_/
  _/        _/        _/_/    _/  _/    _/    _/
 _/  _/_/  _/_/_/    _/  _/  _/  _/    _/    _/
_/    _/  _/        _/    _/_/  _/    _/    _/
 _/_/_/  _/_/_/_/  _/      _/    _/_/    _/_/_/

}

Services

The GenUI Logger provides detailed information about the state of various services. Here are some log examples:

#![allow(unused)]
fn main() {
GenUI-Compiler :: [2024-06-29T08:53:57Z] :: INFO >>> 🔧 Log Service is starting... Log entries will be available after the `app event::Change` occurs!
GenUI-Compiler :: [2024-06-29T08:53:57Z] :: INFO >>> 🔧 Source Generator Service started successfully!
GenUI-Compiler :: [2024-06-29T08:53:57Z] :: INFO >>> ✅ Cache Service: Cache file written successfully!
GenUI-Compiler :: [2024-06-29T08:53:57Z] :: INFO >>> 🔧 App is running...
GenUI-Compiler :: [2024-06-29T08:53:57Z] :: INFO >>> 🔧 Watcher Service started successfully!
}

Compile Timing

The logger also tracks and displays compile timings, helping you monitor the compilation process:

#![allow(unused)]
fn main() {
GenUI-Compiler :: [2024-06-28T19:09:24Z] :: INFO >>> File "E:\\Rust\\try\\makepad\\Gen-UI\\examples\\gen_makepad_simple\\ui\\views\\root.gen" compiled successfully.
GenUI-Compiler :: [2024-06-28T19:09:24Z] :: INFO >>> ✅ Cache Service: Cache file written successfully!
GenUI-Compiler :: [2024-06-28T19:09:24Z] :: INFO >>> File "E:\\Rust\\try\\makepad\\Gen-UI\\examples\\gen_makepad_simple\\ui\\views\\root.gen" compiled successfully.
}

GenUI Ignore

在.gen_ignore中是GenUI项目需要忽略监视的文件或目录

• 使用相对路径，相对于当前的GenUI项目目录而言
• 精确到某个文件，请不要使用类似**/*.xxx的方式进行忽略
• 使用换行进行分割
• 当你不添加时默认使用下方默认忽略内容

默认的忽略文件如下所示:

Cargo.toml
src/main.rs
.gitignore
Cargo.lock
target
.gen_cache
.gen_ignore

Props Manual (Comming Soon)

GWPM(GenUI Widget Props Manual)的用途是为了帮助开发者正确使用GenUI属性，并提供各个属性的详细描述和使用示例。

GWPM是GenUI Widgte设计中用于描述Widget的属性的方式。为了确保开发时能正确使用这些属性，我们需要这本手册进行规范。

该手册分为以下几个部分:

• Font(字体)
• Text(文字)
• Background(背景)
• Border(边框)
• Spacing(间距)
• Size(尺寸)
• Position(位置)
• Others(其他)

Note

1. ⛔: 当前并不支持或未开放功能
2. ✅: 已经支持
3. 👍: 推荐使用
4. 👎: 不推荐使用
5. ⚠️: 需要注意, 可能存在隐患, 暂时不要使用或将移除废弃

Type

类型说明文档, 在GenUI中声明值的类型仅限于文档中所示

基础类型

1. usize: 无符号整型
2. isize: 有符号整型
3. f32: 单精度浮点数
4. f64: 双精度浮点数
5. bool: 布尔值
6. String: 字符串
7. ⚠️ Void (废弃)

特殊类型

1. Dep: 静态资源引用
2. Vec: 动态数组
3. Bind: 值绑定类型
4. Function: 方法闭包
5. Struct: 结构体
6. Enum: 枚举
7. UnKnown: 未知推测, 该类型会自动对值类型进行推测处理
8. Animation: 动画类型

组件库内置类型

组件库内置类型指的是在组件库中直接构建的枚举和结构体类型

See Buitin Type (Comming Soon, about 09-24)

Font

文字字体相关属性

Overview

Font Family

字体类型, 来源于字体包, 一般使用字体包的地址或字体包名作为指向, 格式为:

• ✅ ttf (当前makepad plugin支持)
• ⛔ woff
• ⛔ otf
• ⛔ ttc

Example

in line

<label 
    text="hello world" 
    font_family="crate://self/resources/GoNotoKurrent-Bold.ttf">
</label>

in style

<template>
    <label id="label1" text="hello world"></label>
</template>

<style>
#label1{
    font_family: "crate://self/resources/GoNotoKurrent-Bold.ttf";
}
</style>

Font Size

字体大小, 在Web端默认基础字体大小为16px, 但在GenUI中为9.0

Example

<label text="hello world" font_size="32.0"></label>

Font Scale

字体缩放倍数, 默认情况下缩放倍数为1.0, 即不缩放

Example

<label text="hello world" font_scale="1.2"></label>

Top Drop

起始字符高度

Example

<label text="hello world" top_drop="10.0"></label>

Height Factor

Example

<label text="hello world" height_factor="1.5"></label>

Text

文字相关属性

Overview

Background

Size

Border

Position

Animation

GenUI Syntex

本章将介绍GenUI中的各类语法

Color

当前GenUI支持以下几种类型的颜色书写方式:

• Hex: 16进制颜色
• Rgb: rgb类型
• Rgba: rgba带有透明度的rgb类型
• LinearGradient: 线性渐变
• RadialGradient: 径向渐变
• Shader(#cfg(feature="makepad"), 专属于Makepad的绘制写法)

Hex

16进制数字表示法 RGB颜色可以使用以井号开头的6位（或8位）16进制数字（0-F）表示，相当于3个或者4个字节，每个字节相当于10进制数的0至255。 三个字节分别表示红色、绿色和蓝色，第四个字节是可选的，表示Alpha通道。

语法

1. 1位16进制: #1, 最终这会转换为#111111FF
2. 3位16进制: #a1f, 最终这会转换为#AA11FFFF
3. 6位16进制: #FF00AA, 最终这会转换为#FF00AAFF
4. 8位16进制: #AAFF0020, 这是完整的写法

Example

<style>
#ui{
  #main_window{
    //...
    background_color: #1C2128;
  }
}
</style>

Rgb

三原色光模式（RGB color model，又称RGB表色系统、RGB颜色模型、红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加混色，以合成产生各种色彩光。

语法

rgb(r, g, b)

其中r, g, b 各为0~255的颜色表示

Example

<style>
#ui{
  #main_window{
    //...
    background_color: rgb(255, 112, 67);
  }
}
</style>

Rgba

带有Alpha通道的三原色光模式，其中R，指的是红色值（Red）；G，指的是绿色值（Green）；B，指的是蓝色值（Blue）；A，指的是透明度（Alpha）。 R、G、B这三个可以为整数，取值范围为0~255。A的取值为0~1。

语法

rgba(r, g, b, a)

其中r, g, b 各为0~255的颜色表示, a表示alpha通道百分比值，取值0~1

Example

<style>
#ui{
  #main_window{
    //...
    background_color: rgba(255, 112, 67, 0.3);
  }
}
</style>

Linear

创建一个由两种或多种颜色沿一条直线进行线性过渡的图像

语法

linear_gradient(angle, color [proportion], ...)

• angle: 角度
• color: 16进制颜色值
• [proportion]: 颜色占比

Example

<style>
#ui{
  #main_window{
    //...
    background_color: linear_gradient(120deg, #FF938A, #98943F 40%, #6BC46D);
  }
}
</style>

Radial

创建一个图像，该图像由从原点辐射的两种或多种颜色之间的渐进过渡组成，其形状可以是圆形或椭圆形

语法

radial_gradient(color [proportion], ...)

• color: 16进制颜色值
• [proportion]: 颜色占比

Example

<style>
#ui{
  #main_window{
    //...
    background_color: radial_gradient(#FF938A, #98943F, #6BC46D);
  }
}
</style>

Shader

专属于Makepad的shader绘制写法，采用Makepad支持的glsl写法来绘制背景，这是可扩展的，灵活的自由的绘制方式，它不仅限于能绘制简单的颜色背景。

语法

不要在语句中添加;作为语句的结束，而是使用换行

shader(|self|{
  fn fn_name(self) -> vec4{
    return #009688
  }
})

• fn_name: shader函数的名字，这取决于组件绘制函数的函数名

Example

<style>
#ui{
  #main_window{
    //...
    background_color: shader(|self|{
      fn pixel(self) -> vec4{
        return #009688
      }
    });
  }
}
</style>

Import

在<script>标签中，带有内置的import!宏可以导入我们需要引入的组件

#![allow(unused)]
fn main() {
<template>
  <root id="ui">
    <window id="main_window">
      <view flow="Down" height="All" id="main_view">
        <checkbox_view /> 
        <header_view /> 
        <image_view></image_view>
        <icon_view></icon_view>
        <button_view></button_view>
      </view>
    </window>
  </root>
</template>

<script>
import!{
  crate::views::checkbox::*;
  crate::views::header::header::*;
  crate::views::icon::*;
  crate::views::button_view::*;
  crate::views::image_view::*;
}
</script>

<style>
ui{
  main_window{
    width: Fill;
    height: Fill;
    background_visible: true;
    background_color: #1C2128;
    flow: Down;
    window_size: 600.0 800.0;
    window_position: 300.0;
    main_view{
      background_color: #FFF,
    }
  }
}
</style>
}

Static Page

静态页面指的是不带有脚本的纯静态组件组成的页面，通常仅由<template>和<style>两个部分组成，但这不代表<script>标签不能使用，而是不在<script>中编写带有逻辑的脚本语句，在<script>标签中使用内置import!宏引入组件和use来引入库都不被视为违反静态原则。

Example1

#![allow(unused)]
fn main() {
<template>
  <root id="ui">
    <window id="main_window">
      <view flow="Down" height="All" id="main_view">
      </view>
    </window>
  </root>
</template>

<style>
ui{
  main_window{
    width: Fill;
    height: Fill;
    background_visible: true;
    background_color: #1C2128;
    flow: Down;
    window_size: 600.0 800.0;
    window_position: 300.0;
    main_view{
      background_color: #FFF,
    }
  }
}
</style>
}

Example2 ⛔

#![allow(unused)]
fn main() {
<template>
  <view id="checkbox_view">
    <checkbox class="checkbox1" check_type="Radio"></checkbox>
    <checkbox class="checkbox1"></checkbox>
    <checkbox id="checkbox2"></checkbox>
    <radio_button id="radio1"></radio_button>
    <radio_button id="radio2"></radio_button>
    <checkbox class="checkbox1" check_type="None"></checkbox>
    
    <button text="click" @click="change"></button>
    <label :text="label_text" margin="16.0"></label>
  </view>
</template>

// 这是错误的，因为script只能在非static模板中使用(除了内置`import!`)
// 非static模板: `<template><component inherits="view"></component></template>`
<script>
let mut label_text = String::from("this is a test label!");

let change = ||{
  label_text = String::from("I have been clicked");
};
</script>

<style>
checkbox_view{
  width: 300;
  height: 300;
  flow: Down;
  .checkbox1{
    text: "CheckBox1";
    margin: 10;
    label_margin: 0 0 0 10;
  }
  checkbox2{
    text: "Checkbox Toggle";
    label_margin: 0 0 0 16.0;
    font_brightness: 1.5;
    check_type: Toggle;
  }
  radio1{
    text: "Radio1";
    margin: 16.0;
    font_size: 16.0;
  }
  radio2{
    radio_type: Tab;
    text: "Radio Tab";
    margin: 0 16.0;
    padding: 12.0;
    height: 32.0;
    label_align: 0.5;
    label_margin: 0 0 0 0;

  }
}
</style>
}

以下是优化后的文档内容：

动态 Widget

动态 Widget 类型分类

动态 Widget 根据使用方式可分为以下三类：

1. A 类：未使用 gen_macros::Prop 标注，且未声明 id 属性。
2. B 类：未使用 gen_macros::Prop 标注，但声明了 id 属性。
3. C 类：使用了 gen_macros::Prop 标注，但未声明 id 属性。

注意：

1. 如果同时使用了 gen_macros::Prop 并且声明了 id 属性，而 ${prop_struct_name} == ${id}，则该组件属于 C 类。
2. 但如果 ${prop_struct_name} != ${id}，程序将会 panic。

A 类

当组件既没有使用 Prop 标注，也没有在 <component></component> 标签中声明 id 属性时：

#![allow(unused)]
fn main() {
<template>
    <component inherits="view"></component>
</template>
}

此时，动态 Widget 的结构体名为：${source_name}_${inherits}。

B 类

当组件未使用 Prop 标注，但在 <component></component> 标签中声明了 id 属性时：

#![allow(unused)]
fn main() {
<template>
    <component id="MyView" inherits="view"></component>
</template>
}

此时，动态 Widget 的结构体名为 ${id}，在这个例子中就是 MyView。

C 类

当组件使用了 Prop 标注，但未声明 id 属性时：

#![allow(unused)]
fn main() {
<template>
    <component inherits="view"></component>
</template>

<script>
use gen_macros::Prop; // 可省略

#[derive(Prop)]
pub struct MyView {}
</script>
}

此时，动态 Widget 的结构体名为 ${prop_struct_name}，在这个例子中就是 MyView。

脚本使用原则

生命周期管理

• before: 最早调用，用于初始化 PropStruct。
• after: 在 before 之后调用，用于声明式地修改 PropStruct 的值。

示例

#![allow(unused)]
fn main() {
<script>
use gen_macros::{Prop} // 可以省略

#[derive(Prop)]
pub struct MyView{
    pub label_value1: String
}
---------------------------------------------------------------|
impl Default for MyView{                                       |
    fn default() -> Self {                                     |
        Self{                                                  |
            label_value1: "Click The Button".to_string()       |
        }                                                    before
    }                                                          |
}                                                              |
                                                               |
let mut prop = MyView::default();                              |
---------------------------------------------------------------|

---------------------------------------------------------------|
prop.label_value1 = "Click Here!".to_string();               after
---------------------------------------------------------------|
</script>
}

编译后的代码

#![allow(unused)]
fn main() {
impl LiveHook for MyView {
    fn before_apply(&mut self, _cx: &mut Cx, _apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
        self.label_value1 = "Click The Button".to_string();
    }
    fn after_apply(&mut self, _cx: &mut Cx, _apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
        self.label_value1 = "Click Here!".to_string();
    }
}
}

示例

动态 Widget 采用 <component> 标签作为唯一根标签，使用 inherits 属性指定要继承的 Widget 类型，通常推荐继承 view。

• use gen_macros::{Event, Prop}; 这行代码可以省略，Event 和 Prop 都是 GenUI 内置的宏。
  • Prop: 用于声明 Widget 的属性。
  • Event: 用于声明 Widget 的事件。
• Widget 的回调函数使用 Rust 闭包语法：let mut event_callback = ||{...}。
• active!: 内置宏，用于触发 Widget 的事件。

#![allow(unused)]
fn main() {
<template>
    <component inherits="view">
        <label id="first_lb" class="t_label" font_size="32" :text="props.label1"/>
        <label id="second_lb" class="t_label" :font_size="fs" text="label 2"/>
        <button id="bb" text="text btn" @clicked="btn_click" />
    </component>
</template>

<script>
use gen_macros::{Event, Prop};

#[derive(Event, Clone, Debug)]
pub enum Events {
    Clicked(String),
}

#[derive(Prop)]
pub struct ButtonView {
    pub label1: String,
}

impl Default for ButtonView {
    fn default() -> Self {
        Self {
            label1: "Click The Button".to_string(),
        }
    }
}

let mut props = ButtonView::default();
props.label1 = String::from("sss");
let fs: f64 = 18.0;

let mut btn_click = || {
    props.label1 = String::from("I have been clicked");
    println!("Button bb Clicked");
    active!(Events::Clicked("Hello".to_string()));
};
</script>

<style>
.t_label {
    brightness: 1.1;
    color: #fff;
    wrap: Word;
    font: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf");
}
</style>
}

For

在GenUI中类似于Vue的for循环控制语法，不同的是你无需设置:key，GenUI会帮你自动绑定，for并不像js采用dom复制的方式生成，在makepad中采用自定义组件结合ComponentMap与数据结合进行生成元素节点并渲染，并且在GenUI中采用迭代器绑定，也就是说，任何Rust中的内置的实现了迭代器trait的类型都可以被解析，其中以下语法都被允许：

1. :for="(index, item) in iter_ident"
2. :for="item in iter_ident"
3. :for="(index, (item1, item2, ...)) in iter_ident" flexible iter
4. :for="(index, ()) in iter_ident"
5. :for="(index, _) in iter_ident" GenUI会将其处理为虚拟widget并自动生成Makepad的ForWidget（含有ComponentMap来处理子组件循环渲染的自定义Widget），并最终进行绑定替换

Example1

#![allow(unused)]
fn main() {
<template>
  <component id="RootComponent" inherits="root">
    <window id="main_window">
        <view flow="Down" height="All" id="main_view">
          <label :for="(index, value) in list" :text="value" font_size="16.0"></label>
        </view>
      </window>
  </component>
</template>

<script>
let list: Vec<String> = vec!["Hello".to_string(), "GenUI".to_string()];
</script>

<style>
ui{
  main_window{
    width: Fill;
    height: Fill;
    flow: Down;
    window_size: 600.0, 800.0;
  }
}
</style>
}

Example2

#![allow(unused)]
fn main() {
<template>
  <component id="RootComponent" inherits="root">
    <window id="main_window">
        <view flow="Down" height="All" id="main_view">
          <label :for="(index, value) in list" :text="value" font_size="16.0"></label>
        </view>
      </window>
  </component>
</template>

<script>
let list: [String; 2] = ["Hello".to_string(), "GenUI".to_string()];
</script>

<style>
ui{
  main_window{
    width: Fill;
    height: Fill;
    flow: Down;
    window_size: 600.0, 800.0;
  }
}
</style>
}

If

GenUI中if_else同样由数据控制元素节点是否渲染，采用虚拟Widget的方式从模板提取if_else标记的组件，并自动生成Makepad Widget，所以你无需关注如何生成，无需手写自定义组件

Example

#![allow(unused)]
fn main() {
<template>
  <component id="RootComponent" inherits="root">
    <window id="main_window">
        <view flow="Down" height="All" id="main_view">
          <button :if="props.flag1" text="True Btn" id="if_widget1"></button>
          <button else text="False Btn" id="if_widget1"></button>
          <button id="toggle_btn" text="click here to change if signal" @clicked="toggle"></button>
        </view>
      </window>
  </component>
</template>

<script>
use gen_macros::{Prop};

#[derive(Prop)]
pub struct RootComponent{
    pub flag1: bool
}

impl Default for RootComponent{
    fn default() -> Self {
        Self{
            flag1: true
        }
    }
}

let mut props = RootComponent::default();
let mut toggle = || {
  props.flag1 = false;
};
</script>

<style>
ui{
  main_window{
    width: Fill;
    height: Fill;
    flow: Down;
    window_size: 600.0, 800.0;
  }
}
</style>
}

Icon Lib v0.1.0

当前GenUI的内置图标库共有75个图标，分为以下几种类别:

1. Base
2. Arrow
3. Code
4. Emoji
5. Fs
6. Person
7. Relation
8. State
9. Time
10. Tool
11. UI

当前该图标库只是一个实验功能

优点

1. 无版权, 完全商用免费
2. 体积小
3. 无需联网下载进行引入
4. 直接使用Shader进行绘制

后续更新方案

1. 去除None类型改用属性标记方式
2. 增加图标到约150个常用图标
3. 优化图标体验

Base

Min	Max	FullScreen	FullScreenExpand	More	Upload	Download	Add
Delete	DeleteKey	Correct	Fresh	Play	Stop	GoOn	Setting
Setting2	Setting3	Home	System	Picture	Close	Eye	EyeClose
Phone	Light	Menu

Arrow

Left

Right

Up

Down

Switch

Code

Code

Test

Debug

Emoji

Emoji

Hot

Heart

HeartBroken

Dislike

Fs

Note

Person

Male

Female

Relation

Connect

DisConnect

State

Info

Help

Warn

Wifi

WifiNone

Time

Clock

Tool

Search	ZoomIn	ZoomOut	Share	Rss	AI	VR	Notice
NoticeNone	Bind

UI

Exit	Expand	ExpandRight	ExpandLeft	ExpandTop	ExpandBottom	Open	OpenLeft
OpenRight	OpenTop	OpenBottom	Split	Split2	PowerOff

Makepad-Plugin

Dev Manual

Enum

❗Note:

Makepad属性Enum常有以下两种用途

1. Event
2. Types

Types

Types常用于live系统切换选项用途，必须遵守以下原则

原则1: 宏标记

当作为Types进行使用时该Enum必须被标注:

1. #[derive(Live)]
2. #[derive(LiveHook)]
3. #[live_ignore]

可选择添加#[repr(u32)]

原则2: 无嵌套

即不可使用嵌套方式嵌套多个枚举或结构

原则3: shader_enum

首个枚举项必须使用shader_enum(1)注明以确保顺序

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

#[derive(Live, LiveHook, Clone, Debug, Copy)]
#[live_ignore]
#[repr(u32)]
pub enum Base {
    #[pick]
    Min = shader_enum(1),
    Max,
    FullScreen,
    FullScreenExpand,
}
}

Event

BuiltIn-UI Lib

Github Address: gen makepad component lib

Feature

1. More diverse props(styles)
2. A simpler way of writing (more similar to CSS)
3. With default style, can be switched through themes
4. As a built-in component of GenUI, it can also be independently applied in Makepad projects
5. Continuous high-speed updates (currently updated approximately once a week)

Import

Toml

gen_components ={ git="https://github.com/palpus-rs/Gen-UI/tree/main/gen/components" }

lib.rs

#![allow(unused)]
fn main() {
pub use gen_components;
}

Live Design

#![allow(unused)]
fn main() {
live_design! {
    import gen_components::components::*;
}
}

GenUI Builtin Lib

Themes

each theme color has [25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900]

Origins

Root

See Window

Window

Props

View

Label

Props

Components

• Label
• Link
• Button
• Card
  • VLayout
  • HLayout
• Radio
• CheckBox
• Icon
• Image
• Input
• Popup
• Badge
• DropDown
• Toggle
• Avatar
• ToolTip
• Progress
• Slider
• Tab
• Table
• Dialog
• Select
• FileUpload
• Divide
• Loading
• EmptyState
• BreadCrumb
• Pagination
• Metric
• Menu
• ScrollBar(s)

GLabel

A custom label widget with various configurable properties such as color, font size, brightness, line spacing, and more.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GLabelExample = <ScrollYView>{
        height: 100.0,
        width: Fill,
        spacing: 10.0,
        <Label>{
            text: "GLabel"
        }
        <GLabel>{
            text: "Hello, world! This is a long message, but I use wrap Word to wrap it!",
            height: 48.0,
            width: 120.0,
            wrap: Word,
            brightness: 1.5,
            margin: {left: 12.0},
        }
        <GLabel>{
            text: "bold, test bold!!",
            font_size: 12.0,
            padding: 16.0,
            color: #FF0000,
            font_family: dep("E:/Rust/try/makepad/Gen-UI/examples/gen_widget_example/resources/GoNotoKurrent-Bold.ttf"),
        }
    }
}
}

Props

Event

GLink

A customizable hyperlink widget with hover and press animations, configurable colors, text properties, and cursor behavior.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GLinkExample = <ScrollYView>{
        height: 200.0,
        width: Fill,
        spacing: 10.0,
        flow: Down,
        <GLabel>{
            text: "GLink"
        }
        <GLink>{
            text: "Link",
        }
        <GLink>{
            theme: Dark,
            text: "Theme Dark",
        }
        <GLink>{
            theme: Error,
            text: "Define hover color and pressed color",
            hover_color: #FF00FF,
            pressed_color: #00FF00,
        }
        <GLink>{
            theme: Success,
            text: "No underline",
            underline: false,
        }
        <GLink>{
            theme: Warning,
            text: "Custom More",
            font_size: 14.0,
            hover_color: #FF00FF,
            background_color: #00FF00,
            margin: 10.0,
            padding: 10.0,
            color: #FF0000,
            underline_width: 2.0,
            font_family: dep("E:/Rust/try/makepad/Gen-UI/examples/gen_widget_example/resources/GoNotoKurrent-Bold.ttf"),
        }
        
    }
}
}

Props

Event

Card

A customizable card widget with hover and press animations, configurable colors, cursor behavior, and optional scroll bars.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GCardExample = <ScrollYView>{
        height: 660.0,
        width: Fill,
        flow: Down,
        spacing: 10.0,
        <Label>{
            text: "GCard",
        }
        <GCard>{
            height: 30.0,
            width: 30.0,
        }
        <GCard>{
            theme: Dark,
            height: 30.0,
            width: 30.0,
        }
        <GCard>{
            theme: Error,
            height: 30.0,
            width: 30.0,
        }
        <GCard>{
            theme: Warning,
            height: 30.0,
            width: 30.0,
            animator_key: true,
        }
        <GCard>{
            theme: Success,
            height: 30.0,
            width: 160.0,
            cursor: Help,
            align: {x: 0.5, y: 0.5},
            <GLabel>{
                text: "cursor: Help",
            }
        }
        <GCard>{
            theme: Error,
            height: Fit,
            width: 180.0,
            transparent: true,
            border_width: 1.0,
            border_radius: 0.0,
            align: {x: 0.5, y: 0.5},
            <GLabel>{
                margin: 20.0,
                text: "Transparent GCard",
            }
        }
        <GCard>{
            theme: Success,
            height: 60.0,
            width: 60.0,
            border_color: #FF0000,
            border_width: 1.0,
            border_radius: 15.0,
        }
        <GCard>{
            height: Fit,
            width: 300,
            flow: Down,
            background_color: #FFFFFF,
            spacing: 10.0,
            <GLabel>{
                text: "GCard flow Down",
                color: #0,
                margin: 10.0,
            }
            <GCard>{
                theme: Error,
                height: 30.0,
                width: 30.0,
            }
            <GCard>{
                theme: Warning,
                height: 30.0,
                width: 30.0,
            }
            <GButton>{
                text: "hello"
            }
        }
        
        <GCard>{
            height: 100.0,
            width: 300,
            flow: Down,
            background_color: #FF0000,
            spacing: 10.0,
            // transparent: true,
            scroll_bars: <GScrollBars> {}
            <GLabel>{
                text: "Card can scroll",
                color: #0,
                margin: 10.0,
            }
            <GCard>{
                theme: Error,
                height: 30.0,
                width: 30.0,
            }
            <GCard>{
                theme: Warning,
                height: 30.0,
                width: 30.0,
            }
            <GButton>{
                text: "hello"
            }
        }
    }
}
}

Props

Event

GVLayout

A vertical layout component use CardBase

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GVLayoutExample = <ScrollYView>{
        height: 260.0,
        width: Fill,
        flow: Down,
        spacing: 10.0,
        <Label>{
            text: "GVLayout",
        }
        <GVLayout>{
            height: Fit,
            width: 300,
            background_color: #FFFFFF,
            spacing: 10.0,
            <GLabel>{
                text: "Hello",
                color: #0,
                margin: 10.0,
            }
            <GCard>{
                theme: Error,
                height: 30.0,
                width: 30.0,
            }
            <GCard>{
                theme: Warning,
                height: 30.0,
                width: 30.0,
            }
            <GButton>{
                text: "hello"
            }
        }
    }
}
}

GHLayout

A horizontal layout component use CardBase

layout don't have border, background color, border-radius, ... (but you can add if you want)

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GHLayoutExample = <ScrollYView>{
        height: 100.0,
        width: Fill,
        flow: Down,
        spacing: 10.0,
        <Label>{
            text: "GHLayout",
        }
        <GHLayout>{
            height: Fit,
            width: 300,
            background_color: #FFFFFF,
            spacing: 10.0,
            <GLabel>{
                text: "Hello",
                color: #0,
                margin: 10.0,
            }
            <GCard>{
                theme: Error,
                height: 30.0,
                width: 30.0,
            }
            <GCard>{
                theme: Warning,
                height: 30.0,
                width: 30.0,
            }
            <GButton>{
                text: "hello"
            }
        }
    }
}
}

GButton

A customizable button widget with hover and press animations, configurable colors, cursor behavior, and text properties.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GButtonExample = <ScrollYView>{
        height: 200.0,
        width: Fill,
        flow: Down,
        spacing: 10.0,
        <Label>{
            text: "GButton"
        }
        <GButton>{
            text: "Default Button"
        }
        <GButton>{
            theme: Dark,
            text: "Theme Dark"
        }
        <GButton>{
            theme: Success,
            text: "Theme Success"
        }
        <GButton>{
            theme: Warning,
            text: "Theme Warning"
        }
        <GButton>{
            theme: Error,
            text: "Theme Error",
        }
        <GButton>{
            theme: Error,
            text: "unvisible button!",
            visible: false,
        }
        <GButton>{
            round: true,
            text: "Round Button",
        }
        <GButton>{
            height: 46,
            width: 160,
            theme: Success,
            border_width: 1.4,
            border_color: #FFF,
            border_radius: 11.0,
            text: "Rounded Button!",
        }
        <GButton>{
            theme: Dark,
            border_width: 1.2,
            hover_color: #FF0000,
            pressed_color: #00FF00,
            text: "GButton!",
            font_family: dep("E:/Rust/try/makepad/Gen-UI/examples/gen_widget_example/resources/GoNotoKurrent-Bold.ttf"),
            font_size: 12.0,
            color: #000,
        }
    }
}
}

Props

Event

GRadio

A radio button widget with customizable colors, cursor behavior, and animations for hover and selection states.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GRadioExample = <ScrollYView>{
        height: 150.0,
        width: Fill,
        spacing: 10.0,
        flow: Down,
        <GLabel>{
            text: "GRadio"
        }
        <GRadio>{
            height: 30.0,
            width: 60.0,
        }
        <GRadio>{
            theme: Warning,
            height: 30.0,
            width: 60.0,
            radio_type: Tick,
        }
        <GRadio>{
            theme: Success,
            height: 30.0,
            width: 60.0,
            size: 12.0,
            scale: 0.6,
            border_width: 2.0,
            radio_type: Round,
            background_color: #000,
            selected_color: #42A5F5,
            hover_color: #FF7043,
            border_color: #76828F,
        }
        <GRadio>{
            theme: Dark,
            height: 30.0,
            width: 60.0,
            size: 12.0,
            radio_type: Tick,
        }
        <GRadio>{
            theme: Error,
            height: 30.0,
            width: 60.0,
           
            radio_type: Cross,
        }
    }
}
}

Props

Event

Note: Events with None are omitted.

GCheckBox

A customizable checkbox widget with various properties for appearance, cursor behavior, and animations for different states.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GCheckBoxExample = <ScrollYView>{
        height: 150.0,
        width: Fill,
        spacing: 10.0,
        flow: Down,
        <GLabel>{
            text: "GCheckBox"
        }
        <GCheckBox>{
           
        }
        <GCheckBox>{
            theme: Warning,
            check_type: Tick,
        }
        <GCheckBox>{
            theme: Error,
            check_type: Cross,
        }
        <GCheckBox>{
            theme: Success,
            height: 30.0,
            width: 60.0,
            size: 12.0,
            scale: 0.6,
            border_width: 2.0,
            check_type: Round,
            background_color: #000,
            selected_color: #42A5F5,
            hover_color: #FF7043,
            border_color: #76828F,
        }
        <GCheckBox>{
            theme: Dark,
            height: 30.0,
            width: 60.0,
            size: 12.0,
            check_type: Tick,
        }
        
    }
}
}

Props

Event

Note: Events with None are omitted.

GIcon

A customizable icon widget that supports various visual properties and animation states.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GIconExample = <ScrollYView>{
        height: 200.0,
        width: Fill,
        spacing: 10.0,
        flow: Down,
        <GLabel>{
            text: "GIcon",
        }
        <GIcon>{
            cursor: Help,
            src: dep("crate://self/resources/lightning.svg"),
        }
        <GIcon>{
            theme: Dark,
            src: dep("crate://self/resources/config.svg"),
        }
        <GIcon>{
            theme: Error,
            src: dep("crate://self/resources/lightning.svg"),
        }
        <GIcon>{
            theme: Warning,
            src: dep("crate://self/resources/lightning.svg"),
        }
        <GIcon>{
            height: 60,
            width: 160,
            cursor: Help,
            color: #fff,
            src: dep("crate://self/resources/logo_makepad.svg"),
        }
        
    }
}
}

Props

Event

Note: Events with None are omitted.

GImage

A versatile image widget that supports various visual properties, layout, and interactions.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;
    import makepad_draw::shader::std::*;
    GImageExample = <ScrollYView>{
        height: 100.0,
        width: Fill,
        spacing: 20.0,
        <GLabel>{
            text: "GImage",
        }
        <GImage>{
            height: 32.0,
            width: 36.0,
            src: dep("crate://self/resources/rust.png"),
            rotation:30.0,
        }
        <GImage>{
            rotation: 1.0,
            opacity: 0.6,
            src: dep("crate://self/resources/robius.png"),
        }
        <GImage>{
            scale: 0.6,
            src: dep("crate://self/resources/robius.png"),
        }
        <GImage>{
            scale: 2.0,
            src: dep("crate://self/resources/robius.png"),
        }
       
        
    }
}
}

Props

Event

No events specified for this widget.

GInput

The GInput widget is a versatile text input field with various visual and interactive properties. It supports themes, customization of colors, borders, text properties, cursor styles, and more.

Example

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GInputExample = <ScrollYView>{
        height: 160.0,
        width: Fill,
        spacing: 10.0,
        flow:Down,
        <Label>{
            text: "GInput"
        }
        <GInput>{
            theme: Dark,   
        }
        <GInput>{
            theme: Dark,
            border_width: 2.0,
            // border_radius: 4.0,
            value: "Hello",
            placeholder: "please",
            
        }
        <GInput>{
            border_radius: 8.0,
            border_width: 2.0,
            input_type: Pwd,
        }
    }
}
}

Props

Event

Test-Plan

测试计划，该计划会在GenUI框架基本完成前重复执行，并在每个阶段进行修正和增加相应的

[!IMPORTANT]

当前包括以下测试:

1. 静态组件
2. Color
3. 动画
4. For
5. If
6. 动态组件
   1. 示例与属性
   2. 示例事件
   3. 生命周期
   4. 脚本混入

Static

Makepad 基础组件测试

该测试当前位置: GenUI/examples/gen_makepad_simple

• Window
• View
• Button
• Icon
• Label
• Image
• RotatedImage
• Radio
• Checkbox
• ScrollXYView
• ScrollXView
• ScrollYView
• SolidView
• RectView
• RectShadowView
• RoundedView
• RoundedShadowView
• TextInput
• DropDown
• LinkLabel
• FoldButton
• Slider
• SliderBig
• Slide
  • SlidesView
  • SlideBody
  • SlideChapter
• FoldHeader
• Html
• Markdown
• ScrollBar
• ScrollBars
• DesktopButton
• Splitter

内置GenUI库测试

该测试当前位置: GenUI/examples/gen_widget_simple

• Label
• Link
• Button
• Card
  • VLayout
  • HLayout
• Radio
• CheckBox
• Icon
• Image
• Input
• Popup
• Progress
• Loading
• Badge
• DropDown
• Toggle
• Avatar
• ToolTip
• Progress
• Slider
• Tab
• Table
• Dialog
• Select
• FileUpload
• Divide
• Loading
• EmptyState
• BreadCrumb
• Pagination
• Metric
• Menu
• ScrollBar(s)

内置库集成GenUI (未开始)

该测试当前位置: GenUI/examples/

Color

该测试当前位置: GenUI/examples/tests

• Hex
• Rgb
• Rgba
• Linear
• Radial
• Shader

Animation

该测试当前位置: GenUI/examples/tests

• Window
• View
• Button
• Icon
• Label
• Image
• RotatedImage
• Radio
• Checkbox
• ScrollXYView
• ScrollXView
• ScrollYView
• SolidView
• RectView
• RectShadowView
• RoundedView
• RoundedShadowView
• TextInput
• DropDown
• LinkLabel
• FoldButton
• Slider
• SliderBig
• Slide
  • SlidesView
  • SlideBody
  • SlideChapter
• FoldHeader
• Html
• Markdown
• ScrollBar
• ScrollBars
• DesktopButton
• Splitter

For

该测试当前位置: GenUI/examples/gen_makepad_simple

1. [$Type; n]
2. Vec<$Type>

1. 单层For
2. 嵌套For
3. 数值绑定

If

该测试当前位置: GenUI/examples/gen_makepad_simple

1. 简单bool
2. 其他类型
3. 闭包方法
4. 数值绑定

Dyn

Prop

Event

LifeTime

Inject-Script

GenUI-Design Documentation

Template Section

HTML-LIKE Syntax:

The syntax is reminiscent of HTML but has been enhanced for more structured processing.

Key considerations for maintaining a clear and focused template:

1. Direct string literals are not permitted.
2. Template syntax is prohibited; use Rust's format! for value bindings instead.
3. Declare basic attributes on tags using primitive types only; complex types should be bound separately.
4. Function bodies must not be directly written within attributes; instead, employ function bindings.
5. Attributes are strongly-typed, ensuring clear and explicit type associations.

Script Section

1. Full support for Rust syntax is provided, allowing for powerful scripting capabilities.
2. Integration with Special Frameworks is permitted, expanding the possibilities for functionality and customization.

Style Section

1. Styles are bound to tags by their names, enabling easy and intuitive styling.
2. Nesting of styles is allowed, offering a hierarchical approach to styling that mirrors traditional CSS.
3. Functions and bindings are supported within styles, allowing for dynamic styling based on logic and conditions.

Parser

Convert RSX DSL to AST

                                                   Real AST
-----------       ---------------   Strategy   ---------------
| RSX DSL |  -->  | ParseTarget |  ----------> | ParseResult |
-----------       ---------------              ---------------  

Convert To Makead

                                   ---------------------------
                                   |                         |
------------------------           |   MakepadConvertResult  |
| AST (in ParseResult) | --------> |                         |
------------------------           |   --------------------  |
------------------------           |   | MakepadConverter |  |
| File Meta Data       | --------> |   --------------------  |
------------------------           |                         |
                                   ---------------------------
                                                |
                           |------------------→ |
                           |                    ↓
------------               |              ----------------
| Strategy | --------------|              | Makepad Code |      
------------                              ----------------

Parse RSX File to AST

Parse Plan

1. parse the outer : &str to Vec<Targets> to ParseTarget
2. parse the inner : ParseTarget to AST

parse outer

外层采用 nom 进行直接转换

outer use nom to parse directly

The aim of outer parsing is to divide the entire file into three main(Ⓜ️) parts:

1. template (optional) Ⓜ️
2. script (optional) Ⓜ️
3. style (optional) Ⓜ️
4. comment (optional)

parse result

normal

target

#![allow(unused)]
fn main() {
let input = r#"
        //! This is a comment1
        //! This is a comment2
        //! This is a comment3
        <template>
            <window class="ui">
            </window>
        </template>

        // This is line comment
        /// This is a doc comment
        /// hello
        <script>
        let mut counter:usize = 0

        let handle_actions:FnOnce()->() = || {
            counter += 1;
        }
        </script>

        // This is line comment2
        <style>
        .ui{
            height : fill;
            width : fill;
            show-bg : true;
        }
        </style>
        // end of line comment
        "#;
}

result

#![allow(unused)]
fn main() {
[parser/src/ast/mod.rs:310] target = Ok(
    ParseTarget {
        template: Some(
            "<window class=\"ui\">\n            </window>\n        ",
        ),
        script: Some(
            "let mut counter:usize = 0\n\n        let handle_actions:FnOnce()->() = || {\n            counter += 1;\n        }\n        ",
        ),
        style: Some(
            ".ui{\n            height : fill;\n            width : fill;\n            show-bg : true;\n        }\n        ",
        ),
        comment: Some(
            [
                OfflineComment {
                    value: [
                        File(
                            "This is a comment1",
                        ),
                        File(
                            "This is a comment2",
                        ),
                        File(
                            "This is a comment3",
                        ),
                    ],
                    position: AboveTemplate,
                },
                OfflineComment {
                    value: [
                        Normal(
                            "This is line comment",
                        ),
                        Document(
                            "This is a doc comment",
                        ),
                        Document(
                            "hello",
                        ),
                    ],
                    position: AboveScript,
                },
                OfflineComment {
                    value: [
                        Normal(
                            "This is line comment2",
                        ),
                    ],
                    position: AboveStyle,
                },
                OfflineComment {
                    value: [
                        Normal(
                            "end of line comment",
                        ),
                    ],
                    position: End,
                },
            ],
        ),
    },
)
}

empty

#![allow(unused)]
fn main() {
[parser/src/ast/mod.rs:318] target = Err(
    ParseError(
        "The current file has no content. It should be removed to ensure your program has clean file tree!",
    ),
)
}

only code

#![allow(unused)]
fn main() {
        let input = r#"
        let a:&str = "trest";
        "#;
}

#![allow(unused)]
fn main() {
[parser/src/ast/mod.rs:328] target = Err(
    ParseError(
        "Parsing file exception. The current file contains content that is not covered by processed tags. If it is a rust script, please wrap it in a `<script>` tag",
    ),
)
}

parse inner

Block parsing

1. no <template> tag and no <style> tag --> parse as rust script (1 thread)
2. no <template> tag and no rust script has <style> tag --> parse as style (1 thread)
3. no <style> tag and no rust script has <template> tag --> parse as template (1 thread)
4. has <template> tag and rust script no <style> tag --> parse as template_script (2 thread)
5. has 3 tag --> parse as whole rsx (3 thread)

parse template

see parse_template.md

parse_style

see parse_style.md

parse_script

see parse_script.md

Parse Result

test machine 1

cpu: 2.2 GHz 四核 Intel Core i7

rsx:

• 1.332564ms
• 1.203039ms
• 1.496007ms
• 1.229173ms
• 1.207143ms
• 1.125941ms

vue:

• 6.839ms
• 7.19ms
• 6.804ms
• 7.978ms
• 6.977ms
• 7.046ms

test machine 2

cpu: Intel(R) Core(TM) i5-10200H CPU @ 2.40GHz 2.40 GHz

rsx:

• 1.4491ms
• 1.2271ms
• 1.6149ms
• 1.6475ms
• 1.4695ms

vue:

• 6.196ms
• 6.012ms
• 6.209ms
• 6.319ms
• 6.447ms

rsx

<template>
  <window class="ui">
    <view class="body">
      /// button componet
      <button value="Hello world" class="button1" @clicked="handle_click" />
      <text-input value="Click to count" class="input1" />
      <label :value="counter" class="label1" />
    </view>
  </window>
</template>

<script>
let mut counter:usize = 0_usize;

let mut handle_click = ||{
    counter += 1;
};
</script>

<style>
.app {
  .ui {
    height: fill;
    width: fill;
    show_bg: true;
    background_color: linear_gradient(180deg, #7, #3);
    .body {
      flow: down;
      spacing: 20;
      align: 0.5 0.5;
      .button1 {
      }
      .input1 {
        height: 30;
        width: 100;
      }
      .label1 {
        color: #ffffff;
      }
    }
  }
}
</style>

result

#![allow(unused)]
fn main() {
[parser/src/ast/result.rs:291] res = ParseResult {
    template: Some(
        [
            Tag(
                Tag {
                    name: "window",
                    ty: Normal,
                    props: Some(
                        {
                            PropsKey {
                                name: "class",
                                is_style: false,
                                ty: Normal,
                            }: UnKnown(
                                "ui",
                            ),
                        },
                    ),
                    children: Some(
                        [
                            Tag(
                                Tag {
                                    name: "view",
                                    ty: Normal,
                                    props: Some(
                                        {
                                            PropsKey {
                                                name: "class",
                                                is_style: false,
                                                ty: Normal,
                                            }: UnKnown(
                                                "body",
                                            ),
                                        },
                                    ),
                                    children: Some(
                                        [
                                            Comment(
                                                Document(
                                                    "button componet",
                                                ),
                                            ),
                                            Tag(
                                                Tag {
                                                    name: "button",
                                                    ty: SelfClosed,
                                                    props: Some(
                                                        {
                                                            PropsKey {
                                                                name: "value",
                                                                is_style: false,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "Hello world",
                                                            ),
                                                            PropsKey {
                                                                name: "clicked",
                                                                is_style: false,
                                                                ty: Function,
                                                            }: Function(
                                                                Function {
                                                                    name: "handle_actions",
                                                                    params: None,
                                                                    is_style: false,
                                                                },
                                                            ),
                                                            PropsKey {
                                                                name: "class",
                                                                is_style: false,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "button1",
                                                            ),
                                                        },
                                                    ),
                                                    children: None,
                                                    parent: Some(
                                                        Tag(
                                                            Tag {
                                                                name: "view",
                                                                ty: Normal,
                                                                props: Some(
                                                                    {
                                                                        PropsKey {
                                                                            name: "class",
                                                                            is_style: false,
                                                                            ty: Normal,
                                                                        }: UnKnown(
                                                                            "body",
                                                                        ),
                                                                    },
                                                                ),
                                                                children: None,
                                                                parent: None,
                                                            },
                                                        ),
                                                    ),
                                                },
                                            ),
                                            Tag(
                                                Tag {
                                                    name: "text-input",
                                                    ty: SelfClosed,
                                                    props: Some(
                                                        {
                                                            PropsKey {
                                                                name: "value",
                                                                is_style: false,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "Click to count",
                                                            ),
                                                            PropsKey {
                                                                name: "class",
                                                                is_style: false,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "input1",
                                                            ),
                                                        },
                                                    ),
                                                    children: None,
                                                    parent: Some(
                                                        Tag(
                                                            Tag {
                                                                name: "view",
                                                                ty: Normal,
                                                                props: Some(
                                                                    {
                                                                        PropsKey {
                                                                            name: "class",
                                                                            is_style: false,
                                                                            ty: Normal,
                                                                        }: UnKnown(
                                                                            "body",
                                                                        ),
                                                                    },
                                                                ),
                                                                children: None,
                                                                parent: None,
                                                            },
                                                        ),
                                                    ),
                                                },
                                            ),
                                            Tag(
                                                Tag {
                                                    name: "label",
                                                    ty: SelfClosed,
                                                    props: Some(
                                                        {
                                                            PropsKey {
                                                                name: "value",
                                                                is_style: false,
                                                                ty: Bind,
                                                            }: Bind(
                                                                "counter",
                                                            ),
                                                            PropsKey {
                                                                name: "class",
                                                                is_style: false,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "label1",
                                                            ),
                                                        },
                                                    ),
                                                    children: None,
                                                    parent: Some(
                                                        Tag(
                                                            Tag {
                                                                name: "view",
                                                                ty: Normal,
                                                                props: Some(
                                                                    {
                                                                        PropsKey {
                                                                            name: "class",
                                                                            is_style: false,
                                                                            ty: Normal,
                                                                        }: UnKnown(
                                                                            "body",
                                                                        ),
                                                                    },
                                                                ),
                                                                children: None,
                                                                parent: None,
                                                            },
                                                        ),
                                                    ),
                                                },
                                            ),
                                        ],
                                    ),
                                    parent: Some(
                                        Tag(
                                            Tag {
                                                name: "window",
                                                ty: Normal,
                                                props: Some(
                                                    {
                                                        PropsKey {
                                                            name: "class",
                                                            is_style: false,
                                                            ty: Normal,
                                                        }: UnKnown(
                                                            "ui",
                                                        ),
                                                    },
                                                ),
                                                children: None,
                                                parent: None,
                                            },
                                        ),
                                    ),
                                },
                            ),
                        ],
                    ),
                    parent: None,
                },
            ),
        ],
    ),
    style: Some(
        [
            Style(
                Style {
                    name: "ui",
                    ty: Class,
                    props: Some(
                        {
                            PropsKey {
                                name: "background_color",
                                is_style: true,
                                ty: Function,
                            }: Function(
                                Function {
                                    name: "linear_gradient",
                                    params: Some(
                                        [
                                            "180deg",
                                            "#7",
                                            "#3",
                                        ],
                                    ),
                                    is_style: true,
                                },
                            ),
                            PropsKey {
                                name: "show_bg",
                                is_style: true,
                                ty: Normal,
                            }: UnKnown(
                                "true",
                            ),
                            PropsKey {
                                name: "width",
                                is_style: true,
                                ty: Normal,
                            }: UnKnown(
                                "fill",
                            ),
                            PropsKey {
                                name: "height",
                                is_style: true,
                                ty: Normal,
                            }: UnKnown(
                                "fill",
                            ),
                        },
                    ),
                    children: Some(
                        [
                            Style(
                                Style {
                                    name: "body",
                                    ty: Class,
                                    props: Some(
                                        {
                                            PropsKey {
                                                name: "align",
                                                is_style: true,
                                                ty: Normal,
                                            }: UnKnown(
                                                "0.5 0.5",
                                            ),
                                            PropsKey {
                                                name: "flow",
                                                is_style: true,
                                                ty: Normal,
                                            }: UnKnown(
                                                "down",
                                            ),
                                            PropsKey {
                                                name: "spacing",
                                                is_style: true,
                                                ty: Normal,
                                            }: UnKnown(
                                                "20",
                                            ),
                                        },
                                    ),
                                    children: Some(
                                        [
                                            Style(
                                                Style {
                                                    name: "button1",
                                                    ty: Class,
                                                    props: None,
                                                    children: None,
                                                    parent: Some(
                                                        Style(
                                                            Style {
                                                                name: "body",
                                                                ty: Class,
                                                                props: None,
                                                                children: None,
                                                                parent: None,
                                                            },
                                                        ),
                                                    ),
                                                },
                                            ),
                                            Style(
                                                Style {
                                                    name: "input1",
                                                    ty: Class,
                                                    props: Some(
                                                        {
                                                            PropsKey {
                                                                name: "height",
                                                                is_style: true,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "30",
                                                            ),
                                                            PropsKey {
                                                                name: "width",
                                                                is_style: true,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "100",
                                                            ),
                                                        },
                                                    ),
                                                    children: Some(
                                                        [],
                                                    ),
                                                    parent: Some(
                                                        Style(
                                                            Style {
                                                                name: "body",
                                                                ty: Class,
                                                                props: None,
                                                                children: None,
                                                                parent: None,
                                                            },
                                                        ),
                                                    ),
                                                },
                                            ),
                                            Style(
                                                Style {
                                                    name: "label1",
                                                    ty: Class,
                                                    props: Some(
                                                        {
                                                            PropsKey {
                                                                name: "color",
                                                                is_style: true,
                                                                ty: Normal,
                                                            }: UnKnown(
                                                                "#ffffff",
                                                            ),
                                                        },
                                                    ),
                                                    children: Some(
                                                        [],
                                                    ),
                                                    parent: Some(
                                                        Style(
                                                            Style {
                                                                name: "body",
                                                                ty: Class,
                                                                props: None,
                                                                children: None,
                                                                parent: None,
                                                            },
                                                        ),
                                                    ),
                                                },
                                            ),
                                        ],
                                    ),
                                    parent: Some(
                                        Style(
                                            Style {
                                                name: "ui",
                                                ty: Class,
                                                props: None,
                                                children: None,
                                                parent: None,
                                            },
                                        ),
                                    ),
                                },
                            ),
                        ],
                    ),
                    parent: None,
                },
            ),
        ],
    ),
    script: Some(
        Script(
            Block {
                brace_token: Brace,
                stmts: [
                    Stmt::Local {
                        attrs: [],
                        let_token: Let,
                        pat: Pat::Type {
                            attrs: [],
                            pat: Pat::Ident {
                                attrs: [],
                                by_ref: None,
                                mutability: Some(
                                    Mut,
                                ),
                                ident: Ident(
                                    counter,
                                ),
                                subpat: None,
                            },
                            colon_token: Colon,
                            ty: Type::Path {
                                qself: None,
                                path: Path {
                                    leading_colon: None,
                                    segments: [
                                        PathSegment {
                                            ident: Ident(
                                                usize,
                                            ),
                                            arguments: PathArguments::None,
                                        },
                                    ],
                                },
                            },
                        },
                        init: Some(
                            LocalInit {
                                eq_token: Eq,
                                expr: Expr::Lit {
                                    attrs: [],
                                    lit: Lit::Int {
                                        token: 0_usize,
                                    },
                                },
                                diverge: None,
                            },
                        ),
                        semi_token: Semi,
                    },
                    Stmt::Local {
                        attrs: [],
                        let_token: Let,
                        pat: Pat::Ident {
                            attrs: [],
                            by_ref: None,
                            mutability: Some(
                                Mut,
                            ),
                            ident: Ident(
                                click,
                            ),
                            subpat: None,
                        },
                        init: Some(
                            LocalInit {
                                eq_token: Eq,
                                expr: Expr::Closure {
                                    attrs: [],
                                    lifetimes: None,
                                    constness: None,
                                    movability: None,
                                    asyncness: None,
                                    capture: None,
                                    or1_token: Or,
                                    inputs: [],
                                    or2_token: Or,
                                    output: ReturnType::Default,
                                    body: Expr::Block {
                                        attrs: [],
                                        label: None,
                                        block: Block {
                                            brace_token: Brace,
                                            stmts: [
                                                Stmt::Expr(
                                                    Expr::Binary {
                                                        attrs: [],
                                                        left: Expr::Path {
                                                            attrs: [],
                                                            qself: None,
                                                            path: Path {
                                                                leading_colon: None,
                                                                segments: [
                                                                    PathSegment {
                                                                        ident: Ident(
                                                                            counter,
                                                                        ),
                                                                        arguments: PathArguments::None,
                                                                    },
                                                                ],
                                                            },
                                                        },
                                                        op: BinOp::AddAssign(
                                                            PlusEq,
                                                        ),
                                                        right: Expr::Lit {
                                                            attrs: [],
                                                            lit: Lit::Int {
                                                                token: 1,
                                                            },
                                                        },
                                                    },
                                                    Some(
                                                        Semi,
                                                    ),
                                                ),
                                            ],
                                        },
                                    },
                                },
                                diverge: None,
                            },
                        ),
                        semi_token: Semi,
                    },
                ],
            },
        ),
    ),
}
}

Converter

The purpose of my framework is to allow users to write the necessary code without learning other GUI libraries.

For example, you don't need to learn Makepad to use this framework directly. Use the most basic Rust STD library to convert this framework into Makepad's DSL and other code for handling events and property binding.

I think it is very user-friendly for users.

Of course, I believe that my framework is not a replacement for Makepad, but rather simplifies the difficulty of writing Makepad code.

For most people, they may not need very fancy special effects, but rather quickly start to implement a product.

For those who pursue higher goals, Makepad can be directly used in DSL

Makepad Generate Documentation

Utilizing Only Rust Std

GenUI empowers users to create Makepad code using only the Rust standard library, offering a streamlined and beginner-friendly approach.

This method necessitates indicating the use of the standard library within the <script> tag either by specifying <script lang="std"> or by employing a tag without the lang prop.

#![allow(unused)]
fn main() {
<template>
    <window id="ui" background_visible="true">
        <view id="body" :spacing="view_space" :flow="view_flow">
            <button id="btn1" :text="btn_text" @clicked="change_text"></button>
            <label id="t_label" :text="label_text" :font_size="label_size" />
        </view>
    </window>
</template>

<script>
let view_space: f64 = 20.0;
let mut view_flow = String::from("Down");
let mut label_text = String::from("This is a Hello, World! The emoji failed to display.");
let label_size = 24.0;
let btn_text = String::from("Click Me");

let mut change_text = || {
    label_text = String::from("I have been clicked!");
};
</script>

<style>
ui {
    width: Fill;
    height: Fill;
    background_color: #96CEF8;
    body {
        align: 0.5;
        t_label {
            brightness: 1.1;
            color: #fff;
            wrap: Word;
            font: "crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf";
        }
    }
}
</style>
}

Crafting Makepad Code

GenUI also supports direct code creation using Makepad. However, this approach means that direct property and method bindings are not permitted.

To directly write Makepad code, you need to add the lang prop to the <script> tag and set it to makepad, <script lang="makepad">.

Thanks to GenUI's conversion mechanism, some nested properties in Makepad can still be written directly in the <style> section without the need for nesting.

#![allow(unused)]
fn main() {
<template>
    <window id="ui" background_visible="true">
        <view id="body">
            <button id="btn1" />
            <label id="t_label" />
        </view>
    </window>
</template>

<script lang="makepad">
#[derive(Live, LiveHook)]
pub struct MyApp {
    #[live]
    ui: WidgetRef,
    #[rust]
    instance: Instance,
}
#[derive(Debug, Clone, Default)]
struct Instance {
    pub view_flow: Flow,
    pub label_text: String,
}
impl Instance {
    pub fn new() -> Self {
        Self {
            view_flow: Flow::Down,
            label_text: String::from("this is a Hello, World!! emoji failed"),
        }
    }
    pub fn get_view_flow(&self) -> &Flow {
        &self.view_flow
    }
    pub fn set_view_flow(&mut self, view_flow: Flow) {
        self.view_flow = view_flow
    }
    pub fn get_label_text(&self) -> &String {
        &self.label_text
    }
    pub fn set_label_text(&mut self, label_text: String) {
        self.label_text = label_text
    }
}
impl MatchEvent for MyApp {
    fn handle_startup(&mut self, cx: &mut Cx) {
        self.instance = Instance::new();
        let label_t_label = self.ui.label(id!(t_label));
        label_t_label.apply_over_and_redraw(
            cx,
            live! { text: "this is a Hello, World!! emoji failed",  draw_text: {  } },
        );
        let view_body = self.ui.view(id!(body));
        view_body.apply_over_and_redraw(cx, live! { flow: Down,  });
        let view_body = self.ui.view(id!(body));
        view_body.apply_over_and_redraw(cx, live! { spacing: 20,  });
        let label_t_label = self.ui.label(id!(t_label));
        label_t_label.apply_over_and_redraw(
            cx,
            live! {  draw_text: { text_style: { font_size: 24,  } } },
        );
        let button_btn1 = self.ui.button(id!(btn1));
        button_btn1.apply_over_and_redraw(cx, live! { text: "Click Me",  });
    }
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        if self.ui.button(id!(btn1)).clicked(&actions) {
            let mut change_text = || {
                self.instance.label_text = String::from("I have been clicked!");
            };
            change_text();
            let label_t_label = self.ui.label(id!(t_label));
            label_t_label
                .apply_over_and_redraw(cx, live! { text: (self.instance.get_label_text()), });
        }
    }
}
impl LiveRegister for MyApp {
    fn live_register(cx: &mut Cx) {
        crate::makepad_widgets::live_design(cx);
    }
}
impl AppMain for MyApp {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        match event {
            Event::Startup => self.handle_startup(cx),
            _ => (),
        };
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}
app_main!(MyApp);
</script>

<style>
ui {
    width: Fill;
    height: Fill;
    background_color: #96CEF8;
    body {
        spacing: 20.0;
        align: 0.5;
        flow: Down;
        btn1 {
            text: "Click Me";
        }
        t_label {
            brightness: 1.1;
            color: #fff;
            wrap: Word;
            font: "crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf";
            font_size: 24.0;
            text: "This is a Hello, World! The emoji failed to display.";
        }
    }
}
</style>
}

Makepad Code

#![allow(unused)]
fn main() {
use makepad_widgets::*;
live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;
    MyApp = {{MyApp}}{ 
        ui: <Window>{
            show_bg: true, 
            draw_bg: { color: #96CEF8 }, 
            height: Fill, 
            width: Fill,  
            body = <View>{
                align: {x: 0.5, y: 0.5},  
                btn1 = <Button>{} 
                t_label = <Label>{ 
                    draw_text: { 
                        wrap: Word, 
                        color: #ffffff, 
                        text_style: { brightness: 1.1, font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")},  } 
                    }
                } 
            } 
        } 
    }
}
#[derive(Live, LiveHook)]
pub struct MyApp {
    #[live]
    ui: WidgetRef,
    #[rust]
    instance: Instance,
}
#[derive(Debug, Clone, Default)]
struct Instance {
    pub view_flow: Flow,
    pub label_text: String,
}
impl Instance {
    pub fn new() -> Self {
        Self {
            view_flow: Flow::Down,
            label_text: String::from("this is a Hello, World!! emoji failed"),
        }
    }
    pub fn get_view_flow(&self) -> &Flow {
        &self.view_flow
    }
    pub fn set_view_flow(&mut self, view_flow: Flow) {
        self.view_flow = view_flow
    }
    pub fn get_label_text(&self) -> &String {
        &self.label_text
    }
    pub fn set_label_text(&mut self, label_text: String) {
        self.label_text = label_text
    }
}
impl MatchEvent for MyApp {
    fn handle_startup(&mut self, cx: &mut Cx) {
        self.instance = Instance::new();
        let label_t_label = self.ui.label(id!(t_label));
        label_t_label.apply_over_and_redraw(
            cx,
            live! { text: "this is a Hello, World!! emoji failed",  draw_text: {  } },
        );
        let view_body = self.ui.view(id!(body));
        view_body.apply_over_and_redraw(cx, live! { flow: Down,  });
        let view_body = self.ui.view(id!(body));
        view_body.apply_over_and_redraw(cx, live! { spacing: 20,  });
        let label_t_label = self.ui.label(id!(t_label));
        label_t_label.apply_over_and_redraw(
            cx,
            live! {  draw_text: { text_style: { font_size: 24,  } } },
        );
        let button_btn1 = self.ui.button(id!(btn1));
        button_btn1.apply_over_and_redraw(cx, live! { text: "Click Me",  });
    }
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        if self.ui.button(id!(btn1)).clicked(&actions) {
            let mut change_text = || {
                self.instance.label_text = String::from("I have been clicked!");
            };
            change_text();
            let label_t_label = self.ui.label(id!(t_label));
            label_t_label
                .apply_over_and_redraw(cx, live! { text: (self.instance.get_label_text()), });
        }
    }
}
impl LiveRegister for MyApp {
    fn live_register(cx: &mut Cx) {
        crate::makepad_widgets::live_design(cx);
    }
}
impl AppMain for MyApp {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        match event {
            Event::Startup => self.handle_startup(cx),
            _ => (),
        };
        self.match_event(cx, event);
        self.ui.handle_event(cx, event, &mut Scope::empty());
    }
}
app_main!(MyApp);
}

Issues

Style 内部属性注释需要处理（后续）

// this is ok (现在只能在上面写)
.ui{
  // this is height ❌(issue,这里应该允许这样写)
  height: 160;
}

Future

Stage 1 ✅

# Incremental compilation 通过将代码分成模板、脚本、和样式三个部分，已经为实现增量编译奠定了基础。增量编译的关键在于能够快速识别出自上次编译以来哪些部分发生了变化，并仅重新编译这些变化的部分，从而节省时间和资源。将代码预处理成几个独立的部分，并使用策略模式来处理这些部分，为增量编译提供了一个很好的起点。以下是一些可以考虑的方向来进一步实现和优化增量编译的功能： ## 1. 变更检测机制 ✅ 为了实现增量编译，你需要一种机制来比较当前代码与上一次编译版本之间的差异。这涉及到对每个部分（模板、脚本、样式）进行某种形式的哈希或签名，以便快速识别出哪些部分发生了变化。Git这样的版本控制系统就是利用哈希来追踪文件变化的一个例子。 ## 2. 独立部分的编译与缓存 ✅ 在检测到特定部分（模板、脚本、样式）发生变化后，你的框架应该能够仅重新编译这些变化的部分，而不是整个应用。此外，对于没有变化的部分，如果能够缓存它们的编译结果，就可以在下一次编译时直接复用，进一步提高编译效率。 ## 3. 策略模式的应用 ✅ 使用了策略模式进行处理，这是一个很好的选择，因为它允许你为不同类型的变化定义不同的处理策略。例如，对于模板部分的变化，可能涉及到DOM结构的更新；而脚本部分的变化可能涉及到逻辑处理的更新；样式部分的变化则涉及到视觉表现的更新。通过为这些不同的变化类型定义具体的策略，你的框架可以更加灵活地处理各种变化情况。 ## 4. 优化构建过程 half ✅ 除了增量编译之外，还可以探索其他优化构建过程的方法。比如，是否可以并行处理某些任务？是否可以更智能地安排任务的执行顺序以减少依赖等待时间？这些都是值得考虑的优化方向。 总的来说，已经为实现增量编译设定了一个很好的基础。接下来的关键在于如何有效地实现变更检测机制，以及如何优化独立部分的编译与缓存策略。通过不断迭代和优化，你的框架将能够提供更加高效和响应快速的开发体验。

Stage 2 ⏱️

update

Introduction

• Makepad
• Dev Web
• Makepad Book
• Discord
• Rik Arends Twitter
• 📕Book Author Email: syf20020816@outlook.com

Makepad is a cross platform text editor and development environment developed using the Rust programming language. It emphasizes the advantages in performance and scalability, aiming to provide developers with an efficient and responsive coding experience. Makepad uses its own rendering engine, also written in Rust, which allows it to maintain smooth performance when rendering large projects.

Some features of Makepad include:

1. Cross platform support: Makepad can run on multiple operating systems, including Windows, macOS, and Linux, thanks to Rust and its cross platform compatibility.

2. Custom rendering engine: Makepad uses its own developed rendering engine, which means it can optimize rendering performance while also supporting complex visual effects and animations.

3. Develop using the Rust language: The security and performance of Rust enable Makepad to efficiently handle large files and complex projects while maintaining low memory usage and fast response.

4. Code Editing and Project Management: Makepad is not only a text editor, but also provides project management tools to help developers organize and manage their code repository.

5. Scalability: Makepad is designed to support plugins and extensions, allowing developers to customize editor functionality according to their own needs.

6. Future oriented design: The development team of Makepad is committed to exploring new programming paradigms and tools, such as using modern technologies such as WebGPU to push the boundaries between front-end and graphical programming.

Makepad is a relatively new project that is still actively being developed, which means it will continuously introduce new features and improve existing ones. For Rust developers and other programmers seeking modern, high-performance, and customizable development tools, Makepad may be an interesting choice.

Who is this book for?

• Rust GUI Developers
• Rust WebAssembly Developers
• Rust GUI Third Part Component Lib Developers

In this book, you can learn:

1. How To Begin Makepad
2. Makepad BuiltIn Basic Widgets
3. Makepad BuiltIn Component (theme_desktop_dark)
4. Makepad BuiltIn Types
5. Makepad Example Analysis
6. Makepad Defination Component Lib

‼️ Note

Help us improve!

If you find any mistakes or something that could be better wirtten, you can do these following:

1. Create an issue or Discussion in Book Github Repository or make a discussion in Discord
2. Share with Others then get some suggestions
3. Fork and Update Lastest
4. Optimize Book and Push

Installation

Prerequisites

To build the Makepad crates you first need to install Rust. https://www.rust-lang.org/tools/install

Our native builds work on the stable Rust toolchain. However, some of the errors generated by Makepad at runtime (particulary those originating in our DSL) do not contain line information unless you use the nightly Rust toolchain. Moreover, our web builds only work on nightly for now. For this reason, we recommend that you build Makepad using the nightly Rust toolchain.

For the non standard build targets (apple ios, apple tvos, android, wasm) we have a buildtool called 'cargo-makepad' that you need to install.

Install it from the repo:

cargo install --path=./tools/cargo_makepad

Or install it from cargo (might be behind the repo)

cargo install cargo-makepad

Now this tool can be used to install toolchains per platform needed

cargo makepad wasm install-toolchain

cargo makepad apple ios install-toolchain

cargo makepad apple tvos install-toolchain

cargo makepad android --abi=all install-toolchain

Running makepad studio

Makepad studio allows you to easily build and view the examples, and it uses cargo-makepad internally so be sure to install cargo-makepad as shown above.

cargo run -p makepad-studio --release

Or install it from cargo (might be behind the repo)

cargo install makepad-studio

If you build the wasm applications, you can open it on:

http://127.0.0.1:8010

Learning Sequence

If you are new to Makepad, we recommend that you learn in the following order:

1. introduction
2. installation
3. Tutorials
   1. QuickStart
   2. Project Structure
   3. Code Guide (Define Easy Component)
4. Components
5. Syntax
6. Examples (Simple)
7. Widgets
8. Built-In
9. Effect

Tutorials

QuickStart

Welcome to the Makepad QuickStart guide. This document is designed to help you set up a new Makepad project quickly and understand its basic structure and components. Makepad is a creative coding environment that leverages Rust and its ecosystem to build performant and beautiful UI applications.

Project Structure

A typical Makepad project has a structure similar to what you see below. Understanding this structure is crucial for navigating and managing your project effectively.

- hello                     # Your project directory
├── Cargo.toml              # Rust's package manifest file for managing dependencies
└── src                     # The main project directory containing Rust source files
    ├── app.rs              # The entry file for the Makepad application, defines UI and behavior
    ├── lib.rs              # The library file, used to expose modules to other parts of the application
    └── main.rs             # The standard Rust main entry point; here, it's used to launch the Makepad app

Initiate a Project

To start a new Makepad project, you'll first need to create a new Rust project and then add the necessary Makepad dependencies.

# Create a new Rust project named hello
cargo new hello

# Navigate into your project directory
cd hello

# Add Makepad dependencies to your project
cargo add makepad-widgets  # Adds Makepad's widget library for UI components
cargo add makepad          # Adds Makepad itself (note: this line is awaiting Makepad's update to be functional)

Add Library Module

To organize your code and make the Makepad widgets available throughout your project, you'll need to create a lib.rs file under the src directory.

1. Create a file named lib.rs in the src directory.
2. Add the following content to lib.rs:

#![allow(unused)]
fn main() {
pub use makepad_widgets;  // Expose makepad_widgets to other parts of your application
pub mod app;              // Declare the app module, which will contain your application's logic
}

Create the Application Module

Now, let's focus on building your application. This involves using Makepad widgets, designing the application's UI, and defining its behavior.

Use Widgets

In your app.rs or equivalent file, start by importing the Makepad widgets:

#![allow(unused)]
fn main() {
use makepad_widgets::*; // Import all components from makepad_widgets
}

Add Live Design

Makepad supports live design through its macro system. This allows you to define UI components and their properties in a readable and concise manner.

#![allow(unused)]
fn main() {
use makepad_widgets::*; // Ensure makepad_widgets are imported

live_design!{
    import makepad_widgets::base::*;                  // Import base widgets and components
    import makepad_widgets::theme_desktop_dark::*;    // Use the dark theme for desktop applications
    App = {{App}} {                                   // Define the main App struct
        ui: <Root>{}                                // Use a Root widget as the root UI element
    }
}
}

Build the Application Struct

The main application structure, App, should contain a reference to the root UI element. This is marked with the #[live] macro to integrate with Makepad's live design system.

This is necessary even if no event logic is written

#![allow(unused)]
fn main() {
#[derive(Live, LiveHook)] // Derive macros to enable live reloading and hooks
pub struct App {
    #[live] ui: WidgetRef, // The root UI element reference
}
}

Register the Application Struct

To ensure Makepad recognizes your application structure, implement the LiveRegister trait for App.

#![allow(unused)]
fn main() {
impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        crate::makepad_widgets::live_design(cx); // Register the live design for makepad_widgets
    }
}
}

Implement AppMain for Application

To handle events and integrate with the Makepad system, implement the AppMain trait for your App struct.

#![allow(unused)]
fn main() {
impl AppMain for App {
    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
        self.ui.handle_event(cx, event, &mut Scope::empty()); // Delegate event handling to the UI root
    }
}

app_main!(App); // Macro to designate App as the main application entry
}

The Main Function

Finally, define the main function in main.rs, which will launch your Makepad application.

fn main(){
    hello::app::app_main(); // Call the app_main function generated by the app_main! macro in app.rs
}

Congratulations, you've set up a basic Makepad project! This setup outlines how to structure your project, add dependencies, and create a simple UI application. As you become more familiar with Makepad and Rust, you can start exploring more complex UI designs and application logic.

Project Structure

Project Tree

src_gen
│  Cargo.toml
│  
├─src
│  │  app.rs
│  │  lib.rs
│  │  main.rs
│  │  
│  ├─src
│  │      app.rs
│  │      
│  └─views
│          mod.rs
│          root.rs
│
├─static
│      231.png

lib.rs

#![allow(unused)]
fn main() {
pub use makepad_widgets;
pub use makepad_widgets::makepad_draw;
pub mod app;
pub mod views;
}

views/mod.rs

#![allow(unused)]
fn main() {
pub mod root;
}

app.rs

#![allow(unused)]
fn main() {
use makepad_widgets ::* ; 
live_design ! { 
    import makepad_widgets::base::*; 
    import makepad_widgets::theme_desktop_dark::*; 
    // ⚠️ look at here !!!
    // although the root mod is pub to super
    // you still need to write views::root
    // because here is path not rs mod structure
    import crate::views::root::*;
    

    App = {{ App }}{ 
       ui : <Root>{}
    } 
} 

// ....

impl LiveRegister for App { 
    fn live_register (cx : & mut Cx) { 
        crate :: makepad_widgets ::live_design (cx) ;
        // ⚠️ look at here !!! same as import
        crate::views::root::live_design(cx);
    } 
} 

app_main ! (App) ;
}

Code Guide

You can learn in this chapter:

• How to define an easy widget
• How to define a deref widget
• How to define a for loop widget

Static Page

A static page is composed of a large number of components, but does not contain any substantial code

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*; 
    import gen_components::components::*;

    GLabelExample = <ScrollYView>{
        height: 100.0,
        width: Fill,
        spacing: 10.0,
        <Label>{
            text: "GLabel"
        }
        <GLabel>{
            text: "Hello, world! This is a long message, but I use wrap Word to wrap it!",
            height: 48.0,
            width: 120.0,
            wrap: Word,
            brightness: 1.5,
            margin: {left: 12.0},
        }
        <GLabel>{
            text: "bold, test bold!!",
            font_size: 12.0,
            padding: 16.0,
            color: #FF0000,
            font_family: dep("E:/Rust/try/makepad/Gen-UI/examples/gen_widget_example/resources/GoNotoKurrent-Bold.ttf"),
        }
    }
}
}

Define Easy Component

Defining a Widget in Makepad

In this chapter, we'll delve into the creation of a MyLabel Widget, which extends the capabilities of the built-in Label widget in Makepad.

Init a New Module

First, create a new module for our custom widget:

#![allow(unused)]
fn main() {
pub mod my_label;
}

Design Live Design

The live_design! macro allows for an effortless and succinct definition of custom widgets. Here, we define MyLabel with unique styling:

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design!{
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;

    MyLabel = {{MyLabel}}{
        draw_text:{
            color: #EF5350,
            text_style: { 
                font: {
                    path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")
                }, 
                brightness: 1.1,  
                font_size: 32.0
            } 
        }
    }
}
}

Define the Widget Structure

MyLabel will utilize the Widget trait and directly reference (deref) the Label widget:

#![allow(unused)]
fn main() {
#[derive(Live,Widget,LiveHook)]
pub struct MyLabel{
    #[redraw]
    #[deref]
    instance: Label
}
}

Impl the Widget Trait

Next, we implement the Widget trait for MyLabel to ensure it behaves as intended:

#![allow(unused)]
fn main() {
impl Widget for MyLabel {
    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
        self.instance.draw_walk(cx, scope, walk)
    }
}
}

Register in the Application

It's crucial to register our custom widget in the application to make it available for use:

#![allow(unused)]
fn main() {
impl LiveRegister for App {
    fn live_register(cx: &mut Cx) {
        crate::my_label::live_design(cx);
        crate::makepad_widgets::live_design(cx);
    }
}
}

Use in the App's Live Design

Finally, incorporate MyLabel into the application's live design, setting it up for use:

#![allow(unused)]
fn main() {
live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;
    import makepad_example_simple::my_label::*;
    App = {{App}}{ 
        ui: <Window>{
            show_bg: true, 
            width: Fill, 
            draw_bg: { color: #96CEF8 }, 
            height: Fill,  
            body = <View>{
                align: {x: 0.5, y: 0.5}, 
                <MyLabel>{
                    text: "this is my label widget"
                } 
            } 
        } 
    }
}
}

Extending Widget Functionality with DerefLabel

Following our previous exploration where we introduced the MyLabel widget, extending the Label, this chapter ventures into more sophisticated use cases. While Label provides a robust foundation, there might be instances where its granular control over internal properties isn't necessary for your project's needs.

Init a New Module

Begin by creating a module specifically for our enhanced widget:

#![allow(unused)]
fn main() {
pub mod deref_label;
}

Design Live Design

In this step, we define DerefLabel, focusing on simplicity and reusability:

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design!{
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;

    DerefLabel = {{DerefLabel}}{
        instance = <Label>{
            draw_text:{
                text_style: { 
                    font: {
                        path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")
                    }, 
                } 
            }
        }
    }
}
}

Define a Deref Structure

DerefLabel is designed with simplicity and flexibility in mind, allowing for easy customization of text, color, and font size:

#![allow(unused)]
fn main() {
#[derive(Live,Widget,LiveHook)]
pub struct DerefLabel{
    #[live]
    pub text: RcStringMut,
    #[live]
    pub color: Vec4,
    #[live(16.0)]
    pub font_size: f64,
    #[deref]
    view: View
}
}

Impl the Widget Trait

With the widget's structure defined, we implement the Widget trait to specify how DerefLabel behaves and is rendered:

#![allow(unused)]
fn main() {
impl Widget for DerefLabel {
    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
        
        self.label(id!(instance)).apply_over_and_redraw(cx, live!{
            text: (self.text),
            draw_text:{
                color: (self.color),
                text_style:{
                    font_size: (self.font_size)
                },
            }
        });
        self.view.draw_walk(cx, scope, walk)
    }
    fn set_text(&mut self, v: &str) {
        self.label(id!(instance)).set_text(v);
    }
    fn text(&self) -> String {
       self.text.as_ref().to_string()
    }
}
}

Use Deref Label

#![allow(unused)]
fn main() {
use makepad_widgets::*;
live_design! {
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;
    import makepad_example_simple::deref_label::*;
    App = {{App}}{ 
        ui: <Window>{
            show_bg: true, 
            width: Fill, 
            draw_bg: { color: #96CEF8 }, 
            height: Fill,  
            body = <View>{
                align: {x: 0.5, y: 0.5}, 
                <DerefLabel>{
                    text: "this is deref label widget",
                    color: #6BC46D,
                    font_size: 32.0
                } 
            } 
        } 
    }
}
}

For Loop Widget

This example demonstrates how to generate components from iterable data in Makepad.

Write Live Design

Note that we use btn: <Button> instead of btn = <Button>. This implies that the button is treated as a prop here.

#![allow(unused)]
fn main() {
use makepad_widgets::*;

live_design!{
    // Import the essential base and theme components from makepad_widgets
    import makepad_widgets::base::*;
    import makepad_widgets::theme_desktop_dark::*;
    
    // Define a new component named Footer
    Footer = {{Footer}}{
        // Set the height and width to fill their container
        height: Fill,
        width: Fill,
        // Define a button with a text prop
        btn: <Button>{
            text: "Click me",
        }
    }
}
}

Define the Widget Struct

Next, we implement a widget that conforms to the Widget trait. Here, we use Area + LivePtr + ComponentMap. You can roughly consider these as a standard combination (though that's not entirely accurate).

• Area: Provides a renderable area.
• LivePtr: A special pointer type used to reference #[live] data or resources.
• ComponentMap: A container for managing widgets.

#![allow(unused)]
fn main() {
#[derive(Live, LiveHook, Widget)]
pub struct Footer {
    // The area property provides a specific region for rendering
    #[rust]
    #[redraw]
    area: Area,
    // Layout for arranging child widgets or components
    #[layout]
    layout: Layout,
    // Walk specifies how child components are positioned and sized
    #[walk]
    walk: Walk,
    // Optional property to hold a reference to the button's live data
    #[live]
    btn: Option<LivePtr>,
    // Maps button identifiers to their corresponding ButtonRef objects
    #[rust]
    btns: ComponentMap<LiveId, ButtonRef>
}
}

Draw the Widget

Implement the draw_walk method to render the widget.

#![allow(unused)]
fn main() {
impl Widget for Footer {
    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
        // Start drawing the widget using the specified layout
        cx.begin_turtle(walk, self.layout);
        // Example data to iterate over
        let data = vec!["1","2","3"];
        for (d_id, name) in data.iter().enumerate() {
            let id = LiveId(d_id as u64);
            // Retrieve or insert a new button based on the id
            let c_btn = self.btns.get_or_insert(cx, id, |cx|{
                // Create a new button from the live pointer
                WidgetRef::new_from_ptr(cx, self.btn).as_button()
            });
            // Set the button's text
            c_btn.set_text(name);
            // Draw the button
            c_btn.draw_all(cx, scope);
        }

        // End the drawing process for the current widget
        cx.end_turtle();
        // Retain only the buttons that are visible
        self.btns.retain_visible();
        // Indicate that the drawing step is complete
        DrawStep::done()
    }
}
}

Impl handle_event

In order for all buttons to receive events, we need to implement the handle_event function

#![allow(unused)]
fn main() {
impl Widget for Footer{

    // ... draw_walk() fn

    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
        // Handle events for the current widget
        for btn in self.btns.values_mut(){
            // btn.handle_event(cx, event, scope);
            for action in cx.capture_actions(|cx| btn.handle_event(cx, event, scope)){
                match action.as_widget_action().cast() {
                    // Handle button actions
                    ButtonAction::Clicked => {
                        log!("Button clicked:{}", btn.text());
                    }
                    _ => {}
                }
            }
        }
    }
}
}

Pass Event

Now we need to implement event passing for the Footer widget, so that when any sub button is clicked, the Footer widget will trigger a Focus event

Define Footer Action

Define a Focus event which get LiveId(Button's LiveId)

#![allow(unused)]
fn main() {
#[derive(Clone, Debug, DefaultNone)]
pub enum FooterAction{
    None,
    // LiveId can specialize the clicked button
    Focus(LiveId),
}
}

Change handle_event

#![allow(unused)]
fn main() {
impl Widget for Footer{

    // ... draw_walk() fn

    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
        let uid = self.widget_uid();
        // Handle events for the current widget
        for (btn_id, btn) in self.btns.iter_mut(){
            // btn.handle_event(cx, event, scope);
            for action in cx.capture_actions(|cx| btn.handle_event(cx, event, scope)){
                match action.as_widget_action().cast() {
                    // Handle button actions
                    ButtonAction::Clicked => {
                        log!("Button clicked:{}", btn.text());
                        // pass event
                        cx.widget_action(uid, &scope.path, FooterAction::Focus(*btn_id))
                    }
                    _ => {}
                }
            }
        }
    }
}
}

Impl MatchEvent for Parent Widget

impl handle_actions function, match the action we need to do and then handle.

#![allow(unused)]
fn main() {
impl MatchEvent for App{
    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
        for action in actions{
            match action.as_widget_action().cast(){
                FooterAction::Focus(btn_id) => {
                    log!("Button focused:{}", btn_id);
                }
                _ => {
                    log!("other");
                }
            };
        }
    }
}
}

Videos

YouTube

Makepad: How to use Rust for fast UI – Rik Arends

Makepad: How to use Rust for fast UI – Rik Arends

Makepad: Designing modern UIs with Rust - Rik Arends - RustNL 2023

Makepad: Designing modern UIs with Rust - Rik Arends - RustNL 2023

Makepad: How to use Rust for fast UI – Rik Arends

Makepad In-depth Architecture and Design Internals — Rik Arends | GOSIM Workshop 2023

Bilibili

‼️ Note

Contribute Video

We will update Videos Collection per 2 Week in YouTube and Bilibili

Or you can send email to remind us (syf20020816@outlook.com)

Email Format:

${{video_name}}
${{author}}
${{video_url}}
${{email}}
${{description}}

Examples

Simple Example

Todo Example

Built-In

Walk

The Walk struct is a fundamental part of layout management in Makepad, allowing for flexible and precise positioning and sizing of widgets. Here's a detailed breakdown of its properties:

See DVec2

See Margin

See Size

Example

#![allow(unused)]
fn main() {
{
    height: Fit,
    width: Fill,
    abs_pos: vec2(200. ,9.),
    margin: 16.0,
}
}

DVec2|Vec2 Struct

DVec2

The DVec2 struct represents a 2-dimensional vector, typically used for positions and dimensions in the layout system.

Vec2

Example

#![allow(unused)]
fn main() {
abs_pos: None,
abs_pos: vec2(2.0 ,9.0),
}

Margin Struct

Defines the external padding around a widget, determining its offset from adjacent items or container edges.

Example

#![allow(unused)]
fn main() {
margin: 16.0,
margin: {left: 10.0},
margin: {left: 5.0, top: 6.0},
margin: {left: 10.0, right: 6.0, top: 10.0, bottom: 18.0},
}

Size Enum

Specifies the sizing behavior of a widget, allowing for flexible layout arrangements.

The Size enum facilitates various sizing strategies, such as:

• Fill: filling available space
• Fixed: setting a fixed dimension
• Fit: adjusting to content
• All: a special mode that applies a unique sizing logic

Example

#![allow(unused)]
fn main() {
height: Fill,
width: Fit,
width: 64.0,
width: All,
}

Layout

Layout结构定义了用于管理布局的各种属性，包括滚动、剪切、填充、对齐、流和间距的参数。

The Layout struct defines various properties for managing layout, including parameters for scrolling, clipping, padding, alignment, flow, and spacing.

Properties

See DVec2

See Padding

See Align

See Flow

Padding

The Padding struct defines padding values for all four sides (left, top, right, bottom) of a widget.

Properties

Example

#![allow(unused)]
fn main() {
padding: 16.0,
padding: {left: 10.0},
padding: {left: 5.0, top: 6.0},
padding: {left: 10.0, right: 6.0, top: 10.0, bottom: 18.0},
}

Align

The Align struct defines alignment values along the x and y axes.

Properties

Example

#![allow(unused)]
fn main() {
align: {x: 5, y: 6.0},
align: 0.5,
}

Flow

The Flow enum defines the direction and behavior of content flow within a layout in Makepad. It determines how child elements are arranged and wrapped.

Properties

Example

#![allow(unused)]
fn main() {
flow: Down,
flow: Overlay,
flow: RightWrap,
flow: Right,
}

DrawText

The DrawText struct is used for rendering text with various styles and properties in Makepad. It includes options for geometry, text style, wrapping, and various rendering details.

Properties

See Vec2

See TextStyle

See TextWrap

See DrawVars

Example

#![allow(unused)]
fn main() {
draw_text: {
    wrap: Word,
    // real font size = font size * font scale
    font_scale: 1.5,
    text_style: {
        // so here font size = 16 * 1.5 = 24
        font_size: 16,
        font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")},
        // brightness > 1.0 will make the text brighter
        // < 1.0 will make the text darker
        brightness: 1.0,
    },
    color: #FF0000,
}
}

TextStyle

TextStyle 是一个用于描述文本样式的结构体。

TextStyle is used for describe text style

Properties

Example

#![allow(unused)]
fn main() {
text_style: {
    // so here font size = 16 * 1.5 = 24
    font_size: 16,
    font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")},
    // brightness > 1.0 will make the text brighter
    // < 1.0 will make the text darker
    brightness: 1.0,
},
}

TextWrap

TextWrap 是一个枚举类型，用于定义文本的换行方式。

TextWrap is a enum, used for define the wrap way of the text

Option Value

• Ellipsis: if overflow the defined width, the end of the text display ellipsis
• Word: if it overflow the defined width, it will automatically wrap
• Line: no wrap

Example

#![allow(unused)]
fn main() {
wrap: Ellipsis,
wrap: Word,
wrap: Line,
}

DrawLabelText

Structure representing the drawing properties of label text.

Properties

See DrawText

Example

#![allow(unused)]
fn main() {
{
    draw_super: {
        wrap: Word,
        // real font size = font size * font scale
        font_scale: 1.5,
        text_style: {
            // so here font size = 16 * 1.5 = 24
            font_size: 16,
            font: {path: dep("crate://makepad-widgets/resources/IBMPlexSans-SemiBold.ttf")},
            // brightness > 1.0 will make the text brighter
            // < 1.0 will make the text darker
            brightness: 1.0,
        },
        color: #FF0000,
    },
    // 0.0 is false
    focus: 0.0,
    hover: 1.0,
    pressed: 0.0,
}
}

DrawIcon

DrawIcon结构定义了绘制图标的各种属性，包括亮度、缩放和几何图形的参数，以及对SVG文件和路径的引用。

The DrawIcon struct defines various properties for drawing an icon, including parameters for brightness, scaling, and geometry, as well as references to SVG files and paths.

Properties

See LiveDependency

See DVec2

See DrawVars

See Vec2

See Vec4

ImageFit Enum

用于确定图像在显示时的尺寸和比例

Used to determine the size and scale of the image when displayed

Properties

Example

#![allow(unused)]
fn main() {
fit: Stretch,
fit: Vertical,
}

LiveDependency

LiveDependency是一种引入资源的一种方式, 你可以用它来导入许多静态文件，使用关键字: dep()

LiveDependencyis a kind of way to import resource, you can use it to import many static files, use key word: dep()

See Import

Example

#![allow(unused)]
fn main() {
source: dep("crate://self/path/name.ty"),

font: {
    path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf"),
},
}

SplitterAxis

定义拆分器沿其水平或垂直方向划分容器的轴。

Defines the axis along which the splitter divides its container, either horizontally or vertically.

Properties

Example

#![allow(unused)]
fn main() {
axis: Vertical,
axis: Horizontal,
}

SplitterAlign

指定拆分器在其容器内的对齐或定位。

Specifies the alignment or positioning of the splitter within its container.

Properties

Example

#![allow(unused)]
fn main() {
align: FromA(100.0),
align: Weighted(0.5),
}

DrawCheckBox

Handles the drawing properties specific to the checkbox.

Properties

Example

#![allow(unused)]
fn main() {
draw_check: {
    check_type: Radio,
    selected: 1.0,
},
}

CheckType

定义不同类型复选框的枚举。

An enumeration defining different types of checkboxes.

Properties

Example

#![allow(unused)]
fn main() {
draw_check: {
    check_type: Radio,
},
draw_check: {
    check_type: Toggle,
},
}

DrawRadioButton

Handles the drawing properties specific to the radio button.

Properties

# RadioButtonGroup⛔

A widget representing a group of radio buttons, allowing for mutually exclusive selection.

Properties

RadioType

定义不同类型单选按钮的枚举。

An enumeration defining different types of radio buttons.

Properties

Example

#![allow(unused)]
fn main() {
draw_radio: {
    radio_type: Tab,
}
}

MediaType

An enumeration defining different types of media for the radio button.

Properties

Example

#![allow(unused)]
fn main() {
media: Image,
media: Icon,
}

DrawDesktopButton

Handles the drawing properties specific to the desktop button.

Properties

Example

#![allow(unused)]
fn main() {
draw_bg: {
    button_type: WindowMin,
}
}

DesktopButtonType

An enumeration defining different types of desktop buttons.

Properties

Example

#![allow(unused)]
fn main() {
button_type: WindowMin,
button_type: WindowMax,
button_type: Fullscreen,
}

DrawSlider

The DrawSlider struct represents the drawable properties of a slider, including its position and type. It builds upon the DrawQuad base to provide customized slider visuals.

Properties

See SliderType

SliderType

SliderType defines the orientation or style of the slider.

Variants

• Horizontal: The slider moves horizontally.
• Vertical: The slider moves vertically.
• Rotary: The slider moves in a rotary motion.

PopupMenuPosition

Enumeration representing the position of the popup menu.

Properties

Example

#![allow(unused)]
fn main() {
popup_menu_position: OnSelected,
popup_menu_position: BelowInput,
}

Types(LiveValue)

表示应用程序中使用的各种活动值的枚举。

Enumeration representing various live values used in the application.

Properties

Widgets

在Makepad这个框架中，Widgets是用来构建用户界面（UI）的基本构建块。它们类似于其他UI框架中的组件或控件，用于创建和管理各种UI元素，如按钮、文本框、标签、布局容器等。通过组合和配置这些Widgets，开发者能够构建出复杂且互动的用户界面。

本节将对所有内置小部件进行说明。

In the Makepad, Widgets are the basic building blocks used to build user interfaces (UI). They are similar to components or controls in other UI frameworks, used to create and manage various UI elements such as buttons, text boxes, labels, layout containers, etc. By combining and configuring these Widgets, developers can build complex and interactive user interfaces.

This section will explain all built-in widgets.

Attention

Makepad中的所有内置小部件都遵循XXXBase的命名约定。在开发应用程序时，很少直接使用这些小部件。相反，它们主要在创建组件时使用。在本章中，讨论的所有小部件都遵循XXXBase命名约定，且使用默认属性。我把这些称为内置小工具。当这些小部件被修改或扩展时，它们被称为组件。

All built-in widgets in Makepad follow the naming convention of XXXBase. These widgets are rarely used directly when developing applications. Instead, they are primarily utilized when creating components. In this chapter, all the widgets discussed follow the XXXBase naming convention and use default properties. I refer to these as Built-in Widgets. When these widgets are modified or extended, they are referred to as Components.

在本章节中你不会获得任何例子! 所有的例子将会在Component章节中。

In this chapter, you will not get any examples! All Examples are in the Component chapter.

Root

Root是Makepad的UI入口，扮演十分重要的角色，所有的子widget都应该在该Root下被编写。

Root中包含一个窗口(Window)，因此当Root被创建后我们可以使用Window中的属性对它进行调节

The Root serves as the entry point for the UI in Makepad, playing a crucial role in the application. All child widgets should be defined under this Root.

The Root contains a Window, which allows us to adjust its properties once the Root is created.

Here is the documentation for the Root widget based on the provided struct:

Props

Event

This widget does not define any specific events.

Designer

Makepad中的Designer组件是一种高级UI设计工具，允许开发人员以交互方式创建和管理应用程序布局和组件。提供的屏幕截图显示了Designer组件的界面，其中包括项目结构的层次视图和设计工作的画布区域。以下是对其目的和功能的更详细解释：

1. 层次视图：

   • 在界面的左侧，有一个显示应用程序结构的层次树视图。这包括应用程序、小部件、绘图、示例等文件夹及其子文件夹。
   • 层次结构中的每个条目表示项目中的一个组件或文件。例如，app包含KeyboardView组件，draw包含shader和geometry等子文件夹。

2. 画布面积：

   • 界面的右侧是一个画布，实际的设计工作就是在这里进行的。在这里，您可以直观地操作UI组件，并查看更改的实时效果。
   • 该区域当前在屏幕截图中显示为空，表示没有选择或显示任何组件进行编辑。

3. 组件属性和编辑：

   • 设计器组件允许用户在层次视图中选择不同的元素并编辑其属性。
   • 特性可以包括布局设置、视觉样式和功能属性。这些更改可以通过画布中的直接操作或通过调整属性面板（未在屏幕截图中显示，但通常是此类设计工具的一部分）中的属性来进行。

4. 项目组织机构：

   • 层次视图有助于系统地组织项目文件和构件。用户可以浏览项目的不同部分，打开组件，并根据需要进行编辑。
   • 这种结构化视图有助于维护有组织的工作流，尤其是在具有多个组件和依赖项的大型项目中。

5. 实时预览：

   • 设计器组件的一个显著优势是能够实时预览更改。当您修改属性或布局元素时，画布会立即更新以反映这些更改，从而提供即时反馈。

The Designer component in Makepad serves as an advanced UI design tool, allowing developers to create and manage their application layouts and components interactively. The screenshot provided illustrates the interface of the Designer component, which includes a hierarchical view of the project structure and a canvas area for design work. Here's a more detailed explanation of its purpose and functionality:

1. Hierarchical View:

   • On the left side of the interface, there is a hierarchical tree view that displays the structure of the application. This includes folders such as app, widgets, draw, examples, and their subfolders.
   • Each entry in the hierarchy represents a component or a file in the project. For instance, app contains the KeyboardView component, and draw contains subfolders like shader and geometry.

2. Canvas Area:

   • The right side of the interface is a canvas where the actual design work takes place. Here, you can visually manipulate the UI components and see the real-time effects of your changes.
   • This area is currently shown as empty in the screenshot, indicating that no component is selected or displayed for editing.

3. Component Properties and Editing:

   • The Designer component allows users to select different elements in the hierarchical view and edit their properties.
   • Properties can include layout settings, visual styles, and functional attributes. These changes can be made through direct manipulation in the canvas or by adjusting properties in a properties panel (not shown in the screenshot but typically part of such design tools).

4. Project Organization:

   • The hierarchical view helps in organizing the project files and components systematically. Users can navigate through different parts of their project, open components, and edit them as needed.
   • This structured view aids in maintaining an organized workflow, especially in larger projects with multiple components and dependencies.

5. Real-Time Preview:

   • One of the significant advantages of the Designer component is the ability to see real-time previews of changes. As you modify properties or layout elements, the canvas updates immediately to reflect these changes, providing instant feedback.

Props

Event

This widget does not define any specific events.

DesignerView

DesignerView小部件是Makepad UI框架中的一个专用视图，旨在为设计和编辑UI组件提供界面。它支持各种特性和功能，以管理设计器界面中的布局、背景图形和组件交互。

The DesignerView widget is a specialized view within the Makepad UI framework, designed to provide an interface for designing and editing UI components. It supports various properties and functionalities to manage the layout, background drawing, and component interactions within the designer interface.

Props

Event

This widget does not define any specific events.

Window

In the Makepad framework, Window Widgets are the fundamental components used to create and manage application windows. As a top-level container, it is responsible for hosting other widgets of the application interface and provides a series of configuration options, allowing developers to customize the behavior and appearance of windows. By using Window Widgets, developers can define properties such as window size, title, and background color to create a window interface that meets application requirements.

在Makepad框架中，Window Widget 是用于创建和管理应用程序窗口的基础组件。它作为顶层容器，负责承载应用界面的其它Widgets，并且提供了一系列的配置选项，允许开发者定制窗口的行为和外观。通过使用 Window Widget，开发者能够定义窗口的大小、标题、背景颜色等属性，从而创建出符合应用需求的窗口界面。

Props

View props are deref. See: View

Event

View

The View widget represents a UI element that can be rendered on the screen with various properties such as background color, layout, visibility, and more. It handles different events related to user interactions like finger movements and key presses.

“视图”小部件表示一个UI元素，该元素可以用各种属性（如背景色、布局、可见性等）在屏幕上呈现。它处理与用户交互相关的不同事件，如手指移动和按键。

Props

Event

~KeyboardView~⛔

Label

Label小部件用于在Makepad UI框架中显示文本。它包括用于自定义文本外观、对齐方式和填充的属性。

The Label widget is used to display text within the Makepad UI framework. It includes properties for customizing the text appearance, alignment, and padding.

Props

See DrawText

Event

No events specified for this widget.

Button

Button小部件是一个可自定义的交互式UI元素，用于响应用户操作，如点击、按下和释放。它包括背景、文本和图标渲染的属性，并支持不同状态（例如悬停、按下）的动画。

The Button widget is a customizable, interactive UI element that responds to user actions such as clicks, presses, and releases. It includes properties for background, text, and icon rendering, and supports animations for different states (e.g., hover, pressed).

Props

See Walk

See Layout

See DrawText

See DrawQuad

See DrawIcon

Event

LinkLabel

LinkLabel小部件是Button小部件的扩展，其行为类似于超链接标签。它利用了Button小部件的功能，提供了额外的方法来处理特定于链接标签的事件和操作。

The LinkLabel widget is an extension of the Button widget, designed to behave like a hyperlink label. It leverages the functionality of the Button widget, providing additional methods to handle events and actions specific to link labels.

Props

See Button

Event

Icon

Icon小部件是一个UI元素，用于显示具有可选背景的图标。它支持各种布局和漫游属性来控制其外观和位置。

The Icon widget is a UI element designed to display an icon with an optional background. It supports various layout and walk properties to control its appearance and positioning.

Props

See DrawIcon

Event

This widget does not define any specific events.

Image

An Image widget is used to display images within the UI. It supports various fitting modes and scales, and it can load images from different sources.

Props

SeeWalk

SeeDrawQuad

SeeImageFit

SeeLiveDependency

Event

No specific events are defined for the Image widget.

RotatedImage

RotatedImage是一个用于处理和显示旋转图像的结构。

RotatedImage is a struct for handling and displaying rotated images.

Props

See Walk

See Layout

See DrawColor

See LiveDependency

Event

This struct does not define any events.

ImageBlend

ImageBlend是一个用于处理和显示具有混合效果的图像的结构。

ImageBlend is a struct for handling and displaying images with blending effects.

Props

See Walk

See LiveDependency

See DrawQuad

See ImageFit

Event

This struct does not define any events.

CheckBox

表示复选框的小部件，可用于选择选项或切换状态。CheckBox小部件支持各种类型的复选框，包括标准复选框、单选按钮和切换。

A widget representing a check box, which can be used for selecting options or toggling states. The CheckBox widget supports various types of checkboxes including standard checks, radio buttons, and toggles.

Props

Event

RadioButton

表示单选按钮的小部件，可用于从一组互斥选项中选择一个选项。RadioButton小部件支持各种类型和媒体，包括图标和图像。

A widget representing a radio button, which can be used for selecting one option from a set of mutually exclusive options. The RadioButton widget supports various types and media, including icons and images.

Props

Event

TextInput

TextInput小部件是一个可自定义的文本输入字段，具有各种样式和行为选项。它支持动画、光标样式、文本选择和撤消/重做功能等功能。

The TextInput widget is a customizable text input field with various styling and behavior options. It supports features like animation, cursor styling, text selection, and undo/redo functionality.

Props

Event

DesktopButton

代表桌面风格按钮的小部件，具有悬停、按下和不同按钮类型（例如最小化、最大化、关闭）的不同视觉状态。

A widget representing a desktop-style button with different visual states for hovering, pressing, and different button types (e.g., minimize, maximize, close).

Props

See DrawDesktopButton

See Walk

See Animator

Event

FoldButton

表示可折叠按钮的小部件，可以通过点击打开或关闭，带有动画效果。用于在UI中创建可扩展的部分。

A widget representing a foldable button that can be opened or closed with animation. Useful for creating expandable sections in a UI.

Props

See DrawQuad

See DVec2

See Walk

See Animator

Event

FoldHeader

一种小部件，表示具有可扩展和可折叠主体部分的可折叠头部。它使用折叠按钮来控制身体的打开和关闭状态。

A widget representing a foldable header with an expandable and collapsible body section. It uses a fold button to control the open and close state of the body.

Props