Building the Interactive Interface
Learn how to build and organize an 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.
Get hands-on with 1200+ tech skills courses.