Text Editor in Go and fyne

Hello coders, in this article, we will learn how to make a

“Text Editor in Go and fyne”.

As usual, we will grab our snippet from fyne.io to see how we can
create our basic app window.
 If you followed the first step then by now you should have your app
window opened as shown:

Now, what is the first thing that we want?

We want to generate a new file as soon as we click on a particular
button.

Now that we have our window, our next step is to create a layout for
which we use a container that contains our app in a vertical box format.

Now that we have our vertical box, we want a horizontal box as well
which will have our label, let's say “Text Editor”. Don’t forget to import
the library for the widget, further if you want to know more about the
functionalities then you can always refer to this documentation.
Next thing is, we want to show our content on the app window, for that
we will use w.setContent() command. Inside that function, we’ll take a
container and a vertical box in which we can add whatever content we
wish to show on our window.

Let’s run the program to visualize how we get our desired content in our
app as per the name that we have provided.

Our next step is to create buttons so that whenever we click on a

particular button, a new file gets added to our content.

This particular line will throw an error at us because

Note✎: “whenever we create a new button it is mandatory to use a call back
function in it.”

So, our next step would be to call a function inside our button and then,
add a new file label to it.
 It would be useless if we can’t have multiple files inside our text editor
right ??? What if I want to save my exam schedule, and then a list of my
friend’s birthdays and a list of grocery shopping as well?

To have a new file, we will globally declare a count variable and

concatenate that variable with our “New File” string, we also need to
convert our count i.e. an integer value in a string. And then increase the
count to add new files every time we click on the button.

Global declaration of count can be done as follows:

And to convert the integer value into a string we can use the following
syntax, make sure to import the “strconv” file as well.

After completing the above steps you’ll have an option to add new files
and your files will get added and their names would be as given below:
New File 1
 New File 2
New file 3
.
.
.
New file n

Now if we want a file, then we’ll be needing another thing that is, entry.
So that we can enter text inside our file.
We’ll treat the entry as our input right?

For that, we will write the following syntax. And make sure to pass the
input inside our SetContent block as well without that we won’t be able
to integrate this new entry inside our app.

As we can see that, now we are able to see this entry inside our app, we
can add any sort of text there, if we just write Entry, instead of Multiline
Entry then our text box would be of smaller size.
 To resize the text box you can use the following command:

The next thing we would be working upon is how to save our files.
For that, we’ll create a new button, and inside our content block there is
a vertical box present, in that vertical box, we will create a new horizontal
box and pass the save button in it.

Now as you can see our new button is created.

The next functionality we want to add is- “whenever we create a new file
and click on the save button the file gets saved in the desired location”,
for that first thing we need is our dialog box which will contain files and
folders from our local system, where we can save our text files.
 Our fyne has some inbuilt functions using which we can access our
system. Inside documentation of fyne, there are various commands for
the same.

Now we’ll open a dialog box with the help of a variable, inside our
dialog box we have a call back function. Inside the call back function, we
are not handling any error, so we’ll remove the error variable and replace
it with an underscore “_”.

I want to enter the data/content that I wish to save, for that, I’ll take the
help of a variable let’s say textData, for which we’ll create a byte array.

Inside our textData variable, we want our input entry, now, whatever
input we write, it’ll get saved inside the byte array.

We want to write our text data, for that, we’ll be writing the following
command-

And we’ll also pass the window element.

Now, we want to set the file name inside our save file dialog box.
For that, we’ll use the same name that was created earlier.

No need to worry about the file name, you can always rename it.
 Our next step would be to show our save file dialog box.

We subtracted 1 from our count value because we incremented it earlier,

and the purpose of adding .txt is to save our time since we always want
to save it in text form. We can save our files in whichever path we want.

This is how our save file prompt will look:

 Our next task is to open the text files which we’ve saved.

We’ll similarly create a new button and we’ll create a dialog box for open
files as well, just as we created in our save file dialog box.
Inside our new file open function, we’ll pass our call-back function.

