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.