Anaara - Vision to Reality » Flex

Customizing the Login Box – Part 4 – Preventing Duplicate Records with FB4, PHP and mySQL

Dan Orlando — Mon, 14 Mar 2011 15:47:13 +0000

In this part of the series, we’re not so much focusing on the login part of the component we’ve been building, but rather the registration form. More specifically, we want to check the database prior to adding a new user record to make sure we’re not about to get a duplicate user record in the database. This is going to utilize a combination of PHP and Flex. When the user clicks the “Save” button from the registration form, it will send both the username and email address to PHP, which will run a query against the database. PHP will then send back a “true” or “false” response based on whether the username and/or email address already exists. Once Flex receives the answer, it will then either allow registration to continue with adding the record, or it will send an Alert notifying the user that there is a problem with either the username or email address or both.

Lets start by adding the needed PHP file.

duplicates.php

";

  if($num1 > 0)

  {

  $dupemail .= "true";

  }

  else

  {

  $dupemail .= "false";

  }

  $dupemail .= "";

//check if email id is already present

  $chk2=mysql_query("Select * FROM $tbl_name WHERE username='$username'");

  $num2=mysql_num_rows($chk2);

$dupuser .= "";

  if($num2 > 0)

  {

  $dupuser .= "true";

  }

  else

  {

  $dupuser .= "false";

  }

  $dupuser .= "";

//output the XML

  print ($dupemail);

  print ($dupuser);

?>

What this is saying is: Take the user’s desired username (“usernameTextInput2″) and email address (“emailTextInput2″) and check against the database’s users table to see if there is a match in the respective column. If there is, send back true, otherwise send back false. There will be two separate answers returned, one for username and one for email address. This allows the application to know which Alert to give the user.

Creating the Function

This function first checks to see if there is a duplicate username, and if there is a duplicate email address, and if there is not for either of them, it will call saveBtn_clickHandler.

private function dupCheck(event:ResultEvent):void

  {

  if(event.result.dupusernamechk == true)

  { 

  mx.controls.Alert.show('Please choose another username, this one is already taken.');

  }

  else if(event.result.dupemailchk == true)

  { 

  mx.controls.Alert.show('This email address has already been registered.');

  }

  else

  {

  saveBtn_clickHandler();

  }

  }

Creating the Service Call



  

  

  {usernameTextInput2.text}

  

  

  {emailTextInput2.text}

The above code is telling PHP the names of the variables that we are sending over and telling Flex where to get that information, what function we are calling, how we are communicating with PHP, and where the file is located.

Component Changes

First we need to make sure that we are calling duplicate_check HTTPService rather than saveBtn_clickHandler. This allows us to check for duplicates, and then if there are none, then the dupCheck function will callsaveBtn_clickHandler.

Change From:

Change To:

Secondly, we need to remove the argument being passed by saveBtn_clickHandler which was created automatically for us by FB4.

Change From:

protected function saveBtn_clickHandler(event:MouseEvent):void

Change To:

protected function saveBtn_clickHandler():void

That’s it. Go ahead and run the application and try to create a duplicate entry. You will find that you will be alerted when doing so.

Application should now look like:



  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  {username.text}

  

  

  {password.text}

  

  

  {setCookie.selected}

  

  

  

  

  

  

  

  {email_to.text}

  

  

  

  

  

  

  {usernameTextInput2.text}

  

  

  {emailTextInput2.text}

Customizing the Login Box – Part 3 – Validation with FB4, PHP and MySql

Dan Orlando — Mon, 07 Mar 2011 20:02:00 +0000

In this tutorial we will continue with the Login Box that we have been building in the last several tutorials. In this tutorial we are going to cover how to validate using a string validator and email validator. There are a number of validators available as well, but once you have the basic concept down, you will be able to implement the others without a hitch.

Lets Get Started

The first thing you need to do is figure out what fields you want to validate. In our case, we have six, as follows:

1. Username

2. Password

3. Email

4. Username

5. Email

6. Password

The second thing that you need to do is figure out if there are going to be any buttons that should be disabled/enabled based on TextInput field validation. In our case, the answer is yes:

1. Login

2. Get Login Info

3. Save

Also, we need to note that we want the button in each state to be disabled until ALL textInput fields in the respective state pass validation.

Now that we have outlined our goals, you need to think about the validation rules, or what constitutes each field being considered valid. For the Username and Password fields, we just want to make sure that they are over six (6) characters long, and for the email address, we want to make sure that the properties of the string match that of a properly formed email address.

Importing the Necessary Classes

import mx.events.ValidationResultEvent;
  import mx.rpc.events.ResultEvent;
  import mx.validators.EmailValidator;
  import mx.validators.StringValidator;

Creating Variables

private var usernameVal:StringValidator = new StringValidator();
  private var passwordVal:StringValidator = new StringValidator();

private var emailVal:EmailValidator = new EmailValidator();

private var emailVal2:EmailValidator = new EmailValidator();
  private var usernameVal2:StringValidator = new StringValidator();
  private var passwordVal2:StringValidator = new StringValidator();

Now that the variables have been created and the classes have been imported, we need to follow a series of steps for each state.

1. Write the Validation Function

2. Set the default state of the respective button to disabled

3. Decide when and how you want to call the function

loggedOut State Validation

In this state you have the username and password TextInput fields to validate. These two fields are only being validated to ensure that they have over 6 characters each. We will start by making the necessary changes to the loggedOut state to prepare it.

Step 1. Changes to State Components

Here, we are going to add the change event on each of the text boxes, add an id and enabled properties to the “Login” button.

Change From:

Change To:

Change From:

Change To:

Change From:

Change To:

Note: In the above code we have chosen to call loggedOut_changeHandler using the change event for the TextInput field. There are other events we could have chosen such as focusOut. The reason we are using the change event however, is so that as soon as the field has met the validation, the “Login” button will become enabled rather than waiting for the user to leave the TextInput field. It could be argued that this takes more system resources because it is checking validation on every text change, but the difference is really negligible. Nevertheless, use the method you feel most comfortable with.

Step 2. Validation Function

The function loggedOut_changeHandler could have been split up into two separate functions and would normally be written that way if we were not basing the login button enabled property on the validation of multiple TextInput fields.

protected function loggedOut_changeHandler(event:TextOperationEvent):void
  {
  if (username.text)
  {
  var valUsername:ValidationResultEvent;
  usernameVal.source = username;
  usernameVal.property = "text";
  usernameVal.minLength=6;
  }
  if (password.text)
  {
  var valPassword:ValidationResultEvent;
  passwordVal.source = password;
  passwordVal.property = "text";
  passwordVal.minLength=6;
  }
  valUsername = usernameVal.validate();
  valPassword = passwordVal.validate();
  if(valUsername.type == "valid" && valPassword.type == "valid")
  loginBtn.enabled = true;
  else
  loginBtn.enabled = false;
  }

