Creating a GUI Application Using Glade and Ruby

Creating GTK based applications using Glade and Ruby is very easy indeed. Firstly, get yourself hold of a copy of Glade from somewhere, I used aptitude on my Ubuntu 7.04 desktop:

sudo aptitude install glade

I used aptitude because it gets the recommended files as well as the bare program. Fire Glade up and you should be greeted by 3 windows – one called the “palette” which contains many of the widgets which we will be using to put into the application, the “Properties” window which is where we handle labels and signals and the project manager.

Lets get going now! Firstly we have to realize that by no means is Glade a full blown IDE and so we don’t do any of the coding inside it, we just handle signals and the bare beauty of the application.

Create a new window by clicking the little widget icon window icon in the palette. This will open up a nice new window in front of you. It should all look like this:

new window

Now that we’ve got a new window we need to add some widgets in. Gtk works quite strangely with widgets and to fit more than one widget into a window it requires you to use a vertical box, a horizontal box or a table. For this we will just use a vertical box so we select the vertical box icon virtual box icon and click anywhere in the window. Glade then asks how many rows we want in the window and we will be only using two widgets so set the number of rows to “2” and click ok.

row selection

Now you should be left with a division in the middle of the window sitting in front of you. Now we’ll fill those two spaces with two widgets: a label and a button. Click the label widget label icon in the palette and then click in the top half of the window, a label will appear. Next, click the button widget button icon and select the bottom half of the window. Now to change the text in the label, select it where you placed it in your window and glance over towards the properties window. Change the label property to “hello world”.

label text

Now select the button you created earlier and set the label of that to whatever you want. Then click the “signals” tab in the properties window and click the “…” button next to the “signal” label. Select the value “clicked” and click ok.

clicked signal

Then click the “add” button at the bottom left of the properties window. This is called creating a signal and will enable our application to do something when an event happens, in this instance when the button is clicked.

Now resize your window that you have created and save the glade project somewhere. It does not matter which language the output is is because we will not be using that file, we will be using the “.glade” XML file outputted by the application.

Now, onto the Ruby!

To create a ruby file that utilizes our .glade file that we have just created we can cheat a little bit: we use a program to quickly form the basis of the ruby file for us. The program ruby-glade-create-template creates the basis of the ruby program for us and comes in the package libglade2-ruby. It can also be installed as part of the ruby-gnome2 package. To execute it simply run this command in the terminal in the directory in which you saved the glade files:

ruby-glade-create-template hello_world.glade > helloworld.rb

simply replace the names of the files as needed. hello_world.glade is the file that outputted from glade (four files were outputted from glade but we only use the one with the .glade extension for this) and helloworld.rb is the ruby file in which the code is dumped.

Open the helloworld.rb file and have a good look around at the code. The signal which we created for the click of button1 is this bit in the code:

def on_button1_clicked(widget)
puts “on_button1_clicked() is not implemented yet.”
end

At the moment all this application does is launch and when button one is click output “on_button1_clicked() is not implemented yet.” to the command line.

We want to change something in the application so we will need to assign a variable to the widget that we want to alter. We want to alter “label1” and so we insert this code in the button1_clicked function.

@label1 = @glade.get_widget(“label1”)

Now that we have the variable we can alter it. To simply change the label that it shows we insert this line into the same place:

@label1.label = “Feedback achieved!”

You will notice that the .label bit of the variable corresponds to the variable in glade which we altered to show “hello world” earlier. Now save that file and we are ready to run it!

Go to the terminal and go to the directory of the file. Execute this command:

ruby helloworld.rb

(or the file name of your program) and a window should pop up. Try clicking the button and the label’s text should change!

Have fun playing around with glade and ruby and see what signals and feedback it is possible to do. It’s always best to learn by doing so don’t be afraid to get your hands messy.

This is the full source code of my file:

#!/usr/bin/env ruby
#
# This file is gererated by ruby-glade-create-template 1.1.4.
#
require 'libglade2'

class HelloWorldGlade
include GetText

attr :glade

def initialize(path_or_data, root = nil, domain = nil, localedir = nil, flag = GladeXML::FILE)
bindtextdomain(domain, localedir, nil, "UTF-8")
@glade = GladeXML.new(path_or_data, root, domain, localedir, flag) {|handler| method(handler)}

end

def on_button1_clicked(widget)
@label1 = @glade.get_widget("label1")
@label1.label = "Yeah! Feedback!"
end
end

# Main program
if __FILE__ == $0
# Set values as your own application.
PROG_PATH = "hello_world.glade"
PROG_NAME = "YOUR_APPLICATION_NAME"
HelloWorldGlade.new(PROG_PATH, nil, PROG_NAME)
Gtk.main
end

Advertisements
This entry was posted in Development, Linux, Random Thoughts. Bookmark the permalink.

