Schockwellenreiter: Ein Abenteuer mit Shoes

Schockwellenreiter → Archiv → Dezember 2015 → Ein Abenteuer mit Shoes – 20151213

Ein (weiteres) Abenteuer mit Shoes

Shoes, das kleine, aber feine, plattformunabhängige GUI- und 2D-Graphik-Toolkit für Ruby, das niemand kennt, bezieht nach eigener Aussage im Manual viele Inspirationen aus Processing und Nodebox. Das ist durchaus spürbar, aber mich erinnert vieles auch an Apples verblichenem HyperCard. Denn ähnlich, wie man mit HyperCard ganz einfach Applikationen mit miteinander verlinkten Seiten erstellen konnte (in HyperCard (Kartei-) Karten – daher kam das Card in HyperCard – genannt), kann man dies auch in Shoes – nur daß hier die einzelnen Seiten tatsächlich Seiten (pages) genannt werden. Dazu erstellt man eine Subklasse von Shoes.app und definiert darin jede einzelne Seite als eine eigene Methode. Und diese Seiten/Methoden werden in Shoes dann über URIs miteinander verlinkt. Ich habe dazu mal ein kleines Programmgerüst entworfen:

class MyMultiPageApp < Shoes
  url "/",           :start
  url "/firstpage",  :firstpage
  url "/secondpage", :secondpage
  
  def start
  	# Euer Code hier
  end
  
  def firstpage
  	# Euer Code hier
  end
  
  def secondpage
  	# Euer Code hier
  end
end

Shoes.app width: 640, height: 480

Denn da die Klasse MyMultiPageApp eine Subklasse von Shoes ist, ererbt sie die Methode url, mit der ich die Links zu den drei Seiten/Methoden festgelegt habe, zur Startseite (definiert durch die URL \) und zu einer zweiten und einer dritten Seite.

Die letzte Zeile, die Shoes.app aufruft, ist absolut notwendig, denn sie definiert das Programm-Fenster, in dem die Applikation abläuft.

Wie werden nun diese Seiten miteinander verlinkt? Um dies zu demonstrieren, habe ich in Shoes ein kleines Mini-Adventure aus dem Zyklus »Du und das Altersheim« geschrieben, das die Möglichkeiten verdeutlicht. Hier erst einmal der Quellcode, für den ich obiges Programmgerüst verwendet habe:

# encoding: utf-8

class Adventure < Shoes
  url "/",           :start
  url "/firstpage",  :firstpage
  url "/secondpage", :secondpage
  
  def start
    background yellowgreen
    stack margin: 20 do
      banner strong("Du und das Altersheim")
    end
    stack margin: 20 do
      para "Als Du diesen Morgen im Altersheim aufwachtest, stelltest Du fest, daß Dein Rollator plötzlich
	  mit Dir redete: »Ey Alter, wir müssen endlich mal wieder raus, was erleben!«"
      para strong("(1)"), ":  Mühsam kämpftest Du Dich aus dem Bett und gingst mit Deinem Rollator ",
      link("zum Fahrstuhl", click: "/firstpage"), ", um Dich in das Abenteuer der Großstadt zu stürzen."
      para strong("(2)"), ": Du drehtest dich einfach um und ",
      link("schliefst weiter", click: "/secondpage"), "."
    end
  end
  
  def firstpage
    background yellow
    flow margin: 20 do
      stack width: "320px" do
        image "images/fahrstuhldesgrauens.jpg"
      end
      stack width: "-320px", margin_left: 20 do
        para "Kurz bevor Du in den Fahrstuhl einsteigen wolltest, überkam Dich eine seltsame Ahnung,
		Du machtest auf der Stelle kehrt und ",
        link("gingst zurück ins Bett", click: "/secondpage"), "."
      end
    end
  end
  
  def secondpage
    background white
    stack margin: 20 do
     image "images/schlaf01.png"
   end
  end
end

Shoes.app width: 640, height: 480, resizable: false

(Wegen der besseren Lesbarkeit mußte ich den Quellcode an zwei Stellen mitten im String umbrechen, wo im Original kein Umbruch vorhanden ist (an den Einrückungen erkennbar). Da beide Umbrüche aber mitten in einem String eingefügt worden sind, stören sie höchstens Eure Ästhetik (sie sind dann auch im Programm seltsam umgebrochen), aber auf keinen Fall Ruby oder Shoes.)

Shoes besitzt eine link-Methode mit dem Attribut click, dem man die URL des Linkziels übergeben kann. Und so verlinkt die Startseite mit click: "/firstpage" auf die erste Seite und mit click: "/secondpage" auf die zweite Seite, während die erste Seite nur einen Link (click: "/secondpage") auf die zweite Seite aufweist (siehe Screenshot).

In der letzten Zeile habe ich resizeable auf false gesetzt. Das legt das Fenster auf eine feste Größe fest und erleichtert das Layout, da der Programmierer nicht berücksichtigen muß, was sich am Layout verschiebt, wenn sich die Größe des Fensters ändert.

Bemerkenswert ist, daß jede Seite/Methode ihr eigenes Layout besitzen kann. Und jede Seite kann nicht nur Texte, sondern auch Bilder, Animationen, Filme etc. enthalten, so daß der Erstellung eines interaktiven »Buches« mit Shoes nichts im Wege steht. Auch wenn Spiele einem vielleicht zuerst in den Sinn kommen, auch Lehrbücher oder Stadtteil-/Museumsführer und vieles mehr sind denkbar. Die frühere Literatur zu HyperCard ist voll von kreativen Beispielen, was man so anstellen kann. Laßt Euch inspirieren!

Und wenn Ihr das Beispielprogramm nachprogrammieren wollt, die dazu benutzten Bilder habe ich hier (Fahrstuhl des Grauens) und hier (Schlaf des Gerechten) zum Download zu Verfügung gestellt.

Still digging!

Noch mehr Shoes-Tutorials im Schockwellenreiter

2 (Email-) Kommentare

Ach, HyperCard ! Mir wird ganz warm ums Herz.

– Tom F. (Kommentieren) (#)

Tom: Hast Du Dir schon einmal die LiveCode Community Edition angeschaut. Plattformübergreifendes HyperCard auch für Tablets und Smartphones (wobei iOS nur mit der Professional Edition sauber funzt). Nicht ganz so geekig wie Shoes, aber dafür mit einem hohen Nostalgie-Faktor.

– Jörg Kantel (Kommentieren) (#)

(Kommentieren)