Question

My problem is this:
I want to use mxml for visual element… i want to graphically set components and in an as class to program because it easy to me… How to do this??? I have two classes: one as and one mxml…This is my code:

public class chat extends Application{
    private var nc:NetConnection = null;
    public var connect:Button;      
    public var status:Text;

    public function VideoChat(){
        addEventListener(FlexEvent.APPLICATION_COMPLETE, mainInit);
    }

    private function mainInit(event:FlexEvent):void{            
        status.text = "Status quo";

        connect.addEventListener(MouseEvent.CLICK, doConnect);
    }

and 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" backgroundColor="#FBF8F8"
           preloaderChromeColor="#CC3535" 
           >

    <mx:Button x="77" y="547" height="19" label="Connect" id="connect"/>
    <mx:UIComponent id="videoReceiveContainer" x="77" y="52" width="500" height="400"/>
    <mx:Button x="507" y="547" label="Play" id="play"/>
    <mx:Text id="status" x="77" y="460" width="501" height="58"/>
    <mx:Button x="297" y="547" label="Publish" id="publish"/>
</s:Application>

Answer 1

First of all, your AS3 code is a liiiittle bit funky.

public class VideoChat extends Application{
    private var nc:NetConnection = null;
    public var connect:Button;      
    public var status:Text;

    public function VideoChat(){
        addEventListener(FlexEvent.APPLICATION_COMPLETE, mainInit);
    }

    private function mainInit(event:FlexEvent):void{            
        status.text = "Status quo";

        connect.addEventListener(MouseEvent.CLICK, doConnect);
    }
}

The name of the class has to match the name of the constructor.

Second, the MXML:

<?xml version="1.0" encoding="utf-8"?>
<local:VideoChat xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:mx="library://ns.adobe.com/flex/mx"
                 xmlns:local="*"
                 minWidth="955" minHeight="600" backgroundColor="#FBF8F8"
                 preloaderChromeColor="#CC3535" 
                 >

    <mx:Button x="77" y="547" height="19" label="Connect" id="connect"/>
    <mx:UIComponent id="videoReceiveContainer" x="77" y="52" width="500" height="400"/>
    <mx:Button x="507" y="547" label="Play" id="play"/>
    <mx:Text id="status" x="77" y="460" width="501" height="58"/>
    <mx:Button x="297" y="547" label="Publish" id="publish"/>
</local:VideoChat>

If you notice, I defined the XML namespace ‘local’ xmlns:local="*". And the s:Application tag has been replaced with local:VideoChat.

Lastly, you asked in a comment what the path was to load the page. It should be ...bin-debug/name.html. This HTML file is a wrapper that displays the compiled SWF of your project.