[Q] Adding DisplayObject to containers

[Igazine]

Hi there,

Is it possible to add regular DisplayObjects to Containers by preserving alignment, gap, padding etc? Or possible to create/extend a Component subclass which may contain MovieClip, Sprite etc? I have several display objects loaded from SWF libraries, and would like to add them as properly laid out components.

Thanks. HaxeUI rocks, thank you for your contribution!

[ianharrigan]

Sure, heres a very basic example off the top of my head (ofc it could all be improved, etc - but a general idea):

class SpriteContainer extends Component {
    public function new() {
        super();
    }

    private var _sprite:Sprite;
    public var sprite(get, set):Sprite;
    private function get_sprite():Sprite {
        return _sprite;
    }
    private function set_sprite(value):Sprite {
        _sprite = value;
        addChild(_sprite);
        return value;
    }

    private override function validateLayout() {
        if (_sprite != null) {
            _sprite.width = width;
            _sprite.height = height;
        }
        return super.validateLayout();
    }
}

Then usage something like:

// create some sprite
var mySprite:Sprite = new Sprite();
// red box
mySprite.graphics.beginFill(0xFF0000);
mySprite.graphics.drawRect(0, 0, 100, 100);
mySprite.graphics.endFill();
// yellow circle 
mySprite.graphics.beginFill(0xFFFF00);
mySprite.graphics.drawCircle(50, 50, 25);
mySprite.graphics.endFill();

// create a container for it
var container = new SpriteContainer();
container.sprite = mySprite;

// create a grid and add some stuff
var grid = new Grid();
grid.columns = 3;
grid.percentWidth = 100;
grid.percentHeight = 100;

// top row
var button = new Button(); button.percentWidth = 33; button.text = "TL";
grid.addComponent(button);

var button = new Button(); button.percentWidth = 33; button.text = "T";
grid.addComponent(button);

var button = new Button(); button.percentWidth = 33; button.text = "TR";
grid.addComponent(button);

// middle row
var button = new Button(); button.percentWidth = 33; button.percentHeight = 100; button.text = "L";
grid.addComponent(button);

// add the container
container.percentWidth = 33; container.percentHeight = 100;
grid.addComponent(container);

var button = new Button(); button.percentWidth = 33; button.percentHeight = 100; button.text = "R";
grid.addComponent(button);

// bottom row
var button = new Button(); button.percentWidth = 33; button.text = "BL";
grid.addComponent(button);

var button = new Button(); button.percentWidth = 33; button.text = "B";
grid.addComponent(button);

var button = new Button(); button.percentWidth = 33; button.text = "BR";
grid.addComponent(button);

// show it (could be anywhere)
Screen.instance.addComponent(grid);

And thats that!

Of course, later you could get into more "advanced" stuff like making it cusom component and using it from xml (though you would always have to set the sprite via code i think) - but its a start.

Cheers, Ian

[Igazine]

Super, thanks a lot!