Limelight Tutorial #1 : Your First Production
1. Creating a Scene Scenes represent the contents of a window. Every Limelight Production must have at least one Scene.
Create a new directory. We'll call it tutorial_1. 1_files
That's it! You've just created your first Limelight Scene and Production. Load it up with the following command:
$ jruby -S limelight open tutorial_1 		1_screen_thumb
2. Building Props Okay. This Scene looks quite empty. What we need are Props. Props give Scenes structure. Props can take on a wide variety appearances and you can add as many Props to a scene as you like.
Inside the tutorial_1 directory, create a file named props.rb. 2_files
Open props.rb. Enter for following text:
backdrop :background_color => "black", :width => "100%", :height => "100%"
This adds one Prop named backdrop to the Scene. The background color of backdrop is black and its height and width are set to consume 100% of the Scene.

Refresh your screen using the menu bar option:
File > Refresh. 		2_screen_thumb
Now let's add some more Props. Enter the following text in props.rb. 
backdrop :background_color => "black", :width => "100%", :height => "100%" do
  sample :width => 100, :height => 100, :background_color => "red", :text => "red"
  sample :width => 100, :height => 100, :background_color => "orange", :text => "orange"
  sample :width => 100, :height => 100, :background_color => "yellow", :text => "yellow"
  sample :width => 100, :height => 100, :background_color => "green", :text => "green"
  sample :width => 100, :height => 100, :background_color => "blue", :text => "blue"
  sample :width => 100, :height => 100, :background_color => "magenta", :text => "magenta"
  selection :id => "the_selection", :width => 300, :height => 300, :background_color => "gray"
end
We've added seven new Props to the Scene. All are contained within the backdrop Prop. The first six Props are all named sample. They are 100 pixels wide and 100 pixels high. Each Prop has a difference background color and corresponding text. The last Prop is named selection, has dimensions of 300 x 300 pixels, and a background color of gray. The selection Prop has also been assigned an id of the_selection.

Use File > Refresh to refresh the Scene. 		2b_screen_thumb
You know, all those sample Props look very similar. Let's DRY it up a bit. Below is a refactored version of props.rb: 
backdrop :background_color => "black", :width => "100%", :height => "100%" do
  %w{ red orange yellow green blue magenta }.each do |color|
   sample :width => 100, :height => 100, :background_color => color, :text => color
  end
  selection :id => "the_selection", :width => 300, :height => 300, :background_color => "gray"
end
3. Styles Styles define the way Props look. We've already been applying Styles to the Props by setting the width, height, and background_color. But putting the styles inside the props.rb file can get messy. Let's pull the Styles out of props.rb and add a few more.
Inside the tutorial_1 directory, create a file named styles.rb. 3_files
Enter the following text in styles.rb: 
backdrop {
  background_color "black"
  width "100%"
  height "100%"
}

sample {
  width 100
  height 100
}

selection {
  width 300
  height 300
  background_color "gray"
}
And edit props.rb to remove all the Styles: 
backdrop do
  %w{ red orange yellow green blue magenta }.each do |color|
    sample :background_color => color, :text => color
  end
  selection :id => "the_selection"
end
After refreshing the Scene, it will look exactly the same.

What we've done here is create 3 Style objects with the names backdrop, sample, and selection. Limelight will load these Styles automatically and apply them to Props based on their names.
Now, we could really make better use of the Scene's real estate. Update the backdrop and sample Styles in styles.rb like so: 
backdrop {
  background_color "black"
  width "100%"
  height "100%"
  horizontal_alignment "center"
  vertical_alignment "center"
}

sample {
  width 100
  height 100
  margin 5
  horizontal_alignment "center"
  vertical_alignment "center"
  font_size "18"
  font_style "bold"
  text_color "white"
}
In the backdrop Style, we added horizontal and vertical alignment, setting both to center. This, in effect, tells the backdrop Prop to center all of it children Props horizontally and vertically. We did the same to the sample Style, but in this case, the text is centered.

In the sample we also added a little margin the space the Props out and specified some text changes.

Refresh and you should see a window like the one on the right. 		3_screen_thumb
4. Adding Players Our Scene looks good. Now it's time to add some life to it. Players are what make Scene's lively.
Inside the tutorial_1 directory, create another directory named players. In this players directory, create a file named sample.rb. 4_files
Inside sample.rb, enter the following code: 
module Sample
  def mouse_clicked(e)
    selection = scene.find('the_selection')
    selection.style.background_color = self.style.background_color
  end
end
When a Scene is loaded, all of the Players in the players directory are loaded as well. When a Player exists for a Prop by the same name, Limelight will give all the Player's behavior to the Prop. In this case, the sample Props, having been invigorated with the Sample Player, will not respond to mouse clicks.

Let's look at the mouse_clicked method defined in the Sample Player. Remember that we gave the selection Prop an id? Well that's coming in handy here, because we can now search for that Prop in the Scene using the find method. Then we access the selection Prop's style and set its background color the the color of the sample Prop that was clicked.

Now, after refreshing, every time you click a sample Prop, the selection Prop will change color. 		4_screen_thumb
5. That's a Wrap Congratulations! You've just created your first Limelight Production.
simple, dynamic, user interfaces