How to use VGroup or HGroup in pure actionscript3? - actionscript-3

Question

I'm developing a flash app by using free Flex SDK and text editor and compiling in command line.
I want to use VGroup or HGroup in my actionscript to manage positions of DisplayObjects.
I wrote the following code:
import spark.components.*
import flash.text.*
var group:VGroup = new VGroup;
var text:TextField = new TextField
text.text = 'abc';
var sprite = new Sprite;
sprite.graphics.lineStyle(2, 0x000000);
sprite.graphics.drawRect(0, 0, 100, 100);
stage.addChild(group);
group.addElement(sprite); // runtime error
group.addElement(text); // compile error
But adding Sprite to VGroup causes runtime error:
TypeError: Error #1034: Type Coercion failed:
cannot convert flash.display::Sprite to mx.core.IVisualElement.
And adding TextField to VGroup causes compile error:
Error: Implicit coercion of a value of type flash.text:
TextField to an unrelated type mx.core:IVisualElement.
How to use VGroup or HGroup in pure AS3?
What is the difference between DisplayObject and IVisualElement?
UPDATE:
I tried the 1st way of www.Flextras.com's answer, SpriteVisualElement and StyleableTextField.
I wrote the following code:
package {
import flash.display.*
import spark.core.SpriteVisualElement
//import spark.components.supportClasses.StyleableTextField // compile error
import spark.components.VGroup
import flash.text.*
[SWF(backgroundColor=0xffffff, width=500, height=500, frameRate=12)]
public class VGroupTest extends Sprite {
function VGroupTest() {
//var text:StyleableTextField = new StyleableTextField
//text.text = 'abc';
var sprite1:SpriteVisualElement = new SpriteVisualElement;
sprite1.graphics.lineStyle(2, 0x000000);
sprite1.graphics.drawRect(0, 0, 100, 100);
sprite1.width = 200
sprite1.height = 200
var sprite2:SpriteVisualElement = new SpriteVisualElement;
sprite2.graphics.lineStyle(2, 0xff0000);
sprite2.graphics.drawRect(0, 0, 200, 200);
sprite2.width = 300
sprite2.height = 300
var group:VGroup = new VGroup;
group.gap = 10
group.width = 400
group.height = 400
this.stage.addChild(group);
// the following codes show nothing
//group.addElement(text);
group.addElement(sprite1);
group.addElement(sprite2);
// the following codes show 2 rectangles
//this.stage.addChild(sprite1)
//this.stage.addChild(sprite2)
}
}
}
But
import spark.components.supportClasses.StyleableTextField
caused the following error
40 Error: Definition spark.components.supportClasses:StyleableTextField could not be found
And no SpriteVisualElement is shown on the screen.
Am I missing something?

Answer 1

You're using the right conceptual approach. However, elements in a group (or VGroup or HGroup) must implement IVisualElement, which neither Sprite nor TextField implement.
You have a few options to consider:
Use a SpriteVisualElement instead of a Sprite; or use a StyleableTextField instead of a TextField.
Wrap up the Sprite or TextField as a child of UIComponent; then use that UIComponent as the element in the group.
Use MX Containers, such as HBox or VBox.
Use a UIComponent instead of a Group. You'll have to write your own layout code in updateDisplayList() for this to work.
My preference is the first approach, followed by the fourth approach. Approach 2 adds a lot of extra coding, and approach 3 is undesirable due to the dependency on the MX/Halo architecture.