Flex / MXML：狀態中的狀態？

Question

我想將狀態賦予應用程序的元素，最好不要為陽光下的所有事物創建組件。

我在此處提供了一個嘗試此示例的示例（應用程序具有兩個狀態；兩個BorderContainer代表這兩個狀態，在這些BorderContainers中，我想具有多個可控制的狀態）。

我收到如下錯誤：

組件無法在狀態“ a1b1”內實現，因為祖先已從“ a1b1”中排除。

和

此處不允許使用屬性“狀態”的初始化程序

代碼包括在下面。

<?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" applicationDPI="160"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               currentState="a1"
               >
    <s:states>
        <s:State name="a1" />
        <s:State name="a2" />
    </s:states>

    <s:BorderContainer includeIn="a1" top="100" height="60" currentState="a1b1" id="a1c">
        <s:states>
            <s:State name="a1b1" />
            <s:State name="a1b2" />
        </s:states>
        <s:Button includeIn="a1b1" label="s1b1" fontSize="16" height="35" right="10" top="10" />
        <s:Button includeIn="a1b2" label="s1b2" fontSize="16" height="35" right="10" top="30" />
    </s:BorderContainer>

    <s:BorderContainer includeIn="a2" top="150" height="60" currentState="a2b1" id="a2c">
        <s:states>
            <s:State name="a2b1" />
            <s:State name="a2b2" />
        </s:states>
        <s:Button includeIn="a2b1" label="s2b1" fontSize="16" height="35" right="10" top="10" />
        <s:Button includeIn="a2b2" label="s2b2" fontSize="16" height="35" right="10" top="30" />
    </s:BorderContainer>
    <s:Button label="s1" fontSize="16" height="35" right="10" top="10" click="currentState='a1';"/>
    <s:Button label="s2" fontSize="16" height="35" right="10" top="50" click="currentState='a2';"/>
</s:Application>

我是否只是想讓Flex做一些它不做的事情？ 關於達到類似目的的最佳做法的建議是有幫助的，但是任何可以告訴我如何僅強制執行它（理想還是否）的方法都會更好。

謝謝！

Answer 1

最佳實踐是基於spark BorderContainer創建可重用的自定義組件。

現在為第一個錯誤：

組件無法在狀態“ a1b1”內實現，因為祖先已從“ a1b1”中排除。

這是因為a1c BorderContainer具有currentState="a1b1"但包含在另一個狀態includeIn="a1" 。

第二個錯誤：

此處不允許使用屬性“狀態”的初始化程序

您不能在這樣聲明的組件中定義狀態數組

<s:states>
    <s:State name="a1b1" />
    <s:State name="a1b2" />
</s:states>

這就像在他的一個實例中創建一個新的類屬性。

因此，對您來說最好的方法是執行以下操作：

自定義BorderContainer組件： CustomBorderContainer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" 
                   width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
        <s:states>
            <s:State name="a1b1" />
            <s:State name="a1b2" />
        </s:states>

    <s:Button includeIn="a1b1" label="s1b1" fontSize="16" height="35" right="10" top="10" />
    <s:Button includeIn="a1b2" label="s1b2" fontSize="16" height="35" right="10" top="30" />

</s:BorderContainer>

並像這樣使用它：

<?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" applicationDPI="160"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:local="*"
               currentState="a1" >
    <s:states>
        <s:State name="a1" />
        <s:State name="a2" />
    </s:states>

    <local:CustomBorderContainer includeIn="a1" top="100" id="a1c" />
    <local:CustomBorderContainer includeIn="a2" top="150" id="a2c" />

    <s:Button label="s1" fontSize="16" height="35" right="10" top="10" click="currentState='a1';"/>
    <s:Button label="s2" fontSize="16" height="35" right="10" top="50" click="currentState='a2';"/>
</s:Application>

最終結果如下所示：