finish loop widget

Author: syf20020816

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
+For those who pursue higher goals, Makepad can be directly used in DSL
+

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: <view>this is a view</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 |      
+------------                              ----------------
+```

src/makepad/code/widgets/define.md

@@ -2,15 +2,15 @@
 
 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:
 
 ```rust
 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:
 

src/makepad/code/widgets/define2.md

@@ -2,15 +2,15 @@
 
 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:
 
 ```rust
 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:
 

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: <Button>` instead of `btn = <Button>`. This implies that the button is treated as a prop here.
 
@@ -27,7 +27,7 @@ live_design!{
 }
 ```
 
-## Writing the Widget
+## 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).
 
@@ -57,7 +57,7 @@ pub struct Footer {
 }
 ```
 
-## Drawing the Widget
+## Draw the Widget
 
 Implement the `draw_walk` method to render the widget.
 
@@ -89,4 +89,100 @@ impl Widget for Footer {
         DrawStep::done()
     }
 }
+```
+---
+
+## Impl handle_event
+
+In order for all buttons to receive events, we need to implement the `handle_event` function
+
+```rust
+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());
+                    }
+                    _ => {}
+                }
+            }
+        }
+    }
+}
+```
+
+![](../../../static/for_loop_1.png)
+
+## 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)
+
+```rust
+#[derive(Clone, Debug, DefaultNone)]
+pub enum FooterAction{
+    None,
+    // LiveId can specialize the clicked button
+    Focus(LiveId),
+}
+```
+
+### Change handle_event
+
+```rust
+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.
+
+```rust
+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");
+                }
+            };
+        }
+    }
+}
 ```

src/makepad/syntax/import.md

@@ -2,7 +2,31 @@
 
 This section details how to incorporate external resources such as images and fonts into your Makepad projects. Makepad supports various formats, allowing you to enhance the visual aspect of your applications.
 
-## Importing Images
+> widgets: `import `
+> 
+> font, images, ...other static resources: `dep()`
+
+## Import Widgets
+
+use keyword: `import` can import widget in `live_design!`
+
+```rust
+live_design!{
+    import you_crate_name::widget_mod::widget_name;
+}
+
+// example
+live_design!{
+    import hello::header::Header;
+}
+
+//import all
+live_design!{
+    import hello::header::*;
+}
+```
+
+## Import Images
 
 Makepad allows the importation of various image formats to enrich your user interface. Supported formats include:
 
@@ -36,7 +60,7 @@ live_design!{
 }
 ```
 
-## Importing Fonts
+## Import Fonts
 
 Importing fonts in Makepad is very similar to importing images. Makepad supports various font formats to allow you to customize the typography of your application. Supported font formats include: