Flex Builder 3 - Connection Tutorial
Lets start.
Create a new Flex Builder 3 project and call it "ConnectionTutorial"
Click on the "Next" button (don't click "Finish" just yet). On the next screen your given the options to "Configure Output". Click the "Next" button again. You should now be in the final step of the create new project wizard. Here is where we need to attach the Client Tools.
Click on the "Add SWC..." button and another window will open that will allow you to browse for the "SWC". You will point it to the "ClientTools" folder where you installed GFS Server and click on the SWC in that folder.
Once the Wizard has finished go to the "States" panel in Flex Builder and add a new state and call it "Connect" and click the "Set as start state" checkbox.
.
Let's design the Login. Drag a MX:Panel onto the design surface. Center and anchor it how you want it.
Now, make your MX:Panel look like this:
Don't worry about the colors. Make sure the "Address" textbox is an MX:TextInput and give it the name "address_txt". The connect button is called "connect_btn". Finally at the very bottom drag an MX:Text on and call it "status_txt".
Lets start adding the code. Click on the "Connect to GFS Server" button and fill in the "On Click" property with "connect()". Now, lets switch from design view in Flex Builder to source view.
Add an MX:Script tag just below the top MX:Application tag and add the following code:
import com.giantflyingsaucer.*;
private var socketManager:GFSServerXMLSocketManager = null;
private function connect():void { socketManager = new GFSServerXMLSocketManager(address_txt.text,843);
socketManager.addEventListener(GFSServerEvent.CONNECTED, onConnected, false);
socketManager.connect(); }
private function onConnected(evt:GFSServerEvent):void { status_txt.text = "Status: Connected"; }
First we imported the GFS Server Events and the XMLSocketManager. After that we created a variable called socketManager which will be used for all our interaction with the GFS Server.
private function connect():void
{
socketManager = new GFSServerXMLSocketManager(address_txt.text,843);
socketManager.addEventListener(GFSServerEvent.CONNECTED, onConnected, false);
socketManager.connect();
}
Here we create a new instance of the GFSServerXMLSocketManager class and hand it the value in the Address textbox and set the port number. After that right away you need to configure your listeners. In this case we are only going to listen for one event - the CONNECTED event.
private function onConnected(evt:GFSServerEvent):void
{ status_txt.text = "Status: Connected"; }
Go ahead and fire up the GFSServer and run this program from Flex Builder.
.
Last Updated: April 10, 2008
