Comments on: Two Examples of Layout Animations http://evtimmy.com/2010/04/two-examples-of-layout-animations/ Evtim on Flex SDK Thu, 17 Nov 2011 17:57:25 +0000 hourly 1 http://wordpress.org/?v=3.2.1 By: Tim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11675 Tim Thu, 17 Nov 2011 17:57:25 +0000 http://evtimmy.com/?p=318#comment-11675 p.s. When I said descendant, I meant subclass. p.s. When I said descendant, I meant subclass.

]]> By: Tim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11674 Tim Thu, 17 Nov 2011 17:55:01 +0000 http://evtimmy.com/?p=318#comment-11674 Hi Evtim, Is there a simple way that a layout can determine whether its target is a ListBase (or descendant) so that it can automatically deal with selection? Thanks, Tim Hi Evtim,

Is there a simple way that a layout can determine whether its target is a ListBase (or descendant) so that it can automatically deal with selection?

Thanks,
Tim

]]> By: Yang http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11671 Yang Thu, 17 Nov 2011 04:23:21 +0000 http://evtimmy.com/?p=318#comment-11671 Hi Evtim, Thanks for sharing so much cool tips about layouts. Are there any scenarios where positioning elements in the component class is appropriate? For example in a tab bar component I created, I allow the user to click and drag the tab bar buttons to reorder the tabs (like Chrome). Therefore the positions of the tabs depend on user interaction (drag and drop) which should be the responsibility of the component class. Now if I were to move the positioning code to the layout class, I would need to either reference the layout class directly from the component class or use events to tell the layout class the desired position of an element (based on mouseX) and when to change the positions. Your thoughts? Regards, Yang Hi Evtim,
Thanks for sharing so much cool tips about layouts.
Are there any scenarios where positioning elements in the component class is appropriate?
For example in a tab bar component I created, I allow the user to click and drag the tab bar buttons to reorder the tabs (like Chrome). Therefore the positions of the tabs depend on user interaction (drag and drop) which should be the responsibility of the component class. Now if I were to move the positioning code to the layout class, I would need to either reference the layout class directly from the component class or use events to tell the layout class the desired position of an element (based on mouseX) and when to change the positions. Your thoughts?

Regards,
Yang

]]> By: Tim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11633 Tim Tue, 16 Aug 2011 11:16:30 +0000 http://evtimmy.com/?p=318#comment-11633 Thanks again Evtim - this is all solid gold advice! <a href="#comment-11630" rel="nofollow">@Evtim </a> Thanks again Evtim – this is all solid gold advice!
@Evtim

]]> By: Evtim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11630 Evtim Wed, 10 Aug 2011 05:41:19 +0000 http://evtimmy.com/?p=318#comment-11630 Hi Tim, This is a very good question! With custom layouts (or even custom layout code withing components), usually the most common pitfall is to cause unnecessary invalidations. For example a simple 2D layout should use setLayoutBoundsPosition() instead of setting the x/y properties. Setting x/y will actually invalidate properties, size and display list which will cause the layout to run again - inefficient (and sometimes could even lead to infinite loops). The same rule applies to 3D layouts - don't set properties like x, y, z, rotationX, rotationY, transform, transform.matrix3D, etc. from within the layout's updateDisplayList() method. Instead, the ILayoutElement interface should be used. For the 3D case in particular, there are two equally correct choices - ILayoutElement::setLayoutMatrix3D() and ILayoutElement::transformAround(). Just make sure you're passing "false" to the "invalidateLayout" parameter. Cheers, Evtim Hi Tim,

This is a very good question! With custom layouts (or even custom layout code withing components), usually the most common pitfall is to cause unnecessary invalidations. For example a simple 2D layout should use setLayoutBoundsPosition() instead of setting the x/y properties. Setting x/y will actually invalidate properties, size and display list which will cause the layout to run again – inefficient (and sometimes could even lead to infinite loops). The same rule applies to 3D layouts – don’t set properties like x, y, z, rotationX, rotationY, transform, transform.matrix3D, etc. from within the layout’s updateDisplayList() method. Instead, the ILayoutElement interface should be used. For the 3D case in particular, there are two equally correct choices – ILayoutElement::setLayoutMatrix3D() and ILayoutElement::transformAround(). Just make sure you’re passing “false” to the “invalidateLayout” parameter.

