1 person found this helpful
We hope you can use the new Spark components whenever possible. Group is the basic, chromeless container. SkinnableContainer is our basic container with chrome (for instance Panel extends SkinnableContainer). One of the cool new things you can do in spark is swap layouts. For instance, you can use a HorizontalLayout with a Group, or you can even create a custom layout and use it with your List. This is really powerful, and this separation between a container and the layout make a lot of things easier, That said, for really common use-cases, we found some people were annoyed with having to type:
<s:VerticalLayout horizontalAlign=".." ... />
And people were used to having HBox and VBox. Because of this, we created helper classes, HGroup and VGroup, which extend Group and have the layout object baked in. They don't really add any functionality...they sre just there as a shortcut. To make it easier we also proxy up some layout-dependent properties on to the container, like horizontalAlign and verticalAlign.
HBox, VBox, and Canvas are replaced by one component, Group. However there functonality is really replaced by HorizontalLayout, VerticalLayout, and BasicLayout, respectively. We have helper objects HGroup and VGroup to make common tasks easier. If you want a skinnable form of those components (something with chrome), use SkinnableContainer and change the layout (we did not provide helper classes HSkinnableContainer and VSkinnableContainer because we don't think it's as common of a use-case).
As a side note, I think you should always switch to using these new Spark container classes whenever possible. An exception is if you used Canvas and advanced constraints before. We haven't created an AdvancedConstraint layout yet.
I hope the new options will work out well for you, and I hope this helps clariy why we now have so many options,
Another thing to consider is the efficiency of spark over mx, most of the the mx equivalents in spark are 'lighter'. In most cases this is fine and even if when for instance something available in mx:canvas is not available in s:group extending a spark components functionality will still give you a more efficient component that doesn't compile in un-needed overhead.
Spark and mx will mix quite happily but as Ryan said you are better of using spark unless mx is the only way you can do something without major coding work.
1 person found this helpful
As per the backgroundColor part of your question, you could composite it together like you did in the Group:
However, ideally, I'd tell you to use SkinnableContainer and place the Rectangle in the SkinnableContainer's skin. This is part of the "container with chrome (SkinnableContainer) vs. container with no chrome (Group)". Our default SkinnableContainer skin already has a background rectangle in it, and you can control its color with the backgroundColor style, like:
We baked this background and backgroundColor style in to the SkinnableContainer component for ease-of-use, so you don't have to create a skin just for simple changes. However, if you want something really complex (like a rounded rectangle as the background, then you should re-skin the SkinnableContainer).
Hope that helps,
Hi Ryan, now everything makes much more sence after your explanation. Thank you!
I whick i had you on my Msn, you would help me a lot on my current project! LOL
So it means that the HGroup and VGroup only exists to simplify all the <layout> tags we need to type below the Group class to add some layout... cool, i like it.
Now for the Canvas with the colored background i use to use, i should now use the SkinnableContainer?
Updated: You were faster then me and already answered my question. Thank you very very much!!
I've just noticed that SkinnableContainer as no backgroundColor property to set the background color like i use to do with the Panel component.
So this way, how can we set the background color of the SkinnableContainer?
<s:SkinnableContainer x="223" y="240" width="200" height="200" backgroundColor="#A62424"/>
I'm not sure if background color was available in earlier sdks, if you haven't already download the current nightly build of the sdk and follow the intructions in the forum post regarding the required work needed to get it operational(there is a sticky at the top of the forum).
Thank you very much for really clear outline.