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:


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)]]|)
  • 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:

  • Batch operation (H:|{elems:[a][b][c]}|, H:[elems(25)] = HV:[a,b,c(25)] )
  • 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.

The name of the view stack will be injected into current scope as a wResizable object, so name conflict should be avoided. To see more examples and try VFL, run examples/autolayoutEditor.nim



proc initVflParser(parent = "panel"; spacing = 10; variable = "variable"): VflParser {...}{.
    raises: [], tags: [].}
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.


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