In this post I want to show you how to create post-it notes app something like Tomboy Notes in Linux.

Final product will be look like this:

Design app

First thing we’ll do is to design our app. At the top of page we’ll have three buttons, new, open, and save, so let’s design it.

require 'green_shoes' require 'yaml/store' Shoes . app height : 200 , width : 200 , title : "Post-it notes app" do flow do button "New" do end button "Open" do end button "Save" do end end end

You certainly noticed that I’ve added line require yaml/store in top of the app. We’ll use it later.

If you run your Shoes app right now, you should see our buttons.

Our app should have field for adding notes.

flow do @title = edit_line "New note" , margin : [ 0 , 5 , 0 , 5 ] @para = edit_box "Describe your note here"

We’ve created two text fields, title has only one line so we’ve used edit_line and para has multiple lines so we’ve used edit_box.

We’ve also added some space between text field with margin(left, top, right, bottom)

If you look at it, you should see something like this:

Here’s how our app look right now:

require 'green_shoes' require 'yaml/store' Shoes . app height : 200 , width : 200 , title : "Post-it notes app" do flow do button "New" do end button "Open" do end button "Save" do end end flow do @title = edit_line "New note" , margin : [ 0 , 5 , 0 , 5 ] @para = edit_box "Describe your note here" end end

Adding functionality to buttons

For manipulation with our notes we’ll use YAML::Store. First thing we need to do is to create configuration file, where we store default values for our notes. Create config.yml file like this:

title : New note para : Describe your note here

Here’s our default values. Let’s connect our button with that yaml file.

button "New" do store = YAML :: Store . new "config.yml" store . transaction ( true ) do @title . text = store [ 'title' ] @para . text = store [ 'para' ] end end

Take look at the code we’ve just wrote.

store = YAML :: Store . new "config.yml"

Here we’ve set structure for reading our config.yml file.

store.transaction(true) do

Here we’ve start read only transaction.

@title . text = store [ 'title' ] @para . text = store [ 'para' ]

Here we’ve set values of title and para to values in Hash of our config file.

Type something else to your text field. Now press new button. You should see that text was changed to default.

Let’s go create open button:

button "Open" do file = ask_open_file store = YAML :: Store . new file store . transaction ( true ) do @title . text = store [ 'title' ] @para . text = store [ 'para' ] end end

It works like in previous example, but this time we want to choose file, we want to read.If you press open button. You should see file picker:

You can create another yaml file and test it. Values of yaml file should replaces values in text field.

Ok so this works right now, but we want to save values from Shoes to yaml for later use. We’ll use YAML::Store for this, but this time we’ll use different code.

button "Save" do file = ask_save_file store = YAML :: Store . new file store . transaction do store [ "title" ] = @title . text store [ "para" ] = @para . text end end

So take look at the code that we’ve just done.

file = ask_save_file

So we’re created menu that shows you dialog to write name of the file and save it.

store = YAML :: Store . new file

Here we used location of previously selected file to store our values.

store . transaction do store [ "title" ] = @title . text store [ "para" ] = @para . text

Last time we extracted values from yaml file, this time we reverse this process and saves values what we type to text field.

So take look at file we created now. It should look like this:

require 'green_shoes' require 'yaml/store' Shoes . app height : 200 , width : 200 , title : "Post-it notes app" do flow do button "New" do store = YAML :: Store . new "config.yml" store . transaction ( true ) do @title . text = store [ 'title' ] @para . text = store [ 'para' ] end end button "Open" do file = ask_open_file store = YAML :: Store . new file store . transaction ( true ) do @title . text = store [ 'title' ] @para . text = store [ 'para' ] end end button "Save" do file = ask_save_file store = YAML :: Store . new file store . transaction do store [ "title" ] = @title . text store [ "para" ] = @para . text end end end flow do @title = edit_line "New note" , margin : [ 0 , 5 , 0 , 5 ] @para = edit_box "Describe your note here" end end

That’s all for now, if you like my post please share it on your favorite social network by clicking on the buttons on the top.