3.23.使用IdeferredInstance 创建模板

2023-08-08 22:33:06

字体：大中小

来源：转载

供稿：网友

3.23.1 问题
现在你需要创建一个模板组件以处理传入的多种类型组件，同时也需要延迟实例化组件以提高启动效率。
3.23.2 解决办法
使用IdeferredInstance 标记来指定一个数组或者属性处理所有传入的组件类型，组件实例化的同时也创建它的子组件。
3.23.3 讨论
所有UIComponents 都实现IdeferredInstance 接口并且允许将子组件添加到某个数组中，然后在之后其父组件实例化的时候才实例化这些子组件。所有传入一个数组的类型为IdeferredInstance 的组件都会保存到它们添加到显示清单为止，如下所示：

-XML

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.containers.HBox;
import mx.containers.ViewStack;
import mx.core.UIComponent;
// Define a deferred property for the top component.
public var header:IDeferredInstance;
// Define an Array of deferred properties
// for a row of components.
[ArrayElementType("mx.core.IDeferredInstance")]
public var leftDataRow:Array;
[ArrayElementType("mx.core.IDeferredInstance")]
public var centerDataRow:Array;
[ArrayElementType("mx.core.IDeferredInstance")]
public var rightDataRow:Array;
public var layoutHBox:HBox;
public var layoutWidth:int = 0;
public function createDeferredComponents():void {
addChild(UIComponent(header.getInstance()));
layoutHBox = new HBox();
if(layoutWidth != 0){
layoutHBox.setStyle("horizontalGap", layoutWidth);
}i
if(leftDataRow.length > 0){
var leftVBox:VBox = new VBox();
layoutHBox.addChild(leftVBox);
for (var i:int = 0; i < leftDataRow.length; i++){
leftVBox.addChild(UIComponent(leftDataRow[i].getInstance()));
}
}i
if(centerDataRow.length > 0){
var centerVBox:VBox = new VBox();
layoutHBox.addChild(centerVBox);
for (var i:int = 0; i < centerDataRow.length;
i++)
{c
enterVBox.addChild(UIComponent(centerDataRow[i].
getInstance()));
}
}i
if(rightDataRow.length > 0){
var rightVBox:VBox = new VBox();
layoutHBox.addChild(rightVBox);
for (var i:int = 0; i < rightDataRow.length;
i++)
{
rightVBox.addChild(UIComponent(rightDataRow[i]
.getInstance()));
}
} // Add the HBox container to the VBox container.
addChild(layoutHBox);
}

]]>
</mx:Script>
</mx:VBox>

我们可以看到，在下的例子中，你可以传入任何继承了IdeferredInstance 对象的数组到一个组件，然后稍后再调用一个方法来将这些子组件添加到displayList 属性。虽然这个方法可以连接在异步或者其它任何时间后调用，但在该例中，明确的调用了该方法。

-XML

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="700"
height="500" xmlns:cookbook="oreilly.cookbook.*">
<mx:Script>
<![CDATA[
private function createDeferredInstance():void
{
this.deferredInstance.createDeferredComponents();
}

]]>
</mx:Script>
<mx:Button click="createDeferredInstance()"
label="make components"/>
<cookbook:DeferredInstance layoutWidth="30"
id="deferredInstance">
<cookbook:header>
<mx:Label text="This will be the header of my templated
component"/>
</cookbook:header>
<cookbook:leftDataRow>
<mx:Array>
<mx:Label text="data"/>
<mx:Label text="data"/>
<mx:Label text="data"/>
</mx:Array>
</cookbook:leftDataRow>
<cookbook:centerDataRow>
<mx:Array>
<mx:Button label="press me"/>
<mx:Label text="data"/>
</mx:Array>
</cookbook:centerDataRow>
<cookbook:rightDataRow>
<mx:Array>
<mx:CheckBox label="click"/>
<mx:Button label="press me"/>
<mx:Label text="data"/>
</mx:Array>
</cookbook:rightDataRow>
</cookbook:DeferredInstance>
</mx:Canvas>