25 Responses to Creating a GUI Application Using Glade and Ruby

  1. Rafa says:

    Very useful the tutorial.
    [OT] what’s your theme(borders, icons, background)?? Thx

  2. Nish says:

    i want to display the terminal output in the text view widget in glade under linux. But the terminal output is not a fixed output. its continuously running text. tell me the solution for this.

  3. ujk says:

    it is a nice tutorial for beginners like me.

  4. Rafa says:

    For display terminal output in the text view you can redirect standard output and standard error into it.

  5. Tom says:

    Thx for the tutorial, it was the first one I found and very explanatory.
    Nice sample at http://ruby-gnome2.sourceforge.jp/hiki.cgi?RubyZilla as well.

  6. Rich says:

    I’d recommend looking at Glade3. I’m only a beginner in the world of ruby but it just produced the glade file and doesn’t use an MDI interface, which I prefer.

  7. Mike says:

    Great Tutorial made it easy to follow, and I was able to quickly get started with glade2. Then Gazpacho. Thanks again

  8. Pingback: Ruby GTK/Glade tutorials « Connecting the dots

  9. sham says:

    I am running into issues trying to install the ruby-gnome2 pkg.
    everything upto the make is working fine, and during the install, i see some interesting lines pop up, they are
    /opt/onbld/bin/i386/install -c -m 0755 glib2.so /usr/ruby/1.8/lib/ruby/site_ruby/1.8/i386-solaris2.11
    sh: /opt/onbld/bin/i386/install: not found
    *** Error code 1
    make: Fatal error: Command failed for target `/usr/ruby/1.8/lib/ruby/site_ruby/1.8/i386-solaris2.11/glib2.so’
    Current working directory /export/Songs/ruby-gtk2-0.18.1/glib/src
    *** Error code 1
    The following command caused the error:
    cd src; make install
    make: Fatal error: Command failed for target `install’
    Current working directory /export/Songs/ruby-gtk2-0.18.1/glib
    Would like to know where i can find the i386 install pkg.
    Using solaris B89

  10. Michal Suchanek says:

    Hello

    I tried to create an application with glade3.

    The ruby-gnome-template worked just fine but running the application produces nothing.

    I guess it is necessary to manually display the window since the application can have multiple windows. So far I have not found how to do that, though.

  11. Michal Suchanek says:

    So here goes my HelloWorld code:
    #!/usr/bin/env ruby
    #
    # This file is gererated by ruby-glade-create-template 1.1.4.
    #
    require ‘libglade2’

    class HwGlade
    include GetText

    attr :glade

    def initialize(path_or_data, root = nil, domain = nil, localedir = nil, flag = GladeXML::FILE)
    bindtextdomain(domain, localedir, nil, “UTF-8”)
    @glade = GladeXML.new(path_or_data, root, domain, localedir, flag) {|handler| method(handler)}

    end

    def button2_clicked_cb(widget)
    Gtk.main_quit
    end
    def button1_clicked_cb(widget)
    Gtk.main_quit
    end
    def show
    @window = @glade[‘window1’]
    @window.show_all
    @window.signal_connect(“destroy”) { Gtk.main_quit }
    end
    end

    # Main program
    if __FILE__ == $0
    # Set values as your own application.
    PROG_PATH = “hw.glade”
    PROG_NAME = “YOUR_APPLICATION_NAME”
    app = HwGlade.new(PROG_PATH, nil, PROG_NAME)
    app.show
    Gtk.main
    end

    • dedeibel says:

      Thanks for the addition, the “show” part seems to be missing in the original example but is documented in the ruby glade library.

      def show
      @window = @glade[‘window1’]
      @window.show_all
      @window.signal_connect(“destroy”) { Gtk.main_quit }
      end

      In debian lenny the library containing “ruby-glade-create-template” is now called “libglade2-ruby” btw.

  12. Pingback: Alternatieven voor Monkeybars « Things to remember…

  13. i have the same problem than Michal Suchanek, when i run the application it just do nothing. im using Glade 3.4.5 and ruby-glade-create-template 1.1.4 and ruby 1.8.7 (2008-08-11 patchlevel 72) [i486-linux] on ubuntu 7.10

  14. looks like Glade 3.4.5 output file is not supported jet by ruby-glade-create-template 1.1.4(libgnome2-ruby 1.7rc1) insted i use Glade 2.12.2 and applications runs pretty nice.

  15. Andy says:

    Hi,
    First of all (though a bit late): thanks for this easy introduction to glade, really helped me a lot.
    But a question though: is it possible to define translations for the buttons within the scripts, or is gettext really required ? I have had problems trying to configure that after gem install, a (require “gettext”) always says, that gettext is not available…i am a total noob in these things, but i have come a bit further than expected and wanted to go the whole way…so maybe someone knows a good link to an as easy-tutorial as this one.
    Cheers, Andy

  16. RaW says:

    To Bruno Fosados and Michal Suchanek:
    I also use Glade 3.4.5 and it works for me. Check if your main window has ‘visible’ property set to ‘true’. It seems that default settings for Glade 3.4.6 is ‘false’.

    • Frank says:

      Thanks this worked for me on 3.6.7. I also had to configure a default window position and default height and width in the general tab. Thanks again for putting me on track!

  17. Catalin Fest says:

    Nice example!
    The code is faster than Python code.
    But I think it is slower.

  18. Miss10 says:

    Now, whenever you visit a site, you can use the Google toolbar to pay for content, or small items. ,

  19. Miss25 says:

    Place the pot over medium-low heat. ,

  20. Joro says:

    Many thanks for this tutorial! It’s a great way to get a first impression on how to use Glade for Ruby GUI app development! Glade doesn’t seem to me like #1 choice after that but this is a problem between me and Glade, your tutorial is only a very helpful illustration of the dev process. Thanks again.

  21. dedeibel says:

    Thanks for the introduction.
    I really like the separation of GUI Layout and the logic – I guess the next step would be to have a generic GUI description that could also be used in Windows, QT or even Google GWT.

  22. I wrote an IDE that simplifies this process. You don’t need to use the “create_template” script. My program will create this program with only about 5 lines of code:

    http://visualruby.net

  23. Johnk176 says:

    Hi, yup this post is truly fastidious and I have learned lot of things from it ekcffckdkgac

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s