Chuck FreedmanA lot of Flex developers resort to Flex ‘states’ when adding interactivity and transitions to their applications. I built the sample below to show a colleague that using Flex ‘effects’ are some times easier and involve less code than ‘states’. This simple example (very beginner) shows how you could build a slide out menu bar without the use of states, which I consider a bit difficult to maintain and skin. The code is available for you just below the working sample.
Click the button on the yellow panel to see it slide out like a shelf.
You can cut and paste this code into your FlexBuilder project and test it out. Feel free to use this in any project or app you are working on.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ [Bindable] private var bPanelStartX:Number = 0; private var bPanelEndX:Number = 0; //set position values for back panel private function init():void { bPanelStartX = frontPanel.x - 25; bPanelEndX = frontPanel.x - 100; } public function movePanel():void { //set target of move transition panelMover.target = backPanel; //determine direction of panel based on position if (backPanel.x == bPanelStartX) { panelMover.xFrom = bPanelStartX; panelMover.xTo = bPanelEndX; } else { panelMover.xFrom = bPanelEndX; panelMover.xTo = bPanelStartX; } //play transition panelMover.play(); } ]]> </mx:Script> <mx:Canvas id="backPanel" width="250" height="250" x="{bPanelStartX}" verticalCenter="0" backgroundColor="#FFFF00" backgroundAlpha="1.0"> <mx:Button click="movePanel()" x="0" verticalCenter="0" width="25"/> </mx:Canvas> <mx:Canvas id="frontPanel" width="250" height="250" horizontalCenter="0" verticalCenter="0" backgroundColor="#FF0000" backgroundAlpha="1.0"> </mx:Canvas> <mx:Move id="panelMover" /> </mx:Application> |
If you know or a more simple way to do this, please feel free to post it on your blog and comment the URL here. If you’ve got other examples of using transitions without states, feel free to post those as well.
Use of states and transitions vs effects seems to be a personal choice. I prefer states and transitions because it involves far lesser code, but another developer on our team whom I regard highly uses states sparingly. Definitely it is a good point of debate. Would love more information and views on this.
Any ideas on how to implement absolute positioning layer in Flex without using absolute positioning for everything?
The “right” way (without states) is:
You should never allow effects to define the way the view will look. Effects should happen between the changes of the view aspect. This is where states makes sense. You define a view that looks like A, and B. And then you define that for going from A to B, some kind of animations will occur. You should never say that “for the view to look like B, the effect needs to happen”. This creates a dependency on the effect (and a lot of code) (and problems refactoring).