Creating an App Builder

The adventure begins as all great ones do, at the beginning. We create a project and load the Fyne dependencies. The application fleshed out using standard layouts and widgets.

In the second half we explore how a custom theme and custom layout can make this reflect well the design brief. You can see the result of the coding session in the screenshot on the right, or watch the full video below.

Following on from Episode 1 we look at how the fyne tool can be used to package GUI apps for sharing and also how it can install them locally too. We open an iOS simulator and see the same software working on a mobile device!

The main content of this video is looking at how we can use the storage package and FolderOpen dialog to ask the user which project we should open. Using these abstractions means that we get full support for file handling on sandboxed (i.e. mobile) devices and are not limited to where we have full access to the file system. We also look at adding a menu to the application and also take a quick look at data binding as well, to decouple our UI from the file handling code.

Since completing episode 2 it was possible to open a project – so the next step is to support creating them. In this video we create a new component (from existing widgets) that provides a setup wizard style flow when opening the application.

To start the new types were created in a new package, and the appropriate APIs created. Then we construct the user interface aspects to display the wizard. Then we looked at how to code up the flow for pushing new items into the navigation and popping them off when pressing a generated back button.

Lastly we add a form to the flow that collects data needed to make a new project – and we write the files to create a new project on disk / data store!

Back to using widgets for episode 4 as we fill out the remaining blanks areas of the initial layout. We will use Accordion, Tree, RichText, Select and also InnerWindow.

The file tree is populated with files and directories found when the project directory is opened. We also create a basic preview of an app window in the editor area. Lastly a placeholder is added to the right (settings) panel using RichText and a markdown helper.

This episode uses unreleased components from Fyne so we see how to use the “develop” branch to get access to these new containers and widgets.