Cheers,
Evtim

]]> By: Tim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11629 Tim Tue, 09 Aug 2011 17:45:35 +0000 http://evtimmy.com/?p=318#comment-11629 Hi Evtim, Thank you for posting these examples and the presentation you gave on custom Spark layouts. They've been invaluable in helping me understand the concepts involved. There are many different ways that examples are laying out their elements in 3D space. I noticed you're using setLayoutMatrix3D(). Would you consider this the best/correct way to do so in a custom layout? Thanks, Tim Hi Evtim,

Thank you for posting these examples and the presentation you gave on custom Spark layouts. They’ve been invaluable in helping me understand the concepts involved.

There are many different ways that examples are laying out their elements in 3D space. I noticed you’re using setLayoutMatrix3D(). Would you consider this the best/correct way to do so in a custom layout?

Thanks,

Tim

]]> By: Evtim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11615 Evtim Wed, 20 Apr 2011 03:04:15 +0000 http://evtimmy.com/?p=318#comment-11615 @Philo Hi Philo, If you want to load images from disk, take a look at FlickrThumbnail.mxml - this is the Item Renderer source. You see the image is being loaded by the mx:Image component, through its source property like this "source="{data.thumbnail.url}"". Modify that line to something like "data.imagePath" and then modify your dataProvider to be an ArrayCollection of Objects, one Object per image, and each Object having a property "imagePath" of type String that is set to the path to the image. Hope that helps. @Philo
Hi Philo,
If you want to load images from disk, take a look at FlickrThumbnail.mxml – this is the Item Renderer source. You see the image is being loaded by the mx:Image component, through its source property like this “source=”{data.thumbnail.url}”". Modify that line to something like “data.imagePath” and then modify your dataProvider to be an ArrayCollection of Objects, one Object per image, and each Object having a property “imagePath” of type String that is set to the path to the image. Hope that helps.

]]> By: Evtim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11613 Evtim Wed, 20 Apr 2011 02:49:21 +0000 http://evtimmy.com/?p=318#comment-11613 @Bruno Hi Bruno, I'm not exactly sure what you mean by "in the middle", but I think it should be possible. I imagine that you can add additional property on the WheelLayout - like index of the item to be specially treated. Then in updateDisplayList() you'll layout that item in the special way you describe. From your application you'll set/update that property on the WheelLayout and the layout would need to invalidate and re-layout - take a look at how the rest of the WheelLayout properties do the invalidations. @Bruno
Hi Bruno,
I’m not exactly sure what you mean by “in the middle”, but I think it should be possible. I imagine that you can add additional property on the WheelLayout – like index of the item to be specially treated. Then in updateDisplayList() you’ll layout that item in the special way you describe. From your application you’ll set/update that property on the WheelLayout and the layout would need to invalidate and re-layout – take a look at how the rest of the WheelLayout properties do the invalidations.

]]> By: Evtim http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11611 Evtim Wed, 20 Apr 2011 02:42:19 +0000 http://evtimmy.com/?p=318#comment-11611 @Bula Hi Bula, sorry took so long to reply. I think this might be a bug in DataGroup's updateDisplayList(), I just gave it a quick look and I see that we don't check the "autoLayout" flag in there... If that's the problem indeed, we should get this logged - https://bugs.adobe.com/flex/ A work-around would be to subclass DataGroup, override updateDisplayList() and if "autoLayout" is false, return, else call the super.updateDisplayList(). @Bula
Hi Bula, sorry took so long to reply. I think this might be a bug in DataGroup’s updateDisplayList(), I just gave it a quick look and I see that we don’t check the “autoLayout” flag in there… If that’s the problem indeed, we should get this logged – https://bugs.adobe.com/flex/
A work-around would be to subclass DataGroup, override updateDisplayList() and if “autoLayout” is false, return, else call the super.updateDisplayList().

]]> By: Bruno http://evtimmy.com/2010/04/two-examples-of-layout-animations/comment-page-1/#comment-11607 Bruno Thu, 20 Jan 2011 12:14:54 +0000 http://evtimmy.com/?p=318#comment-11607 more one thing, the image can be on two positions, at the middle when viewing the imagens on a 2D perpective by rotating the axis to the depth plane. OR above the others when viewing the images on 3D with the axis on a Vertical plane ... Thanks, Bruno more one thing, the image can be on two positions, at the middle when viewing the imagens on a 2D perpective by rotating the axis to the depth plane. OR above the others when viewing the images on 3D with the axis on a Vertical plane …

Thanks,

Bruno

]]>