Question

I am trying to learn Flex and Actionscript. I found the Moock quiz example in Flash and want to turn it into a Flex application. I am trying to understand the relationship between the actionscript and the mxml. How do I take the class QuizApp and place its contents in a container in the mxml file?

MXML

<fx:Script>
<![CDATA[
    import QuizApp;
    var ms:QuizApp = new QuizApp;

    protected function init():void
    {                           
        msc.addChild(ms);
    }

]]>
</fx:Script>

<mx:VBox id="msc" />

---

Class

package  {

    import flash.display.Sprite;
    import mx.controls.Button;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;

    public class QuizApp extends Sprite {
        //for managing questions:
        private var quizQuestions:Array;
        private var currentQuestion:QuizQuestion;
        private var currentIndex:int = 0;

        public function QuizApp() {
            quizQuestions = new Array();
            createQuestions();
            createButtons();
            createStatusBox();
            addAllQuestions();
            hideAllQuestions();
            firstQuestion();
        }

... etc
    }
}

Answer 1

I am trying to understand the relationship between the actionscript
and the mxml.

MXML is an ActionScript code generation language. When you write MXML, the Flex compiler does some “magic” to turn your MXML file into an ActionScript class. You can save this generated code by specifying the ‘keep-generated-actionscript’ argument to the Flex Compiler. I’ll often shorten it to’-keep’ and it works fine.

MXML masks a lot of the complexity that is going on under the scenes.

I hope that helps set your frame of expectations.

To use your “Flex agnostic” ActionScript Sprite Class inside of a MX Flex Container, you should be able to use it just like any other class you create. First, import the namespace at your top level tag of your component:

myNamespace:xmlns="*"

Then you should be able to use it, like this:

<myNamespace:QuizApp id="quizAppInstance" />

If you’re using a Flex 4 Spark Container, you need something that implements IVisualElement; which a Sprite does not. However, you can wrap your own class inside of a SpriteVisualElement class without too much effort.