import km.components.*;
import km.skins.*;

var tf:TextField;
var b1:LabelButton, b2:LabelButton, b3:LabelButton;
var b4:LabelButton, b5:LabelButton;

// Add a dynamic textfield.

tf = new TextField();
addChild(tf);

// Add a label button component.

b1 = new LabelButton();
ScriptedSkin.applyTo(b1);
b1.setSize(90,24);
b1.move(20,30);
addChild(b1);

// Clone the first button and add the clone.
// This way we don't have to skin all buttons separately.

b2 = b1.clone();
b2.y = 60;
addChild(b2);
 
// Do the same for button three, four and five.
 
b3 = b1.clone();
b3.y = 90;
addChild(b3);
 
b4 = b1.clone();
b4.move(220, 80, 3, 24, true); // animated move
addChild(b4);

b5 = b1.clone();
b5.move(220, 110, 2, 24, true); // animated move
addChild(b5);

// Set the labels for the buttons

b1.label.text = 'Button 1';
b2.label.text = 'Button 2';
b3.label.text = 'Button 3';
b4.label.text = 'Button 4';
b5.label.text = 'Button 5';
 
// First way of setting an action.
// KM supports nesting of anonymous functions so we can
// assign an anonymous function directly.
 
b1.onClick = function(){
 tf.text = 'Button 1 clicked';
}
 
// Second way of setting an action.
// We refer to a named function.

b2.onClick = b2Click;
 
// Third way of setting an action.
// We refer to a named function but do it this time by adding
// an event listener. The advantage is that multiple listeners
// can be added to one component.
 
b3.addEventListener('click', b3Click);
b4.addEventListener('click', b4and5Click);
b5.addEventListener('click', b4and5Click);


// Named function for button 2 click event.
// In case onClick is used, the Flash Player expects the function
// to have no parameters.

function b2Click():void {
 tf.text = 'Button 2 clicked';
}

// Named function for button 3 click event.
// In case addEventListener is used, the Flash Player expects the
// function to have one parameter.

function b3Click(e:Event):void {
 tf.text = 'Button 3 clicked';
}

// Named function for button 4 and 5 click event.
// The target property of the event that is passed to the function
// represents the button that broadcasted the event. We can use this
// to set one event function for multiple buttons.

function b4and5Click(e:Event):void {
 tf.text = e.target.label.text;
 tf.appendText(' clicked');
}