For my game, I am making the main game view as a plain Flash/AS3 class, something like:

public class GameArena extends Sprite

This is simply a big rectangle in which game objects are drawn, so no need for fancy UI and I want to keep the main game engine Flex-free so I can use Sprites rather than heavier Flex components.

However for the entire game/app, I do still want to use Flex for GUI/layout. So I thought I could create a Flex class subclassing UIComponent, which has a GameView object as a child... now I can use this in MXML as a standard Flex component.

e.g.

    public class ArenaView extends UIComponent 
    {
    public var gameArena:GameArena;
    override protected function createChildren():void
    {
        super.createChildren();
        if (!gameArena)
        {
            gameArena = new GameArena();
            gameArena.width = 200;
            gameArena.height = 200;
            addChild(gameArena);
        }
    }
}

Then I have a simple line in my main App MXML like:

<logic:Arena x="0" y="0" width="50%" height="100%" name="TestArenaPanel" />

But so far while my code compiles, the Flash class isn't getting rendered. Maybe it's something simple, but I wanted to ask if this is a reasonable approach, or there is something better?

BTW: I've had the "should Flex be used" conversation many times. If you want to discuss that please do so in comments, but keep answers on topic.