I need this simple Flex App to start working| Please help

[Flexer]

Hello, I am still new to Flex and the MXML

the following compiles just fine but creates run time errors, I am only using this main mxml to give me access to the Flex framework sdk but when I create an instance of my class it creates problems?

I would like to see on the stage a simple combobox and a red box that's it

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
     creationComplete="onCreationComplete(event);" 
    >     
         
        <mx:Script> 
             <![CDATA[ 

            import mx.events.FlexEvent; 
            import main; 
             
                private function onCreationComplete(event:FlexEvent):void 
                {                     
                    var a:main = new main(); 
                }    
         ]]>                  
    </mx:Script>    
     
</mx:Application>

package 
{ 
    //import mx.core.Application; 
     
    import flash.display.Sprite; 
    import flash.display.DisplayObject; 
    import flash.display.MovieClip; 

    import flash.display.Stage; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 

    import mx.controls.ComboBox; 

    //[SWF(width="194", height="236", backgroundColor="#000000")] 
    public class main extends Sprite 
    {                 
        public static var instance:        main;     
     
        /*public static function Run():void 
        { 
            //instance = new main( Application.application );                         
        }*/         
         
        //public function main( app:Application ) 
        public function main( ) 
        { 
            init(); 
             
            //app.addChild( this ); 
        } 
             
        public function init():void 
        {         
            setUpTheStage(); 
        } 

        public function setUpTheStage():void 
        {         
            stage.frameRate         = 31;         
            stage.showDefaultContextMenu     = false; 
            stage.scaleMode         = StageScaleMode.NO_SCALE; 
            stage.align             = StageAlign.TOP_LEFT; 
             
            drawBackground ();             
        }     

        private function drawBackground ():void 
        {                 
            var c:ComboBox = new ComboBox(); 
            c.name = "dropdownlist"; 
            c.text = "dropdownlistText"; 
            addChild(c); 
             
            var background:Sprite      = new Sprite(); 
            background.name = "Background"; 
            background.graphics.beginFill(0xFF0000); 
            background.graphics.drawRect(0, 0, 100, 100); 
            background.graphics.endFill(); 
            addChild(background); 
        }         
    } 
} 

what am I doing wrong, or missing?

I really need to get it working so I can start working on stuff,

Thanks in advance

[Chris_Seahorn]

It's ok...unless you were very rich and could afford 1.5, we are all new to Flex 2

The problem was the sprite did not know what to add itself to. So in reality it wasn't so much a Flex issue as an AS3 one.



private function drawBackground():void
{
var c:ComboBox = new ComboBox();
c.name = "dropdownlist";
c.text = "dropdownlistText";
addChild(c);

var background:Sprite = new Sprite();
background.name = "Background";
background.graphics.beginFill(0xFF0000);
background.graphics.drawRect(0, 0, 100, 100);
background.graphics.endFill();

// Altered line below
c.addChild(background);

}

[Flexer]

Hi Chris,

Thanks for reply, there are still so many errors producted before the

drawBackground is actually called, and yes I am now using Flex 2 and new to it but this particular problem is hindering me from actually starting to use it. all I am trying to do is to learn how I can connect the MXML to my Actionscript that's all.

There was a great example of how to do this but unfourtunatly it was written for Flex 1.5 and it no longer works so if someone can fix it that would be greate here it is

Flex 2 - Calculator View As ActionScript by Ralf Bokelberg at:-
http://www.ifbin.com/news/2005_11_01_archive.html

I have attached the example.

Also I would like the code above to work properlly, I don't understand why its not working!

if someone can help to fix this silly issue, his help would be greatly apreciated, thanks

[Chris_Seahorn]

Hahahaha....murphy's law.

I'll take a look at the ifbin example later and get back to you on both. Fair enough?

[Chris_Seahorn]

I don't know man...I'm just wrapping my head around Flex 2/AS3 myself after a dragging my feet but this seems to be more of an extension of the ComboBox than one of a Sprite. Most likely we will all do things differently just like we do in Flash. Maybe Senocular or Cancerinform (who are both masters of AS3) can help you clean up that original .as.

My humble suggestion below results in this:

http://flex.hobby-site.com/examples/flex/Flexer.swf


Flexer.mxml:
<?xml version="1.0" encoding="utf-8"?>

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:custom="components.*"
width="300" height="250"
frameRate="31"
>

