Shoes, Clock & Dictionary

The Shoes mailing list has been hoppin with little apps lately. Some breakout and tetris clones are taking shape. MenTaLguY’s crafting some kind of an adventure game. And Thomas Bell has been writing some nice little widgets like the Shoes clock (now included with Shoes as samples/clock.rb.)

Here’s little fragment from the most recent source code which controls the colors and the font styles in the clock banner across the top:

stack do
  background black
  para @time.strftime("%a"),
    span(@time.strftime(" %b %d, %Y "), :stroke => "#ccc"),
    strong(@time.strftime("%I:%M"), :stroke => white),
    @time.strftime(".%S"), :align => "center", :stroke => "#666"
end

This may look a bit like Markaby, but it doesn’t translate into HTML. Shoes has its own span and strong and para elements, which are based on the HTML elements. And, similar to HTML, these elements are just aliases for certain styles.

From shoes/app.c (shoes_app_reset_style):

STYLE(cCode,        family, monospace);
STYLE(cDel,         strikethrough, single);
STYLE(cEm,          emphasis, italic);
STYLE(cIns,         underline, single);
STYLE(cLink,        underline, single);
STYLE(cLink,        stroke, #06E);
STYLE(cLinkHover,   underline, single);
STYLE(cLinkHover,   stroke, #039);
STYLE(cLinkHover,   fill,   #EEE);
STYLE(cStrong,      weight, bold);
STYLE(cSup,         rise,   10);
STYLE(cSup,         size,   x-small);
STYLE(cSub,         rise,   -10);
STYLE(cSub,         size,   x-small);

Within the Shoes source code, the STYLE macro simply adds a style setting to a text class.

The samples/definr.rb is an example of a threaded Shoes app. When you hit Go, the HTTP call to definr.com is made in the background.

This example is trivial enough that I can inline the source:

require 'open-uri'

Shoes.app :title => "Dictionary, powered by Definr" do
  stack do
    background red, :height => 60
    flow :margin => 20 do
      caption "Define: ", :stroke => white
      @lookup = edit_line
      button "Go" do
        Thread.start do
          doc = open(URI("http://definr.com/definr/show/#{@lookup.text}")).read.
              gsub(' ', ' ').
              gsub(%r!\(http://.+?\)!, '').strip
          title, doc = doc.split(/\n+/, 2)
          @deft.replace title
          @defn.replace doc
        end
      end
    end
    stack :margin => 20 do
      @deft = subtitle "", :margin => 10
      @defn = para ""
    end
  end
end

No work has been done to convert HTML into Shoes objects, so this sort of primitive gsub chaining is pretty common.