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.