Creating a User Interface in Ruby using WPF

Posted on October 9, 2007. Filed under: ruby, user interface, windows, wpf, xaml | Tags: , , , , , , |

Let me first explain what is WPF?

WPF is the graphical subsystem if the .NET 3.0 framework and it is there to take the place of window forms which we used with earlier versions of .NET

So what’s so great about WPF?

Actually WPF is has its roots in DirectX API so you can easily create 2D and 3D interfaces in it without putting ant load on the processor. Also it is vector based and stores the information for the generating the UI in separate XAML files. So we have logical separation of a control from its appearance.

Further details:

The following are the requirements for running this example:

  • rubyclr gem. Use gem install rubyclr -y
  • .NET framework 3.0

In this example I will creating a creating a textarea along with a button, trapping the events on the button and logging it inside the textarea .

Here is the code for the xaml file. Store this file with filename ui.xaml. This file contains the UI for the application.

   1: <Window
   2: xmlns=""
   3: xmlns:x="">
   4: <Grid x:Name="LayoutRoot">
   5: <Button Margin="8,0,8,5.723" VerticalAlignment="Bottom" Content="Button" Name="the_button"/>
   6: <TextBox Margin="8,8,8,38" Name="the_text_box"/>
   7: </Grid>
   8: </Window>

Next I will be creating the codebehind file in ruby. Here in this file we have all the application logic. Save this file as logic.rb.

   1: # load the libraries
   2: require 'rubygems'
   3: require 'wpf'
   4: # load the xaml file
   5: window = XamlReader.Load(System::IO::File.open_read('ui.xaml'))
   7: # get the controls
   8: button = window.find_name('the_button')
   9: txt_box = window.find_name('the_text_box')
  10: # trap the mouse enter event
  11: button.mouse_enter do |sender, args|
  12: txt_box.text += "MOUSE ENTERED\n"
  13: end
  14: # trap the mouse leave event
  15: button.mouse_leave do |sender, args|
  16: txt_box.text += "MOUSE LEFT\n"
  17: end
  18: # trap the mouse click event
  19: do |sender, args|
  20: txt_box.text += "MOUSE CLICKED\n"
  21: end
  22: # run the application (most important)

The code given above explains itself.

We are first loading the ui.xaml file and then finding the two controls in the lines 8, 9.

Then the three event handlers are declared in lines 11, 14, 19. So whenever the mouse events are fired the corresponding event if traced into the textbox.

And here is the output.

image Tags: ,,,,
Read Full Post | Make a Comment ( 2 so far )

Liked it here?
Why not try sites on the blogroll...