autolayout

autolayout is a separated module for wNim to parse the Visual Format Language and output the wNim layout DSL. This code is designed to be used at both compile time and runtime. For more information about VFL, see AutoLayout.js and Apple's Visual Format Language.

Visual Format Language looking like this:

V:|-{col1:[child1(child2)]-[child2]}-|
V:|-{col2:[child3(child4,child5)]-[child4]-[child5]}-|
H:|-[col1(col2)]-[col2]-|

Thanks to nim's powerful metaprogramming features. Now wNim can use Visual Format Language to design the GUI layout. And most the hard works are done at compile time.

The parser supports most Visual Format Language features including:

  • Proportional size (H:|-[view1(=50%)])
  • Operators (H:|-[view1(=view2/2-10)]-[view2]-|)
  • Attributes (V:|[view2(view1.width)])
  • Equal size spacers/centering(H:|~[center(100)]~|)
  • View stacks (V:|{column:[header(50)][content][footer(50)]}|, use {} instead of [].)
  • View ranges (spread operator) (H:[view1..8(10)]|)
  • Multiple views (H:|[text1,text2,text3]|)
  • Multiple orientations (HV:|[background]|)
  • Disconnections (right/bottom alignment) (H:|[view1(200)]->[view2(100)]|)
  • Negative values (overlapping views) (H:|[view1]-(-10)-[view2]|)
  • Priority ([button(100@STRONG)] or [button(100@20)])
  • Explicit constraint syntax (C:view1.centerX = view2.centerX)
  • Comments (H:[view1(view1.height/3)] # enfore aspect ratio 1/3)

Some more features:

  • Space and newline are allowed in most position.
  • Parse everything as much as posible and never throw an error.
  • "spacing:" to specify the default spacing.
  • "variable:" to specify the variable name used in equal size spacers.
  • "outer:" to specify the outer object.

To see more examples and try VFL, run examples/autolayoutEditor.nim

Seealso:wResizable

Procs

proc initVflParser(parent = "panel"; spacing = 10; variable = "variable"): VflParser {...}{.
    raises: [], tags: [].}
Initializer.
proc parse(parser: var VflParser; input: string) {...}{.
    raises: [Exception, ValueError, KeyError], tags: [RootEffect].}
The main parser function.
proc toString(parser: VflParser; indent = 2; extraIndent = 0; templ = "layout"): string {...}{.
    raises: [ValueError, KeyError], tags: [].}
Generates the layout DSL result.
proc autolayout(input: string; indent = 2; extraIndent = 0; templ = "layout"): string {...}{.
    raises: [Exception, ValueError, KeyError], tags: [RootEffect].}
Parse the Visual Format Language and output the layout DSL in one action.

Iterators

iterator names(parser: VflParser): string {...}{.raises: [], tags: [].}
Iterates over item names in the parser.