Step 3. Changes to getCookie_resultHandler

Because you have the username and password TextInput boxes set to validate on the change event, when a cookie is set, the “Login” button is disabled and the only way to enable it is to make a change in one of the text boxes. To avoid this little problem, we have set loginBtn.enable = true;. We can do this because now that we are validating, we know that any cookie set will have already undergone validation. The getCookie_resultHandler should now look like:

protected function getCookie_resultHandler(event:ResultEvent):void
  {
  if(event.result.storedCookie == true)
  {
  cookieAction = true;
  username.text = event.result.creds.username;
  password.text = event.result.creds.password;
  loginBtn.enabled = true;
  }
  else
  {
  cookieAction == false;
  }
  }

Step 4. Run and Test the application. Check to make sure that it is working both with and without the cookie set.

“forgotPW” State Validation

In this section we will check for validation on the email address of the forgotPW state. Here we are only checking to make sure that the email address is formatted correctly, not wether it is a working email address or not.

Tip: For more information on the validation criteria, you can view EmailValidator.as by holding Command and clicking “EmailValidator” in the import statement.

Step 1. Changes to State Components

Change From:

Change To:

Change From:

Change To:

Step 2. Validation Function

protected function email_to_changeHandler(event:TextOperationEvent):void
  {
  if (email_to.text)
  {
  var valEmail:ValidationResultEvent;
  emailVal.source = email_to;
  emailVal.property = "text";
  }

 valEmail = emailVal.validate();
  if(valEmail.type == "valid")
  emailBtn.enabled = true;
  else
  emailBtn.enabled = false;
  }

“register” State Validation

The register state is a combination of the above since we have the same textInput fields as we had in the first two section, just all in one state now.

Step 1. Changes to State Components

Change From:

Change To:

Change From:

Change To:

Change From:

Change To:

Change From:

Change To:

Step 2. Validation Function

protected function registerVal_changeHandler(event:TextOperationEvent):void
  {

  if (usernameTextInput2.text)
  {
  var valUsername2:ValidationResultEvent;
  usernameVal2.source = usernameTextInput2;
  usernameVal2.property = "text";
  usernameVal2.minLength=6;
  }

 if (emailTextInput2.text)
  {
  var valEmail2:ValidationResultEvent;
  emailVal2.source = emailTextInput2;
  emailVal2.property = "text";
  }

 if (passwordTextInput2.text)
  {
  var valPassword2:ValidationResultEvent;
  passwordVal2.source = passwordTextInput2;
  passwordVal2.property = "text";
  passwordVal2.minLength=6;
  }

 valUsername2 = usernameVal2.validate();
  valEmail2 = emailVal2.validate();
  valPassword2 = passwordVal2.validate();
  if(valUsername2.type == "valid" && valPassword2.type == "valid" && valEmail2.type == "valid")
  saveBtn.enabled = true;
  else
  saveBtn.enabled = false;
  }

That’s it! Go ahead and save and run your application and check your validation in all three states. Make sure everything is working correctly. Your new application should look like:


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  {username.text}
  
  
  {password.text}
  
  
  {setCookie.selected}
  
  
  

  

  
  
  
  {email_to.text}

Customizing the Login Box – Part 2 – Implementing “Forgot Password” with Flash Builder, PHP and MySql

Dan Orlando — Thu, 03 Mar 2011 19:59:48 +0000

In this tutorial, you will implement forgotten password functionality to a login box. The overall goal here is for the user to enter there email address into a TextInput field and have a PHP service check the database for a match, then send the username and password for that user to the email address provided if it exists in the db. If no match is found, it will alert the user that there was no match found.

The first thing we are going to need is the PHP service that will handle the request from the client side.

NOTE: If you are using MAMP and not MAMP Pro, you will not be able to send emails. So to check this functionality, either test on another server or upgrade and configure your application for MAMP Pro.

"; // From is the email being sent from

  $messages.="Your password is $your_password \r\n"; // What is body of the message?

  $sentmail = mail($to,$subject,$messages,$header); // Send email

  }

//start outputting the XML

  $output = "";

//If an email was sent then output yes else output no

  if($sentmail)

  $output .= "yes"; 

  else

  $output .= "no"; 

  $output .= "";

//output all the XML

  print ($output);

?>

In English, this PHP code says: Take the “email_to” variable being passed by Flex and check the “users” table of the database and see if there is a match. If there is, then send an email to the user with their password and send a response of “yes” back to the client. If there is no match found, then send a “no” response to the client. The client side is then responsible for deciding what to do with the response.

Changes in FB4

Step 1. We need to write the function that will handle the “yes” or “no” from PHP – print ($output);

private function getPassword(event:ResultEvent):void

  {

  if(event.result.getPassword == "yes")

  {

  mx.controls.Alert.show('Your password has been emailed to you.');

  currentState = "loggedOut";

  }

  else

  {

  mx.controls.Alert.show('Invalid email, please try again.');

  } 

  }

In English, the code says says: if event.result.getPassword (what is being sent back from the server) is “yes”, then show the message in an Alert box and take the user to the “loggedOut” state. Otherwise, show the invalid message in an Alert box.

Step 2. Write the HTTPService that will be initiated by the button click from the “Get Info” button on the “Get Login Info” state. This service will call the “getPassword” function written in Step 1, know the location of forgotPW.php, the method of communication, and what the name of the variable we are sending to PHP.



  

  

  {email_to.text}

Step 4. Make the “Get Login Info” button call the HTTPService rather than just taking the user to the “loggedOut” state as it is now.

Change From:

Change To:

If you have been following along with these tutorials, your application should look similar to:



  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  {username.text}

  

  

  {password.text}

  

  

  {setCookie.selected}

  

  

  

  

  

  

  

  {email_to.text}

Customizing the Login Box – Part 1 – Setting a “Remember Me” Cookie – FB4, PHP and MySql

Dan Orlando — Wed, 23 Feb 2011 15:15:37 +0000

In this tutorial you will learn how to add a “Remember Me” check box to your current login component, or into the login app that we built in the two-part tutorial, “Creating a Login Box”. Either way, by the end of this tutorial you will have what you need to successfully integrate this functionality. It is worth noting that while this can also be done using shared objects, we will build this feature into the login component by using PHP to set a cookie on the local machine instead.

You will begin by adding a “Remember Me” check box onto the login state of the component. For our login box, this is the “loggedOut” state. You are going to use PHP to set the cookie on the local machine. There are going to be three variables that you’ll need to make this happen.

1. Username (Get)

2. Password (Get)

3. Cookie – True/False (Set)

Setting the Cookie

There are a couple of things that will need to happen here. First, you will have to create a new variable to pass to the server to let it know if the checkbox is checked or not, and then tell PHP what to do about it. Start by adding the code below to your login.php file you created in the last tutorial, which will set the cookie.

  ";
  if(!$result)
  {
  $output .= "0";
  }else{
  $output .= $result['id'];
  }
  $output .= "";

//Output the User Type
  $usrtyp .= "";
  $usrtyp .= $result['user_type'];
  $usrtyp .= "";

//This Section is New (start)
  //If the checkbox is checked (true) set cookie, else (false) delete cookie
  if($logincookie == "true")
  {
  setcookie("username", $username, time()+3600);
  setcookie("password", $password, time()+3600);
  }else{
  setcookie("username", "", time()-1);
  setcookie("password", "", time()-1);
  }
  //This Section is New (end)

//output all the XML

print ($output);
  print ($usrtyp);
  print ($lcook); //New

?>

If you compare this login.php file to the previous one, you will see that we have added $logincookie, written the query, an if/else statement with instructions on what to do with it, and passed the information back to Flex by printing $lcook.

Note: you are passing back $lcook as an easy self-check so that we can see it in the FB4 console when running the application in debug mode, but this isn’t critical in order for the functionality to work.

Now with the login.php file saved, switch back to FB4 to make a few necessary changes which will assist in setting the cookie.

1. Create a variable so that you can trace the response from the server when setting the cookie.

[Bindable] private var cookieAction:Boolean;

2. Add an id to the CheckBox of setcookie.

3. Add a new variable in the login_user HTTPService that will tell PHP if the box is checked or not. By default a CheckBox value is true/false.

  
  {setCookie.selected}

4. (Optional) lets go ahead and place a trace on the variable cookieAction so that we can make sure everything is being sent back correctly. In the checkLogin function add the following lines:

  cookieAction = event.result.usertype;
  trace (cookieAction);

It should now look like this…

  private function checkLogin(event:ResultEvent):void
  {
  userid = event.result.loginsuccess;
  trace (userid);
  usertype = event.result.usertype;
  trace (usertype);
  cookieAction = event.result.usertype;
  trace (cookieAction);
  if (userid != 0)
  {
  currentState = usertype;
  }
  else
  {
  mx.controls.Alert.show('Invalid username/password');
  }
  }

Ok go ahead and run the application in debug mode. Then login using either admin or user credentials. Once you are logged in, close the browser and while looking in the console you should see three variables passed back from PHP. It is these variables that our application will use to determine the response.

1. number – as long as this id is not 0, you will be allowed to login

2. user or admin – this is telling the application which state to send you to

3. true/false – This is a check telling us weather or not the cookie variable was passed successfully.

Tip: If you would like to be able to see the cookie you can use the “Web Developer” plugin for the FireFox browser. After you have successfully logged into the application, click on the “Cookies” drop down and then “View Cookie Information”.

Note: In this example, I having both the username and password being saved unencrypted in the browsers cookies. You will need to be the judge of whether or not this is going to work for you, and either use or modify the code according to your needs. In a future tutorial we will talk about encryption.

Getting the Cookie

Now that you are successfully setting the cookie, you need to implement the functionality to retrieve it. The first thing you need to do is commit the php code that you will be calling from Flex. The job of the php service is to send the username and password that you have stored as cookies so that Flex can insert the respective values in the username and password fields of the login screen.

getCookie.php

  true";

  print "
  ".$_COOKIE["username"]."
  ".$_COOKIE["password"]."
  ";
  }
  else
  {
  print "false";
  }

?>

Next you will make the change in FB4 to call getCookie.php and then intercept the variables being passed back and put them to work.

1. Write the HTTPService and place it in the Declarations tag.

2. Write a function to call the HTTPService you just created.

  private function init():void
  {
  getCookie.send();
  }

3. Initiate the function adding the applicationComplete event to the opening application tag: applicationComplete="init()"

4. Write a function for the result handler of the HTTPService.

  protected function getCookie_resultHandler(event:ResultEvent):void
  {
  if(event.result.storedCookie == true)
  {
  cookieAction = true;
  username.text = event.result.creds.username;
  password.text = event.result.creds.password;
  }
  else
  {
  cookieAction == false;
  }
  }

This says: if the getCookie.php sends back a value of true, that means there was a stored cookie, then go ahead and mark the CheckBox on the login screen and fill out the username and password TextInput fields with the username and password returned from the cookie. Otherwise, just set cookieAction to false.

5. Change the selected property of the CheckBox so that it will be either checked or not checked based on the getCookie_resultHandler.

Change From:

Change To:

That’s it. Go ahead and test the functionality, and you should see that when the “Remember Me” check box is marked, that it will store a cookie with your login information, and when you reload the application it will fill out the username, password and mark the “Remember me” box. If you then remove the mark from the CheckBox, it will delete the stored cookies and the next time you reload the application, your login information will not be stored.

Your application should look like this:

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  {username.text}
  
  
  {password.text}
  
  
  {setCookie.selected}

Creating a Login Box with FB4, PHP and mySQL – Part 2

Dan Orlando — Mon, 21 Feb 2011 13:53:30 +0000

Welcome back for part 2 of building a login box using Flash Builder 4, PHP, and mySQL. In this tutorial we will connect the application to the database using FB4′s built-in data-centric development tools using PHP. What we are looking to accomplish is:

1. Create a User in the database using the registration form

2. Connect the login form to the database to check credentials before allowing login

3. Provide custom alerts for the application to communicate with the user

To get started, the first thing you’ll need to do is get the app to communicate with the MySQL database using FB4′s built in data-centric development features. By entering a few basic paramters, FB4 will generate the middle-tier (PHP) and Actionscript code for get, create, delete, and edit to make this communication possible. However, the one we’ll focus on in this tutorial is create. FB4 has many cool features built right in, which make data connection a breeze. If you have not had the opportunity to get familiar with the DCD features of Flash Builder 4, I encourage you to read my entry titled Data Centric Development with Flash Builder 4 – http://blog.anaara.com/archives/295.

Creating the Database

Lets get started creating a new database for the application by logging into your local server (eg. MAMP) or your hosting provider’s server control panel. Assuming that you have phpMyAdmin available to use and a database administration interface, login and create a new database. Click on the Query tab and copy and paste the SQL statement shown below into the query box. Once you click “Go” you will have created a table called “users” in your database and have two records.

  CREATE TABLE `users` (
  `id` int(8) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `password` varchar(20) DEFAULT NULL,
  `user_type` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
  ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
  -- Dumping data for table `users`
  --

INSERT INTO `users` VALUES(1, 'testUser', 'testuser@email.com', '123456', 'user');
INSERT INTO `users` VALUES(2, 'testAdmin', 'testadmin@email.com', '098765', 'admin');

Now, go back to Flash Builder, select the Data/Services tab, and click “Connect to Data/Services”. Choose “PHP” and click “next”. Now choose the link labeled “click here to generate a sample”. It will then prompt you to install ZEND AMF if you have not already done so.

Once Zend has installed successfully you will tell FB4 how to connect with your database. This information will be used to generate the PHP code. After you enter the information, hit “Next”, and then “OK” on the Security Warning alert box.

Note: if you are using MAMP, go to the MAMP startup page to get your settings.

Once you have completed these steps, the PHP page that was generated by FB4 will be brought up in your default PHP or text editor.

Everything that you need to be able to connect to the database for the registration page has been completed for you now by Flash Builder, but you still have some work to do. Switch over to design view and select the “register” state if you are not there already. Once you are there, click on the “Data/Service” Tab and follow the steps below.

1. Highlight createUsers(item:Users):int

2. Click the “Generate Form…” button. This button is located at the far right of the “Data/Services” tab.

3. When the “Generate Form” window opens, uncheck the “Form for return type” check box and click “Next”

4. In the properties column click the arrow to expand the item

5. What you will see is a list of what FB4 is going to create for you in the generated “Create” form. For this example, you are not interested in “id” because it is set to auto-increment in the database, and “user_type” because you are going to have that auto inserted by flex later. So, go ahead and uncheck those two boxes.

6. Click “Finish”

You now have a choice here: 1) You can delete the form that you created in the first section as well as the “Save” button and drag the generated form into the Panel (which is probably the easiest), or 2) you can use that information to make what you originally created on the canvas work and then delete the generated form and button. The choice is up to you, but in this tutorial, I will do it the second way because it allows us to better inspect what is being created by FB4.

From here you are going to switch over to source view so that you can make the next set of changes.

Editing the Create Form

The goal here is to combine TextInput field properties using the “id” and “text” properties of the generated code and the includeIn property of what you originally created. As far as the button goes, you’ll want to keep the id and click event from the generated button and add it to our button. Also, when you make the change, also change the button id and click event to something more meaningful such as id="saveBtn" and click="saveBtn_clickHandler(event)".

The combination of the two should look something like this:

Now we need to add additional code to the saveBtn_clickhandler that will commit the new record to the database. To do this you need to add createUsersResult.token = usersService.commit(); to the end of the function.

User Alert

Users like to know what is going on rather than guessing, so it is your job as the developer to tell them that their record was added to the database successfully or not. To do this, you will listen for confirmation from the server side, and then show a confirmation message via an Alert box before directing them to the login page. As you may have noticed, FB4 has already added import mx.controls.Alert;, the import statement for Alerts, otherwise you would have to call it manually.

It is now time to place a result event in the call responder associated with create, which for us is . To do this you change it to .

What’s cool here is that when you start to type “result” in the CallResponder tag, FB4′s autocomplete will not only find “result” but will also create the result handler for you if you click enter again after it shows you the option for “Generate Result Handler”. After doing so you will see a new function was created that is ready for you to fill in the function’s body. This is where you will tell it to show the confirmation and forward the user to the loggedOut state.

Change From:

protected function createUsersResult_resultHandler(event:ResultEvent):void
  {
  // TODO Auto-generated method stub
  }

Change To:

protected function createUsersResult_resultHandler(event:ResultEvent):void
  {
  mx.controls.Alert.show('Thank you for registering. You may login now!');
  currentState = "loggedOut";
  }

Before we wrap up this functionality, there is one last task to complete. You need to specify one additional piece of information to what is being sent to the server when the user clicks “Save” that the user doesn’t get to control, and that is user_type. For that you need to take another look at the saveBtn_clickHandler function and define the user_type. This is done by adding users2.user_type = "user"; Place this line of code directly below where the password is defined. The completed function will look like:

  protected function saveBtn_clickHandler(event:MouseEvent):void
  {
  var users2:Users = new Users();
  users2.username = usernameTextInput2.text;
  users2.email = emailTextInput2.text;
  users2.password = passwordTextInput2.text;
  users2.user_type = "user";

  createUsersResult.token = usersService.createUsers(users2);
  createUsersResult.token = usersService.commit();
  currentState = 'loggedOut';
  }

It’s time now to test it out, so go ahead and run the application and create a new user. Then go and look in your database and make sure the data you entered was added correctly, and that the user_type is showing as “user”.

Logging In

Now that you are able to create an account, you will create the ability to use your new account to login. Although you have not actually written any PHP code yet, all that is about to change. You have to tell PHP to ask MySQL to check the credentials being sent and give the thumbs up or thumbs down, and also return the user_type. Knowing the user_type will allow you to direct the person logging in to the proper state depending on if they are an admin or user.

First thing is to save the php file somewhere where the services can be called. On my local machine, the path is Applications/MAMP/htdocs/example12-debug.

Open up your PHP editor and create a new file called login.php. Then paste the following code into that file and save it.

";
  if(!$result)
  {
  $output .= "0";
  }else{
  $output .= $result['id'];
  }
  $output .= "";

//Output the User Type
  $usrtyp .= "";
  $usrtyp .= $result['user_type'];
  $usrtyp .= "";

//output all the XML

print ($output);
  print ($usrtyp);

?>

Now with the PHP in place, you can write the client side code that will pass the variables, call the necessary services, and receive the results that are sent back from the server. The steps for this are as follows:

1. Create two new variables to handle the results that will be received back from the server.

  private var userid:int;
  private var usertype:String;

2. Write a new function which will be called by the HTTPService telling Flex what to do with the results it receives.

  private function checkLogin(event:ResultEvent):void
  {
  userid = event.result.loginsuccess;
  usertype = event.result.usertype;
  if (userid != 0)
  {
  currentState = usertype;
  }
  else
  {
  mx.controls.Alert.show('Invalid username/password');
  }
  }

What this says is: If the server returns a user id that is not 0, then go ahead and set the currentState to what the server returns as the usertype, otherwise show an alert to the user stating “Invalid username/password.”

Note: This works because we have conveniently set all users who create an account to “user” for the user_type, and when we created the database we set the admin user_type to “admin”.

3. We need to write the HTTP Service request. This will call your service and also set the variables which we will be passing to the server.

  
  
  
  {username.text}
  
  
  {password.text}

There are a couple of important things going on here. First, in the opening tag you can see the id of “login_user”, which is how the service will be called by the click event. The result handler is set with result="checkLogin(event)". You also have to declare the type of service call you’re making, and you are also specifying the location of the file. Secondly, the code directly below that is what passes the username and password values from the TextInput fields, which has the ids of username and password respectively.

4. Last but not least, we need to tell the “Login” button to do something different than what it is doing now. Currently, the click event directs us to the “user” state, but now we need it to call the HTTPService to kick start the login process.

Change From:

Change To:

And that is it. You should now be able to run and test the application in three ways.

1. Login as user – Username: testUser / Password: 123456

2. Login as admin – Username: testAdmin / Password: 098765

3. Login as you – Choose the username and password which you created previously

4. Get declined – choose a username and password different from above and different from the one you created previously

You should see that all is in good working order. At this point your application should look similar to the following code:

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  {username.text}
  
  
  {password.text}

TIPS:
If you would like to make sure the correct variables are being passed back from the server to flex use the trace statement. For example, change this part of your checkLogin function:

Change From:

userid = event.result.loginsuccess;
  usertype = event.result.usertype;

Change To:

userid = event.result.loginsuccess;
  trace (userid);
  usertype = event.result.usertype;
  trace (usertype);

Now when you run your application in debug mode, and look in the FB4 console, you can see what is being returned to you from the server.

Creating a Login Box with FB4, PHP and mySQL – Part 1

Dan Orlando — Tue, 15 Feb 2011 13:51:00 +0000

Most standalone applications require a login box of some sort. That is why today we will begin our journey into building a login and registration form that will be reusable for many types of applications, or may act as a starting point for something more detailed. This will be a multi-part tutorial walking you through the major steps involved. Although each tutorial will be able to stand on its own to learn a particular skill, you can also follow them in order (listed below) and build the application from start to finish.

States and Layout
Connecting to DB and PHP
Setting cookies
Creating the forgot login functionality
Validation & Disable Save Button
No Duplicates in DB when creating new user
Email validation prior to account activation
Password Encryption
Converting the application into a component

At this time lets go ahead and get started on the first part, States and Layout. We will begin by creating a new Flex application. I am also going to set the Application Server type as PHP, and set the parameters of my server location. If you have connected to a server before, your settings should be saved and preloaded by FB4 by default. In my case the server settings are as follows:

Web root: /Applications/MAMP/htdocs

Root URL: http://localhost:8888

Note: MAMP is for Mac users and stands for Mac, Apache, mySQL, and PHP. This is a great stack which gives Mac users the ability to run applications locally, and is an easy one click install. There are two versions available, and you can get more information and download the product from their website at http://www.mamp.info.

Now that we have our new Flex application set up, its time to start building. The first thing that we want to know is what functionality is needed, and what states we’ll need to accomplish the tasks. The easiest way to do this is to write a list or make a drawing that you can use as reference. For this project, my list looks like this:

Functionality:

Login to application
Know the difference between user types and send them to the right place when they login
Connect, and commit information to database
Set cookie for login information
Email password if forgotten
Register new users
Check for duplicates in database before creating new entry
Validate user information
Email validation
Password Encryption
Disable save button until the user registration info has been validated

Note: We will not be working on all of the functionality in this tutorial, but it is important to know what you would like the end result to be when you start a project so you take everything into account during development.

States:

1. Login

2. Forgot Password

3. Registration

4. Logged in as regular user

5. Logged in as admin

Ok, now that you have a list of tasks that you’d like to achieve for this app, you’ll focus on creating the states and laying out the other necessary components. Once you have completed that, you will continue by writing the code needed to make the login box meet the desired functionality from the list above. Since most of the initial layout and state creation can be developed from the design view, go ahead and click on the “Design” tab in Flash Builder now.

Creating the Layout Panel

1. Drag a Panel object from the Components tab to the canvas.

2. Type “Flex 4 Login Box” into the Title text field in the Properties panel.

3. Click over to source view and set the horizontalCenter and verticalCenter properties to 0 for the Panel.

Creating the Login Screen

On the login screen we want the following components:

a “Username” TextInput field,
a “Password” TextInput field,
a “Login” button,
a “Forgot Login Info?” button,
a “Sign Up” label to link to the registration form, and
a checkbox for the “Remember Me” functionality.

To get all the components necessary to achieve this, follow the steps below:

1a. Drag two (2) TextInput components and two (2) Label components on top of the Panel. These will be used for the username and password TextInput fields.

1b. Set the id of one of the TextInput fields to “username” and the other to “password”

1c. Set the text property of one of the Labels to “Username:” and the other to “Password:”

2a. Drag two (2) button components on top of the Panel.

2b. Set the Label property of one button to “Login” and the other to “Forgot Login Info?”

3a. Drag a CheckBox component on top of the Panel.

3b. Set the label property to “Remember Me”

4a. Drag a Label component on top of the Panel.

4b. Set the text property to “Sign up”

5. Format the layout to your liking.

Creating the Forgot Password State

Until now the only state listed in the states tab is . In order to change that click the “New State” button which is the first button at the top of the “States” tab. When you do this a window will open asking you a couple of questions. Set the name to “forgotPW”, then click the radio button “Duplicate of ”, leave the “Set as Start State” checkbox empty, and click “OK” to finish.

FB4 will now show you the new design state for forgotPW which will look identical to what you just created. Before we go any further, right click or control click and click “Edit”. Now change the name of the state to “loggedOut” and check the box “Set as Start State” and click “OK”. You should now see two states in the states tab listed.

In this state we are going to need an “Email” TextInput box, “Send Login Info” button, and a “<< Login” button to get us back to the login screen. There are two ways to do this, but I chose the way described below based on personal preference.

Delete all components leaving only the Panel and drag the necessary components to the Panel.

Once that is complete change the text input box id property to “email”, the label text property to “Email:”, and one button’s label property to “Send Login Info” and the other to “<< Login”.

Finally, format the layout for the desired look your want. You should now see two states and when you click back and forth between the two, the only similarity is the Panel which is holding the components.

Creating the Registration State

Create a new state as you did in the previous step, but this time name it “register” and choose to duplicate the logged out state. This state is going to need TextInput boxes for “Username”, “Email” and “Password”, a “Save” button, and a “<< Login” button. Delete the existing components and drag the needed components to the panel. When you are finished set the ids of the text boxes as follows: “usernameTextInput” “emailTextInput” and “passwordTextInput”. Make sure that your labels match up with the corresponding TextInput field. Finally, set the labels of the buttons to “Save” and “<< Login”. After you have done this, go ahead and change the formatting to make it look the way you desire.

Creating the LoggedIn States and

To create the logged-in states, follow the same steps as before, but this time set the first new state to “user”, the second to “admin”, and it doesn’t matter which state you duplicate. On each of these states we need one button and one label.

On the “user” state, set the label text to “Welcome User” and the button label set to “Log Out”. On the admin state, set the label text to be “Welcome Administrator” and the button label to “Admin Log Out”.

Formatting and Editing the Code

At this point your application should look something like this:

Editing the “loggedOut” State

Change From:

Change To:

Change From:

Change To:

Change From:

Change To:

Change From:

Change To:

Editing the “forgotPW” State

Don’t make any changes to the “Get Login Info” button because that will not take us to another state at this time.

Change From:

Change To:

Editing the “register” State

Don’t make any changes to the “Save” button because that will not take us to another state at this time.

Change From:

Change To:

Change From:



Change To:

Editing the "user" and "admin" States
Change From:

Change To:



Change From:

Change To:

Now you should have all of the states created, formatted, and edited so that when you run the application you have a working mockup of how it will interact. When you click on the respective buttons, you should be taken from state to state. The only state that you will not be able to enter at this point will be "admin", but we will get to this soon.
In the next tutorial we will take what we have created so far and connect it to a mySQL database using FB4's Data Centric development tools, and a couple of custom PHP scripts. At that point you will have a fully functional login application.



Data Centric Development with Flash Builder 4 – Part 2
Dan Orlando — Wed, 09 Feb 2011 15:44:24 +0000
In Part 1 of this entry, you created a working application that allows you to populate a DataGrid using PHP and MySQL. You then added the ability to create, delete, and edit the information in the database. Here is what it currently looks like:

As you can see, although you created a working application, the look and feel of the application is in some serious need of work in terms of usability. With that said, lets get to work.
Cleaning Up the Create Functionality
First, we will start with the create functionality and remove all it’s related components that are not needed. You are going to make the workflow such that information is added to a record after it has been created . To do this, you will remove the two associated text input boxes, leaving us with only the Create button. This is easy enough to do in design view, so take advantage of it if you prefer it over source view. After you delete the two TextInput boxes that the application was calling for in the create function, you need to go back change the button_clickHandler function.
Change From
protected function button_clickHandler(event:MouseEvent):void
  {
    var person2:Person = new Person();
    person2.id = parseInt(idTextInput.text);
    person2.name = nameTextInput.text;

    createPersonResult2.token = personService.createPerson(person2);
  }
Change To
protected function button_clickHandler(event:MouseEvent):void
  {
    var person2:Person = new Person();

    createPersonResult2.token = personService.createPerson(person2);
  }
Now save, build, and run the application.

Cleaning Up the Delete Functionality

Instead of deleting a record by typing the record’s unique identifier into a text input, you’re going to have the application delete the person based on what row is  selected in the DataGrid. To do this, you’ll first need to know the following:

 the string id assigned to your DataGrid, and
the name given to the primary key/unique identifier field in the database.

For this app, the id of the DataGrid is “dataGrid” and the name of the field we are using in our database is “id”.
The function called when the delete button is clicked is button3_clickHandler, and upon further investigation of the function you’ll see that deletePersonResult.token = personService.deletePerson(parseInt(itemIDTextInput2.text)); is what makes the magic happen. But, since you are deleting the (itemIDTextInput2.text), the function will no longer work and throw an error. This is because a slight modification is needed, which will tell Flex that we want to delete what is selected on the DataGrid.
 
Change From:
deletePersonResult.token = personService.deletePerson(parseInt(itemIDTextInput2.text));
Change To:
deletePersonResult.token = personService.deletePerson(dataGrid.selectedItem.id);
Go ahead and delete the text input box associated with delete, then save, build, and run the application.

Cleaning Up the Edit Functionality

Next, lets look at the edit functionality, which also includes several components that aren’t necessary.  We are going to makes changes to edit it in two parts so that you can have it look and work the way you want based on your application:

A. If you want to keep the text boxes for editing

B. If you want to edit directly within the dataGrid.
Part A:

We need to find out what function is being called by the “getPerson” button. By looking at the code we can tell that it is button_clickHandler(event). Once we have this information you are going to go ahead and delete both the button and text box associated with getPerson. Now you will make a similar modification to the one you did with the delete functionality so that you can populate and edit information based on the selection in the DataGrid.
Change From:
protected function button_clickHandler(event:MouseEvent):void
  {
    getPersonByIDResult.token = personService.getPersonByID(parseInt(itemIDTextInput.text));
  }
Change To:
protected function button_clickHandler(event:MouseEvent):void
  {
    getPersonByIDResult.token = personService.getPersonByID(dataGrid.selectedItem.id);
  }
Since we have deleted the “getPerson” button, you also need a way for the function to be called that will populate your edit text boxes. To do this, you will add the following click handler to the DataGrid  click="button_clickHandler(event)"
The opening DataGrid tag should now look like this:

Save, build, and run the application now. You can now switch back to design view and slide the components around the canvas to achieve your desired look. If you would like to condense the application even further by editing it directly in the  DataGrid, continue to part B.

Part B:

In order to make changes within the DataGrid, you need to set it to editable by setting editable to “true”. In this particular situation, you don’t want both fields to be editable, so you will set editable to “false” for the id column, as seen below:




creationComplete="dataGrid_creationCompleteHandler(event)"

dataProvider="{getAllPersonResult.lastResult}"

click="button_clickHandler(event)"

editable="true">













Go ahead and run the application again now and you will see that the name column is editable when clicked on, and the id field is not. Also note that right now it will change the information in the edit screen, but unless you click “Submit”, your changes will not be stored in the database.
To change this you will have the DataGrid make the call to commit on the FocusOut event. At this time go ahead and delete the “Edit Screen” form.
After the DataGrid’s opening tag, you need to change the click handler from:

click="button_clickHandler(event)"

To:

focusOut="button2_clickHandler(event)"

Then change the event type from MouseEvent to Event and tell it to stop looking for the text boxes you deleted or it will throw errors. So the new function will look like:
protected function button2_clickHandler(event:Event):void
  {
    updatePersonResult.token = personService.commit();
  }
Now save, test and run your new application. You will find the same functionality but in a much cleaner package. And in the spirit of keeping things clean, you can remove the function calling getPersonByID.
protected function button_clickHandler(event:MouseEvent):void
  {
    getPersonByIDResult.token = personService.getPersonByID(dataGrid.selectedItem.id);
  }

Thats it… Hope you enjoyed this turorial!



Data Centric Development with Flash Builder 4, Part 1
Dan Orlando — Mon, 07 Feb 2011 14:30:29 +0000
I’ve been helping a friend of mine learn Flex for the past month or so and I decided to write up a blog post on something we worked on together over the weekend – using Flash Builder 4 to connect a flex application to a mySQL database using PHP. Yea, ok, so what. There’s a million tutorials out there on the same thing. BUT – the problem is that there aren’t that many Flex developers that know PHP well enough to be able to adapt what they learn from a tutorial on the subject to their specific requirement. So we’re going to do things a little differently here. I’m going to show you how to accomplish this without ever having to look at a single line of PHP code!
Considering how much effort the Flash Builder 4 development team put into the data centric development capabilities of FB4, it is surprising to find that there aren’t too many tutorials and blog entries that focus on how to utilize these features. With that in mind, we will use FB4’s build in data centric capabilities to make the connection to a mySQL database from design view and add CRUD capabilities to an application. After that, we will dive into the source view to enhance the usability and functionality. Since this is going to be a fairly lengthy one, it will be broken into three separate entries.
For the first entry, you’ll create the connection to the database and get your CRUD services working.
Start off by creating a new Flex project. When you create the project, be sure to choose PHP for the application server type. You will then have to choose your server location. If you have done so for previous projects, it should be saved in there by default. I am using MAMP so my setup is as follows:
Web root: /Applications/MAMP/htdocs

Root URL: http://localhost:8888

Once you have it filled out with the correct values, validate your configuration, choose your output folder, and click finish. This will create and launch your new Flex project.
Creating the Database

Now create a new database to use for the application from your hosting provider’s server control panel. Assuming you have phpMyAdmin available to use as a database administration interface, login and select the database you just created. Then click on the Query tab and paste the following SQL in the query box to create a table and some data.
CREATE TABLE `person` (
`id` int(8) NOT NULL AUTO_INCREMENT,
`name` varchar(25) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `person`
--

INSERT INTO `person` VALUES(1, 'John');
INSERT INTO `person` VALUES(2, 'Bob');
Now, go back to Flash Builder, select the Data/Services tab, and click “Connect to Data/Services”. Choose “PHP” and click “next”. Now choose the link labeled “click here to generate a sample”. It will then prompt you to install ZEND AMF if you have not already done so.
Once Zend has installed successfully you will tell FB4 how to connect with your database. This information will be used to generate the PHP code. After you enter the information, hit “Next”, and then “OK” on the Security Warning alert box.

Note: if you are using MAMP, go to the MAMP startup page to get your settings.
Once you have completed these steps, the PHP page that was generated by FB4 will be brought up in the default editor.
Populating the DataGrid

Step 1. Drag a DataGrid component to the canvas from the Components tab.
Step 2.  Drag getAllPerson():Person[] from the Design/Services tab directly on top of your DataGrid.
Step 3. Save and run your application for the first time.

You should find that the DataGrid is now populated with the information from the database. This is great start, but in most cases completely useless, so lets add the ability create, delete and edit the data base from the application.
Editing the Database

Step 1. From the Data/Services tab click and highlight updatePerson(item:person):void and click on the “Generate Form” button.
Note: The Generate Form button is the last button on the right in the top right of the Data/Services tab.
Step 2. A window will open asking you to edit any of the default parameters. You don’t need to change any of the settings, but it is a good idea to take a look around and get a familiar with the dialog boxes because you can edit these parameters later for additional functionality.
Step 3. Click “Finish”
Clicking finish generates two forms on the canvas. The first allows you to call data from the database by the id field of the Persons table in the database, and second allowing you to edit your selection. The forms may need to be moved around the canvas so that they do not overlap each other.
Step 4. Save and run the application.

You are now able to call information from the database, edit it, and when you click “Submit” you will see the change reflected in the DataGrid. It is important to understand that code which is generated by FB4 does not commit any change to the database itself, so once you refresh the page your changes are lost. Don’t worry about this now, we will fix this shortly.
Delete Person from Database by id

Step 1. From the Data/Services tab, click and highlight deletePerson(itemID:int):void and click on the “Generate Form” button.
Step 2. Uncheck the checkbox labeled “Form for return box” in the section labeled “Create”
Step 3. Click the “Finish” button
Step 3. Save and run the application
You are now able to choose an id from the list and delete it based on the Person id. Again, make note that the changes are not being committed to the database.
Create Person in Database

Follow the same steps above, but this time using createPerson(item:Person):int from the Data/Services tab to generate the form. What you will notice this time, is that when you run the application, the create functionality does not seem to work at all. This is nothing to be concerned about though, you have done nothing wrong. We just need to make a few tweaks in the code to get all of the functionality working as you would expect.
Moving into Source View

Now that we are in source view we can add the additional lines of code needed to make this application function as it should.
Lets first start by working on the create functionality. There are two reasons why when we currently click the “Create” button that we are not seeing anything happen.
1.	FB4 is not committing the new record to the database

2.	Even if it was, the DataGrid is not updating after the button click so we would not be able to see the change anyway
To make this work we need to make a few modifications to the function being called when the user clicks the create button.
Change From:
protected function button4_clickHandler(event:MouseEvent):void
  {
    var person3:Person = new Person();
    person3.id = parseInt(idTextInput2.text);
    person3.name = nameTextInput2.text;

    createPersonResult.token = personService.createPerson(person3);
  }
Change To
protected function button4_clickHandler(event:MouseEvent):void
  {
    var person3:Person = new Person();
    person3.id = parseInt(idTextInput2.text);
    person3.name = nameTextInput2.text;

    createPersonResult.token = personService.createPerson(person3);
    createPersonResult.token = personService.commit();
    getAllPersonResult.token = personService.getAllPerson();
  }
createPersonResult.token = personService.commit(); tells the database to commit the new record, while getAllPersonResult.token = personService.getAllPerson(); tells the dataGrid to get its data again. Now, save and run the application to see that the new functionality is working.
Lets go ahead and make the needed changes to the delete and edit functions to also get them committing to the database.
Committing the Delete Function to the Database

To get the delete button to commit its changes to the database we need to add the following line of code deletePersonResult.token = personService.commit();
Change From:
protected function button3_clickHandler(event:MouseEvent):void
  {
    deletePersonResult.token = personService.deletePerson(parseInt(itemIDTextInput2.text));
  }
Change To:
protected function button3_clickHandler(event:MouseEvent):void
  {
    deletePersonResult.token = personService.deletePerson(parseInt(itemIDTextInput2.text));
    deletePersonResult.token = personService.commit();
  }
Committing Edits to the Database

This isn’t quite as simple as the delete because we have to manually add updatePerson(item:Person):void. This is a two step process.
Step 1. Add the following line of code updatePersonResult.token = personService.commit(); to the function called when the user clicks submit. This will tell the function to also commit the change to the database.
protected function button2_clickHandler(event:MouseEvent):void
  {
    person.id = parseInt(idTextInput.text);
    person.name = nameTextInput.text;
    updatePersonResult.token = personService.commit();
  }
Step 2. Add  to Declarations or we will end up with the following error: “1120: Access of undefined property updatePersonResult.”
If we run our flex application now, we notice that although functional, it is not very pretty or user friendly. In Part 2 of this entry, you will remove all of the unneeded components in order to make the application easy to use, and something more like what you would see in a real world application.



Adventures in Printing with Flex 4
Dan Orlando — Thu, 03 Feb 2011 21:17:53 +0000
I was recently tasked with a Flex print requirement that turned out to be far more complex than I could have anticipated. I knew that Flex wasn’t particularly good when it came to printing (which is probably an understatement), but I really thought it had advanced since the last time I made an attempt at print with Flex a couple years ago. Based on the little bit of research that I did, it appears that everyone is pretty much just as in the dark as I am in terms of the reasoning behind Adobe’s decision that print wasn’t necessary or wasn’t important enough to put a considerable amount of time and energy toward it.
Flex is incredibly good at a lot of things, particularly data dashboards. I’ve had a number of business executives that have been stuck with Excel for years start drooling right in front of me after showing them some of the dashboards I’ve worked on. As Flex continues to evolve as a UI development tool for complex data dashboards, and as our clients continue to see it’s powerful capabilities, the logical progression is that Flex developers are now receiving requirements that involve reporting capabilities… and reporting capabilities means – you guessed it – PRINTING (gasps). The fact of the matter is, the line between data dashboards and reporting has become blurry at best.
Let’s take a moment to put this into perspective. There are so many areas of a business where employees of a company must be able to make sense of large amounts of data and form logical conclusions based on how that data is presented so that they can make important decisions.  Furthermore, as I stated earlier, Flex is particularly good at providing developers with the tools that are necessary to fulfill these needs. When you provide business professionals with a means of making decisions based on conclusive evidence in the form of data representation, it only makes sense that they must be able to print that data representation to show to their constituencies to support their argument for the decision that they made, which was based on the reports they generated.
Ok, so I’ve established the importance of being able to print from Flex, so let’s look at the current options for a business professional who is about to make a presentation to an important executive at his company. First, there is the ghetto way to do it: he could do a simple screenshot of the Flex data dashboard using shift-cmd-4 on Mac or Shift-”Print Screen” (I think that’s what it is) on PC and try to import the resulting image into his presentation tool. The problem here is that the result isn’t going to look very good when it’s printed because of the low resolution.
Developers have the option of implementing a third-party library to try and solve their print requirements. I did a lot of research on this, and found that AlivePDF is currently the best bet. However, there is still much work to be done; far more than Thibault Imbert could, the creator of AlivePDF, could handle alone. The library has been in development for four years and it’s capabilities are impressive in comparison to the pathetic print capabilities that are built into the Flex framework. It handles the printing of charting components wonderfully. However, it’s ability to handle the printing of lengthy datagrids is pretty terrible. Now, I don’t want to discredit the work of Thibault Imbert in any way. If it weren’t for him, I would have never made it as far as I have on my current requirement in such a short period of time. So believe me when I say that I have a lot of respect for Thibault (apparently Adobe felt the same way, because they made him Product Manager for the Flash Player, which is pretty cool!).
I have to also consider the fact that support for grid-printing has only really been implemented in the last year based on the release notes. The problem is that it is easy to think that grid printing would be pretty simple, but there are a lot of factors that play a role. For example, wrapping text in a cell increases the height of that row, resulting in part of the bottom row being sliced off on that page. Then, when attempting to truncate the text as a solution, the text for all of the rows became misaligned, with text from one row falling on top of the text of another. So my next endeavor is to figure that one out.
The bottom line here is that print really needs to get the attention it deserves now so we have it for the next major release of Flex, and I will certainly be voicing this concern to our friends at Adobe as a result of a particularly painful couple of months working on this.



Deep Linking with Flex 4 using Fragments
Dan Orlando — Wed, 26 Jan 2011 01:46:23 +0000
The objective of deep linking is typically centered on creating functions that either serialize the current state to the URL or deserialize the URL and use that information to change the state of the application. This makes it possible to bookmark a specific state of your Flex application. The main ingredient for this deep linking implementation is called a “fragment”. You’ve probably seen these used before in HTML or Javascript. A fragment is separated from the URL using the hash mark symbol (#). For example, fragments are used when anchoring items of an HTML web page. A “frequently asked questions” page is the first thing that comes to mind for me because there are so many FAQ pages on the web that list the questions at the top of the page and when you click on a question, the scrollbar jumps down to the respective answer for the question you clicked on. However, in Flex, you can use this same concept to tell your application what state it should be in or even the state of a specific component!
Note that when using URL fragments for deep linking, you actually want to keep the built-in history management off, otherwise it will interfere with fragment processing.

Step 1
Start by declaring three variables:
1) a reference to the Flex BrowserManager class,
2) a flag to signal that URL parsing is in progress, and
3) a variable to hold the title for the browser’s title bar.
public var browserManager:IBrowserManager;
private var isParsing:Boolean;
private var title:String;
Step 2
Now, you need to declare your states of your application if you haven’t already and place a listener for the enterState event. When the state changes, a call to updateURL will be made.


    
   
   
   


Step 3
When the application loads, you’ll need to initialize the BrowserManager, and register two listeners, one for when the browser’s URL changes and the other for when the application’s state changes. Lastly, you’ll use the callLater() method of UIComponent to parse the URL. Note that this function is called on creationComplete of the Application tag.

private function application_creationCompleteHandler():void
{
   browserManager = BrowserManager.getInstance();
   browserManager.init("", "Home");
   browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
   callLater(parseURL);
}

Step 4
Now write the code for your parseURL() function. This function will be called whenever the BROWSER_URL_CHANGE event fires. The function parses the URL, and if fragments are found, it will change the title and state of the application accordingly.

private function parseURL(event:Event = null):void
{
   isParsing = true;
   var o:Object = URLUtil.stringToObject(browserManager.fragment);
   if (o.view == undefined)
      o.view = "Home";
   currentState = o.view;
   title = currentState;
   browserManager.setTitle(title);
   isParsing = false;
}

Step 5
You are now successfully updating the application from the URL! The next thing you need to do is update the URL from the application though. We’ll accomplish this with the function updateURL().

private function updateURL():void
{
   title = currentState;
   var fragments:String = "";
   var o:Object = {};
   if (currentState != "Home")
      o.view = currentState;

   fragments = URLUtil.objectToString(o);
   browserManager.setTitle(title);
   browserManager.setFragment(fragments);
}


And that’s all there is to it. Happy Flexing!
-Dan Orlando