Flex/Flash Builder Basics: Why won't this code work?

Question

I've been trying out Flash Builder for the first time and I can't seem to get it working...

First off I have these bits of very basic code:

The MXML:

<?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" xmlns:ns1="*">
    <fx:Script>
        <![CDATA[
            public function initApp():void 
            {
                var spiro:Spiro = new Spiro();

            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

</s:Application>

And also the AS3:

package
{
    import flash.display.Sprite;

    public class Spiro extends Sprite
    {
        public function Spiro()
        {
            var mainRect:Sprite = new Sprite();

            mainRect.graphics.beginFill(0x0000FF);

            mainRect.graphics.drawRect(0, 0, 100, 100);
            mainRect.graphics.endFill();
            addChild(mainRect);

        }
    }
}

This code does nothing. But when I add a Flex component using the WYSIWYG Design view, the component IS visible.

Another key problem: Flash Builder cannot connect to the debugger, even though I've installed it twice now. Can anyone help me here? I've made sure my firewall is off, but could this be causing problems?

Many thanks.

Answer 1

<?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" xmlns:ns1="*"
creationComplete="initApp();">
    <fx:Script>
        <![CDATA[
            public function initApp():void 
            {
                var spiro:Spiro = new Spiro();
                addElement(spiro);
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

</s:Application>

You didn't call your initApp method. You can call it when your Flex application's creation is complete and it triggers a creationComplete event.

And your Spiro class should extend UIComponent because you can't add Sprite to the Flex application nor as a child nor as an element:

package
{
    import flash.display.Sprite;
    import mx.core.UIComponent;

    public class Spiro extends UIComponent
    {
        public function Spiro()
        {
            var mainRect:Sprite = new Sprite();

            mainRect.graphics.beginFill(0x0000FF);

            mainRect.graphics.drawRect(0, 0, 100, 100);
            mainRect.graphics.endFill();
            addChild(mainRect);

        }
    }
}

Cheers, Rob

Answer 2

I suspect that the problem is that you:

a) Never add the Spiro class as a child on the container. b) Never set the height or width of the Spiro class.

You're also going to have problems because the Application tag is a spark component. If you use AddChild, an error will be thrown because you should use addElement. If you use the addElement method, you'll get an error because your Spiro class does not implement the IVisualElement interface.

So, from my perspective you have a few options:

1) Implement the IVisualElement interface with your Spiro class. From there you'll be able to add it as a child to the Application using addElement method (usually in the LifeCycle method createChildren() ); and also give it a height and width (Usually in the lifeCycle method updateDisplayList() ).

2) Create a class that extends UIComponent, and add your Spiro class there using the addChild method. Then add that 'wrapper' class as an element in your application.