#Scripts

The script part of GenUI uses the Rust language and is wrapped in the <script> tag in the .gen file.

#Define components

For custom components, we need to use the #[component] macro to declare the component's properties, but not all types are allowed. Types that can be used in properties need to implement the Default trait. Custom structs and enums need to be annotated with #[prop].

1<script>
2#[component]
3pub struct MyView{
4    name: String
5}
6</script>

#Define component properties

When you want to build a custom struct or enum in a component, you need to use #[prop] to annotate it and implement the Default trait

1<script>
2#[component]
3pub struct MyView{
4    user: User,
5    auth: Auth
6}
7
8#[prop]
9#[derive(Debug, Clone)]
10pub struct User{
11    name: String
12}
13
14impl Default for User{
15    fn default() -> Self{
16        Self{ name: "John" }
17    }
18}
19
20#[prop]
21#[derive(Default, Clone, Copy, Debug)]
22pub enum Auth{
23    #[default]
24    Custom,
25    User,
26    Remote,
27    Other
28}
29</script>

#Define component events

Custom components do not have any events. Events need to be declared using the #[event] macro, and #[derive(Debug, Clone)] needs to be added.

1#[event]
2#[derive(Debug, Clone)]
3pub enum MyViewEvent{
4    Clicked,
5    Changed(String),
6}

In the example above, we defined two event callbacks:

1. Clicked
2. Changed

Among them, Clicked does not have any callback parameters, and the callback parameter of Changed is of String type.

#Data Binding

We have learned how to define component properties in the previous section, and data binding of component templates is also based on property definitions

In this example, we define the value of the text property of label in MyView. For the bound value, GenUI will automatically generate the corresponding get and set methods.

1<template>
2    <component name="MyView">
3        <label id="my_label" :text="txt"></label>
4        <button id="my_btn" @clicked="change_txt()"></button>
5    </component>
6</template>
7
8<script>
9#[component]
10pub struct MyView{
11    txt: String
12}
13
14impl Default for MyView{
15    fn default() -> Self{
16        Self{
17            txt: "Hello".to_string()
18        }
19    }
20}
21</script>

In this code, the get_txt and set_txt methods are automatically generated.

#Methods and callbacks

Methods and callbacks need to be defined in the component structure using impl. In the following example, we define the change_txt method as the callback method for button clicks.

1<template>
2    <component name="MyView">
3        <label id="my_label" :text="txt"></label>
4        <button id="my_btn" @clicked="change_txt()"></button>
5    </component>
6</template>
7
8<script>
9#[component]
10pub struct MyView{
11    txt: String
12}
13
14impl Default for MyView{
15    fn default() -> Self{
16        Self{
17            txt: "Hello".to_string()
18        }
19    }
20}
21
22impl MyView{
23    fn change_txt(&mut self){
24        self.set_txt("World".to_string());
25    }
26}
27</script>