Home / Programming / experimets / UI definition syntax edit
Try Documentalist, my app that offers fast, offline access to 190+ programmer API docs.

This is an experiment in defining a syntax for UI definitions. This replicates Dart sample from https://github.com/dart-lang/sdk/blob/e6e8d35323dbc431d9b9aed32b20d5462702999f/docs/newsletter/20170818.md
The big picture is:
  • indentation defines nesting
  • for clean look, we don't use separators (, or ;), like in css. Create a new line
  • Foo [ properties ], Foo defines type of the object and we can have multiple properties in [] .
  • properties are foo: bar
Material [
  child: Column [
    children: [
      MyAppBar
        title: Text [
          text: "Example title"
          style: myStyle
        ]
      Expanded [
        child: Center [
          child: Text [ "hello world"]
        ]
      ]
    ]
  ]
]
Below is an improvement where we introduce an implicit property. Each type can have one property that is implicit and doesn't need to be specified e.g. if foo is implicit property, then foo: bar can be shortened to bar . Below most implicit properties are child and children
Material
  Column
    MyAppBar
      title: Text
        "Example title"
        style: main-style          
    Expanded [ Center [ Text [ "hello world" ] ] ]

Style
  id: main-style
  font: Courier 12
  color: #ffaadd
  background-color: #aaddff
Mixing tabs and spaces for indentation is error prone so we should settle on only one (e.g. 2 spaces for indentation level) and disallow the other one.
Implementation notes
type Font struct {
  Name string `csf:""`
  Size int
}

type Value struct {
  Type string
  Props []*Prop
}

type Prop struct {
  Name string // if empty
  Value string
}

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

Need fast, offline access to 190+ programmer API docs? Try my app Documentalist for Windows