Flex 4.5.1 Add a simple Bitmap or Sprite on new application?

Question

Maybe it is a bad habit which I still have since Flash Professional, but I'm trying to add a simple Sprite or/and Bitmap I just created to an empty Application and it's not happening.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600" 
               creationComplete="application1_creationCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.core.UIComponent;
            import mx.events.FlexEvent; 


            protected function application1_creationCompleteHandler( event : FlexEvent ) : void
            {
                var s:Sprite = new Sprite();
                s.graphics.beginFill( 0xFF0000, 0.5 );
                s.graphics.drawRect( 0, 0, 100, 100 );
                s.graphics.endFill();

                this.addChild( s );
            }

        ]]>
    </fx:Script>
</s:Application>

Could someone tell me what I am doing wrong and help me correct it?

Answer 1

Try putting your sprite in UIComponent or SpriteVisualElement. This works for me:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="test()">

    <fx:Script>
        <![CDATA[
            import spark.core.SpriteVisualElement;

            private function test():void
            {
                var sprCont:SpriteVisualElement = new SpriteVisualElement();
                sprCont.horizontalCenter = 0;
                sprCont.verticalCenter = 0;

                var spr:Sprite = new Sprite();
                spr.graphics.beginFill(0xFF0000);
                spr.graphics.drawCircle(0,0, 100);
                spr.graphics.endFill();

                sprCont.addChild(spr);
                addElement(sprCont);
            }
        ]]>
    </fx:Script>
</s:Application>

For some reasons the 's:Application' tags are not shown, but they are there. HTH, FTQuest

Answer 2

There are a few things to consider. You don't specify a height or width for your sprite. Won't it default to a height and width of 0; effectively rendering it invisible?

The second thing to note is that I strongly recommend you make use of the Flex Component Lifecycle methods for creating children. Instead of using a creationComplete handler, override createChildren() to create the sprite and add it. It would be common to use updateDisplayList() for the drawing, sizing, and positioning of the component.

The second thing to note is that Application is actually a sprite. Depending on what you're trying to do you could do the drawing directly on the application:

this.graphics.beginFill( 0xFF0000, 0.5 );
this.graphics.drawRect( 0, 0, 100, 100 );
this.graphics.endFill();

I perceive it will be more flexible to use a sprite than to draw directly on the Application; but it depends what you're trying to accomplish.