Walk layouts (like those Qt Widget layouts they were inspired by) are based on a limited number of grid-based variants. The list of implemented layouts includes the following:

• GridLayout: Items are laid out in a regular grid
• VBoxLayout: Items are placed in a single column
• HBoxLayout: Items are aligned in a single row

If you have explored the Qt UI Builder or are familiar with Qt, you may be expecting a fourth layout, FormLayout, which is not currently present in Walk. This can be simulated, however, using a two-column GridLayout and applying alignment properties as required.

In addition to the standard layouts, there are various widgets (some of which are invisible in the final interface) that help group UI elements and provide a more satisfying layout. The most commonly used of these are as follows:

• Splitter: Places a draggable split bar between two child widgets
• Spacer: Used to create visual padding so items can shrink instead of filling space
• Separator: Provides a visual separation between widgets, such as in a toolbar or menu
• ScrollView: A standard widget for providing scrollable content
• GroupBox: A visual widget container with a border and optional title
• Composite: A widget container used to logically group items

Let's get started implementing our email app user interface by creating some Go code using the declarative API. We start with a MainWindow that has a suitable MinSize set and an HSplitter that will hold our content. TreeView is used for listing emails on the left of the splitter (as the first item in the Children list), and on the right (item two in the list) is a Composite set to use a Grid layout—the closest we have to the form layout designed. Within the group, we add many instances of the child Label where we will show email details (that will be updated in Communicating with the GUI section):

MainWindow{
   Title:   "GoMail",
   Layout:  HBox{},
   MinSize: Size{600, 400},
   Children: []Widget{
      HSplitter{
         Children: []Widget{
            TreeView{},
            Composite{
               Layout: Grid{Columns: 3},
               Children: []Widget{
                  Label{
                     Text:       "subject",
                     Font:       Font{Bold: true},
                     ColumnSpan: 3,
                  },
                  Label{
                     Text: "From",
                     Font: Font{Bold: true},
                  },
                  Label{
                     Text:       "email",
                     ColumnSpan: 2,
                  },
                  Label{
                     Text: "To",
                     Font: Font{Bold: true},
                  },
                  Label{
                     Text:       "email",
                     ColumnSpan: 2,
                  },
                  Label{
                     Text: "Date",
                     Font: Font{Bold: true},
                  },
                  Label{
                     Text:       "email",
                     ColumnSpan: 2,
                  },
                  TextEdit{
                     Text:       "email content",
                     ReadOnly:   true,
                     ColumnSpan: 3,
                  },
               },
            },
         },
      },
   },
}

The preceding code can be run by replacing the MainWindow in the previous hello world example, recompiling, and then running the example again. If you set up a new project, remember to include the manifest file and run rsrc again! When run, it should look like the following screenshot, taken on Windows 10:

Next, we will make a Dialog with a similar layout that replaces the instances of Label with LineEdit or TextEdit for entering details of a new email. Last, we add another Composite with an HBox layout that contains the instances of PushButton for Cancel and Send, along with an HSpacer to complete the layout:

Dialog{
   Title:   "New GoMail",
   Layout:  Grid{Columns: 3},
   MinSize: Size{400, 320},
   Children: []Widget{
      Composite{
         Layout: Grid{Columns: 3},
         Children: []Widget{
            LineEdit{
               Text:       "subject",
               Font:       Font{Bold: true},
               ColumnSpan: 3,
            },
            Label{
               Text: "To",
               Font: Font{Bold: true},
            },
            LineEdit{
               Text:       "email",
               ColumnSpan: 2,
            },
            TextEdit{
               Text:       "email content",
               ColumnSpan: 3,
            },
            Composite{
               Layout:     HBox{},
               ColumnSpan: 3,
               Children: []Widget{
                  HSpacer{},
                  PushButton{Text: "Cancel"},
                  PushButton{Text: "Send"},
               },
            },
   },
}

If you want to test this code, the easiest approach is to replace Dialog with MainWindow and run it like the main layout (don't forget to change it back before moving on).

Once we have some event-handling, this will open like a dialog box, which is why it's not a MainWindow in the preceding listing. Running the code should produce the following screenshot:

That's all that's required to complete the layout code of the main interface features. Next, let's add the menu, toolbar, and set up actions for the buttons we have defined.