Simple Flex 4 Tutorial

Flex 4 is out. For the folks who are starting on flex 4 here is a simple flex 4 tutorial to get a quick start.

 1. XML and Application declaration

<?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=”send_data()”>

2. Define your HTTPService,WebService, or RemoteObject

<fx:Declarations>
        <s:HTTPService id=”userRequest” url=”http://myserver/request_post.php”
                                                    useProxy=”false” method=”POST”>
            <mx:request xmlns=”">
                <username>{username.text}</username>
                <emailaddress>{emailaddress.text}</emailaddress>
            </mx:request>        
        </s:HTTPService>
    </fx:Declarations>

<fx:Script>
        <![CDATA[
        private function send_data():void {
        userRequest.send();
        }
        ]]>
    </fx:Script>

 3. Create a Form

<mx:Form x=”20″ y=”10″ width=”300″>
        <mx:FormItem>
            <s:Label text=”Username” />    
            <s:TextInput id=”username”/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Label text=”Email Address” />    
            <s:TextInput id=”emailaddress”/>
        </mx:FormItem>
        <s:Button label=”Submit” click=”send_data()”/>
    </mx:Form>

4.Define your DataGrid

 <mx:DataGrid id=”dgUserRequest” x=”20″ y=”160″
        dataProvider=”{userRequest.lastResult.users.user}”>
        <mx:columns>
            <mx:DataGridColumn headerText=”User ID” dataField=”userid”/>
            <mx:DataGridColumn headerText=”User Name” dataField=”username”/>
        </mx:columns>
    </mx:DataGrid>

5. Define Text Input field

<s:TextInput x=”20″ y=”340″ id=”selectedemailaddress” text=”{dgUserRequest.selectedItem.emailaddress}”/>

6.Close the application
</s:Application>

Full Source Code:

<?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=”send_data()”>
    <fx:Declarations>
        <s:HTTPService id=”userRequest” url=”http://myserver/request_post.php”
                                                    useProxy=”false” method=”POST”>
            <mx:request xmlns=”">
                <username>{username.text}</username>
                <emailaddress>{emailaddress.text}</emailaddress>
            </mx:request>        
        </s:HTTPService>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
        private function send_data():void {
        userRequest.send();
        }
        ]]>
    </fx:Script>
    <mx:Form x=”20″ y=”10″ width=”300″>
        <mx:FormItem>
            <s:Label text=”Username” />    
            <s:TextInput id=”username”/>
        </mx:FormItem>
        <mx:FormItem>
            <s:Label text=”Email Address” />    
            <s:TextInput id=”emailaddress”/>
        </mx:FormItem>
        <s:Button label=”Submit” click=”send_data()”/>
    </mx:Form>
    <mx:DataGrid id=”dgUserRequest” x=”20″ y=”160″
        dataProvider=”{userRequest.lastResult.users.user}”>
        <mx:columns>
            <mx:DataGridColumn headerText=”User ID” dataField=”userid”/>
            <mx:DataGridColumn headerText=”User Name” dataField=”username”/>
        </mx:columns>
    </mx:DataGrid>
    <s:TextInput x=”20″ y=”340″ id=”selectedemailaddress” text=”{dgUserRequest.selectedItem.emailaddress}”/>
</s:Application>

Hoping that you will find this simple Flex 4  tutorial useful. Happy Coding Flex4.