INSIDE SHOES 2

Released on December 5th, 2008. Alias "Raisins."

The second release of Shoes (called "Raisins" by many) is a culmination of a year of feature-filled additions to the first, experimental release of Shoes (titled "Curious".)

This release adds a built-in manual, an error console, RubyGems integration, simple asynchronous downloads, an in-memory and database-backed image cache, support for external fonts, and, most prominently, its own unique library for packaging apps into little executables. OS X support is significantly better, as we switched from Carbon to Cocoa.

Shoes' artistic endeavors also improved, with new methods for creating raster images from shapes, applying effects (like gaussian blurs, drop shadows and glows) to canvases, and bundling many shapes up into a single shape object.

Since the first release, many kept with unstable builds (including RubyLearning.org, which teaches a on-line Shoes class.) With this release, we hope to start operating off of stable builds, which will appear every month or so.

If you'd really like to enjoy the new release, here's a tour!

First, the Release Itself

Shoes 2 Builds

In case you want Shoes handy while you read, here's the full set.

The actual revision number of this release is 1134. The revision number for Curious was 396. So, over seven-hundred commits.

A Look at the New Tools

The Built-in Manual

Bring it up by pressing Alt-? (or ⌘-? on OS X.) Or, by running: shoes -m from the command line.

This complete reference to the whole slate of classes and methods is itself a Shoes app. Above you can see the color guide. There's also a master list of every style that can be applied, along with what elements respond to each style.

An HTML version of the manual is up at help.shoooes.net.

In some ways the built-in manual is superior to the HTML manual. Like, take the search page.

Also, many pages include examples featuring a Run it button that will launch the example within Shoes.

The Packager

The Shoes packager is brought up by running shoes -p. (On OS X, you can start up Shoes and select Package... from the menu.)

The .shy format is new to this release as well. A shy is a Shoes-YAML archive of a directory, gzipped. This is a cross-platform format for folks who already have Shoes.

Packaging does not require a compiler. You can generate executables for OS X, Windows and Linux from any platform that runs Shoes.

RubyGems Setup

If your app needs a RubyGem, you can add a short prelude to instruct Shoes to download the gem if it isn't found.

Shoes.setup do
  gem "redcloth"
  gem "metaid"
end

The rest of your app will run once setup finishes.

The Console

Unhandled errors go to the console. And you can send debug messages to it.

Open it up with Alt-/ (or, on OS X: ⌘-/.)

The pertinent methods are debug, error, info and warn.

debug "galoshes?"
info "galoshes."

Working With Outside Forces

Asynchronous Downloads

The download method, inspired by the simplicity of the browser's XMLHttpRequest object, starts a concurrent download and notifies the app as to its progress and completion.

Shoes.app do
  @status = para "One moment..."
  download "http://www.google.com/logos/nasa50th.gif",
    :save => "nasa50th.gif" do
      @status.text = "Okay, is downloaded."
  end
end

Shoes uses each platform's built-in threading and HTTP libraries, to keep it fast and cheap.

You can customize headers and events nicely with this method. In the next release, an upload method will be included as well.

Remote Images

A common use of Shoes is to show Twitter streams and feed summaries. Therefore, loading remote images had to be easy.

Shoes.app do
  image "http://shoooes.net/images/nks-kidnap.png"
end

Images are loaded using the asynchronous HTTP code just mentioned. Both in-memory and on-disk caches are kept.

External Fonts

The font method loads from a variety of font file types using platform calls. The font can then be used in any text block.

font "phonetica.ttf"

Shoes.app :height => 100 do
  banner "A sample sentence.", :font => "Phonetica"
end

Here's a nice trick: if you're wondering what fonts a file contains, just pass the file name into the font method and it'll give you back a list of the names of the fonts inside.

Cohesion in the Art Dept.

Image Blocks

This window contains one 200 x 200 pixel image, built of 36 circles with a blur effect applied. The purple background isn't part of the image.

Shoes.app :width => 200, :height => 200 do
  nostroke
  background "#402"

  image(200, 200) do
    36.times do |i|
      # use more opaque reds as we go down
      fill red(i * 0.02)
      # draw each row, then move down
      oval :top => 20 + (30 * (i / 6)),
           :left => 16 + (30 * (i % 6)),
           :radius => 8
    end
    # add a blur with a 2 pixel range
    blur 2
  end
end

The image(200, 200) do ... end is an image block.

Image blocks are a way of painting pictures in memory without leaving a lot of shape objects around. Often, if you're building a picture from a whole lot of shapes, it's quicker to paint on to a blank image and keep the picture as a single unit. Just depends on what you're doing.

Image Effects

Within images, you can also apply effects (like the blur in the last example.) This is a heavy blur of that kidnapping picture shown earlier.

Shoes.app do
  image("http://shoooes.net/images/nks-kidnap.png").blur(20)
end

Shape Blocks

A shape block is a continuous path, or even a group of paths, forming a single shape.

Shoes.app do
  nofill
  stroke "#DFA".."#F90"
  strokewidth 30

  background "#DFA".."#F90"
  shape do
    x = -40
    move_to x, 80
    4.times do
      curve_to x + 77, 202, x + 148, -42, x + 245, 80
      x += 245
    end
  end
end

Consult the shape docs for more.

Nice, Little Things

Attaching

An element can be glued to another element. The main element's coordinates become the origin for the attached element's coordinates.

Shoes.app do
  @hand = image "http://hacketyhack.net/images/design/Hand-256x256.png"
  image "http://hacketyhack.net/images/design/Hand-Green-256x256.png",
    :attach => @hand, :top => 40, :left => 50

  motion do |x, y|
    @hand.move x, y
  end
end

In this example, the @hand image follows the mouse and the attached image follows the @hand. Get it?

Okay, well, see the entry for the :attach style in the manual.

:curve

The one backwards incompatibility to be aware of: in one situation, :radius has become :curve.

The :radius style is used through out Shoes, sometimes to indicate the size of an oval or curve. Or the size of a radial gradient. And it used to dictate the size of a rounded corner on a rectangle.

Here's a background gradient that would have used :radius in older versions.

Shoes.app do
  stack :margin => 20 do
    background "#9AC".."#333", :curve => 10
  end
end

See, imagine if we'd used a radial gradient on this background. A :radius style would have applied to both the gradient and the rounded corner. Now, a :curve style in Shoes strictly means "a rounded corner."

Displacement

Let's say you have a button laid out nicely with other controls and you want to animate it. Jiggle it or have it whoosh into place. Sure, but how?

The problem is: once you move it, the layout scoots around and changes.

What you can do in Shoes 2 is displace any element, which keeps its spot in the layout but visually moves it away from those coordinates.

An example is filed under the displace method in the docs.

And Everything Else is New, Too

These are the major things worth highlighting, but many more mundane elements have been added to Shoes. For instance, check boxes and radio buttons weren't in the first release.

This is strictly the fun stuff I've mentioned. From here, I'd suggest a look at Nobody Knows Shoes, the illustrated manual.

Much of the work has been on improving the key concepts covered by that book. To find a cozy spot between simplicity, brevity, and programs that actually function well.

There's a long way to go. See you at next month's release!