Defining a Custom Control in the Test Application

Typically, the test application already contains custom controls, which were added during development of the application. If your test application already includes custom controls, you can proceed to Testing a Custom Control Using Dynamic Invoke or to Testing a Custom Control Using Automation Support.

This procedure shows how a Flex application developer can create a spinner custom control in Flex. The spinner custom control that we create in this topic is used in several topics to illustrate the process of implementing and testing a custom control in Silk Test Classic.

The spinner custom control includes two buttons and a text box, as shown in the following graphic.

Custom control example

The user can click Down to decrement the value that is displayed in the text field and click Up to increment the value in the text field.

The custom control offers a public CurrentValue property that can be set and retrieved.

To define the custom control:

In the test application, define the layout of the control. For example, for the spinner control type:

<?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>

Define the implementation of the custom control. For example, for the spinner control type:

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(currentValue - stepSize >= lowerBound)
      {
        currentValue = currentValue - stepSize;
      }
      else
      {
        currentValue = upperBound - stepSize + currentValue - lowerBound + 1;
      }
      var spinnerEvent : SpinnerEvent = new SpinnerEvent(SpinnerEvent.DECREMENT);
      spinnerEvent.steps = _stepSize;
      dispatchEvent(spinnerEvent);
    }

    private function upButtonClickHandler(event : MouseEvent) : void
    {
      if(currentValue <= upperBound - stepSize)
      {
        currentValue = currentValue + stepSize;
      }
      else
      {
        currentValue = lowerBound + currentValue + 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 currentValue() : int
    {
      return _value;
    }

    public function set currentValue(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(currentValue < lowerBound)
      {
        currentValue = lowerBound;
      }
    }

    public function get upperBound() : int
    {
      return _upperBound;
    }

    public function set upperBound(v : int) : void
    {
      _upperBound = v;
      if(currentValue > upperBound)
      {
        currentValue = upperBound;
      }
    }
  }
}

Define the events that the control uses. For example, for the spinner control type:

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;
    }
  }
}

Proceed to Implement Automation Support.