<custom:myComboBox />
</mx:Application>

components/myComboBox.as

package components
{
import mx.controls.ComboBox;
import flash.display.Sprite;
public class myComboBox extends ComboBox
{

public function myComboBox()
{

width=100;
dataProvider = [ "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"];
var background:Sprite = new Sprite();
background.name = "Background";
background.graphics.beginFill(0xFF0000);
background.graphics.drawRect(0, 20, 100, 100);
background.graphics.endFill();
addChild(background);

}

}
}


I only dealt with the box here but at least this way you can scale down that original .as (which just leaves your stage directions) and reuse this combo as a custom component. If it is of no use....disregard

[Flexer]

Chris

thank you, your code has been useful, I know now how I can create custom controls for later use.

I recieved another solution, at actionscript.org, you can view it here

http://www.actionscript.org/forums/s...d=1#post557965

I am still very interested in getting the IFBN example to work, I am not concerned about the whole application to work but just how they used one simple mxml to act as a bridge to the Flex Framwork and create a singltone instance of the main class to start the application, I felt its a lot cleaner that way, and ofcourse I am hoping to be able to access the stage property from within the actionscript class [i.e CalculatorMain.as].

I think what I am asking is how to use the import mx.core.Application in a Flex 2 Application, I think I might create a new post later on on this subject when I have totally faild to get it on my own [which could be very soon ].

The reason I would like learn this is because I want to create a proper base for an application, I don't want to create everything inside the MXML files, I want to use the MXML files for custom controls only. if you know what I mean.

These are the 2 files I am talking about.

CalculatorViewAsActionScript.mxml
CalculatorMain.as

Thanks

[Chris_Seahorn]

No sweat man...I'm just getting home where I have the ifbin service installed so I'll grab those files and post back at some point.


I'm assuming you need to understand the singleton routines to emulate _globals (a guess) and want to mention thare are some good singleton examples at the Flex JAM site (link in my signature). Check them out in the meantime

[cancerinform]

It's actually pretty simple. All you need is to pass the root of the Flex 2 movie to the class.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="onCreationComplete(event);">
     <mx:Script>
             <![CDATA[

            import mx.events.FlexEvent;
            import Main;
             
                private function onCreationComplete(event:FlexEvent):void
                {                     
                    var a:Main = new Main();
                    a.makeObject(this);
                }    
         ]]>                  
    </mx:Script>    
</mx:Application>

And the class is this. I made it for a button.

package
{
    import flash.display.Sprite;
    import mx.controls.Button;
    import mx.controls.TextArea;
       import flash.events.MouseEvent;
    public class Main extends Sprite
    {                 
        private var button2:Button;
        private var myText:TextArea;
        public function Main( )
        {
        }
        public function makeObject(myRoot:Object):void 
        {
            button2 = new Button();
            button2.label = "Main-Button";
            button2.x = 100;
            button2.y = 100;
            myRoot.addChild(button2);
            //
            myText = new TextArea();
            myRoot.addChild(myText);
            button2.addEventListener(MouseEvent.CLICK, clickHandler);
            function clickHandler(event:MouseEvent):void 
            {
                myText.text = "You clicked the button.";
            }
        }
    }
} 

He, he I like that way, is more familiar to me. I think this is the way I use Flex 2. I can't get used to the Flex syntax, but i like the components.

[Flexer]

Chris_Seahorn, yes I already have been to Flex Jam, its a great area, I will also wait for your verdict by the way I already attached the files to that example on my second post in this thread. I am also posting the small version of the code below, its all I would really like to get working

cancerinform, thank you very much for clearing up this simple and silly issue , but how can I access the stage property from this class?.

Also I would like to be a little greedy and see if its possible to do the same thing using the following code which uses the singlton method like the IFBN example, the only difference here is that I am extending the Application class in this one.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    initialize="Main.Run()">     
</mx:Application>

