How to Create a Simple Desktop App with Golang and Fyne

We’ll create a Golang desktop app for including, updating, deleting, and viewing textual content objects in an inventory utilizing the Fyne GUI toolkit

On this article, I’ll go over slightly mission that I made to discover a number of the prospects of the Fyne GUI toolkit. This assortment of packages implements desktop GUI performance for Golang on a number of platforms.

I selected to create a data-entry app for this mission since this appears to be very helpful for many individuals. At the moment, it is extremely easy, however you’ll be able to simply develop it on.

First, I’ll talk about why I selected the Fyne toolkit to create a desktop app. Afterward, I’ll add a fast notice on the set up course of.

Then, I’ll talk about varied components of this system’s code that I wrote for information entry. Right here you’ll discover some useful notes of issues I found alongside the best way when creating the mission.

To shut, I’ll present you methods to run this system and what it appears to be like like and talk about how we are able to enhance it.

My cause for utilizing Fyne is fairly banal. Over time, I’ve performed round with many software program libraries/packages for varied programming languages. These languages embody C++, Python, JavaScript, and so on.

Due to this fact, I can inform you that if one thing works straight out of the field on a Home windows PC after putting in it, then I’m happy. This was the case with Fyne. I put in it (and GCC, however extra on that later), and I ran a couple of of the official examples. It labored like a allure.

Along with the obvious ease of use and stability, it appears — however I haven’t examined it but — that the Fyne GUI toolkit permits being compiled for hottest platforms. These platforms embody Home windows, macOS X, Linux, Raspberry Pi, BSD, Android, and iOS. That may be a very respectable protection.

Lastly, the Fyne packages include all the standard widgets you’d anticipate finding in a desktop GUI toolkit.

Aside from putting in the Fyne toolkit, you’ll want to put in a C Compiler (GCC) to compile code that makes use of it. On condition that I’m utilizing a Home windows PC for programming in Golang, I selected to put in MSYS2 as is beneficial by the official documentation. GCC is included in MSYS2. Total, the set up course of is fairly easy, so I don’t want to clarify that right here.

There’s a tiny factor I’d like so as to add, although. You might need to add the situation of the gcc.exe binary to your Home windows PATH. Like this, you’ll be able to simply run the Golang code out of your Home windows Terminal as you’re used to. In any other case, you’d must run the Go compiler from the MSYS2 terminal. The latter can also be attainable however not notably handy.

Under you could find the entire code of the data-entry desktop app.

In what follows, I’ll talk about the code in small snippets.

Importing the required packages

In traces 3–16, we import all the required libraries. These embody:

  • encoding/json for encoding and decoding JSON strings.
  • fmt for printing messages to the terminal. I additionally used this for debugging my app whereas constructing it.
  • io/ioutil for studying and writing recordsdata.
  • Numerous Fyne packages

Loading information from a JSON file

In line 4, we learn the file known as information.json with ioutil.ReadFile() . This perform returns a slice of bytes ([]byte) and an error . On this instance, we skip the error and simply put an underscore.

Ought to the file information.jsonnot exist, then enter is an empty slice.

In line 5, we declare a slice of string ([]string) known as informationto carry every of the strings that we’ve added utilizing our app.

In line 6, we decode the JSON byte slice from enter and put the contents into information as a slice of strings.

In line 9, the loadJsonData() perform returns both an empty slice or a slice containing the strings saved by our app earlier than.

Saving information to a JSON file

In line 1, the perform saveJsonData() receives a variable known as information which is of the kind binding.StringList . This sort is a selected sort from the Fyne package deal, used to maintain and replace listing objects. You possibly can learn extra about it here.

In line 3, we get the slice of strings from the information StringList. Once more we skip the errors and put an underscore.

In line 4, we encode the slice of strings as JSON information.

In line 5, we use ioutil.WriteFile() to the JSON information to the file known as information.json . Word that the third argument of WriteFile() is a quantity. This quantity corresponds to the numeric notation of the Unix file permission code — on this case 0644.

Establishing the app

The above code seems in the beginning of the essential() perform.

In line 1, we create a brand new Fyne app.

In line 2, we then create a brand new window throughout the Fyne app.

In line 4, we load the JSON information into the variable known as loadedDatautilizing the perform described above.

In traces 6 and seven, we create a variable information of the kind binding.StringList and set its contents to loadedData.

In line 9, we defer saving the JSON information, utilizing the perform beforehand described, with the defer key phrase. By deferring this perform, we make sure that it will likely be known as on the finish of the essential() perform even when some errors ought to occur throughout execution.

Itemizing the info

We’ll use a widget known as ListData to listing the strings from the StringList known as information.

This widget may be created utilizing the perform widget.NewListWithData() . The best way this widget works is that it’s made to be certain to the StringList known as information . When information is up to date, then the listing of strings within the widget can also be routinely up to date.

Updating and deleting the info

The objects within the listing of strings may be chosen. In our case, this boils all the way down to a click on, as the chosen merchandise is straight away unselected (in line 2).

In line 3, we get the worth of the merchandise within the information given its id and utilizing the perform getValue() .

In line 4, a brand new window is created for holding the next widgets:

  • In traces 6 and seven, a widget for textual content string entry. The textual content of the widget is ready to the merchandise’s present worth.
  • In traces 9–12, a button widget that, when clicked, will replace the chosen listing merchandise. Updating the merchandise within the listing is simple with the SetValue() perform.
  • In traces 14–16, a button widget that, when clicked, will cancel the motion and shut the window.
  • In traces 18–31, a button widget that, when clicked, will delete the chosen merchandise from the string listing. Deleting an merchandise is a little more concerned than updating it. The thought is that we copy all information to newDatabesides the deleted merchandise onto a brand new listing after which set the info to the brand new information.

All of the widgets are added to the window in line 33.

In traces 34–36, we give the window a measurement of 400×200 pixels and middle the window on the display screen to keep away from it opening within the higher left nook. Lastly, we make certain to point out the window.

Including the info

We will add information objects to the listing by clicking the “Add” button on the backside of the app. Including the merchandise is carried out within the perform that is named when the button is clicked.

In line 1, the button widget is created.

Then in line 2, a window is created. This window will, in its flip, include three widgets:

  • In line 4, a widget for textual content string entry.
  • In traces 6–9, a button widget that, when clicked, will add a brand new listing merchandise. This is so simple as making use of the Append() perform to the information listing. When the merchandise has been added, the window is closed.
  • In traces 11–13, a button widget that, when clicked, will cancel the motion and shut the window.

In line 15, all of the above widgets are added to the window utilizing a VBoxLayout. Which means the widgets are stacked vertically.

In traces 16–18, the window measurement is ready to 400×200 pixels, the window is centered on the display screen, after which it’s proven.

Set the contents of the primary window

In line 6, we add the add and exit buttons to a vertical format, which in its flip is added to the underside of a border format. The listing widget is added to the middle.

In line 7, we resize the window to 400×600 pixels.

In line 8, we set the primary window because the “grasp” window. After we shut the primary window, we shut all home windows.

In line 9, the window is centered on the display screen.

In line 10, the window is proven, and the app is run with ShowAndRun() . This perform can solely be used as soon as in this system, as we are able to solely run the app one after the other. That is why the opposite home windows are proven utilizing Present() solely.

More Posts