Creating widgets in Flex

In addition to the widgets provided with ArcWeb Explorer (Base Maps, Find, and Pan&Zoom), you can also create your own widgets. You can create your own widgets in ArcWeb Explorer Flex API using these setup instructions.
View a live sample.
Requirements
Adobe Flex 2.01 with or without HotFix 1 (newer hot fixes are not supported)—If you don't have a Flex development environment, you can download a free trial of the Flex Builder IDE.
Download the following files:
SWC file
Widget SWC file
Creating widgets
To create your own widget, you need to:
Implement IWidgetView and create default widget state (visual).
Extend BaseWidget (non-visual).
Wrap BaseWidget in MXML (wrapping).
Step 1: Implementing IWidgetView and creating default widget state (visual)
First, create the visual parts of the widget. You need to implement the six functions of the IWidgetView interface, and create the default widget state.
MyImplementationOfWidgetView.mxml contains an example:

xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:widget="com.esri.aws.awx.widget.*"
implements="com.esri.aws.awx.widget.IWidgetView">

import com.esri.aws.awx.widget.WidgetStates;
import com.esri.aws.awx.widget.IWidget;
private var theWidget:MyWidget;
public function get widget():IWidget
{
return theWidget;
}
public function set widget(value:IWidget):void
{
theWidget = value as MyWidget;
}
public function set widgetState(value:String):void
{
currentState = value;
}
public function get widgetState():String
{
return currentState;
}
private var theWidgetContainer:IWidgetContainer;
public function get widgetContainer():IWidgetContainer{
return theWidgetContainer;
}
public function set widgetContainer(container:IWidgetContainer):void{
theWidgetContainer = container;
}
]]>



Step 2: Extending BaseWidget (non-visual)
Extend the BaseWidget class using the createWidgetView method. The createWidgetView method should return the widget view created above (MyImplementationOfWidgetView). This is usually where your business logic goes (non-visual).
MyExtendedBaseWidget.as contains an example:
package com.esri.aws.awx.widget
{
public class MyExtendedBaseWidget extends BaseWidget
{
override public function createWidgetView(widgetState:String = null):IWidgetView
{
var theCustomView:MyImplentationOfWidgetView = new MyImplentationOfWidgetView();
theCustomView.widget = this;
theCustomView.widgetState = widgetState;
return theCustomView;
}
}
}
Step 3: Wrapping BaseWidget in MXML
The last step is to wrap the extended BaseWidget in MXML. This wrapper contains the metadata associated with the widget and declares the states available within the widget view. It is referenced from the MyImplementationOfWidgetView.mxml.
MyFirstWidget.mxml contains an example:

xmlns:widget="com.esri.aws.awx.widget.*"
name="Widget #1"
widgetStates="{[WidgetStates.DEFAULT]}" />