Here also we replaced the “e” with underscore since we aren’t handling
any error.

While opening the file we are trying to read the available data. On
contrary, while saving it, we were writing the data.
For reading data, we’ll import the ioutil library, the ioutil library provides
us with various functions, we will use the read all function to read our
data while opening the file.

Now we will create an output variable and then assign a new static
resource to it. And will write the name of the file and pass the data that
we’ve to read.

After this, we also want to view our data.

We’ll take a multiline entry, and then we’ll set our static data output to
our view data.

We want to open a new window inside our current app. For that, we’ll
take a window element and we will pass a string that will contain our
output.

After this, we want a scrollable container.

And we will pass the data which we want to view in it.

In the next step, you can resize it as you want and then show it.
And we’ll pass a window as well.

Make sure to pass the open button inside our set content box.

Our next task is to use our dialog box for opening the file and then we’ll
use the set filter command.

Now from where we will be accessing our file ???

From our storage right?!
For that, we’ll take help from our storage extension command from fyne.

Our storage will accept any data that is available in string format. I.e. text
data. So we’ll pass our .txt extension as well.
And then we’ll write command to show the dialog box.

This is how our dialog box for the open function will look:

When you click on the file, the file will get opened and you’ll be able to
see the text data that you saved.
 This text editor will automatically allow you to cut-copy-paste the texts
that you want.

That’s it! Now you have built your own text editor !!!

Here is your complete Golang code to build a text editor:

package main
import (
"io/ioutil"
 "strconv"
"fyne.io/fyne/v2"
"fyne.io/fyne/v2/app"
"fyne.io/fyne/v2/container"
"fyne.io/fyne/v2/dialog"
"fyne.io/fyne/v2/storage"
"fyne.io/fyne/v2/widget"
)
var count int = 1
func main() {
a := app.New()
w := a.NewWindow("Pep Text Editor")
w.Resize(fyne.NewSize(600,600))
content:= container.NewVBox(
container.NewHBox(
widget.NewLabel("Text Editor"),
),
)
content.Add(widget.NewButton("Add New File", func(){
content.Add(widget.NewLabel("New
File"+strconv.Itoa(count)))
count++
}))
input:=widget.NewMultiLineEntry()
input.SetPlaceHolder("Enter Text...")
input.Resize(fyne.NewSize(1200, 1200))

// for saving the file

saveBtn:= widget.NewButton("Save Text File", func(){

saveFileDialog:=dialog.NewFileSave(
func(uc fyne.URIWriteCloser, _ error){
textData:= []byte(input.Text)
uc.Write(textData)
},w)

saveFileDialog.SetFileName("New
File"+strconv.Itoa(count-1 )+ ".txt")
saveFileDialog.Show()
 })

// for opening the file

openBtn:= widget.NewButton("Open Text File", func() {

openFileDialog:= dialog.NewFileOpen(
func(r fyne.URIReadCloser, _ error){
ReadData,_ := ioutil.ReadAll(r)
output:= fyne.NewStaticResource("New File",
ReadData)
viewData:= widget.NewMultiLineEntry()

viewData.SetText(string(output.StaticContent))
w:= fyne.CurrentApp().NewWindow(
string(output.StaticName))

w.SetContent(container.NewScroll(viewData))
w.Resize(fyne.NewSize(400,400))
w.Show()
},w)
openFileDialog.SetFilter(

storage.NewExtensionFileFilter([]string{".txt"}))
openFileDialog.Show()
})
w.SetContent(
container.NewVBox(
content,
input,
container.NewHBox(
saveBtn,
openBtn,
), ),
)
w.ShowAndRun()}
For the YouTube video link of “Text Editor in Go and Fyne” - click here

!!! We hope you found this article helpful !!!

For more free study resources and information about the courses, visit:

PepCoding | Online resources of data structure and advanced algorithms