autolayout

    Dark Mode

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

  • Arithmetic (+, -, *, /) for both element length and distance.
  • Batch operation (H:|{elems:[a][b][c]}|, H:[elems(25)] = HV:[a,b,c(25)] )
  • Aliases (Alias: a=Apple, b=Ball, c=Cat H:[a][b][c])
  • "spacing:" to specify the default spacing.
  • "variable:" to specify the variable name used in equal size spacers.
  • "strength:" to specify the strength in output. Default is "STRONG, MEDIUM, WEAK".
  • "outer:" to specify the outer object (following rule align sibling instead of parent).
  • Nim variable or expression can be used by quoting with '.
  • Space and newline are allowed in all position.

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

Seealso:wResizable

Types

VflParseError = object of CatchableError
  matchLen: int
  matchMax: int

Procs

proc `$`(parser: VflParser): string {...}{.raises: [ValueError], tags: [].}
Output the current layout as visual format language. 
proc toString(parser: VflParser; indent = 2; extraIndent = 0; templ = "layout"): string {...}{.
    raises: [ValueError, KeyError], tags: [].}
Generates the wNim layout DSL. 
proc initVflParser(parent = "panel"; spacing = 10; variable = "variable"): VflParser {...}{.
    raises: [], tags: [].}
Initializer. 
proc parse(parser: var VflParser; input: string) {...}{.
    raises: [NPegException, Exception, ValueError, VflParseError], tags: [RootEffect].}
The main parser function. Raise VflParseError if enconter an error. 
proc autolayout(input: string; indent = 2; extraIndent = 0; templ = "layout"): string {...}{.
    raises: [NPegException, Exception, ValueError, KeyError], tags: [RootEffect].}
Parse the Visual Format Language and output the layout DSL in one action.

Iterators

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

Made with Nim.