10 Replies Latest reply on Dec 13, 2010 7:39 AM by maeldanus

    Viewstack in Flex 4 ?

    maeldanus Level 1

      Hey guys,

       

      i really run into a problem and hope anyone of u can help / know a "nice" workaround.

       

       

       

      I wanna to realize an Effect like this: (That's the "navigation-concept" for my Application)

      http://www.efflex.org/orgefflexmxviewstackeffects/orgefflexmxviewstackeffectslist/#more-16

       

       

      I would use that framework "Efflex", but it didn't work realy.. That's because it uses viewstacks and i wanna use Spark-Components. (mx:viewstack + spark Child causes an Error )

       

       

      I saw a viewstack spark Component (in the Flex4 Cookbook) but that doesn't really work correctly...

       

       

      Anyone has any hint for me? It would be "awesome" :-) Also a great way for the effect itself without the framework would be great

       

       

      Greetings,

      Nico

        • 1. Re: Viewstack in Flex 4 ?
          flex2008 Level 3

          To use spark containers in ViewStack,wrap it in a spark NavigatorContent

           

          http://help.adobe.com/en_US/flex/using/WSb96f4baaef289fcf-2107ed10123b8e266e7-8000.html

          • 2. Re: Viewstack in Flex 4 ?
            maeldanus Level 1

            Hi,

             

            i allready tried that..

             

            <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:f4cb="com.oreilly.f4cb.*" xmlns:view="de.nicobarelmann.view.*" xmlns:viewStackEffects="org.efflex.mx.viewStackEffects.*">
               
               
                <fx:Declarations>
                    <viewStackEffects:List id="effect"  />
                   
                </fx:Declarations>
               
                <s:layout>
                   
                    <s:VerticalLayout />
                   
                </s:layout>
               
               
               
                <mx:ViewStack id="myViewStack">       
                    <s:NavigatorContent>
                        <view:CustomView backgroundColor="0xff00ff" showEffect="{this.effect}" hideEffect="{this.effect}" />           
                    </s:NavigatorContent>
                   
                   
                    <s:NavigatorContent>
                        <view:CustomView backgroundColor="0x0000ff" showEffect="{this.effect}" hideEffect="{this.effect}" />
                    </s:NavigatorContent>
                   
                   
                </mx:ViewStack>
               
                <s:ButtonBar dataProvider="{this.myViewStack}" />
            </s:Application>

             

            The Problem is, that no effect appears... I tried "showEffect="effect" and, as u can see, showEffect="effect"... It switches the views correctly, but without any tweening... Any suggestion?

             

            Greets, nico

            • 3. Re: Viewstack in Flex 4 ?
              iamcootis Level 1

              Have you tried it using states instead of a viewStack?

              • 4. Re: Viewstack in Flex 4 ?
                maeldanus Level 1

                Hm... Do u have a quick example?

                 

                 

                Greets, Nico

                • 5. Re: Viewstack in Flex 4 ?
                  iamcootis Level 1

                  Don't have any of my own examples, but here are some articles about how I would do it.

                   

                  http://www.switchonthecode.com/tutorials/flex-snippet-series-state-transitions

                   

                  http://www.artima.com/articles/flex_4_states.html

                   


                  • 6. Re: Viewstack in Flex 4 ?
                    maeldanus Level 1

                    Hi,

                     

                    thanks for the links - but it's not really the thing i am searching for

                     


                    I wana use it as a Navigation of the app, states isn't a good way - i think... :-(

                     

                     

                    Any other idea? (My different "states" of the applikation (Home-Screen, Options-Screen etc.) are all custom Components without any logic.

                    • 7. Re: Viewstack in Flex 4 ?
                      iamcootis Level 1

                      Moving from Flex 3 to Flex 4 I was reluctant to start using states as Navigation as well, but they've made some improvements and now they're easier to use than the viewStacks. I'm pretty sure using states is now the recommended way of doing things.

                      • 8. Re: Viewstack in Flex 4 ?
                        maeldanus Level 1

                        Hm,

                         

                        can u show me an example how u handle it?

                         

                        Do u set the visible property for your Elements, based on wich state is activ? That all don't see very well for me.

                         

                         

                        Greets, nico

                        • 9. Re: Viewstack in Flex 4 ?
                          iamcootis Level 1

                          This is straight out of the Flex 4 cookbook:

                           

                          <?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/halo"
                                         width="400" height="300"
                                         showEffect="{componentShowEffect}"

                                         hideEffect="{componentHideEffect}">
                            
                              <fx:Declarations>
                                  <s:Scale scaleXFrom="0" scaleXTo="1.0" duration="500"
                                           id="componentShowEffect"/>
                                  <s:Scale scaleXFrom="1.0" scaleXTo="0.0" duration="500"
                                           id="componentHideEffect"/>
                              </fx:Declarations>
                          </s:Application>

                           

                           

                          Basically you set up your states with show and hide Effects, and when you setCurrentState from your main application it will play the effect you've set.

                          • 10. Re: Viewstack in Flex 4 ?
                            maeldanus Level 1

                            Hey,

                             

                            Thanks for your example. But can u post a few more lines? Just that i get an idea about how i can programe the effect myself.