Flex Viewer解析

这一部分的实现相对比较复杂，主要是在其管理上面，再加上其使用Module的方式加载显示，所以感觉上相对复杂。

       这些侧边栏控件（Widget）的基本显示是通过一个模板出来的，也就是WidgetTemplate，这个模板里面实现了一个基本的Widget模块， 包括最大化、最小化、关闭、界面设计等。WidgetTemplate实现了一个IWidgetTemplate接口。该接口是用来连接 WidgetTemplete和Widget内容的，这个接口的定义还是比较简单的：

 

 
 
public interface IWidgetTemplate 
 
       { 
 
       function setTitle(value:String):void; 
 
       function setIcon(value:String):void; 
 
       function setState(value:String):void; 
 
} 

这一接口主要定义的功能有设置Widget的标题、图标以及显示状态。使用接口的好处众所周知，我们不需要关心当前操作的那个具体对象，如果该对象实现了这个接口，直接使用接口中的函数，就是对当前对象的操作。

以上就是我们在添加一个新的模块的时候为什么要使用此模板的原因：

         <WidgetTemplate id="wTemplate">

         </ WidgetTemplate>

      如果我们想修改Widget侧边栏的风格（不是样式方便）布局，那么我们就可以对WidgetTemplate.mxml这个文件进行编辑，将之修改成我们想要的风格布局。在后续的实例中会介绍一些例子。

又者，在添加一个Widget的时候，开发指南说让我们继承一个类BaseWidget，为什么要继承这个类那？其实这个类是用来实现Widget的具体功能，并且获取一些必要的信息的。

上面介绍了侧边栏模板的显示实现，接下来我们谈谈侧边栏功能的实现方式。

首先为了实现侧边栏的一些功能，其为我们定义个一个类BaseWidget，同样为了方便扩展和管理其功能，该类同样实现了一个接口IBaseWidget。

我们先看看这个IBaseWidget接口都定义了那些功能：

  

 
 
public interface IBaseWidget 
 
    { 
 
       function setId(value:Number):void; 
 
       function setTitle(value:String):void; 
 
       function setIcon(value:String):void; 
 
       function setConfig(value:String):void; 
 
       function setConfigData(value:ConfigData):void; 
 
       function setPreload(value:String):void; 
 
       function setState(value:String):void; 
 
       function setMap(value:Map):void; 
 
    } 

     我们可以望文生义的看一下这些接口，不难明白它们都是实现那些功能，看了这个接口我们就可以明白许多东西，为什么在Widget里面可以直接使用map， 可以直接使用ConfigData，因为Widget在加载Module的时候已经使用这些接口方法，获取到了这些信息。当然我们可以直接用的。那么这时 候就会有人问，这里面设置的标题、图标…….怎么会显示到我们的Widget上面的那？解答此问题我们就要看看BaseWidget这个类为我们做了什么 了。

打开BaseWidget.as，我们可以看到这样一个定义：

private var widgetTemplate:IWidgetTemplate;

并且在类的构造函数中：

 
 
public function BaseWidget() 
 
    { 
 
        super(); 
 
        this.layout = "absolute"; 
 
        addEventListener("creationComplete", initWidgetTemplate); 
 
} 

也就是添加了一个在其创建完成的事件监听initWidgetTemplate；

 

 
 
private function initWidgetTemplate(event:Event):void 
 
       { 
 
           var children:Array = this.getChildren(); 
 
           for each (var child:Object in children) 
 
           { 
 
              if (child is IWidgetTemplate) 
 
              { 
 
                  widgetTemplate = child as IWidgetTemplate; 
 
                  widgetTemplate.setTitle(widgetTitle); 
 
                  widgetTemplate.setIcon(widgetIcon); 
 
                  if(widgetPreload == STATE_MINIMIZED) 
 
                     widgetTemplate.setState(STATE_MINIMIZED); 
 
              } 
 
           } 
 
   } 

我们仔细看下这个函数，不难发现，其为前面定义的widgetTemplate进行了复制，赋的什么值那？读一下这个代码我们什么都清楚 了，widgetTemplate的值就是我们在Widget里面添加的<WidgetTemplate id="wTemplate"></ WidgetTemplate>，下面对其赋的标题、图标、状态当然就会对我们的Widget起作用了。类中的其他代码就不做解释了，都是对一些操 作的定义和对事件的监听或触发，供其他地方调用的。

至此，我们的一个Widget的创建原理就说完了，那么创建完了之后，这些作为Module的组件是如何显示和对其中值初始化的那。下面我们谈谈对Widget的加载过程，关于这一过程的实现在WidgetManagerDocked.mxml中完成。

打开WidgetManagerDocked.mxml文件，我们可能看起来有点乱，但是有些东西我们可以不用去管他。下面我们一步一步的来看：

