#Syntax

#Properties

Properties are used for data binding. In Live DSL, properties are primarily divided into two categories:

• Field properties (:), typically used to define inherent or structural properties of the type declaration, these properties are part of the type definition
• Instance properties (=), typically used to define inherited or overridden properties

#Field Properties

Defined using a colon (:), typically used to define a component's inherent properties:

1MyWidget = {{Widget}} {
2    // Field property examples
3    color: #f00,         // Color property
4    width: 100,         // Numeric property
5    visible: true,      // Boolean property
6    name: "button",     // String property
7    padding: {          // Nested field property
8        left: 10,
9        right: 10
10    }
11}

Field Property Characteristics:

• Used to define component's basic properties and state
• Values directly map to Rust struct fields
• Uses colon : to separate key and value
• Can be inherited and overridden by child components
• Generally used to define component's static configuration

#Instance Properties

Defined using the equals sign (=), typically used to define variable or dynamic properties:

1Container = {{View}} {
2    // Instance property examples
3    Button1 = <Button> {  // Create Button instance
4        width: 100,
5        label: "Click me"
6    }
7
8    Panel = <View> {     // Create View instance
9        flow: Down,
10        Button2 = <Button> {
11            width: 200
12        }
13    }
14}

Instance property characteristics:

• Used to create child component instances
• Uses equals sign = for assignment
• Typically used with <ComponentType> syntax
• Can be nested to form component trees
• Instances are created as actual component objects at runtime
• Used to build component hierarchy

#Relationship Between Properties

Both types work together to create components:

1MyComponent = {{Component}} {
2    // Field properties - define component's own attributes
3    width: Fill,
4    color: #f00,
5
6    // Instance properties - create child components
7    Header = <View> {
8        height: 50
9    }
10
11    Content = <View> {
12        // Field properties
13        flow: Down,
14        spacing: 10,
15
16        // Nested instance properties
17        button1 = <Button> {
18            label: "OK"
19        }
20        button2 = <Button> {
21            label: "Cancel"
22        }
23    }
24}
25
26// Field properties map to struct fields
27#[derive(Live)]
28pub struct Component {
29    #[live] pub width: Size,    // Corresponds to width: Fill
30    #[live] pub color: Vec4,    // Corresponds to color: #f00
31}
32
33// Instance properties create new component instances
34impl Widget for Component {
35    fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
36        // Can access child instances through button()
37        let button = self.button(id!(button1));
38        button.handle_event(cx, event);
39    }
40}

#Key Differences

• Field properties (:) define component attributes and configuration
• Instance properties (=) create component instances and hierarchy
• Field properties map to Rust struct fields
• Instance properties create actual component objects
• Field properties can be inherited, instance properties form new component tree nodes

Instance properties create actual component objects at runtime that can be accessed via template IDs, while field properties directly affect the component's own property values.

Understanding the distinction between these two property types is crucial for correctly using Live DSL to build interfaces. Field properties are for configuration, while instance properties are for organizing component structure.