组元素在 adobe flex 3 中不起作用

Question

我正在尝试在 adobe flex 3 中创建带有关闭按钮的多个选项卡。为此，我创建了父对象和子对象。选项卡的父对象和关闭按钮的子对象，并在名为“addButton()”的函数中按语法将这两个对象放在组容器中。我的代码在 adobe flex 4.5 中运行良好，但在 adobe flex 3 中无法运行。由于某种原因，我必须使用 adobe flex 3。我尝试过其他容器，例如：HBox、controllbar 等，但这些无法制作正确的选项卡视图。下面是代码。

 <?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="127" minHeight="34" backgroundColor="#F4E8E8">
    <s:layout>
        <s:FormItemLayout/>
    </s:layout>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>


<fx:Script>
    <![CDATA[
    import mx.graphics.SolidColor;

    import spark.components.Button;

    import spark.components.Group;

    import spark.primitives.Rect;

    public function addButton():void {

        //Child Object
        var myButton:Button = new Button();
        myButton.id = "dd";
        myButton.label="X";
        myButton.width = 40;
        myButton.height = 20;
        myButton.depth =1;
        myButton.x=50;
        myButton.setStyle("color",'red');
        myButton.addEventListener(MouseEvent.CLICK, btn);

        //Parent Object
        var lble:Group = new Group();
        var solidColor:SolidColor = new SolidColor(0xFF0000);
        var rec:Rect = new Rect();

        rec.fill = solidColor;
        rec.percentWidth = 100;
        rec.percentHeight = 100;
        lble.width = 127;
        lble.height = 34;
        lble.depth =0;
        lble.addElement(rec);
        lble.addEventListener(MouseEvent.CLICK, lable);
        lble.addElement(myButton);
        myGroup.addElement(lble);

    }

    private function btn(e:Event):void {
        e.stopPropagation();
        jj.text = 'Text For Button';
    }

    private function lable(e:Event):void {
        kk.text = "Text For Label";
    }

    ]]>
</fx:Script>

<s:HGroup id="myGroup">
    <s:Button width="126" height="34" click="addButton();" label="Click" skinClass="spark.skins.spark.ButtonSkin"/>
</s:HGroup>

<s:Label id="jj" x="14" y="150" width="1200" height="50" backgroundColor="gray" text="Button"/>
<s:Label id="kk" x="14" y="69" width="1200" height="50" backgroundColor="gray" text="Label"/>

</s:Application>  

请帮帮我

Answer 1

1) 组元素（容器）在 Flex 3 中不起作用：

它在 Flex 3 中肯定行不通，Flex 3 和 Flex 4 或 mx(halo) 和 spark(Gumbo) 之间存在主要区别。如果要将组件从 spark 转换为 mx 或反之，则需要对这两件事有清晰的了解。

这是一篇很好的文章，解释了 Difference between Flex 3 and Flex 4

2) 我正在尝试在 adobe flex 3 中创建带有关闭按钮的多个选项卡：

由于 Flex 是一个 10 年成熟的框架，因此有大量可用的开源组件，您不必从头开始创建组件。但我感谢您尝试以自己的方式做这件事。

在开始创建组件之前先了解一下

Flex 3 Component Life cycle

Flex 4 Component Life cycle and Creating Advanced spark components

Spark Tab with close button

Flex 3 SuperTabNavigator FlexLib component

Flex: How to add a tab close button for TabNavigator component

Answer 2

您可以使用 Box 作为 mx 组件。以下是您可以在 flex 3 中执行的操作：

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
    import mx.containers.Box;

    public function addButton():void {

        //Child Object
        var myButton:Button = new Button();
        myButton.id = "dd";
        myButton.label="X";
        myButton.width = 40;
        myButton.height = 20;
        myButton.x=50;
        myButton.setStyle("color",'red');
        myButton.addEventListener(MouseEvent.CLICK, btn);

        //Parent Object
        var box:Box = new Box();
        box.setStyle("borderThickness", "1");
        box.setStyle("borderStyle", "solid");
        box.setStyle("borderColor", "black");
        box.setStyle("backgroundColor", "0xFF0000");
        box.width = 127;
        box.height = 34;
        box.addEventListener(MouseEvent.CLICK, lable);
        box.addChild(myButton);
        myHBox.addChild(box);

    }

    private function btn(e:Event):void {
        e.stopPropagation();
        jj.text = 'Text For Button';
    }

    private function lable(e:Event):void {
        kk.text = "Text For Label";
    }

    ]]>
</mx:Script>

<mx:HBox id="myHBox">
    <mx:Button width="126" height="34" click="{addButton();}" label="Click"/>
</mx:HBox>

<mx:Label id="jj" x="14" y="150" width="1200" height="50" text="Button"/>
<mx:Label id="kk" x="14" y="69" width="1200" height="50" text="Label"/>

</mx:Application>