Yahoo Widgets Library: Stage Tutorial
Introduction
Stage is a JavaScript widgets library that allows you to define widgets as collections of
entities on a
stage. This will help you focus more on the widget's behavior and forget about the hardcoded offsets and object grouping that the XML approach forces you to use.
The library allows object positioning, dragging, resizing, aligning and grouping and supports as of version 1.1, labels, inputs, backgrounds, borders, lines, polygons, pictures, rollovers and animated sprites.
You can download it from
Widgipedia.
The library is packaged as a self-explanatory Yahoo Widget. Studying the .kon file inside the package should give you a good start in using the library. However, a step by step tutorial is given below. A complete reference coming soon, although studying the Stage.js code should give you a good glimpse of what's all about.
Integration
To use the library, add the Stage.js file to your package and insert the following line in the onLoad action trigger:
<action trigger="onLoad"><![CDATA[
include('Stage.js');
// more code
]]></action>
Let's build the simplest possible stage, a rectangular area with a yellow background. To do this, we'll create a
Stage consisting of an empty
Group with a
Background:
var yellowBackground = new Background('#ffffa6');
var mainGroup = new Group([]);
mainGroup.SetBackground(yellowBackground);
mainGroup.Resize(400, 200);
var theStage = new Stage('theStage', [mainGroup]);
The
stage is the correspondent of the main window. A
group is similar to a Frame, in that it allows defining a group of entities. The code above may not seem too convenient over the classic way to do it. However this is the foundation for a lot of powerful tricks. Read further.
A full crazy stage
Let's add some characters on the Stage. First, we'll create a
draggable,
resizable Border:
var blueBorder = new Border('#9c9cff', // color
funnyPicture.width + 10, // width
funnyPicture.height + 10, // height
5, // thickness
'gray.png'); // 50% gray
mainGroup.AddEntity(blueBorder);
blueBorder.MakeDraggable();
blueBorder.MakeResizable();
There, just add a gray.png 50% gray file to your package and you have a thick, colored, rectangular border that you can drag and resize.
Now let's add a
draggable,
resizable Picture to the Stage:
var funnyPicture = new Picture('funny.png');
mainGroup.AddEntity(funnyPicture);
funnyPicture.MakeDraggable();
funnyPicture.MakeResizable();
Add a funny.png image to your package and enjoy moving and stretching it!
Now it's time for some user interaction. Introducing: the
Rollover buttons:
var rolloverButton = new Rollover('push', 'alert("OUCH")');
mainGroup.AddEntity(rolloverButton);
Place a push_0.png for your button's normal state, a push_1.png for the focus state and a push_2.png for the depressed state. The last two are optional. Tell the button what to do when pressed and that's it!
Now let's add some static text to the stage. We'll need a
Label for that:
var titleLabel = new Label("* Click the button * Drag & resize the border & picture",
{'size' : 10, 'style' : 'bold'});
theStage.AddEntity(titleLabel);
The walking characters
Probably the most powerful feature of the stage package is the
Sprite. Here, you can define an image file containing all the different frames of an animation such as the one below:
and create an object that will animate the character for you!
var walkingSprite = new Sprite(Sprite.TYPE_CHART, 'chart.png', 10, 6, 0, 6);
walkingSprite.Move((mainGroup.width - walkingSprite.width) / 2,
(mainGroup.height - walkingSprite.height) / 2);
theStage.AddEntity(walkingSprite);
Now that's a good start for beginning a game, isn't it?
Resources
This tutorial in a zip code, for your convenience
The Sample Library at Widgipedia
Enjoy!
Radu Galesanu
