How to do nested/hierarchical views in VFL

Question

I'm using VFL in wNim.

Trying to create a layout with nested panels and buttons.

The | anchor appears to attach a view to the outermost panel, rather than the nearest enclosing panel.

From the scant VFL docs I've been able to find, it appears it's mostly geared for flat arrangements.

My goal is the following nested/hierarchy structure:

Frame
  mainPanel
    Button1
    Button2
  blockPanel
    GDI objects

For now instead of GDI objects I'm using a giant Button as a placeholder. Not quite the same, but I'm also trying to learn subtleties of VFL.

Three examples below.

Example 1: flat structure, single panel, but I need 2 panels.

Example 2: Nested structure, big Button is anchored to outer panel, so you don't see its right and bottom edges properly:

Example 3: Nested structure, big Button shows properly, but this requires two VFL autolayouts:

So the question is can this be done with one VFL autolayout ?

import wNim/[wApp, wFrame, wPanel, wEvent, wButton]

proc main =
  let app = App(wSystemDpiAware)
  const style = wBorderSimple

  # Single flat panel
  let frame1 = Frame(title="wNim Frame 1", size=(600,400))
  let mainPanel1 = Panel(frame1, style=style)
  let button1 = Button(mainPanel1, label="Butt1")
  let button2 = Button(mainPanel1, label="LongButton2")
  let button3 = Button(mainPanel1, label="Button3")
  proc layout1() = 
    mainpanel1.autolayout  """
      V:|-[col1:[button1]-[button2]~]|
      V:|-[button3]-|
      H:|-[button1]-[button3]-|
    """
  mainPanel1.wEvent_Size do():
    layout1()
  layout1()
  frame1.center()
  frame1.show()

  # Nested panels, big button attaches to outer main panel, not its 
  # immediately-enclosing panel
  let frame2 = Frame(title="wNim Frame 2", size=(600,400))
  let mainPanel2 = Panel(frame2, style=style)
  let blockPanel1 = Panel(mainPanel2, style=style)
  let button4 = Button(mainPanel2, label="Butt4")
  let button5 = Button(mainPanel2, label="LongButton5")
  let button6 = Button(blockPanel1, label="Button6")
  proc layout2() = 
    # Replace button3 with blockPanel1
    mainpanel2.autolayout  """
      V:|-[col1:[button4]-[button5]~]|
      V:|-[blockPanel1]-|
      H:|-[button4]-[blockPanel1]-|
      HV:|[button6]|
    """
  mainPanel2.wEvent_Size do():
    layout2()
  layout2()
  frame2.center()
  frame2.show()

  # Separate layout required for nesting big button in blockPanel2
  let frame3 = Frame(title="wNim Frame 3", size=(600,400))
  let mainPanel3 = Panel(frame3, style=style)
  let blockPanel2 = Panel(mainPanel3, style=style)
  let button7 = Button(mainPanel3, label="Butt7")
  let button8 = Button(mainPanel3, label="LongButton8")
  let button9 = Button(blockPanel2, label="Button9")

  proc layout3() = 
    # Replace button3 with blockPanel`
    mainpanel3.autolayout  """
      V:|-[col1:[button7]-[button8]~]|
      V:|-[blockPanel2]-|
      H:|-[button7]-[blockPanel2]-|
      """
    blockPanel2.autolayout """
      HV:|[button9]|
    """
  mainPanel3.wEvent_Size do():
    layout3()
  layout3()
  frame3.center()
  frame3.show()

  app.mainLoop()

main()

How to do nested/hierarchical views in VFL

Answers (1)

Related Questions