Building the Interactive Interface

Overview

Once we have all the widgets for our interface, we need to organize and lay them out logically to compose the user interface.

In Termdash, we define the dashboard layout using containers represented by the type container.Container. Termdash requires at least one container to start the application. We can use multiple containers to split the screen and organize the widgets.

Organizing the interface’s layout

We can create the containers in two different ways: using the container package to split containers, resulting in a binary tree layout; or using the grid package to define a grid of rows and columns. We can find more information about the Container API on the Termdash wiki.

For this application, we’ll organize the layout using the grid method, as it’s easier to organize the code to compose a layout. The application layout consists of three main rows. The first row is split in two columns, which are further split in two additional rows. The second row has two columns, as well as the third row. For now, we’ll build the first two rows, leaving the third row as a placeholder for the summary widgets.

Updating the grid.go file

We start by adding and editing the file grid.go under the app subdirectory in our application directory. We add the package definition and import section.

We’ll use:

• The termdash/align package to align widgets in containers.
• The container package to use the Container API.
• The container/grid package to define a grid layout.
• The termdash/linestyle package to define the container border’s line style.
• The terminalapi package, which we need to create Termdash containers.