Question

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

 <?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？我仍然试图了解绑定是如何工作的。

Answer 1

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

<?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>

Answer 2

<强> 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，而不是根据您要通过创建该组件来完成的操作。

设置buttonbar组件的dataprovider

2 个答案: