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. 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. 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. 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. 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.

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.

 Shoes.app do
   edit_box
   edit_box "HORRAY EDIT ME"
   edit_box "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 animation 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 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.

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 Shoes styles with a single underline.

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

Creates a Link text block, which 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.

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: ["Jack", "Ace", "Joker"]
   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 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.

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. 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. 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. Shoes styles these elements to 34 pixels high.

Embeds a movie in this slot.

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}"
     end
   end
 end