Saturday 8 January 2011

adobe Flex4 AS3.0, Canvas component is abandoned!!! which is our new game?

Which component will replace the favorite Canvas?
Play with spark.Group container! I say "play" because you have to do some work.
Read how you can do the same things in flex4 and spark components.
Note!: this post doesn't cover components and general solution with skin-able components!

History:
Fact is that canvas was the favorite object for lo fex4 level programming. Now Adobe is messing up our code saying that will not support any more the Canvas object, instead will work with Group container object. The good news is whatever complex is Group, it is lighter and more flexible than Canvas.

Problem:
Which is the new component?

Solution:
There are 2 respectively components instead of canvas. The Bordercontainer is subclass of SparkContainer and it is skinable. But it is heave in swf size and it is not good for low level programming. 

The Group component:
  • is almost like a Canvas, 
  • more lighter in swf , 
  • it is not skin-able,
  • it doesn't scroll its contain
  • and by default the contained stuff is appeared also outside of its region!
To make the Group component to work like the old (and favorite) Canvas you have to do:

1. Set the Group property clipAndEnableScrolling to true, so the contents will be appeared on their parts in the region of Group.

2. Add scroll bars. Add a Scroller Component into your stage, and in Scroller  add a Group component, so the Group will be in the Scroller component. Set the vertical/horizontalScrollPolicy to true as you desire. Scroller component doesn't accept simple components like Label.

3. Visual Anchors / constraints of our container

on design time...
Group should have Width and Height the value "100%" (this value is accepted on design time). With this value, the group will always stretched in Scroller's maximu area its time.

Scroller may have any kind of Constraints or absolute x,y,width&height, the location of the Scroller will define the location of our Group.


...keep coding...

No comments:

Post a Comment