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.

Requirements

Creating widgets

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.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:widget="com.esri.aws.awx.widget.*"
    implements="com.esri.aws.awx.widget.IWidgetView">

    <mx:Script>
        <![CDATA[
            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;
            }
        ]]>
    </mx:Script>

    <mx:Text text="Hello Widget World" />
</mx:VBox>

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).

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.

<?xml version="1.0" encoding="utf-8"?>
<widget:MyExtendedBaseWidget
    xmlns:widget="com.esri.aws.awx.widget.*"
    name="Widget #1"
    widgetStates="{[WidgetStates.DEFAULT]}"  />

Creating widgets in Flex

Requirements