设置按钮栏组件的dataprovider答案

【问题标题】：Set dataprovider of buttonbar component设置按钮栏组件的dataprovider
【发布时间】：2011-04-19 16:11:05
【问题描述】：

我正在尝试添加一个导航组件，其中包含一个按钮栏，用于控制主应用程序的视图堆栈。以下是我目前掌握的主应用程序代码：

 <?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" 
               xmlns:comps="comps.*" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var myViewStack:ViewStack;;
        ]]>
    </fx:Script>
    <fx:Binding source="lgViewStack" destination="myViewStack"/>

    <comps:viewControl id="myControl" width="935" horizontalCenter="0" top="5" height="134"/>
    <mx:ViewStack id="lgViewStack" width="935" height="474" left="10" verticalCenter="66">
        <s:NavigatorContent label="View 1" width="100%" height="100%" id="view1">
            <s:Panel id="firstPanel" title="First Panel" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
            </s:Panel>
        </s:NavigatorContent>
        <s:NavigatorContent label="View 2" width="100%" height="100%" id="view2">
            <s:Panel id="secondView" title="Second View" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
            </s:Panel>
        </s:NavigatorContent>
    </mx:ViewStack>
</s:Application>

以及组件代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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:ButtonBar x="170" y="10" width="58" dataProvider="{myViewStack}"/>
</s:Group>

我收到来自组件的编译错误：未定义属性 myViewStack 的访问。我是否错误地引用了变量 myViewStack？我仍在尝试了解绑定的工作原理。

【问题讨论】：

标签： apache-flex data-binding mxml flash-builder

【解决方案1】：

ViewControl

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
           public function set dataProvider(value:ViewStack):void
           {
              bar.dataProvider = value;
           }

           public function get dataProvider():ViewStack
           {
              return bar.dataProvider;
           }
        ]]>
    </fx:Script>
    <s:ButtonBar id="bar"/>
</s:Group>

主要

<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" 
               xmlns:comps="comps.*">
    <comps:ViewControl dataProvider="{viewstack}"/>
    <mx:ViewStack id="viewstack" />
</s:Application>

还应注意，您始终可以在自定义组件中扩展 ButtonBar，而不是根据您通过创建该组件来尝试完成的任务。

【讨论】：

这几乎可以工作。我现在在这里遇到一个错误：public function get dataProvider():ViewStack { return myBar.dataProvider; } 将具有静态类型 mx.collections:IList 的值隐式强制转换为可能不相关的类型 mx.containers:ViewStack
哦对了，你需要把它转换回 Viewstack：return Viewstack(bar.dataProvider);
效果很好，谢谢。我很想知道您在我的组件中扩展 ButtonBar 是什么意思。如果你有时间，你能发布一个简单的例子吗？
在您的 ViewControl 中，不要使用 <s:Group> 作为主标签，而是使用 <s:ButtonBar>，但您需要删除 dataProvider，因为它已经在按钮栏中定义。使用任意标签作为根标签，相当于在 Actionscript 中做public class ViewControl extends ButtonBar。

【解决方案2】：

您应该将public var myViewstack:ViewStack 字段声明移动到您的组件中。将 MXML 组件视为符合 OOP 概念的普通类。所以对于你的代码：

<?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" 
           xmlns:comps="comps.*" minWidth="955" minHeight="600">
<comps:viewControl id="myControl" width="935" horizontalCenter="0" top="5" height="134" myViewstack="{lgViewStack}" />
<mx:ViewStack id="lgViewStack" width="935" height="474" left="10" verticalCenter="66">
    <s:NavigatorContent label="View 1" width="100%" height="100%" id="view1">
        <s:Panel id="firstPanel" title="First Panel" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
            <s:Label id="testSource" text="Text to copy" />
        </s:Panel>
    </s:NavigatorContent>
    <s:NavigatorContent label="View 2" width="100%" height="100%" id="view2">
        <s:Panel id="secondView" title="Second View" width="250" height="200" horizontalCenter="0" verticalCenter="0" >
        </s:Panel>
    </s:NavigatorContent>
</mx:ViewStack>
</s:Application>

和

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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:Script>
    <![CDATA[
        [Bindable]
        public var myViewstack:ViewStack;
    ]]>
</fx:Script>

<s:ButtonBar x="170" y="10" width="58" dataProvider="{myViewStack}"/>
</s:Group>

【讨论】：