Flex/MXML：状态内状态？

Question

我想给各国的应用，最好的元素，而的一切在阳光下创建组件。

我已经包括在这里的例子，它试图此（应用有两种状态;二BorderContainers代表这两个，而那些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

的最佳做法是创建一个基于火花一个使用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> 

最后的结果是这样的：