Flex Login Tutorial
Here is a simple Flex application that simulates logging into a website with an email address.
Download the example Flex Builder 3+ source code.
Flex MXML View
<?xml version="1.0" encoding="utf-8"?>
<mx:Application creationComplete="start()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="246" height="80">
<mx:Script>
<![CDATA[
import com.jadbox.flashmvc2.SuperLogger;
import com.jadbox.flashmvc2.SuperEvent;
public function start():void {
SuperWebsite.gi.actionLogin.addEventListener(SuperEvent.COMPLETE, onLogin);
}
private function clickLogin():void {
SuperWebsite.gi.runEvent(new LoginEvent(email.text));
}
private function onLogin(e:LoginEvent):void {
if(e.successful) {
trace("Success on login for email "+ e.email);
status.text = "Welcome " + SuperWebsite.gi.user_profile;
}
if(e.errorWasBlank) status.text = "email was blank";
else if(e.errorWasInvalid) status.text = "email was invalid";
}
]]>
</mx:Script>
<mx:Button x="178" y="24" label="Login" click="clickLogin()"/>
<mx:TextInput x="10" y="24" id="email" text="test@test.com"/>
<mx:Label x="10" y="6" text="Login" id="status"/>
<mx:Button x="10" y="54" label="Trace Log" click="{trace(SuperLogger.logString)}"/>
</mx:Application>
<mx:Application creationComplete="start()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="246" height="80">
<mx:Script>
<![CDATA[
import com.jadbox.flashmvc2.SuperLogger;
import com.jadbox.flashmvc2.SuperEvent;
public function start():void {
SuperWebsite.gi.actionLogin.addEventListener(SuperEvent.COMPLETE, onLogin);
}
private function clickLogin():void {
SuperWebsite.gi.runEvent(new LoginEvent(email.text));
}
private function onLogin(e:LoginEvent):void {
if(e.successful) {
trace("Success on login for email "+ e.email);
status.text = "Welcome " + SuperWebsite.gi.user_profile;
}
if(e.errorWasBlank) status.text = "email was blank";
else if(e.errorWasInvalid) status.text = "email was invalid";
}
]]>
</mx:Script>
<mx:Button x="178" y="24" label="Login" click="clickLogin()"/>
<mx:TextInput x="10" y="24" id="email" text="test@test.com"/>
<mx:Label x="10" y="6" text="Login" id="status"/>
<mx:Button x="10" y="54" label="Trace Log" click="{trace(SuperLogger.logString)}"/>
</mx:Application>
SuperWebsite (The SuperModel)
package
{
import com.jadbox.flashmvc2.SuperAction;
import com.jadbox.flashmvc2.SuperModel;
public class SuperWebsite extends SuperModel
{
// SuperWebsite.gi.something is my shorthand for usual Singleton.getInstance().something
// However, the SupelModel does not have to be a singleton and could be a property of your base Application.
public static const gi:SuperWebsite = new SuperWebsite();
public var user_profile:String;
// Add other properties for variables that are shared among actions or, if needed, views.
public function SuperWebsite()
{
super();
}
public var actionLogin:SuperAction = new SuperAction(LoginAction, LoginEvent);
// Add additional SuperAction properties here to link to actions and their event
}
}
{
import com.jadbox.flashmvc2.SuperAction;
import com.jadbox.flashmvc2.SuperModel;
public class SuperWebsite extends SuperModel
{
// SuperWebsite.gi.something is my shorthand for usual Singleton.getInstance().something
// However, the SupelModel does not have to be a singleton and could be a property of your base Application.
public static const gi:SuperWebsite = new SuperWebsite();
public var user_profile:String;
// Add other properties for variables that are shared among actions or, if needed, views.
public function SuperWebsite()
{
super();
}
public var actionLogin:SuperAction = new SuperAction(LoginAction, LoginEvent);
// Add additional SuperAction properties here to link to actions and their event
}
}
LoginEvent (SuperEvent): Used a model for LoginAction
package
{
import com.jadbox.flashmvc2.SuperEvent;
public class LoginEvent extends SuperEvent
{
public var errorWasBlank:Boolean;
public var errorWasInvalid:Boolean;
public var email:String;
public function LoginEvent(email:String)
{
super(email);
}
}
}
{
import com.jadbox.flashmvc2.SuperEvent;
public class LoginEvent extends SuperEvent
{
public var errorWasBlank:Boolean;
public var errorWasInvalid:Boolean;
public var email:String;
public function LoginEvent(email:String)
{
super(email);
}
}
}
LoginAction – Note that this class does not need to extend/implement any other classes. It just needs it’s first parameter to be a SuperEvent type for reference.
package
{
import com.jadbox.flashmvc2.SuperEvent;
import com.jadbox.flashmvc2.SuperModel;
import flash.events.Event;
import flash.utils.*;
public class LoginAction {
public var superWebsite:SuperWebsite;
private var event:LoginEvent;
public function LoginAction(event:LoginEvent, email:String)
{
trace("action class email "+email);
this.event = event;
superWebsite = event._superModel as SuperWebsite;
event.errorWasBlank = !email || email=="";
event.errorWasInvalid = email.indexOf("@") == -1 || email.indexOf(".") == -1;
event.email = email;
superWebsite.user_profile = "";
var noError:Boolean = !event.errorWasBlank && !event.errorWasInvalid;
if(noError) superWebsite.user_profile = "John Doe";
event.complete(noError);
}
}
}
{
import com.jadbox.flashmvc2.SuperEvent;
import com.jadbox.flashmvc2.SuperModel;
import flash.events.Event;
import flash.utils.*;
public class LoginAction {
public var superWebsite:SuperWebsite;
private var event:LoginEvent;
public function LoginAction(event:LoginEvent, email:String)
{
trace("action class email "+email);
this.event = event;
superWebsite = event._superModel as SuperWebsite;
event.errorWasBlank = !email || email=="";
event.errorWasInvalid = email.indexOf("@") == -1 || email.indexOf(".") == -1;
event.email = email;
superWebsite.user_profile = "";
var noError:Boolean = !event.errorWasBlank && !event.errorWasInvalid;
if(noError) superWebsite.user_profile = "John Doe";
event.complete(noError);
}
}
}