Java Builders - taking on the ZoneLayout example for complex GUI

I had a look at Zone layout and wanted to tackle the complex example they show:

This is how I *think* the Java Builder file would look like to accomplish this (notice I removed the explicit MigLayout declaration, assumed it is there by default and moved the "constraints" node to the container level, instead of beneath the layout manager node):

JPanel:
name: mainPanel
content:
    - JPanel: #the name panel
        name: namePanel
        title: Name
        content:
            - JLabel: {name: fNameLabel, text: "First Name:"}
            - JTextField: {name: fName}
            - JLabel: {name: lNameLabel, text: "Last Name:"}
            - JTextField: {name: lName}
            - JLabel: {name: titleLabel, text: "Title:"}
            - JTextField: {name: title}
            - JLabel: {name: nickNameLabel, text: "Nickname:"}
            - JTextField: {name: nickName}
            - JLabel: {name: displayLabel, text: "Display Format:"}
            - JComboBox: {name: display}
        layout: |
              >fNameLabel   fName     >lNameLabel    lName
              >titleLabel   title     >nickNameLabel nickName
              >displayLabel display+3
    - JPanel:  #the email panel
        name: emailPanel
        title: E-mail
        content:
             - JLabel: {name: emailLabel, text: "Email:"}
             - JTextField: {name: email}
             - JList: {name: items}
             - JButton: {name: addButton, text: Add}
             - JButton: {name: editButton, text: Edit}
             - JButton: {name: removeButton, text: Remove}
             - JButton: {name: advButton, text: Advanced}
        layout: |
               >emailLabel   email             addButton+1+4
               items+2+3                       editButton       [grow]  #row constraint
                                               removeButton
                                               advButton
                            [grow]                                      #column constraint
    - JPanel: #the ok/cancel buttons panel
         name: buttonsPanel
         content:
             - JButton: {name: okButton, text: OK}
             - JButton: {name: cancelButton, text: Cancel}
         layout: |
               cancelButton okButton
         constraints: #add special MigLayout tags to identify these as OK/Cancel buttons
             - okButton: ok
             - cancelButton: cancel
  - layout: |                             #put it all together for the entire panel
      [gap 5px]                           #optional layout constraints
      namePanel                       
      emailPanel      [grow]              #each row may end with optional row constraints
      buttonsPanel    [right]
      [grow]   
      #each column may have optional column constraints at the bottom

So, what do you think? Took me about 10 minutes to type this in by hand, including thinking about how to incorporate the MigLayout row/column constraints into the picture.

P.S. An interesting variation if the JPanel's are removed and instead replaced with just a customized JSeparator that has a label embedded in it (similar to most of the examples in FormsLayout and MigLayout sample apps). That allows to put everything at the same level and in one layout node, e.g.

JPanel:
    name: mainPanel
    content:
        - JBSeparator: {name: nameSep, text: Name}
        - JLabel: {name: fNameLabel, text: "First Name:"}
        - JTextField: {name: fName}
        - JLabel: {name: lNameLabel, text: "Last Name:"}
        - JTextField: {name: lName}
        - JLabel: {name: titleLabel, text: "Title:"}
        - JTextField: {name: title}
        - JLabel: {name: nickNameLabel, text: "Nickname:"}
        - JTextField: {name: nickName}
        - JLabel: {name: displayLabel, text: "Display Format:"}
        - JComboBox: {name: display}
        - JBSeparator: {name: emailSep, text: E-mail}
        - JLabel: {name: emailLabel, text: "Email:"}
        - JTextField: {name: email}
        - JList: {name: items}
        - JButton: {name: addButton, text: Add}
        - JButton: {name: editButton, text: Edit}
        - JButton: {name: removeButton, text: Remove}
        - JButton: {name: advButton, text: Advanced}
        - JButton: {name: okButton, text: OK}
        - JButton: {name: cancelButton, text: Cancel}
    layout: |
          nameSep+5
          >fNameLabel   fName     >lNameLabel    lName+2
          >titleLabel   title     >nickNameLabel nickName+2
          >displayLabel display+4
          emailSep+5
          >emailLabel   email+3                              addButton    
          items+3+3                                          editButton       [grow]  
                                                             removeButton
                                                             advButton
          >cancelButton+5,>okButton
                        [grow]
    constraints: 
        - okButton: ok
        - cancelButton: cancel

Interesting...

P.S.S. Just to clarify, the "layout" node would be basically translated to standard MigLayout code, something like this:

setLayout(new MigLayout("","[][][][][][][grow]","[][grow]");

add(nameSep,"cell 0 0, span 5");

add(fNameLabel,"cell 1 0, right");
add(fName,"cell 1 1, fill");
add(lNameLabel,"cell 1 2, right");
add(lName,"cell 1 3, span 2");

add(titleLabel,"cell 2 0, right");
add(title,"cell 2 1, fill");
add(nickNameLabel,"cell 2 2, right");
add(nickNameLabel,"cell 2 3, span 2");

add(displayLabel,"cell 3 0, right");
add(display,"cell 3 1, fill, span 4");

add(emailSep,"cell 4 0, span 5");

add(emailLabel,"cell 5 0, right");
add(email, "cell 5 1, fill, span 3");
add(addButton,"cell 5 4, fill");

add(items, "cell 6 0, span 3 3, fill");
add(editButton,"cell 6 4, fill");
add(removeButton,"cell 7 4, fill")
add(advButton,"cell 8 4, fill");

add(cancelButton,"cell 9 0, right, span 5, split, cancel");
add(okButton,"right");

Code could be a bit off, but that's what it would most likely translate into...