Let's build a simple app that shows a list of files in a list view and has a search box for filtering results:

Full source is here with the most relevant code in file_manager.go.

The app is the simplest file manager. It shows the files in the directory, allows navigating file system and limiting files shown to only those matching text entered in the edit control.

Showing all files in directory:

Showing only files matching go:

Defining window layout

Let's define FileManager struct responsible for managing of the window:

// FileManager manages file manager window
type FileManager struct {
	window         *walk.MainWindow
	fileFilterEdit *walk.LineEdit
	dirLabel       *walk.Label
	filesListBox   *walk.ListBox
	// ... more fields
}

The window consists of 3 widgets, arranged in a vertical list:

• LineEdit for entering a filter that will limit what files are displayed in the files list
• Label for showing current directory
• ListBox for showing list of files and directories in a current directory

Walk has 2 layers:

• widgets that are wrappers around win32 Windows controls e.g. walk.LineEdit is a wrapper around Windows edit control.
• an optional declarative system for easily defining the layout of a Window

Here's a declarative layout of the above window:

var fm FileManager
def := declarative.MainWindow{
	AssignTo: &fm.window,
	Title:    "File Manageer",
	MinSize:  declarative.Size{Width: 240, Height: 200},
	Size:     declarative.Size{Width: 320, Height: 400},
	Layout:   declarative.VBox{},
	Children: []declarative.Widget{
		declarative.LineEdit{
			AssignTo:      &fm.fileFilterEdit,
			Visible:       true,
			CueBanner:     "Enter file filter",
			OnTextChanged: fm.onFilterChanged,
			OnKeyUp: func(key walk.Key) {
				if key == walk.KeyEscape {
					fm.fileFilterEdit.SetText("")
				}
			},
		},
		declarative.Label{
			AssignTo: &fm.dirLabel,
			Visible:  true,
			Text:     "Directory:",
		},
		declarative.ListBox{
			AssignTo:        &fm.filesListBox,
			Visible:         true,
			OnItemActivated: fm.onFileClicked,
		},
	},
}

Each widget has a corresponding declarative definition e.g. declarative.LineEdit corresponds to walk.LineEdit.

A declarative.MainWindow corresponds to top-level window.

Some widgets, like MainWindow can have children (which are also widgets). For those widgets Layout specifies how children are arranged inside the parent. We use a VBox layout which arranges widgets in a vertical list.

Creating a window