首先，创建完成后调用了init（）函数，其中就是对一些事件添加事件监听来完成传值的目的。以后我们会具体介绍。

 

 
 
private function init():void 
 
{ 
 
SiteContainer.addEventListener(AppEvent.CONFIG_LOADED, config); 
 
SiteContainer.addEventListener(AppEvent.MAP_LOADED, onMapLoad); 
 
SiteContainer.addEventListener(AppEvent.LAYER_LOADED, onLayerLoad);    
SiteContainer.addEventListener(AppEvent.WIDGET_MENU_CLICKED, widgetMenuClicked); 
 
}   

通过这些事件监听，我们可以在监听函数中看到，我们获取到了系统的配置信息、地图控件等信息。

 

 
 
private function config(event:AppEvent):void 
    {       
        configData = event.data as ConfigData; 
    }          
private function onMapLoad(event:AppEvent):void 
 
    { 
       map = event.data as Map; 
    } 

这些信息是为我们的Widget准备的，因为Widget中要初始化这些信息。

   然后，我们知道，widget是在我们单击了菜单项后才会出现的，那么一次我们就可以接着看AppEvent.WIDGET_MENU_CLICKED事 件（菜单单击事件）的监听函数，就是我们的菜单单击这一事件发生后要执行的代码函数widgetMenuClicked：

 
 
var id:Number = event.data as Number; 
           var preload:String = configData.configWidgets[id].preload; 
           var label:String = configData.configWidgets[id].label; 
           var icon:String = configData.configWidgets[id].icon; 
           var config:String = configData.configWidgets[id].config; 
           var url:String = configData.configWidgets[id].url; 

这几行是用来获取当前单击菜单项的配置信息的，如id、标注、图片等。最后一个URL是其生成的SWF文件的路径，有了这个路径我们就可以找到SWF文件，将它加载到我们的页面中。

接着下面的几层判断使用有判断当前的这个要加载的SWF是不是加载过了，在Flex中已经加载过的SWF是已经下载到本地的，不用再去请 求。其实现方式是使用了HashTable，将已加载过的Module信息存到HashTable里面，我们就可以直接去其中把它取出来。我们不用关心这 是如何实现的，直接用就可以啦。我们看一看第一次加载是如何完成的，直接跳到多层判断的最后一个loadWidget(id, url, preload);函数。这个函数定义如下：

 

 
 
private function loadWidget(id:Number, url:String, preload:String):void 
 
           { 
 
           info = ModuleManager.getModule(url); 
 
           info.data = 
 
           { 
 
               id: id, 
 
               preload: preload 
 
           }; 
 
           info.addEventListener(ModuleEvent.READY, widgetReadyHandler);           
 
              info.load(); 
 
              this.cursorManager.setBusyCursor();  
 
           } 

首先使用ModuleManager和这个Module的地址获取到这个Module：

info = ModuleManager.getModule(url);

然后给它赋上我们的附加信息：

info.data =

           {

               id: id,

               preload: preload

           };

下面就是开始加载这个module，我们看看module加载完成后的事件监听函数widgetReadyHandler；

 

 
 
private function widgetReadyHandler(event:ModuleEvent):void 
 
           { 
 
           var info:IModuleInfo = event.module; 
 
           moduleTable.add(info.url, info);//加入到module的hashtable中 
 
            //获取器相关信息 
 
var id:Number = info.data.id; 
 
           var preload:String  = info.data.preload; 
 
           var label:String = configData.configWidgets[id].label; 
 
           var icon:String = configData.configWidgets[id].icon; 
 
           var config:String = configData.configWidgets[id].config; 
 
         //这句很关键，将Module实例成IBaseWidget，其实就是BaseWidget          
 
    var widget:IBaseWidget = info.factory.create() as IBaseWidget; 

//下面这几句就是为这个Widget初始化信息，看了这几句我们应该就可以明白Widget的那些//map等信息怎么出来的啦

 

 
 
widget.setId(id); 
           widget.setTitle(label); 
           widget.setIcon(icon); 
           widget.setConfig(config); 
           widget.setConfigData(configData); 
           widget.setPreload(preload); 
           widget.setMap(map); 
           widgetTable.add(id, widget); 

           //转成显示对象，加到显示容器里面，这个widget就显示出来了。

 
 
var widgetwidgetDO:DisplayObject = widget as DisplayObject; 
           widgetBox.addChild(widgetDO); 
           this.cursorManager.removeBusyCursor();   
           } 

此函数，我就不多介绍啦，注释写的很明白。对于如何实现Widget的上下滚动的，可以具体看下这个文件内容，很简单就明白啦。

鬼话三国作者宣。卧龙凤雏冢虎幼麟，神品三国，数尽风流人物，尽在鬼话三国！