7 Replies Latest reply on Oct 29, 2010 8:16 AM by suludi81

    NavigatorContent problem

    suludi81

      I have 3 custom components/views in a ViewStack and a ButtonBar whose data provider is the ViewStack.My components are all based on NavigatorContent,

      so that they can be put into MX navigation container.

       

      I wanted to apply simple wipe effect to the components,so when clicking buttons in the buttonBar provides some simple transitions.Basically i created a WipeRight and WipeLeft effects,and applied them to the components ShowEffect and HideEffect events.Instead of a nice transition,i am getting the following error:addChild() is not avalaible in this class,use addElement or modify the skin,if you have one.

       

      Is it something related to the NavigarorContent,because this should really be a simple thing to do?

        • 1. Re: NavigatorContent problem
          suludi81 Level 1

          Because english is not my first language,i will try to refrase my question  a little bit.Why i can't apply efects to NavigatorContent based custom components(which are put inside a ViewStack) ,so when i toggle buttons in a button bar i can see a nice transition effect.

           

          If i make my componts based on old MX containers everything is working fine,but of course that is not the solution.Anyone,please??

           

           

           

          Mirko

          • 2. Re: NavigatorContent problem
            Evtim Georgiev (Adobe) Level 2

            Hi Mirko,

             

            You said you created a custom effect, what does the code look like? Are you using AddChild or AddChildAction? If so, then you may need to switch them with the spark effect AddAction and RemoveAction.

             

            -Evtim

            • 3. Re: NavigatorContent problem
              suludi81 Level 1

              Thanks for your reply,i didn't created custom effects,i just created mx:WipeRight and mx:WipeLeft effects.Basically my problem is that when using ViewStack in Flex 4 it only works with NavigatorContent based custom components.

               

              That's where my problems begin,i am used to applying simple transition effects when changing components of the ViewStack(fade,wipe,etc),but when componets inherit from NavigatorContent it doesn't work.It all works well if my componets inherit from let's say Canvas,Hbox,Vbox-any MX component.

              So i need a way to apply effects and transitions to NavigatorContent powered ViewStack.

              • 4. Re: NavigatorContent problem
                Evtim Georgiev (Adobe) Level 2

                Ah, I see. Try using the spark Wipe effect instead (you set the direction property to configure it). I don't think the Halo Wipe effects support Spark containers.

                 

                -Evtim

                • 5. Re: NavigatorContent problem
                  suludi81 Level 1

                  Hi Evtim,i tried that too,but i just can't get it to work.Maybe you can get it to work if i provide some more info.In flex 3 i declare mx:WipeRight and mx:WipeLeft,

                  then i put my custom components inside a ViewStack,which is a data provider for LinkBar.Then inside the ViewStack i set every components ShowEffect and

                  HideEffect events to WipeRight and WipeLeft respectively,and when toggling LinkBar i get a wipe effect when changing views.

                   

                  If you could repeat this process in Flex 4,the only difference is that the custom components are based on NavigatorContent containers.

                  I tried using both the old MX wipe effects and new s:wipe but i can't get no wipe transitions.

                  This should be a easy thing to do,but i'm just stuck.Please help!!

                   

                   

                  Mirko

                  • 6. Re: NavigatorContent problem
                    Evtim Georgiev (Adobe) Level 2

                    Hi Mirko,

                     

                    I looked a little bit more into this. You can still use the spark Wipe, but it's not straightforward to use it outside of transitions. Probabbly for this case it's best to use a mx:Box container instead of s:NavigatorContent.

                    If you still want to use the spark Wipe, you'd have to declare it, explicitly set the "bitmapFrom" property - a bitmap from which to transition, and in addition to that you'd need to validateNow() on "show" of the NavigatorContent so that the s:Wipe can capture the correct destination bitmap. Then the s:Wipe will run a shader to animate between the strat bitmap and the end bitmap.

                     

                    Here's smple code with both approaches:

                     

                    <?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" minWidth="955" minHeight="600">
                        <fx:Script>
                            <![CDATA[
                                import mx.effects.Fade;
                                import mx.effects.WipeLeft;
                                import mx.effects.WipeRight;
                               
                                import spark.effects.Fade;
                                import spark.effects.Wipe;
                               
                                [Bindable]
                                private var bmp:BitmapData = new BitmapData(1, 1);
                            ]]>
                        </fx:Script>
                        <fx:Declarations>
                            <s:Wipe id="wipe" duration="200" direction="down" disableLayout="true" bitmapFrom="{bmp}"/>
                        </fx:Declarations>
                       
                        <s:layout>
                            <s:VerticalLayout/>
                        </s:layout>
                       
                        <mx:LinkBar dataProvider="{viewStack}"/>
                        <mx:ViewStack id="viewStack">

                     

                            <mx:Box label="1" showEffect="{WipeLeft}">
                                <s:Button label="Button1" id="b1"/>
                            </mx:Box>

                     

                            <mx:Box label="2" showEffect="{WipeRight}">
                                <s:Button label="Button2"/>
                            </mx:Box>
                           
                            <s:NavigatorContent label="3" showEffect="{wipe}" id="k" show="{k.validateNow();}">
                                <s:Button label="Button3"/>
                            </s:NavigatorContent>
                        </mx:ViewStack>
                    </s:Application>

                     

                     

                    -Evtim

                    • 7. Re: NavigatorContent problem
                      suludi81 Level 1

                      Hi Evtim,

                       

                      thank you for your time,yes it seems that wipe is really not that straightforward anymore when used outside of transition.Regarding the mx:Box instead

                      NavigatorContent,it was the first thing to cross my mind,but the problem is that i use many effects and transitions that can be only done in Flex 4 and that rely heavily on new state syntax,so when using mx:Box i get many errors,but i will try to convert that code.

                       

                      I did tried your provided code,two mx:Box containers are working,but the NavigatorContent one is not working(not showing any wipe effect).

                      Will continue trying something on my own,in worst case will use old effects.

                      Once again thank you for clearing this thing up.

                       

                      Mirko