FlexViewer mxml 初级设计篇

   <viewer:ViewerContainer id="viewerContainer">       
        //在viewer命令空间中引入ViewerContainer类，然后给类中的变量赋值。引入的类相当于实例化一个类的对象
        <viewer:mapManager>
            <managers:MapManager id="mapManager"/>
        </viewer:mapManager>
         
        <viewer:widgetManager>
            <managers:WidgetManager id="widgetManager"/>//在managers命名空间中引入WidgetManager类，
        </viewer:widgetManager>
        

    </viewer:ViewerContainer>

-----

在BaseWidget中，定义了_widgetTemplate，然后再一个业务逻辑widget中进行如下。

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   xmlns:Query="widgets.Query.*"
                   xmlns:viewer="com.esri.viewer.*"
                   widgetConfigLoaded="init()">

    <viewer:WidgetTemplate id="wTemplate"
                           width="300" height="300"
                           closed="widgetClosedHandler(event)"
                           open="widgetOpenedHandler(event)">
    </viewer:WidgetTemplate>

</viewer:BaseWidget>

在viewer命名空间中，引入了BaseWidget，然后再增加一个viewer空间中的WidgetTemplate变量，也就是在BaseWidget中增加了一个WidgetManager变量。

然后在BaseWidget中，有如下操作进行给事先定义的_widgetTempate赋值操作：

   ? public function BaseWidget()//构造函数中增加createComplete监听
??? {
??????? this.autoLayout = true;

??????? addEventListener(FlexEvent.CREATION_COMPLETE,creationCompleteHandler);
??????? AppEvent.addListener(AppEvent.WIDGET_CHANGE_STATE,widgetChangeStateHandler);
??? }

    private function creationCompleteHandler(event:Event):void
    {
        var children:Array = this.getChildren();
        for each (var child:Object in children)
        {
            if (child is IWidgetTemplate)
            {
                _widgetTemplate = child as IWidgetTemplate;

                _widgetTemplate.baseWidget = this;//重要，设置widgetTemplate的baseWidget          
            }
        }
    }

   
??? public function set isDraggable(value:Boolean):void
??? {
??????? _isDraggable = value;
??????? setWidgetTemplateControl();
??? }
??? public function set isResizeable(value:Boolean):void
??? {
??????? _isResizeable = value;
??????? setWidgetTemplateControl();
??? }

    //执行函数
    private function setWidgetTemplateControl():void
    {
        var children:Array = this.getChildren();
        for each (var child:Object in children)
        {
            if (child is IWidgetTemplate)
            {
                _widgetTemplate = child as IWidgetTemplate;
                _widgetTemplate.resizable = isResizeable;
                _widgetTemplate.draggable = isDraggable;
            }
        }
    }

---

widget状态改变时的事件流程机制

最小化事件：

    //WidgetTemplate 类中
    protected function minimize_clickHandler(event:MouseEvent):void
    {
        if (_baseWidget)
        {
            _baseWidget.setState(WIDGET_MINIMIZED);
        }

        this.widgetFrame.toolTip = this.widgetTitle;
        this.icon.toolTip = this.widgetTitle;
    }

     //BaseWidget类中
     /**
     * Set the widget state.在WidgetTemplate中调用该方法。
     * @param value the state string defined in BaseWidget.
     */
    public function setState(value:String):void
    {
        _widgetState = value;
        if (_widgetTemplate)
        {
            _widgetTemplate.widgetState = value;
        }
        notifyStateChanged(value);
    }

---