Guide
Workshop
Getting Started with Examples
Contribute
Guide
Workshop
Getting Started with Examples
Contribute

Live DSL Coding Guideline

Naming Conventions

Component Type Naming

  • Use PascalCase for component types
  • Name with functional nouns that indicate semantics
1// Good
2Button = {{Button}} { }
3DropDownList = {{DropDownList}} { }
4ScrollView = {{ScrollView}} { }
5
6// Bad
7button = {{button}} { }
8dropdownlist = {{dropdownlist}} { }
9scroll_view = {{scroll_view}} { }

Instance Property Naming

  • Use PascalCase when the instance is a reusable UI component that needs referencing
  • Use snake_case when the instance is a layout container or decorative element
1Dialog = {{Dialog}} {
2    // Use PascalCase for interactive components that need referencing
3    OkButton = <Button> { }
4    CancelButton = <Button> { }
5
6    // Use snake_case for layout containers
7    content_area = <View> {
8        header = <View> { }
9        body = <View> { }
10        footer = <View> { }
11    }
12}

Field Property Naming

Use snake_case for all field properties

1Button = {{Button}} {
2    // Good
3    background_color: #fff,
4    border_width: 1.0,
5    corner_radius: 4.0,
6    // Bad
7    backgroundColor: #fff,
8    BorderWidth: 1.0,
9    cornerRadius: 4.0,
10}

Indentation and Spacing

Indentation

  • Use 4 spaces for indentation
  • Increase indentation level for each nesting level
1Container = {{View}} {
2    width: Fill,
3    height: Fill,
4
5    Header = <View> {
6        height: 60,
7
8        Title = <Label> {
9            text: "Hello"
10        }
11    }
12}

Spacing and Line Breaks

  • Add one space after property colons
  • Add one space before and after curly braces
  • Separate instances with blank lines
  • Group related field properties together
1Container = {{View}} {
2    // Layout-related properties grouped together
3    width: Fill,
4    height: Fill,
5    flow: Down,
6    spacing: 10,
7
8    // Visual-related properties grouped together
9    background_color: #fff,
10    border_width: 1.0,
11    corner_radius: 4.0,
12
13    // Separate child instances with blank lines
14    Header = <View> {
15        height: 60
16    }
17
18    Content = <View> {
19        flow: Down
20    }
21
22    Footer = <View> {
23        height: 40
24    }
25}

Property Ordering

It is recommended to organize properties in the following order:

  1. Layout properties (width, height, margin, etc.)
  2. Visual properties (color, border, etc.)
  3. Behavioral properties (cursor, grab_key_focus, etc.)
  4. Animation properties (animator)
  5. Child component instances
1Button = {{Button}} {
2    // 1. Layout properties
3    width: 100,
4    height: 40,
5    margin: {left: 10, right: 10},
6
7    // 2. Visual properties
8    background_color: #fff,
9    border_width: 1.0,
10    corner_radius: 4.0,
11
12    // 3. Behavioral properties
13    cursor: Pointer,
14    grab_key_focus: true,
15
16    // 4. Animation properties
17    animator: {
18        hover = {
19            default: off
20        }
21    },
22
23    // 5. Child component instances
24    Icon = <Icon> { },
25
26    Label = <Label> { }
27}

Component Structure

Basic Component Definition

  • Use double curly brace syntax for basic components
  • Component name must match implementation
1// Basic component definition
2Button = {{Button}} { }
3Label = {{Label}} { }

Component Inheritance and Composition

  • Use angle bracket syntax for inheritance
  • Use instance properties for composition
1// Inheritance
2PrimaryButton = <Button> {
3    background_color: #2196f3
4}
5// Composition
6CardView = {{View}} {
7    header = <View> { }
8    content = <View> { }
9}

Comment Standards

Component Comments

  • Add descriptive comments before component definitions
  • Explain component purpose and important properties
1// Primary action button
2// Supports size: small | medium | large
3// Supports variant: contained | outlined | text
4PrimaryButton = <Button> {
5    background_color: #2196f3
6}

Group Comments

  • Use comments to group related properties
1Dialog = {{Dialog}} {
2    // -------- Layout --------
3    width: 400,
4    height: 300,
5
6    // -------- Visual --------
7    background_color: #fff,
8    shadow_color: #0007,
9
10    // -------- Components --------
11    Header = <View> { }
12    Content = <View> { }
13}

Patterns and Best Practices

Reusable Components

  • Extract reusable styles and layouts into separate components
  • Use inheritance to extend base components
1// Base card component
2Card = {{View}} {
3    background_color: #fff,
4    corner_radius: 4.0,
5    shadow_color: #0007
6}
7// Specific purpose card
8ProductCard = <Card> {
9    width: 200,
10    height: 300
11}