这些侧边栏控件（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的标题、图标以及显示状态。使用接口的好处众所周知，我们不需要关心当前操作的那个具体对象，如果该对象实现了这个接口，直接使用接口中的函数，就是对当前对象的操作。
以上就是我们在添加一个新的模块的时候为什么要使用此模板的原因：
如果我们想修改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里面添加的，下面对其赋的标题、图标、状态当然就会对我们的Widget起作用了。类中的其他代码就不做解释了，都是对一些操作的定义和对事件的监听或触发，供其他地方调用的。
至此，我们的一个Widget的创建原理就说完了，那么创建完了之后，这些作为Module的组件是如何显示和对其中值初始化的那。下面我们谈谈对 Widget的加载过程，关于这一过程的实现在WidgetManagerDocked.mxml中完成。
打开WidgetManagerDocked.mxml文件，我们可能看起来有点乱，但是有些东西我们可以不用去管他。下面我们一步一步的来看：
首先，创建完成后调用了init（）函数，其中就是对一些事件添加事件监听来完成传值的目的。以后我们会具体介绍。
private function init():void
{
SiteContainer.addEventListener(AppEvent.CONFIG_LOADED, config);
SiteContainer.addEventListener(AppEvent.MAP_LOADED, _disibledevent=>
}
private function _disibledevent=>
}
这些信息是为我们的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 widgetDO:DisplayObject = widget as DisplayObject;
widgetBox.addChild(widgetDO);
this.cursorManager.removeBusyCursor();
}
此函数，我就不多介绍啦，注释写的很明白。对于如何实现Widget的上下滚动的，可以具体看下这个文件内容，很简单就明白啦。
关于C部分的实现架构原理，就说到这儿了。
其他部分：该部分主要介绍配置信息、样式信息、事件信息等的组织结构
其他部分：该部分主要介绍配置信息、样式信息、事件信息等的组织结构
这些部分我们在界面中看不到，但是他们起着至关重要的作用，也就我们说的总体架构里面的中间部分。
首先，看看配置信息的组织，ConfigManager.as和ConfigData.as来完成。
ConfigData.as中定义了配置信息的数据结构
public function ConfigData()
{
configUI = [];
configMenus = [];
configMap = [];
configBasemaps = [];
configExtents = [];
configWidgets = [];
}
我们可以清晰地看到，我们需要的配置信息基本上都包含其中，如果需要进行配置信息的扩展，那么我们就首先要在ConfigData里面加上扩展的数据结构。
ConfigManager.as负责把配置文件中的信息读取初始化到一个ConfigData里面，并执行事件分发。看一下里面的内容还是比较容易明白的。就不做介绍了。
然后，样式文件的组织在UIManager.as中实现，打开此文件，我们可以在配置文件加载成功的事件监听函数中找到这一句：
StyleManager.loadStyleDeclarations(value);
这一句就是将配置的样式文件载入到我们的系统中。
第三，我们看看自定义事件是如何组织的，事件的组织主要在EventBus.as和AppEvent.as中，前者负责分发事件，后者定义事件。在此不多介绍，以后专门介绍。
第四，程序总体组织SiteContainer，其将所有的这些组件，配置全部在这个SiteContainer里面进行定义，保证系统中获取的对象都是同一个对象，那就是在SiteContainer中定义的对象。SiteContainer本身也是静态的，就是在整个系统中只有一个 Sitecontainer，这样我们就可以通过它方便的获取各个控件中的信息。自定义事件的分发也是由他完成。以后文章会具体介绍。
第五，主窗体Index.mxml中信息加载，我们整个Application的显示完成有主窗体完成。其中的代码段为：
这一句就是使用静态的SiteContainer，并将SiteContainer中的组件进行实例化，然后在SiteContainer中实例化完成后，将这些对象加到应用程序中，完成最终的程序显示。
3、如何获取对象。
了解了上面的结构我们不难发现，所有的对象我们都可以在SiteContainer中找到，那么获取对象的方法我们就不难找到了。
例如获取地图对象。
通过SiteContainer.getInstance().mapManager，我们可以获取到map的管理类，那么获取地图对象就很简单了，我们只需在mapManager中加入返回map控件的函数getMap
将map对象返回回来，就可以了，是不是很方便？
至此，我们就把整个的结构说完了。有不足之处请网友指出
简单结构图如下：
最新评论