Accessibility

Table of Contents

  1. Introduction
  2. Creating a Skin for the Analog Clock
  3. Creating a Stopwatch to Extend the Analog Clock Component
  4. Using Event Data

Flex Component Basics – Part 2: Creating and Applying Graphic or Code-Based Skins to Extend Flex Components

Creating a Stop Watch to Extend the Analog Clock Component

The Analog Clock component is useful, but since it only displays the time it is not an interactive component. In this section, you modify the AnalogClock class to create a clock that responds to mouse clicks: You will create the StopWatch class.

In general, if you want to create a new component similar to an existing component, you extend the component, you don’t rewrite it.

The StopWatch component introduces the following concepts:

  • Extending an existing class to create a new one
  • Dispatching events
  • Adding other, existing components (in the StopWatch class, you add a Flex Label component)

Create a new ActionScript file called StopWatch.as and add the following code to it:

import AnalogClock;
import mx.controls.Label;
[Event("start")]
[Event("stop")]

class StopWatch extends AnalogClock
{
	private var isStopped:Boolean = true;
	private var elapsedTime:Number = 0;
	private var output:Label;
	
	public function createChildren() : Void {
		super.createChildren();
		
		createClassObject(Label,"output", getNextHighestDepth(), 
		{styleName:this,owner:this,textAlign:"center",width:100,height:21});
		
		reset();
		
		this.addEventListener("click",mx.utils.Delegate.create(this,stateChange));
	}
	
	public function layoutChildren() {
		super.layoutChildren();
		
		output.move(layoutWidth/2-50,layoutHeight/2+20);
	}
	
	public function reset() {
		if( __currentTime == undefined ) {
			__currentTime = new Date();
		}
		
		clearInterval(automateTimerID);
		
		__currentTime.setHours(0,0,0,0);
		
		isStopped = true;
		elapsedTime = 0;
	}
	
	private function tickTock() {
		
		var t:Number = __currentTime.getTime();
		t += 1000;
		__currentTime.setTime(t);
		
		++elapsedTime;

		var value:Number = Math.round(elapsedTime/60*1000)/1000;
		output.text = String(value);
		
		positionHands();
	}
	
	private function stateChange() {
		isStopped = ! isStopped;
		if( isStopped ) {
			dispatchEvent({type:"stop",elapsed:(elapsedTime/60)});
			reset();
		} else {
			automateTimerID = setInterval(this,"tickTock",10);
			dispatchEvent({type:"start"});
		}
	}
}
Page 3 of 4
Previous Page
Next Page