Write Social Applications for Imeem in ActionScript Using Adobe Flex: Part 3

Welcome to part 3 of our series of tutorials on how to write [social] music applications for Imeem in ActionScript. Last time we built the search functionality, allowing users to search for songsn - view screen shot. So far, we've written only 3 methods and used just the media class - view screen shot. Today we'll move on with the Login functionality; we'll allow users to log in with their imeem credentials. Please note that this is not registration, users must have already registered with imeem.

Here's how things are going to work:
1- We'll display a log in link in our main application.
2- When users click on the link, we'll show a modal window (with username, password & log in button).
3- When users click on the log in button, we'll grab their credentials and process the authentication.

• If it fails, we'll tell them and keep the modal window open.
• If it succeeds, we'll close the modal window, return to the main application and greet the user. Later, we'll allow them to log out.

Let's start by creating the modal window with login controls: username, password & a button. With Flex open, go to File -> New -> MXML Component.
The default directory for the new mxml file should be the "src" directory from our current app. Leave it untouched. Enter "UserAuthentication" for filename. For Based on, choose TitleWindow. Leave everything else to their default values. Click on Finish. We'll resize the window in Design View. Here's a screen shot. Select the window and set the "Show close button" property to true. See screen shot reference below.

You should be inside the newly created mxml file. From the toolbox, drag 2 labels, 2 input text boxes and 1 button. Place them as you like - or like this: view screen shot. Make sure that you give IDs to the controls - especially the username, password and button controls; we'll reference them in the code. Name the username input text box txtUsername, password box txtPassword, and button btnLogin. As you know, the password input text box must mask its content. So select the password control (on the stage) and set "Display as password" property to true, as in screen shot. Resize the window to make look good. Once you're happy with the layout/look of things, switch to Source View to write some code.

In Source View for the newly create mxml file, add an additional property to the mx:TitleWindow tag: close="titleWindow_close(event)". Then scroll down to the bottom, right before the closing tag for mx:TitleWindow. Start typing the mx:Script tag and hit enter to get it to write the rest of the code for you. Now, inside the CDATA section, do 2 imports like so:

import mx.events.CloseEvent;
import mx.managers.PopUpManager;

Add the closing function for the window, like so:

private function titleWindow_close(evt:CloseEvent) : void {
PopUpManager.removePopUp(this);
}

The complete code for the login window should look like this. If the user decides it's not to login yet, they can simply click the X from the window and it'll be closed - by the above method. Now, let's switch back to the other mxml file - the original one.

It's inside our original mxml file (imeemMusicExtension.mxml) that we'll handle the click event for the login button that's inside the newly created mxml file. Using the Design View on the original mxml file, drag 1 label and 1 link button to the stage. I positioned them like so. Give IDs to both of them (lblGreeting for the label, btnLogin for the button). If you like, set the text property of the label to username or leave it blank.

Now switch to Source View to start writing some code!

Locate the markup for the link button and set its click property like this: click="btnLogin_click(event)". Go down to the import section, and add this line: import mx.managers.PopUpManager;
That's the class we'll use to show the modal (login) window. Go to the variable section, and add this line: private var loginWin:UserAuthentication;
This loginWin variable of type UserAuthentication will be used to create/show/close the login window.

Here's a scenario: a user logs in to the app, closes their browser (w/o loggin out) and then reloads the app. The second time around, we should greet the user without having them log in again (they never logged out). So we need to check whether or not the user is logged in - whenever they first load the app. Let's create a method called loadCurrentUser to do that. This method needs to be called inside the onInit method. So add the method call inside onInit, like so.

What will the method loadCurrentUser do? It'll use the "users" class (from the API) to check if the current user is logged in. If so, it'll tell us and provide us the some info about the current user (including their name). So the definition looks like this:

private function loadCurrentUser() : void {
imeemService.users.getCurrentUser(onUserLoaded);
}

The users class exposed the method getCurrentUser to us, which takes in a callback method that will contain the info about the user (if login was successful). Let's define that callback method.

private function onUserLoaded(result:ResultData) : void {
if(result.success){
txtGreeting.text = "welcome, " + result.data.name;
btnLogin.visible = false;
}
}

If the user is logged in, we greet them with [welcome, USERNAME] and hide the login link. Pretty cool, huh?

...and now the coolest method definition of all: the click event to show the modal window!

private function btnLogin_click(evt:Event):void{

loginWin = PopUpManager.createPopUp(this, UserAuthentication, true) as UserAuthentication;

PopUpManager.centerPopUp(loginWin);

loginWin.btnLogin.addEventListener(MouseEvent.CLICK, doLogin);

}

What's going on in that method? First line, we create/show the modal window and save the reference into our loginWin variable. The class PopUpManager exposes the createPopUp method that takes in 3 paramaters: parent window, class name, and a boolean (for modal or not modal). By the way, a modal window means the user can't get back to the parent window until he/she deals/closes the modal window. Next, we center our pop up window. And finally, we register the click event for the login button inside the modal window to a method called doLogin - which we'll define like this:

private function doLogin(evt:MouseEvent):void{

imeemService.users.login(loginWin.txtUsername.text, loginWin.txtPassword.text,true, onUserLogin);

}

That one line of code inside the above method is simply collected the data entered by the user and passing it to imeem via the "login" method of the "users" class. Additional, we pass a boolean variable telling imeem to keep the user logged in, and we also pass a callback method that will contain the user data. NOTE: check out how we access the text boxes inside the modal window, we use the reference saved in our variable "loginWin"!
And the callback method is defined like this:

private function onUserLogin(result:ResultData):void{
if(result.success){
PopUpManager.removePopUp(loginWin);
onUserLoaded(result);
}
}

Inside the above method, we check to see if the login was successful. If it was, we close the modal window then call the method that will greet the user (and hide the login link), onUserLoaded - previously defined. Here's a screen shot for the 5 new methods.

How about running the app to test it? Try it, and you should get something like this.

Now that we have the login functionality working, we can tackle the "Add song to playlist" part - which will use the login function. We'll cover that part in the next tutorial, so stay tuned!