在Flex中动态加载组件4 [英] Loading Components Dynamically in Flex 4

查看:160
本文介绍了在Flex中动态加载组件4的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个应用程序,我动态地在TabNavigator中创建选项卡。正如你可以看到,根据我的代码,我基本上有5个选项卡具体的名称。现在我还有5个mxml组件与标签名称相同(这就是mxml组件的名称与Tab1,Tab2等选项卡相同)。非动态的方式是使用myTab1:Tab1 = new Tab1(); myTab1:Tab2 = new Tab2);因此,我将不得不为每个我不想要的标签。
我想做的是在我循环访问数组时加载每个选项卡中的mxml组件。希望我很清楚。

 <?xml version =1.0encoding =utf-8?> 
< s:应用程序xmlns:fx =http://ns.adobe.com/mxml/2009
xmlns:s =库://ns.adobe.com/flex/spark
xmlns:mx =library://ns.adobe.com/flex/mxminWidth =955minHeight =600>
< fx:脚本>
<![CDATA [
import mx.containers.VBox;
import mx.controls.Label;
import mx.events.FlexEvent;
import spark.components.NavigatorContent;


protected function tabNavigator_creationCompleteHandler(event:FlexEvent):void
{

var superModules:Array = [Tab1,Tab2, TAB3\" , TAB4, Tab5];
(每个超级模块中的var superModule)
{
var myNavigatorContent:NavigatorContent = new NavigatorContent();
myNavigatorContent.percentHeight = 100;
myNavigatorContent.percentWidth = 100;
myNavigatorContent.label = superModule;
myNavigatorContent.addChild(superModule as DisplayObject);
tabNavigator.addChild(myNavigatorContent);

}


}

]]>
< / fx:脚本>
< fx:声明>
<! - 将非视觉元素(例如服务,价值对象)放在这里 - >
< / fx:声明>
< mx:TabNavigator id =tabNavigatorwidth =100%height =100%creationComplete =tabNavigator_creationCompleteHandler(event)>
< / mx:TabNavigator>
< / s:应用程序>

有人可以帮助实现这一点。
非常感谢


解决方案

是的,你可以做到。请找到我的解决方案。

 < s:应用程序xmlns:fx =http://ns.adobe.com/mxml/2009
xmlns:s =library://ns.adobe.com/flex/spark
xmlns:mx =library://ns.adobe.com/flex/mxminWidth =955 =了minHeight 600 >
< fx:脚本>
<![CDATA [
import mx.containers.VBox;
import mx.controls.Label;
import mx.core.IVisualElement;
import mx.core.UIComponent;
import mx.events.FlexEvent;

import spark.components.NavigatorContent;

/ *由于链接器和编译器不添加代码中没有引用的
类,Tab1,Tab2类未与应用程序
一起编译。

即使你永远不会使用_dummyVarToAddTabToAppCompilation1
变量,有必要使用该行来指示编译器
在编译中包含Tab1,Tab2 * /

private var _dummyVarToAddTabToAppCompilation1:Tab1;
private var _dummyVarToAddTabToAppCompilation2:Tab2;

protected function tabNavigator_creationCompleteHandler(event:FlexEvent):void
{

var superModules:Array = [Tab1,Tab2];
(每个超级模块中的var superModule)
{
var myNavigatorContent:NavigatorContent = new NavigatorContent();
myNavigatorContent.percentHeight = 100;
myNavigatorContent.percentWidth = 100;
myNavigatorContent.label = superModule;
//将类名转换为Class对象。
var cls:Class = getDefinitionByName(superModule)as Class;
//创建一个新的类的实例。
var instance:UIComponent = new cls();
myNavigatorContent.addElement(instance);
tabNavigator.addChild(myNavigatorContent);
}
}

]]>
< / fx:脚本>
< fx:声明>
<! - 将非视觉元素(例如服务,价值对象)放在这里 - >
< / fx:声明>
< mx:TabNavigator id =tabNavigatorwidth =100%height =100%creationComplete =tabNavigator_creationCompleteHandler(event)>
< / mx:TabNavigator>


I have an application whereby I am creating tabs in a TabNavigator dynamically. As you can see as per my codes I am basically having 5 tabs with specific names. Now I also have 5 mxml components with the same names as the tabs (that is the names of the mxml components are same as the tabs, that is Tab1,Tab2 etc. The non-dynamic way would be to use myTab1:Tab1 = new Tab1();myTab1:Tab2 = new Tab2); etc. Thus I will have to do this for each tab which I don't want. What I want to do is to load the mxml components in each tab while I am looping through the Array. Hope I am clear enough.

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
        <fx:Script>
            <![CDATA[
                import mx.containers.VBox;
                import mx.controls.Label;
                import mx.events.FlexEvent;
                import spark.components.NavigatorContent;


                protected function tabNavigator_creationCompleteHandler(event:FlexEvent):void
                {

                    var superModules:Array =["Tab1","Tab2","Tab3","Tab4","Tab5"];
                    for each (var superModule in superModules)
                    {
                        var myNavigatorContent:NavigatorContent = new NavigatorContent();
                        myNavigatorContent.percentHeight = 100;
                        myNavigatorContent.percentWidth = 100;
                        myNavigatorContent.label = superModule;
                        myNavigatorContent.addChild(superModule as DisplayObject);
                                        tabNavigator.addChild(myNavigatorContent);

                    }   


                }

            ]]>
        </fx:Script>
        <fx:Declarations>
            <!-- Place non-visual elements (e.g., services, value objects) here -->
        </fx:Declarations>
        <mx:TabNavigator id="tabNavigator" width="100%" height="100%" creationComplete="tabNavigator_creationCompleteHandler(event)">
        </mx:TabNavigator>
    </s:Application>

  Can somebody help on achieving this. 
    Many thanks.

解决方案

Yes you can do it.Please find my solution below.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
    <![CDATA[
        import mx.containers.VBox;
        import mx.controls.Label;
        import mx.core.IVisualElement;
        import mx.core.UIComponent;
        import mx.events.FlexEvent;

        import spark.components.NavigatorContent;

        /*The class "Tab1","Tab2" not compiled with the application 
        because the linker and the compiler do not add classes 
        that are not referenced in the code.

        Even though you’ll never use the _dummyVarToAddTabToAppCompilation1 
        variable it is necessary to use that line to instruct the compiler 
        to include Tab1,Tab2 in the compilation.*/

        private var _dummyVarToAddTabToAppCompilation1:Tab1;
        private var _dummyVarToAddTabToAppCompilation2:Tab2;

        protected function tabNavigator_creationCompleteHandler(event:FlexEvent):void
        {

            var superModules:Array =["Tab1","Tab2"];
            for each (var superModule in superModules)
            {
                var myNavigatorContent:NavigatorContent = new NavigatorContent();
                myNavigatorContent.percentHeight = 100;
                myNavigatorContent.percentWidth = 100;
                myNavigatorContent.label = superModule;
                // Convert class name to Class object.
                var cls:Class = getDefinitionByName(superModule) as Class;
                // Create a new instance of the class.
                var instance:UIComponent = new cls();
                myNavigatorContent.addElement(instance);
                tabNavigator.addChild(myNavigatorContent);
            }   
        }

    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:TabNavigator id="tabNavigator" width="100%" height="100%" creationComplete="tabNavigator_creationCompleteHandler(event)">
</mx:TabNavigator>

这篇关于在Flex中动态加载组件4的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