package 
{ 
    import mx.core.Application; 
     
    import flash.display.Sprite; 
    import flash.display.DisplayObject; 
    import flash.display.MovieClip; 
    
    import flash.display.Stage; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    
    import mx.controls.ComboBox; 
    
    public class Main extends Application
    {                 
        public static var instance:        Main;     
         
        public static function Run():void 
        { 
            //creates an error here
            instance = new Main( Application.application );                         
        }         
         
        public function Main( app:Application ) 
        {                          
            app.addChild( this ); 
            
            init(); 
        } 
             
        public function init():void 
        {         
                setUpTheStage(); 
        } 
        
        public function setUpTheStage():void 
        {         
            stage.frameRate         = 31;         
            stage.showDefaultContextMenu     = false; 
            stage.scaleMode         = StageScaleMode.NO_SCALE; 
            stage.align             = StageAlign.TOP_LEFT; 
             
            drawBackground ();             
        }     
        
        private function drawBackground ():void 
        {                 
            var c:ComboBox = new ComboBox(); 
            c.name = "dropdownlist"; 
            c.text = "dropdownlistText"; 
            addChild(c); 
             
            var background:Sprite      = new Sprite(); 
            background.name = "Background"; 
            background.graphics.beginFill(0xFF0000); 
            background.graphics.drawRect(0, 0, 100, 100); 
            background.graphics.endFill(); 
            addChild(background); 
        }         
    } 
} 

Thanks.

[Chris_Seahorn]

its all I would really like to get working

I will gladly defer to cancerinform who is not only the mod for this section, is appointed for good reason. He knows more about AS3 than I can ever hope to and will be of much more use to you

Best of luck

[cancerinform]

Thanks Chris, actually I don't know much Flex, I am learning, but this is more of an AS question.

Ok,
I solved the stage problem. I tried eventDispatcher, but that did not work. A simple timer worked. Some of the properties like width and height and framerate are fine automatically, but other stage properties can only be set after a delay. Add this script to your main function, then you see.

                   myRoot.frameRate = 31;    
            myRoot.width = 550;
            myRoot.height = 400;
            var stageTimer:Timer = new Timer(1000, 1000);
            stageTimer.addEventListener("timer", completed);
            stageTimer.start();
            function completed (event:Event):void
            {
                if(myRoot.stage != null)
                {
                    stageTimer.stop();
                    myText.text = String(myRoot.stage);
                    myRoot.stage.showDefaultContextMenu = false; 
                    myRoot.stage.scaleMode = StageScaleMode.NO_SCALE; 
                       myRoot.stage.align = StageAlign.TOP_LEFT; 
                }
            } 

You need to import some classes too.

Here is a list of all the classes I have been importing:
import flash.display.Sprite;
import mx.controls.Button;
import mx.controls.TextArea;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.utils.Timer;
import flash.events.TimerEvent;

[Chris_Seahorn]

Now that is going to be a heavily used little snippet here

http://flex.hobby-site.com/flex/canc...stagealign.swf

Like I told you man...cancerinform is well assigned

Thanks C !

[cancerinform]

While the Stage object "myRoot", which is the main timeline, is of course present the moment the Flex 2 movie is made, the stage object is a Displayobject, which is the class for all objects on stage. Therefore, the objects need to be loaded first, then the stage Object is not null and properties can be set. That explains the delay.

[cancerinform]

Singleton solved: (Movie is a bit weird but shows all the contents )

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="Main2.Run(this)">   
</mx:Application>

Main2.as

package
{
    import flash.display.Sprite;
    import mx.controls.TextArea;
    import mx.controls.ComboBox;
    import flash.display.MovieClip;
    
    public class Main2 extends Sprite
    {                 
        public static var instance:Main2;    
        private static var myRoot:Object;
        private var myText:TextArea;
        public static function Run(_root:Object):void
        {
            myRoot = _root;
            instance = new Main2();                                           
        }         
        public function Main2()
        {                           
           init(); 
        }
             
        public function init():void
        {         
            myRoot.frameRate = 31; 
            myRoot.width = 550;
            myRoot.height = 400;  
            myText = new TextArea();
            myRoot.addChild(myText); 
            myText.x = 100;
            myText.y = 100;
            myText.text = "This is working";
            drawBackground ();             
        }     
        
        private function drawBackground ():void
        {                 
            var c:ComboBox = new ComboBox();
            c.name = "dropdownlist";
            c.text = "dropdownlistText";
            myRoot.addChild(c);
             var background:Sprite = new Sprite();
            background.name = "Background";
            background.graphics.beginFill(0xFF0000);
            background.graphics.drawRect(0, 0, 100, 100);
            background.graphics.endFill();
            c.addChild(background);
        }         
    }
} 

