Creating an App Builder – Series 1

In the last episode of our first series in the app builder tutorials we move to editing of the graphical elements.

We start by adding a new palette to show widget information and create an overlay that allows us to tap to select, and indicate the selected widget, in our preview window. Using the GUI library from defyne that we imported earlier the info about selected widget, and the editable components, are shown on the panel.

Lastly we save the changes back to the GUI JSON file that was loaded. This gives us a fairly complete demonstration of capabilities, see you in series two when we dig deeper into the functionality.

In this video we work with Fyne project metadata (the FyneApp.toml file) and provide a form for editing its content. We expand the palette panel to have multiple (tabbed) items, allowing more extensibility for the editors going forward.

The project data is loaded into a type that we set up to manage the data and we build a custom data binding using this structure to share data around the application. Using this binding the title, project panel and app data can all be kept up to date.

The wizard and menus then get a recent projects feature added, to help quickly open projects that have been worked on recently. We also review the Markdown editor which was added between videos.

Continuing from last week the theme editor gets hex entry widgets and advanced colour pickers. This is then applied to all theme colours for a richer editing experience.

We focus this week on tracking editor state and improving the code cleanliness around the growing number of file editors. By tracking whether files have been edited we can note that in the document tab bar for easier tracking of what has changed.

Then we add file saving into the text editor to demonstrate how save can work, as well as clearing the edited state so that the data binding will update the doc tabs again. Finally we add shortcuts so we can save as we type!

 

In this episode we get stuck into building the theme editor portion of our app creator!

By setting up a custom theme that overrides the current variant we can move from light to dark mode and (using a still-to-be-released Fyne feature) preview the change in our app UI.

We then build our first custom widget as well, creating a colour picker and display widget that will control a single colour from the theme. By using these to control an editable theme we can modify the theme and view the changes live in our GUI preview widget for real time feedback.

As we get into the exciting parts of an app builder we look at how to save and load a user interface object to and from JSON. Using the Define GUI library we can persist any tree of fyne.CanvasObjects.

We introduce Fyne’s test utilities to validate and demonstrate the capabilities, showing how to check the graphical rendering or the data in loaded widgets. This functionality is then used to add a graphical JSON file into the project tree and load it from the main menu.

Lastly we go back to a question about uniqueness of file names in the doc tabs and fix up the display to show files and their parent directory where needed.

With the project open and file tree displayed we continue by handling opening of the files selected.

Using Tree.OnSelected we open a new file preview for each URI, looking up the appropriate visuals based on file extension or mime type. In the example we create text and image previews with placeholders of more to come.

We then introduce DocTabs to handle multiple files and use a map of URI to open TabItems to avoid opening twice and select the item when tapped. Lastly we see how `DocTabs.CloseIntercept` can help us keep track of items being closed, like the Window API.

 

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.

 

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!

 

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.

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.