From 8204e25cefb13283956c80bbe2df07fe61bd99ef Mon Sep 17 00:00:00 2001 From: syf20020816 Date: Tue, 26 Mar 2024 15:22:56 +0800 Subject: [PATCH] finish loop widget --- src/gen/design/converter/converter.md | 3 +- src/gen/design/parser/parser.md | 43 +++++------ src/makepad/code/widgets/define.md | 12 +-- src/makepad/code/widgets/define2.md | 8 +- src/makepad/code/widgets/for.md | 102 +++++++++++++++++++++++++- src/makepad/syntax/import.md | 28 ++++++- src/static/for_loop_1.png | Bin 0 -> 26170 bytes src/static/for_loop_2.png | Bin 0 -> 203406 bytes 8 files changed, 159 insertions(+), 37 deletions(-) create mode 100644 src/static/for_loop_1.png create mode 100644 src/static/for_loop_2.png diff --git a/src/gen/design/converter/converter.md b/src/gen/design/converter/converter.md index 81a6016..60ca877 100644 --- a/src/gen/design/converter/converter.md +++ b/src/gen/design/converter/converter.md @@ -10,4 +10,5 @@ Of course, I believe that my framework is not a replacement for Makepad, but rat 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 \ No newline at end of file +For those who pursue higher goals, Makepad can be directly used in DSL + diff --git a/src/gen/design/parser/parser.md b/src/gen/design/parser/parser.md index b8fc58e..0d804d1 100644 --- a/src/gen/design/parser/parser.md +++ b/src/gen/design/parser/parser.md @@ -1,29 +1,30 @@ -# Convert RSX DSL to AST -## How to convert +# Parser + +## Convert RSX DSL to AST + ```shell Real AST ----------- --------------- Strategy --------------- | RSX DSL | --> | ParseTarget | ----------> | ParseResult | ----------- --------------- --------------- ``` -## RSX - -- Template -- Script -- Style - -### Template -1. Unrestricted tags (tag name is not constrained) -2. There are no styles, only properties, or in other words, all styles are properties -3. Nesting strings in tags is not allowed (example: this is a view ❌) - -### Script -1. Allow Rust syntax - -### Style - -1. bind to tag by name -2. nesting allowed -3. function and bind allowed +## Convert To Makead +```shell + --------------------------- + | | +------------------------ | MakepadConvertResult | +| AST (in ParseResult) | --------> | | +------------------------ | -------------------- | +------------------------ | | MakepadConverter | | +| File Meta Data | --------> | -------------------- | +------------------------ | | + --------------------------- + | + |------------------→ | + | ↓ +------------ | ---------------- +| Strategy | --------------| | Makepad Code | +------------ ---------------- +``` \ No newline at end of file diff --git a/src/makepad/code/widgets/define.md b/src/makepad/code/widgets/define.md index a2ad6a1..cd097de 100644 --- a/src/makepad/code/widgets/define.md +++ b/src/makepad/code/widgets/define.md @@ -2,7 +2,7 @@ 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. -## Starting with a New Module +## Init a New Module First, create a new module for our custom widget: @@ -10,7 +10,7 @@ First, create a new module for our custom widget: pub mod my_label; ``` -## Crafting a Live Design +## Design Live Design The `live_design!` macro allows for an effortless and succinct definition of custom widgets. Here, we define `MyLabel` with unique styling: @@ -36,7 +36,7 @@ live_design!{ } ``` -## Defining the Widget Structure +## Define the Widget Structure `MyLabel` will utilize the `Widget` trait and directly reference (`deref`) the `Label` widget: @@ -49,7 +49,7 @@ pub struct MyLabel{ } ``` -## Implementing the Widget Trait +## Impl the Widget Trait Next, we implement the `Widget` trait for `MyLabel` to ensure it behaves as intended: @@ -61,7 +61,7 @@ impl Widget for MyLabel { } ``` -## Registering in the Application +## Register in the Application It's crucial to register our custom widget in the application to make it available for use: @@ -74,7 +74,7 @@ impl LiveRegister for App { } ``` -## Utilizing in the App's Live Design +## Use in the App's Live Design Finally, incorporate `MyLabel` into the application's live design, setting it up for use: diff --git a/src/makepad/code/widgets/define2.md b/src/makepad/code/widgets/define2.md index a22f3c7..c3024f7 100644 --- a/src/makepad/code/widgets/define2.md +++ b/src/makepad/code/widgets/define2.md @@ -2,7 +2,7 @@ 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. -## Initiating with a New Module +## Init a New Module Begin by creating a module specifically for our enhanced widget: @@ -10,7 +10,7 @@ Begin by creating a module specifically for our enhanced widget: pub mod deref_label; ``` -## Designing a Live Layout +## Design Live Design In this step, we define `DerefLabel`, focusing on simplicity and reusability: @@ -35,7 +35,7 @@ live_design!{ } ``` -## Creating a Deref Structure +## Define a Deref Structure `DerefLabel` is designed with simplicity and flexibility in mind, allowing for easy customization of text, color, and font size: @@ -53,7 +53,7 @@ pub struct DerefLabel{ } ``` -## Implementing the Widget Trait +## Impl the Widget Trait With the widget's structure defined, we implement the `Widget` trait to specify how `DerefLabel` behaves and is rendered: diff --git a/src/makepad/code/widgets/for.md b/src/makepad/code/widgets/for.md index 1b8deb7..22b1990 100644 --- a/src/makepad/code/widgets/for.md +++ b/src/makepad/code/widgets/for.md @@ -2,7 +2,7 @@ This example demonstrates how to generate components from iterable data in Makepad. -## Writing Live Design +## Write Live Design Note that we use `btn: