Flex Builder 3 - Reading Properties Tutorial
Lets start.
Create a new Flex Builder 3 project and call it "CreatingAccount"
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 "CreateAccount" 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 "Choose a username" textbox is an MX:TextInput control and give it the name "username_txt". For the "Choose a password" use another MX:Textbox control and call it "password_txt". The "Create Account" button is called "createAccount_btn". Finally at the very bottom put a MX:Textarea control and call it "output_txt".
Keep in mind that usernames and passwords are limited to 15 characters. Also, you should block unusual characters like these: " ' ~ < >
Lets start adding the code. Go into the "Actions" panel and add this script:
import com.giantflyingsaucer.*;
private var socketManager:GFSServerXMLSocketManager = null;
private function connectAndCreateAccount(evt:MouseEvent):void { socketManager = new GFSServerXMLSocketManager("localhost",843);
// Add the event listeners socketManager.addEventListener(GFSServerEvent.CONNECTED, onConnected, false); socketManager.addEventListener(GFSServerEvent.NOT_CONNECTED, onDisconnected, false); socketManager.addEventListener(GFSServerEvent.ACCOUNT_CREATED, onAccountCreated, false); socketManager.addEventListener(GFSServerEvent.ACCOUNT_CREATION_ERROR_USERNAME_EXISTS, onAccountError, false); socketManager.addEventListener(GFSServerEvent.ACCOUNT_CREATION_ERROR_UNSPECIFIED, onAccountError, false); socketManager.connect(); }
private function onConnected(evt:GFSServerEvent):void { output_txt.text += "Status: Connected\n"; output_txt.text += "Creating Account...\n"; socketManager.createAccount(username_txt.text, password_txt.text); }
private function onDisconnected(evt:GFSServerEvent):void { output_txt.text += "Status: Disconnected\n"; }
private function onAccountCreated(evt:GFSServerEvent):void { output_txt.text += "The account has been created\n"; socketManager.disconnect(); }
private function onAccountError(evt:GFSServerEvent):void { if(evt.type == GFSServerEvent.ACCOUNT_CREATION_ERROR_USERNAME_EXISTS) output_txt.text += "That username already exists, choose another one\n"; if(evt.type == GFSServerEvent.ACCOUNT_CREATION_ERROR_UNSPECIFIED) output_txt.text += "There was an error creating the account\n";
output_txt.text += "Disconnecting...\n";
socketManager.disconnect(); }
Make sure you wire up the button so it's "On Click" property is set to "connectAndCreateAccount()".
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. Once you have entered a username and password and clicked the button we run the connectAndCreateAccount method which creates a socket connection to the GFS Server and sets up the event listeners we are interested in.
From the connectAndCreateAccount we subscribed to the CONNECTED event. Once that event is triggered we simply call the socketManager to create the account and await the response from the GFS Server on whether or not it was successful. After those results we disconnect since there is nothing more to do with this tutorial.
Go ahead and run this program. You should see this if everything goes well:
Last Updated: April 10, 2008
