The Green Shoes Manual 1.1.362

Element Creation

Starts an animation timer, which runs parallel to the rest of the app. The fps is a number, the frames per seconds. This number dictates how many times per second the attached block will be called.

The block is given a frame number. Starting with zero, the frame number tells the block how many frames of the animation have been shown.

 Shoes.app do
   counter = para "STARTING"
   animate 24 do |frame|
     counter.replace "FRAME #{frame}"
   end
 end

The above animation is shown 24 times per second. If no number is given, the fps defaults to 10.

Draws a Background element with a specific color (or pattern.) Patterns can be colors, gradients or images. Colors and images will tile across the background. Gradients stretch to fill the background.

PLEASE NOTE: Backgrounds are actual elements, not styles. HTML treats backgrounds like styles. Which means every box can only have one background. Green Shoes layers background elements.

 Shoes.app do
   background black
   background white, width: 50
 end

The above example paints two backgrounds. First, a black background is painted over the entire app's surface area. Then a 50 pixel white stripe is painted along the left side.

Creates a Banner text block. Green Shoes automatically styles this text to 48 pixels high.

Draws a Border element using a specific color (or pattern.) Patterns can be colors, gradients or images. Colors and images will tile across the border. Gradients stretch to fill the border.

PLEASE NOTE: Like Backgrounds, Borders are actual elements, not styles. HTML treats backgrounds and borders like styles. Which means every box can only have one borders. Green Shoes layers border and background elements, along with text blocks, images, and everything else.

Adds a push button with the message text written across its surface. An optional block can be attached, which is called if the button is pressed.

Creates a Caption text block. Green Shoes styles this text to 14 pixels high.

Adds a check box.

Create a Code text fragment. This text defaults to a monospaced font.

Creates a Del text fragment (short for "deleted") which defaults to text with a single strikethrough in its middle.

Opens a new app window (just like the window method does,) but the window is given a dialog box look.

Note: Green Shoes doesn't support dialog method.

Adds a large, multi-line textarea to this slot. The text is optional and should be a string that will start out the box. An optional block can be attached here which is called any type the user changes the text in the box.

If accepts_tab is true a tab character is inserted. If accepts_tab is false the keyboard focus is moved to the next element in the focus chain. This accepts_tab defaults to false.

 Shoes.app do
   edit_box
   edit_box text: "HORRAY EDIT ME"
   edit_box text: "small one",
     width: 100, height: 160
 end

Adds a single-line text box to this slot. The text is optional and should be a string that will start out the box. An optional block can be attached here which is called any type the user changes the text in the box.

Creates an Em text fragment (short for "emphasized") which, by default, is styled with italics.

A timer similar to the animate method, but much slower. This timer fires a given number of seconds, running the block attached. So, for example, if you need to check a web site every five minutes, you'd call every(300) with a block containing the code to actually ping the web site.

A flow is an invisible box (or "slot") in which you place Green Shoes elements. Both flows and stacks are explained in great detail on the main Slots page.

Flows organize elements horizontally. Where one would use a stack to keep things stacked vertically, a flow places its contents end-to-end across the page. Once the end of the page is reached, the flow starts a new line of elements.

Creates an Image element for displaying a picture. PNG, JPEG and GIF formats are allowed.

The path can be a file path or a URL. All images loaded are temporarily cached in memory, but remote images are also cached locally in the user's personal Shoes directory. Remote images are loaded in the background; as with browsers, the images will not appear right away, but will be shown when they are loaded.

Note: Green Shoes doesn't support the above personal Shoes directory.

Quickly grab the width and height of an image. The image won't be loaded into the cache or displayed.

URGENT NOTE: This method cannot be used with remote images (loaded from HTTP, rather than the hard drive.)

Creates an Ins text fragment (short for "inserted") which Green Shoes styles with a single underline.

Creates an Inscription text block. Green Shoes styles this text at 10 pixels high.

Creates a Link text block, which Green Shoes styles with a single underline and colors with a #06E (blue) colored stroke.

The default LinkHover style is also single-underlined with a #039 (dark blue) stroke.

Creates a Link text block. You can also write with this style. When user clicks the link text, the block will be launched.

Adds a drop-down list box containing entries for everything in the items array. An optional block may be attached, which is called if anything in the box becomes selected by the user.

 Shoes.app do
  stack  margin: 10 do
   para "Pick a card:"
   list_box items: ["Jac", "Ace", "Jok"] do |item|
    @p.text = "#{item} was picked!"
   end
   @p = para
  end
 end

Call ListBox#text to get the selected string. See the ListBox section under Native controls for more help.

Adds a progress bar.

Create a Para text block (short for "paragraph") which Green Shoes styles at 12 pixels high.

Adds a radio button. If a group name is given, the radio button is considered part of a group. Among radio buttons in the same group, only one may be checked. (If no group name is given, the radio button is grouped with any other radio buttons in the same slot.)

Creates a Span text fragment, unstyled by default.

 Shoes.app do
   tagline "\n", 'hello ' * 5, 
     span(em('Green Shoes'), size: 8, rise: 15)
 end

Creates a new stack. A stack is a type of slot. (See the main Slots page for a full explanation of both stacks and flows.)

In short, stacks are an invisible box (a "slot") for placing stuff. As you add things to the stack, such as buttons or images, those things pile up vertically. Yes, they stack up!

Creates a Strong text fragment, styled in bold by default.

Creates a Sub text fragment (short for "subscript") which defaults to lowering the text by 10 pixels and styling it in an x-small font.

Creates a Subtitle text block. Green Shoes styles this text to 26 pixels high.

Creates a Sup text fragment (short for "superscript") which defaults to raising the text by 10 pixels and styling it in an x-small font.

Creates a Tagline text block. Green Shoes styles this text to 18 pixels high.

A one-shot timer. If you want to schedule to run some code in a few seconds (or minutes, hours) you can attach the code as a block here.

To display an alert box five seconds from now:

 Shoes.app do
   timer 5 do
     alert "Your five seconds are up."
   end
 end

Creates a Title text block. Green Shoes styles these elements to 34 pixels high.

Embeds a movie or plays an audio.

Opens a new app window. This method is almost identical to the Shoes.app method used to start an app in the first place. The difference is that the window method sets the new window's owner property. (A normal Shoes.app has its owner set to nil.)

So, the new window's owner will be set to the Shoes::App which launched the window. This way the child window can call the parent.

 Shoes.app title: "The Owner" do
  button "Pop up?" do
   window do
    para "Okay, popped up from [#{owner.inspect}]."
   end
  end
 end

Next: Events