テスト アプリケーションでのカスタム コントロールの定義

通常、テスト アプリケーションには、アプリケーションの開発中に追加されたカスタム コントロールがすでに含まれています。テスト アプリケーションにすでにカスタム コントロールが含まれている場合は、「動的呼び出しを使用して Flex カスタム コントロールをテストする」または「オートメーション サポートを使用してカスタム コントロールをテストする」に進んでください。

この手順では、Flex アプリケーション開発者が Flex で Spinner カスタム コントロールを作成する方法を示します。このトピックで作成する Spinner カスタム コントロールは、カスタム コントロールの実装およびテストのプロセスを説明するために、いくつかのトピックで使用されています。

Spinner カスタム コントロールは、以下のグラフィックに示すように、2 つのボタンと 1 つのテキスト フィールドを含んでいます。

Flex カスタム コントロール

ユーザーは、Down をクリックしてテキスト フィールドに表示されている値を 1 減分させ、Up をクリックしてテキスト フィールドの値を 1 増分させることができます。

カスタム コントロールには、設定および取得が可能なパブリックの Value プロパティが用意されています。

  1. テスト アプリケーションで、コントロールのレイアウトを定義します。 たとえば、Spinner コントロール タイプでは、以下のように記述します。
    <?xml version="1.0" encoding="utf-8"?>
    <customcontrols:SpinnerClass xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:controls="mx.controls.*" xmlns:customcontrols="customcontrols.*">
    	<controls:Button id="downButton" label="Down" />		
    	<controls:TextInput id="text" enabled="false" />
    	<controls:Button id="upButton" label="Up"/>		
    </customcontrols:SpinnerClass>
    
  2. カスタム コントロールの実装を定義します。 たとえば、Spinner コントロール タイプでは、以下のように記述します。
    package customcontrols
    {
    	import flash.events.MouseEvent;
    	
    	import mx.containers.HBox;
    	import mx.controls.Button;
    	import mx.controls.TextInput;
    	import mx.core.UIComponent;
    	import mx.events.FlexEvent;
    
    	[Event(name="increment", 	type="customcontrols.SpinnerEvent")]
    	[Event(name="decrement", 	type="customcontrols.SpinnerEvent")]
    	
    	public class SpinnerClass extends HBox
    	{
    		public var downButton : Button;
    		public var upButton : Button;
    		public var text : TextInput;
    		public var ssss: SpinnerAutomationDelegate;
    		private var _lowerBound : int = 0;
    		private var _upperBound : int = 5;
    		
    		private var _value : int = 0;
    		private var _stepSize : int = 1;
    		
    		
    		public function SpinnerClass() {
    			addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
    		}
    		
    		private function creationCompleteHandler(event:FlexEvent) : void {
    			downButton.addEventListener(MouseEvent.CLICK, downButtonClickHandler);
    			upButton.addEventListener(MouseEvent.CLICK, upButtonClickHandler);
    			updateText();	
    		}
    		
    		private function downButtonClickHandler(event : MouseEvent) : void {
    			if(Value - stepSize >= lowerBound) {
    				Value = Value - stepSize;
    			}
    			else {
    				Value = upperBound - stepSize + Value - lowerBound + 1;
    			}
    
    			var spinnerEvent : SpinnerEvent = new SpinnerEvent(SpinnerEvent.DECREMENT);
    			spinnerEvent.steps = _stepSize;
    			dispatchEvent(spinnerEvent);
    		}
    		
    		private function upButtonClickHandler(event : MouseEvent) : void {
    			if(cValue <= upperBound - stepSize) {
    				Value = Value + stepSize;	
    			}
    			else {
    				Value = lowerBound + Value + stepSize - upperBound - 1;
    			}
    
    			var spinnerEvent : SpinnerEvent = new SpinnerEvent(SpinnerEvent.INCREMENT);
    			spinnerEvent.steps = _stepSize;
    			dispatchEvent(spinnerEvent);
    		}
    		
    		private function updateText() : void {
    			if(text != null) {
    				text.text = _value.toString();
    			}
    		}
    		
    		public function get Value() : int {
    			return _value;
    		}
    		
    		public function set Value(v : int) : void {
    			_value = v;
    			if(v < lowerBound) {
    				_value = lowerBound;
    			}
    			else if(v > upperBound) {
    				_value = upperBound;
    			}
    			updateText();
    			
    		}
    		
    		public function get stepSize() : int {
    			return _stepSize;
    		}
    		
    		public function set stepSize(v : int) : void {
    			_stepSize = v;
    		}
    		
    		public function get lowerBound() : int {
    			return _lowerBound;
    		}
    		
    		public function set lowerBound(v : int) : void {
    			_lowerBound = v;
    			if(Value < lowerBound) {
    				Value = lowerBound;
    			}
    		}
    		
    		public function get upperBound() : int {
    			return _upperBound;
    		}
    		
    		public function set upperBound(v : int) : void {
    			_upperBound = v;
    			if(Value > upperBound) {
    				Value = upperBound;
    			}
    		}		
    	}
    }
    
  3. コントロールが使用するイベントを定義します。 たとえば、Spinner コントロール タイプでは、以下のように記述します。
    package customcontrols
    {
    	import flash.events.Event;
    	
    	public class SpinnerEvent extends Event
    	{
    		public static const INCREMENT : String = "increment";
    		public static const DECREMENT : String = "decrement";
    		
    		private var _steps : int;		
    		
    		public function SpinnerEvent(eventName : String) {
    			super(eventName);
    		}
    		
    		public function set steps(value:int) : void {
    			_steps = value;
    		}
    		
    		public function get steps() : int {
    			return _steps;
    		}
    
    	}
    }

次のステップでは、テスト アプリケーションのオートメーション サポートを実装します。