All you need to do is declare a new instance of the class. Application and all that is not necessary.

[Flexer]

Thank you both so much, you guys are awesome, cancerinform you are definitely a gun , I am still very new to Flex and AS3.0 and its a little late at night and I have work tomorow, but I still didn't want to come in again empty handed so here is what I found.

cancerinform

While the Stage object "myRoot", which is the main timeline, is of course present the moment the Flex 2 movie is made, the stage object is a Displayobject, which is the class for all objects on stage. Therefore, the objects need to be loaded first, then the stage Object is not null and properties can be set. That explains the delay.

to avoid the timer you created for the stage delay. I just did the following:-

        public function Main() 
        {                            
               init(); 
               myRoot.addEventListener(Event.ADDED, onAdded);
        } 

and added the following function

                private function onAdded( event:Event ):void 
                {                                                
                    if(myRoot.stage != null) 
                    {
                                
                        myText.text = String("stage "+ myRoot.stage); 
                        
                        myRoot.stage.frameRate                 = 31;         
                        myRoot.stage.showDefaultContextMenu     = false; 
                        myRoot.stage.scaleMode                 = StageScaleMode.NO_SCALE; 
                        myRoot.stage.align                     = StageAlign.TOP_LEFT;
                        
                        myRoot.stage.addEventListener(Event.ACTIVATE, activateHandler);
                        myRoot.stage.addEventListener(Event.RESIZE, resizeHandler);                            
                    }
                } 

I am still playing around and experiencing with the "singlton method" if someone finds anymore info regarding the above method please let me know.

Thanks once again.

[cancerinform]

Thanks for the additional information. That worked. here is another thing I found. You cannot directly place the background on myRoot. First the Displayobject (stage) has to be formed. Then you can add the background to the Displayobject.

Add this within the onAdded function:

var child:Shape = new Shape();
child.graphics.beginFill(0xFF0000);
child.graphics.lineStyle(0, 0xFF0000);
child.graphics.drawRect(0, 0, 100, 100);
child.graphics.endFill();
myRoot.stage.addChild(child);

Two things:

1. Do not call it background, because that is a reserved word for the background of a TextField.
2. Use the Shape class (import flash.display.Shape.

[Flexer]

understood. thanks

[Flexer]

This method which is Based on the IFBN example now works too, in case anyone is interested. no need to even extend Sprite!. I am just not sure which way is more appropriate the way cancerinform showed me or this one.

if someone can comment on this, that would be great.

Also I didn't know the decleration type of the variable "s", but it all works.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    initialize="Main.Run()">         
</mx:Application>

package
{
    import flash.display.Sprite;
    import flash.display.DisplayObject;
    import flash.display.MovieClip;

    import flash.display.Stage;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;

    import flash.events.Event;

    import mx.controls.TextArea;
        
    import flash.events.Event;
        import flash.display.Shape;
        
    import mx.core.Application;

    public class Main
    {
        public static var instance:        Main;
        private static var _root:        Object;
        public static var _stage:        Stage;        
        private var myText:            TextArea;
        
        public static var _app:            Application;        
        
        public static function Run():void
        {        
            //not sure what type declaration that variable should be    
            var s = Application.application;
            
            instance = new Main(s);
        }
    
        public function Main(app:Application)
        {        
               _app = app;

               init();                       
        }

        public function init():void
        {
            _app.name = "MyApplication";
            _app.frameRate = 31;            
            _app.width = 550;
            _app.height = 400;

            myText = new TextArea();        
            myText.x = 100;
            myText.y = 100;            
            myText.text = "This is working";            
            _app.addChild(myText);
            
            _app.addEventListener(Event.ADDED, onAdded);
        }

                private function onAdded( event:Event ):void
                {       
                            myText.text = "onAdded";
                            
                    if(_app.stage)
                    {              
                              myText.text = "_app.stage this is also working";
                              
                              //call the rest of the application methods here
                    }
                }        
    }
} 

I 'll be using cancerinform solution for now.

[cancerinform]

Here is by the way a list of display objects. As you can see the Shape class is one of them. That is why we have to refer to the stage (DisplayObject).

http://www.kirupa.com/forum/showthre...88#post1880488