Flex/MXML：国中之国？

Question

我想为应用程序的元素提供状态，最好不为阳光下的一切创建组件。

我在此处提供了一个尝试此操作的示例（应用程序有两个状态；两个 BorderContainer 代表这两个状态，在这些 BorderContainer 中，我希望有多个可控状态）。

我收到如下错误：

Component cannot be realized within state 'a1b1' because an ancestor is excluded from 'a1b1'.

和

Initializer for property 'states' is not allowed here

下面包含代码。

<?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 创建可重用的自定义组件。

现在第一个错误：

Component cannot be realized within state 'a1b1' because an ancestor is excluded from 'a1b1'.

这是因为 a1c BorderContainer 有一个 currentState="a1b1" 但包含在另一个状态 includeIn="a1" .

第二个错误：

Initializer for property 'states' is not allowed here

您不能像这样在声明的组件中定义状态数组

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

这就像在他的一个实例中创建一个新的 class 属性。

所以，对你来说最好的方法是做这样的事情：

自定义 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>

最终结果如下所示：

Flex/MXML：国中之国？

Flex/MXML: states within states?

apache-flex

mxml

flash-builder

flex4