8 Replies Latest reply on May 6, 2009 10:52 AM by Andre Brito

    ViewStack with LinkBar in other component.

    Andre Brito

      Hi people.

       

      I'm starting in Flex and I have a couple questions.

      One of them is this: how can I implement a ViewStack where the buttons that navigate through it are in other component?

       

      Something like this: I have a container C1. C1 has C2 (the LinkBar) and C3 (the ViewStack). How can C2 controls C3?

       

      I'm trying to use ActionScript and dataprovider. Something like this:

      <mx:Script>

           <![CDATA[

                [Bindable]

                public var dataP : String;

           ]]>

      </mx:Script>

       

      <!-- ... -->

       

      <mx:LinkBar dataProvider="{dataP}" direction="vertical"/>

       

      And my other component (C1) that calls this:

      <components:C2 id="c2" width="10%" dataP="viewStackHome"/>

      <mx:ViewStack id="viewStackHome">

           <components:BoxHome id="boxHome"/> <!-- vai pra esse com o Home que fica la em cima -->

           <components:PainelListaDeContatos id="painelDeContatos"/> <!-- botao de "Meus contatos" -->

      </mx:ViewStack>

       

      Could it be that I'm sendind the ViewStack id before creating it?

       

      Thanks!

      And ignore my bad english. I'm not very used to write technical things (and I'm not very fluent).

       

      But it's not working.

        • 1. Re: ViewStack with LinkBar in other component.
          Gregory Lafrance Level 6

          This should just work. Are you getting an error?

           

          In your main app you add you component for the LinkBar, and use that to control the ViewStack in the main app, correct? Like I said, once you add the LinkBar component to the main app you should be able to reference the ViewStack as the LinkBar component dataProvider.

           

          <?xml version="1.0"?>
          <!-- containers\navigators\VSLinkBar.mxml -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

              <mx:VBox>
                  <!-- Create a LinkBar control to navigate
                      the ViewStack container. -->
                  <mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid"/>

                  <!-- Define the ViewStack and the three child containers. -->
                  <mx:ViewStack id="myViewStack"
                      borderStyle="solid"
                      width="100%">
                     
                      <mx:Canvas id="search" label="Search">
                          <mx:Label text="Search Screen"/>
                      </mx:Canvas>

                      <mx:Canvas id="custInfo" label="Customer Info">
                          <mx:Label text="Customer Info"/>
                      </mx:Canvas>

                      <mx:Canvas id="accountInfo" label="Account Info">
                          <mx:Label text="Account Info"/>
                      </mx:Canvas>
                  </mx:ViewStack>
              </mx:VBox>
          </mx:Application>

          • 2. Re: ViewStack with LinkBar in other component.
            Andre Brito Level 1

            Hi Greg! Thansk for the answer.

             

            Actually, I'm not getting an error... It's just not working...

            I mean... I have one component in my main Application (this is the component where the LinkBar goes) and right above that, my ViewStack. Inside the ViewStack I have the others components.

             

            I can't look into this right now, but I'll try my best to fix this bug.

             

            One question that occurred: am I passing the String object in the right manner to the component that mantains the LinkBar?

             

            Thanks again! And sorry my english

            • 3. Re: ViewStack with LinkBar in other component.
              Gregory Lafrance Level 6

              The following code gives you two options:

              1) LinkBar and ViewStack are separate components, and they are put in a third component, and that third component is placed in the app.

              2) LinkBar and ViewStack are separate components, and they are put directly in the Application.

               

              -------------- MyLinkBar.mxml ----------------

              <?xml version="1.0" encoding="utf-8"?>
              <mx:LinkBar xmlns:mx="http://www.adobe.com/2006/mxml">
              </mx:LinkBar>

              -------------- MyViewStack.mxml ------------

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="200">
                <mx:ViewStack id="myViewStack" width="100%">
                  <mx:Canvas id="search" label="Search">
                    <mx:Label text="Search Screen"/>
                  </mx:Canvas>
                  <mx:Canvas id="custInfo" label="Customer Info">
                    <mx:Label text="Customer Info"/>
                  </mx:Canvas>
                  <mx:Canvas id="accountInfo" label="Account Info">
                    <mx:Label text="Account Info"/>
                  </mx:Canvas>
                </mx:ViewStack>
              </mx:VBox>

               

              ------------- MyLinkBarViewStack.mxml (used in scenario 1 above) -------------------

              <?xml version="1.0" encoding="utf-8"?>
              <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:myComp="*">
                <myComp:MyLinkBar dataProvider="{myVSComp.myViewStack}"/>
                <myComp:MyViewStack id="myVSComp"/>
              </mx:VBox>

              ---------------- MainApp.mxml (implements both scenarios in this one app) ---------------

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:comp="*">
                <comp:MyLinkBar dataProvider="{myVS.myViewStack}"/>
                <comp:MyViewStack id="myVS"/>
                <mx:Spacer height="50"/>
                <comp:MyLinkBarViewStack/>
              </mx:Application>

               

              If this post answers your question or helps, please mark it so.

              1 person found this helpful
              • 4. Re: ViewStack with LinkBar in other component.
                Andre Brito Level 1

                Hi Greg!
                Thanks a lot for the answer... And that kinda helped me, but it didn't fixed my problem: I tried to create a LinkBar directly in the Application, and that went very well! But didn't get for my real Application...

                 

                Here's the code from my Application:

                ...

                <components:Menu id="menuHome" myDataProvider="viewStackHome"/>

                 

                <mx:ViewStack id="viewStackHome">

                    <components:PanelOne id="one" label="One"/>

                 

                    <components:PanelTwo id="two" label="Two"/>

                </mx:ViewStack>

                ...

                 

                The Menu.mxml:

                 

                <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="components.*">

                    <mx:Script>

                        <![CDATA[

                         [Bindable]

                         public var myDataProvider : String;

                        ]]>

                    </mx:Script>

                 

                 

                    <mx:LinkBar id="linkBarViewStack" direction="vertical" dataProvider="{myDataProvider}"/>

                </mx:VBox>

                Isn't that right? I tried to take the "{" and "}" out, but it didn't worked. I tried to code a function in Menu.mxml to refresh the myDataProvider String variable, but it didn't worked either. This problem is driving me crazy! I can't get into something that works!
                Hugs!
                • 5. Re: ViewStack with LinkBar in other component.
                  Gregory Lafrance Level 6

                  The answer is todo the following in your Menu.mxml:

                   

                  [Bindable] public var myDataProvider:ViewStack;

                  --------------------------------------------------------------------------

                  <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="components.*">
                    <mx:Script>
                      <![CDATA[
                        import mx.containers.ViewStack;

                   

                        [Bindable] public var myDataProvider:ViewStack;
                      ]]>
                    </mx:Script>
                    <mx:LinkBar id="linkBarViewStack" direction="vertical" dataProvider="{myDataProvider}"/>
                  </mx:VBox>

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    xmlns:components="*">
                    <components:Menu id="menuHome" myDataProvider="{viewStackHome}"/>
                    <mx:ViewStack id="viewStackHome">
                      <mx:Panel id="one" label="One" width="300" height="300" backgroundColor="0xFF0000">
                        <mx:Label text="One" fontSize="20"/>
                      </mx:Panel>
                      <mx:Panel id="two" label="Two" width="300" height="300" backgroundColor="0x0000FF">
                        <mx:Label text="Two" fontSize="20"/>
                      </mx:Panel>
                    </mx:ViewStack>
                  </mx:Application>

                  • 6. Re: ViewStack with LinkBar in other component.
                    Andre Brito Level 1

                    Oh my God! This is beautiful! Hehehe. Thanks, Greg!

                     

                    BTW, what's the deal with the "{" and "}" in the attribution?

                    • 7. Re: ViewStack with LinkBar in other component.
                      Gregory Lafrance Level 6

                      That's Flex binding in action. You need the { } so the viewstack ID is "bound".

                      1 person found this helpful
                      • 8. Re: ViewStack with LinkBar in other component.
                        Andre Brito Level 1

                        Hmmm. Understood! Thansk a lot, Greg!