shoooes!

Shooooes is a cross-platform magical GUI library for Ruby created by the notorious whytheluckystiff author of Why’s Poinant Guide to Ruby and Try Ruby! (in your browser).

Today we are going to be looking at the Simple-Calc Application.  If you don't already have the code, you can download it here.

Overview

The simple-calculator is not just a catchy name.  It is what is says, that is, it IS a simple calculator.  Hit 7, press plus, hit 7 again, press equals yields you 14 in the upper right hand corner.  Nothing out of the ordinary.  However, look under the hood and there's a lot of interesting craftsmanship.

Simple-Calc.rb

The entire application is composed of one class (Calc), two stacks, and two flows.  The application itself is a flow (this is a given), but a stack is added to the original flow.  To this stack, another stack is added for the displayed value (seen as '0′ in the picture above), and each button is added to a flow.

flow :width => 218, :margin => 4 do
      %w(7 8 9 / 4 5 6 * 1 2 3 - 0 Clr = +).each do |btn|
        button btn, :width => 46, :height => 46 do
          method = case btn
            when /[0-9]/: 'press_'+btn
            when 'Clr': 'press_clear'
            when '=': 'press_equals'
            when '+': 'press_add'
            when '-': 'press_sub'
            when '*': 'press_times'
            when '/': 'press_div'
          end
 
          number.send(method)
          number_field.replace strong(number)
        end
      end

The code to create the buttons in the flow is interesting.  Each button, 7 through +, is dynamically created and added to the flow with a height and width of 46.  When a button is pressed, the case statement evaluates which button was pressed and returns the name of that button (press_nameOfButton) in string form to the method variable.  This method variable (in string form) is then passed to the single instance of the Calc class (entiteld 'number') with the method send().

The send() method

When I first looked at this code, I was confused because I couldn't find the send method anywhere in the Calc class.  I did a little research and discovered that the send() method is a general-purpose method that can be used on any Class or Object in Ruby.  If not overridden, send() accepts a string and calls the name of the method whose string it is passed.  For example, if the user clicks the "Clr" button, the 'press_clear' string will be sent to the send() method and the 'press_clear' method in the Calc class will be called.  The send() method allows for a fun and dynamic way to call functions in Ruby.

The define_method command

Not only did I not see the 'send' method, I also didn't see any other of the following methods: "press_1″ through "press_9″ as well as "press_add", "press_sub", "press_times, and "press_div."  My only clue was the following code:

((0..9).each do |n|
    define_method "press_#{n}" do
      @number = @number.to_i * 10 + n
    end
  end

The above code uses the 'define_method' command to dynamically create the methods "press_1″ through "press_9."  Rather then typing all 10 methods which essentially contain the same code, the define_method command is used to generate these methods on the fly as needed.  The same is done with the methods add through divide.

{'add' => '+', 'sub' => '-', 'times' => '*', 'div' => '/'}.each do |meth, op|
    define_method "press_#{meth}" do
      @op = op
      @previous, @number = @number, nil
    end
  end

The final calculation

Once the big mysteries of the program were figured out, the rest was relatively straight foward.  The first number pressed gets saved into @previous, the operation (+ - / * ) gets saved into @op, and the second number gets saved into @number.  Then, when '=' is pressed the 'press_equals' method is invoked.

def press_equals
    @number = @previous.send(@op, @number.to_i)
    @op = nil
  end

Again, the sly send method is used.  This time, however, it is called on an integer @previous.  The integer class has an overriden send() method that takes both an operator and another number, adds, subtracts, multiplies, or divides the numbers together, and returns the result.  The result is stored as @number which can then be retrieved by a call to the to_s method and displayed on the screen.

 def to_s
    @number.to_s
  end

Conclusion

whytheluckystiff continues to astound me with the bredth of his knowlege of Ruby and his astounding code craftmanship.  The simple calculator, while simple, demonstrates in just a few lines of code what makes Ruby and Shoes so magical and special.

shoooes!

Shooooes is a cross-platform magical GUI library for Ruby created by the notorious whytheluckystiff author of Why's Poinant Guide to Ruby and Try Ruby! (in your browser). Yes, he is busy to the infinite power.  I am a big fan of all his work.

Included with the Shooooes software, is a frighteningly large pack of sample applications.  These sample applications are fun, swift, and swiun (a combination fo both swift and fun).  What they aren't, however, is well commented.  (They are, in fact, zero commented.)  I do understand _why's reasoning though.  Cluttering code up with comments makes it harder to read, but easier to understand.  I'd advise, trying to figure out the program with the un-commented version first, but if you hit a snag, know that the commented version is there for a little guidance.

Simple-Accordion

Today's Application is the Simple Accordion.  If you don't have the code you can download it here, or if you want to download the commented version of the Simple-Accordion then click here.

Simple-Accordion.rb

The Simple-Accordion is a relatively simple application that displays three poems that _why composed.  Each poem has a header "0.0″, "0.1″ and "0.2″.  Only one poem is displayed on the screen at a time, the others are hidden under their header.  When the header of an undisplayed poem is clicked, the currently displayed poem is hidden and the undisplayed poem is shown using an accordian like swoop animation.  Very cool.

GUI-Layout

I think the most important thing to understand about this program is the layout of the GUI.  The GUI is composed of six stacks, three slots, and one flow.  Let me explain.  The main window is a flow.  To the main window, three slots are added each with two stacks (one for the header, one for the poem).  When the program is first started, all six stacks are added to the GUI window, but only four stacks are being shown at one time:  Three header stacks and one poem stack.  When the user clicks on a header item, the stack belonging to that header transitions to "fully shown" while the previous stack transitions to "hidden".

For example, clicking on the "0.2″ header hides the poem Stack 2 and Stack 4 while showing the poem in Stack 6.  We will look at how this is done below.

Open_Page Function

When a user clicks on a header item (0.0, 0.1, or 0.2), the open_page function is called and sent the stack item underneath the header that was clicked.  For example, using the picture above, if the Header '0.0′ were clicked, the open_page function would be sent Stack 2.

def open_page stack
 
  active = app.contents.map { |x| x.contents[1] }.
  detect { |x| x.height > 0 }
 
  return if active == stack
 
  a = animate 60 do
    stack.height += 20
    active.height = 240 - stack.height if active
    a.stop if stack.height == 240
  end
end

The first item of business in the open_page function is determining the currently active poem stack (the stack with the visible poem).  In our picture above, the currently active poem stack is Stack 6.  The app.contents.map function sends each slot in the GUI to the block of code to the right of the function call.  The slot is represented by the variable x.  Remember, each slot contains two stacks.  The first stack is the header stack.  The second stack is the poem stack.  We are, at the moment, only interested in the height of the poem stack which is the second item in the slot, thus x.contents[1].  Detect is then called on that stack to see if the poem stack's height is greater then zero.  If it is, then it is the currently active poem stack and is returned to the variable entitled 'active.'

If the currently active poem stack equals the stack sent to the open_page function, then nothing is to be done and the function returns.  This functionality can be observed in the picture above.  If the header '0.2′ were clicked at this point, the poem under the '0.2′ header is already active, therefore there is nothing further to be done.

If, however, the header '0.0′ is clicked, an animation event is activated at 60 frames per second.  On each frame, Stack 2's height is increased by 20 pixels, while Stack 6's height is decreased by 20 pixels.  This continues until Stack 2's height is now 240 pixels and Stack 6's height is 0 pixels (or hidden).  This produces the fun accordion animation that you know and love.

Phew.

That was the most complex part of the code.  If you can understand that, you can for sure definitely understand the rest. I'm not going to go through it all, however, I am going to talk about a few places in the code that are clever or interesting.

More Ruby Fun

The first item I'd like to talk is not a function of Shoooes, but a function of Ruby that I had never seen before.  The page function is called, and two strings are sent to that function as the 'title' and 'text' variables.  All the text between <<-'END' and END is captured and sent to the 'text' variable formatting intact.  This is a great way of capturing a bunch of text whose formatting you want to preserve into a variable.

page "0.0", <<-'END'
There is a thought
I have just had
Which I don’t care to pass to
Anyone at all at this time.
 
I have even forgotten it now,
But kept only the pleasures
Of my property
And of my controlled mental slippage.
END

The first line of the page function is a cool trick for seeing if an array is initialized or not.  You simply OR it with itself.  If the @pages array already exists, @pages will be simply set equal to itself.  If it doesn't exist, however, @pages will be set to a new array.

@pages ||= []

Remember, if you have any more questions about the Simple-Accordian, snag the commented code.  It should answer most of your questions.