Set dataprovider of buttonbar component

I am trying to add a navigation component with a button bar in it that controls the view stack of the main application. Here is what I have so far for the main application's code:

 <?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" >
            </开发者_如何学Cs: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>

And the component code:

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

I receive a compile error from the component: Access of undefined property myViewStack. Am I referencing the variable myViewStack incorrectly? I am still trying to understand how bindings work.

---

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>

Main

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

Should also be noted that you could always just extend ButtonBar in your custom component instead depending what you're trying to accomplish by creating that component.

---

You should move public var myViewstack:ViewStack field declaration into your component. Think about MXML components as ordinary classes according with OOP conceptions. So for your code:

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

and

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