How to use VGroup or HGroup in pure actionscript3?

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:

1. Use a SpriteVisualElement instead of a Sprite; or use a StyleableTextField instead of a TextField.
2. Wrap up the Sprite or TextField as a child of UIComponent; then use that UIComponent as the element in the group.
3. Use MX Containers, such as HBox or VBox.
4. 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.