We start with a simple layout function called drawLayout(). This will set up the basic application layout similar to the GoMail design we created in Chapter 4, Walk - Building Graphical Windows Applications. The beginning of the code sets out space for the menu and toolbar that will expand to stretch the width of our window. We then start a template layout using NkLayoutRowTemplateBegin() to have a fixed size column on the left for our email list and a wider, variable width column on the right that will expand as our window resizes:
func drawLayout(win *glfw.Window, ctx *nk.Context, height int) {
toolbarHeight := float32(36)
nk.NkLayoutRowDynamic(ctx, toolbarHeight, 1)
nk.NkLabel(ctx, "Toolbar", nk.TextAlignLeft)
nk.NkLayoutRowTemplateBegin(ctx, float32(height)-toolbarHeight)
nk.NkLayoutRowTemplatePushStatic(ctx, 80)
nk.NkLayoutRowTemplatePushVariable(ctx, 320)
nk.NkLayoutRowTemplateEnd(ctx)
nk.NkGroupBegin(ctx, "Inbox", 1)
nk.NkLayoutRowDynamic(ctx,0, 1)
nk.NkLabel(ctx, "Item1", nk.TextAlignLeft)
nk.NkLabel(ctx, "Item2", nk.TextAlignLeft)
nk.NkLabel(ctx, "Item3", nk.TextAlignLeft)
nk.NkGroupEnd(ctx)
...
In the first column of the main layout, we add a new group named "Inbox" for our email list and add three simple label items that represent the loaded list. Next, we add another group that will occupy the second space in the template layout. This code sets up a mix of one and two column rows that will display email content.
We open the group and set up a simple dynamic row with a single column using NkLayoutRowDynamic(), inserting the NkLabel subject in that cell. Next, we add another template layout so we can have a narrow, fixed width column for our labels and a variable width column for the values. After that, NkLabel for the label and value can be inserted to form a grid. Lastly, we start another single column dynamic row for the main email content:
...
nk.NkGroupBegin(ctx, "Content", 1)
nk.NkLayoutRowDynamic(ctx,0, 1)
nk.NkLabel(ctx, "Subject", nk.TextAlignLeft)
nk.NkLayoutRowTemplateBegin(ctx, 0)
nk.NkLayoutRowTemplatePushStatic(ctx, 50)
nk.NkLayoutRowTemplatePushVariable(ctx, 320)
nk.NkLayoutRowTemplateEnd(ctx)
nk.NkLabel(ctx, "From", nk.TextAlignRight)
nk.NkLabel(ctx, "email", nk.TextAlignLeft)
nk.NkLabel(ctx, "To", nk.TextAlignRight)
nk.NkLabel(ctx, "email", nk.TextAlignLeft)
nk.NkLabel(ctx, "Date", nk.TextAlignRight)
nk.NkLabel(ctx, "date", nk.TextAlignLeft)
nk.NkLayoutRowDynamic(ctx,0, 1)
nk.NkLabel(ctx, "Content", nk.TextAlignLeft)
nk.NkGroupEnd(ctx)
}
Running the preceding code, along with the necessary boilerplate code from our Hello world example, should show a single window, looking a lot like the following: