Chapter 4: Layout and File Handling

In the previous chapter, we learned how the main drawing aspects of the Fyne toolkit are organized and how an application can work directly with CanvasObject items on a window canvas. This was sufficient information to set up a small game, but once applications add the presentation of lots of information or require user input and workflows, they typically require more complex user interface designs. In this chapter, we look at how an application user interface is structured, covering the following:

• Arranging a Container item using built-in layout algorithms
• Creating custom layout algorithms
• Handling files in a way that works across all platforms, desktop, and mobile

With this knowledge, we will build an application for browsing photographs. Let's get started!

Technical requirements

This chapter has the same requirements as Chapter 3, Windows, Canvas, and Drawing, which is to have the Fyne toolkit installed. For more information, please refer to the previous chapter.

The full source code for this chapter can be found at https://github.com/PacktPublishing/Building-Cross-Platform-GUI-Applications-with-Fyne/tree/master/Chapter04.

Laying out containers

As we saw in the previous chapter, a Fyne canvas is made up of CanvasObject, Container, and Widget items (although Container and Widget items are both CanvasObject items as well!). To be able to display multiple elements, we must use the Container type, which groups a number of CanvasObject items (which can also be Widget items or additional Container items). To manage the size and position of each item inside a container, we use an implementation of Layout, which is passed to the container at creation using the container.New(layout, items) constructor function.

There are many ways that an application may want to lay out its components and in this section we will explore the different ways that can be achieved. Layouts are not always required, however, and so first we will look at when you might not need to use a layout and how to handle size and placement manually instead.

Manual layout

Before we explore layout algorithms, it is possible to manage a...

Standard layouts

As there are many standard layout algorithms, the Fyne toolkit includes a collection of standard implementations in the layout package. By importing this package, you can apply these layouts to any Container in your application:

import "fyne.io/fyne/v2/layout"

Each of the layouts is examined in detail in this section. Although a container can only have a single layout, there is no limit to the number of containers you can have nested inside each other, and so we look at combining different layouts at the end of this section.

MaxLayout

MaxLayout (or maximum layout) is the simplest of all the built-in layout algorithms. Its purpose is to ensure that all child elements of a container take up the full space of that container:

Figure 4.2 – MaxLayout in a container

This is most commonly used to align one element over another, such as a text item over a background color rectangle. When using this layout, it is important...

Cross-platform file handling

The Go standard library has excellent support for file handling across its supported platforms. The os package allows access to the filesystem (files and directories) and utility packages such as filepath that help to parse and manage locations using the current operating system's semantics. While these operations are likely useful on most devices, they do not extend as well to non-desktop devices where a traditional filesystem is not what the end user is presented with.

Consider mobile devices, for example. Both iOS and Android have a traditional filesystem internally, but the filesystem is not completely available to the device user, nor is it the only source of file data. An application will typically only have access to its own sandbox directory—reading and writing files outside of this space is not permitted—and on iOS, you may even need to request special permissions before accessing it. In addition to that, users now expect...

Implementing an image browser application

This application will load a directory that contains some images, provide a summary of the content in a status bar at the bottom of the window, and use most of the space to show each image. The images will be loaded as thumbnails (smaller versions of the images) and we will display the image information under each thumbnail.

Creating the layout

To start this example, we will create the layout of the application and the image items that will display in the central grid. Let's understand each of these actions in detail:

1. First, we set up the image items. We wish to have the image name underneath the image. While this could be positioned manually, the items will be more responsive to changes in size if we use BorderLayout. We will create a canvas.Text element in the bottom position and use canvas.Rectangle to represent the image that we will load later:

   func makeImageItem() fyne.CanvasObject {
        label...

Summary

This chapter stepped through the details of how layouts work, the details of all the built-in layouts in the toolkit, and when to use them. We also saw how simple it is to combine multiple layouts and created our own custom layout to add a bit of flair to our image browsing application.

We also explored how to adapt file handling code to work across all platforms using the URI and ListableURI types. Using this knowledge, our image browsing application is now compatible with all desktop and mobile platforms. With this knowledge of how to lay out applications and avoid assumptions about a traditional filesystem, you can now ensure that your apps will function correctly on any supported platforms, mobile, desktop, and beyond.

While we have created a complete application using just canvas primitives and layouts, it is possible to build much more complex applications using the widget package, which we will look at in the next chapter.