Shoes, Clock & Dictionary

December 10th 17:47
by why

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"

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 is made in the background.

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

require 'open-uri' :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("{@lookup.text}")).read.
              gsub(' ', ' ').
              gsub(%r!\(http://.+?\)!, '').strip
          title, doc = doc.split(/\n+/, 2)
          @deft.replace title
          @defn.replace doc
    stack :margin => 20 do
      @deft = subtitle "", :margin => 10
      @defn = para ""

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



said on December 10th 18:31

Beyond making HTML nice, I think we’ll also need to think hard about how threads and asynchronous stuff should be handled. It’d be nice if we could give them the basic stuff without throwing them to the concurrency wolves.

(even the above example has technical problems)


said on December 10th 18:40

For instance: with a little network lag and impatient fingers, you could end up with definition requests in flight for two different words, ending up with things interleaved like:

T1> @deft.replace title # "chocolate"
T2> @deft.replace title # "cat"
T2> @defn.replace doc # "n 1: feline mammal..."
T1> @defn.replace doc # "adj: composed of or flavored or coated in chocolate..."

Not such a big deal here, but kids are going to hit that kind of stuff a lot more if they try to make things like games with threads. And it’d get discouraging.

David Parker

said on December 10th 19:46

Great stuff; I’ve been playing around with Shoes as well, though sadly nothing quite as interesting as above. Keep up the good work!


said on December 11st 03:30

I really like how Shoes has us all acting again as though we just got our very first Commodore 64.


said on December 11st 16:45

The definr is a great app and really shows the beauty and simplicity of shoes. It also shows that it’s a nice framework for building REST-clients in no time.

I will never leave my house without shoes from now on…

Thanks Why!


said on December 12nd 14:38

Hi, the clock is not working for me–r331, on Ubuntu Gutsy.

Comments are closed for this entry.