Simple and easy-to-understand flex puremvc getting started example: Implement Login

In the puremvc Study Notes (I), I introduced an example of the use of the Flex framework puremvc: Step 1 (hereinafter referred to as step 1). In this article, the introduction of puremvc is very vivid and clear, if you want to quickly learn the puremvc framework, we recommend that you take a look.

However, the examples here are a little inadequate for those who want to use puremvc on their own. Because the first step introduces the code starting from the application to load the facade, and then registers command, proxy, mediator, the advantage of this description is that readers can quickly understand the internal operating mechanism of puremvc. After understanding the principles of puremvc, we will begin to figure out How to Apply puremvc to a project. I would like to use a login example to illustrate how to use puremvc to build a project. The engineering structure is as follows:

Because the names of all mediator, proxy, command, and event are defined in namespace. As under the system package, Let's first look at the code of this:

Package System
{

Public class namespace
{
Public static const loginproxyname: String = "loginproxy ";
Public static const loginsuccess: String = "loginsuccess ";
Public static const loginfailed: String = "loginfailed ";
Public static const loginevent: String = "loginevent ";
Public static const loginmediatorname: String = "loginmediator ";
Public static const applicationlogin: String = "login ";
Public static const applicationmediatorname: String = "appliactionmediator ";
Public static const facadestart: String = "Start ";
}
}

Model and proxy

Because the data comes from the model layer, we use the proxy for management, so we first design this module to define a simple data structure such as loginvo, used to store login data: user name and password. The Code is as follows:

Package Model. Vo
{
Public class loginvo
{
Public var Username: string;
Public var password: string;
}
}

Create loginproxy and inherit proxy to implement iproxy:

Package Model
{
Import model. VO. loginvo;
Import org. puremvc. as3.interfaces. iproxy;
Import org. puremvc. as3.patterns. Proxy. proxy;
Import system. namespace;

Public class loginproxy extends proxy implements iproxy
{
Public Function loginproxy ()
{
Super (namespace. loginproxyname );
}

Public Function checklogin (VO: loginvo): void
{
If (VO. Username = "test" & VO. Password = "test ")
{
Sendnotification (namespace. loginsuccess, VO );
}
Else
{
Sendnotification (namespace. loginfailed );
}
}
}
}

Each proxy must have its own name. To facilitate unified management, I have defined all the names in namespace. The advantage of this is that it is conducive to collaborative development, it also facilitates program debugging. The Code shows that the entire model has no connection with the outside world. It provides a checklogin () method to send notifications based on the judgment results. The proxy is not concerned about how to handle such notifications. We can see that the coupling degree of proxy is quite low! (In the puremvc organization, facade is the boss. The three younger siblings, proxy, mediator, and command, all of them work in different ways and never help each other, really selfish)

View and Mediator

Any application has an interface that interacts with the user. Managing these interfaces is the view layer of puremvc. In the view layer, the interface management is delegated to the mediator, which is responsible for managing the data update and submission of the application interface. When data is updated or operated on the user interface, it manages its mediator through event notification, and then the mediator sends a notification to the system as needed. First, we recommend a logon interface:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Panel xmlns: MX = "http://www.adobe.com/2006/mxml"
Fontsize = "12 ″
Layout = "vertical"
Horizontalalign = "center"
Title = "User Logon"
Width = "314">
<Mx: SCRIPT>
<! [CDATA [
Import system. namespace;
]>
</MX: SCRIPT>
<Mx: Form width = "100%"
Height = "100%">
<Mx: formheading label = "Please log on"/>
<Mx: formitem label = "Logon Name">
<Mx: textinput id = "loginname"/>
</MX: formitem>
<Mx: formitem label = "Logon password">
<Mx: textinput id = "loginpassword"/>
</MX: formitem>
<Mx: formitem>
<Mx: button label = "OK"
Id = "loginbtn"
Click = "dispatchevent (new event (namespace. loginevent)"/>
</MX: formitem>
</MX: Form>
<Mx: Label id = "labstatus"/>
</MX: Panel>

Based on this interface, two mediators are defined: one is loginmediator, which is responsible for managing the logon dialog box and logon operations, and the other is applicationmediator, which is used to manage the interfaces after successful logon. First check loginmediator:

Package View
{
Import flash. Events. event;

Import model. VO. loginvo;

Import MX. Managers. popupmanager;

Import org. puremvc. as3.interfaces. imediator;
Import org. puremvc. as3.interfaces. inotification;
Import org. puremvc. as3.patterns. mediator. Mediator;

Import system. namespace;

Public class loginmediator extends mediator implements imediator
{
// Obtain the application instance
Private var loginpanel: loginform;
Private var loginapplication: pureloginmvc;

Public Function loginmediator (APP: Object)
{
Super (namespace. loginmediatorname, APP );
Loginapplication = app as pureloginmvc;
Loginpanel = new loginform ();
Loginpanel. addeventlistener (namespace. loginevent, onlogin );
Popupmanager. addpopup (loginpanel, loginapplication );
Popupmanager. centerpopup (loginpanel );
}

// Listen for notifications
Override public function listnotificationinterests (): Array
{
VaR arr: array = new array ();
Arr. Push (namespace. loginsuccess );
Arr. Push (namespace. loginfailed );
Return arr;
}

// Response notification
Override public function handlenotification (Notification: inotification): void
{
Switch (notification. getname ())
{
Case namespace. loginsuccess:
Setloginsuc ();
Break;
Case namespace. loginfailed:
Setloginfailed ();
Break;
Default:
Break;
}
}

// The logon is successful. The logon window is removed.
Private function setloginsuc (): void
{
Popupmanager. removepopup (loginpanel );
}

// Logon Failed, prompt
Private function setloginfailed (): void
{
Loginpanel. labstatus. Text = "the user name and password are incorrect. Please try again ";
Loginpanel. loginname. setfocus ();
}

Private function onlogin (EVT: Event): void
{
If (loginpanel. loginname. Text! = "" & Loginpanel. loginpassword. Text! = "")
{
VaR loginvo: loginvo = new loginvo ();
Loginvo. Username = loginpanel. loginname. text;
Loginvo. Password = loginpanel. loginpassword. text;
Sendnotification (namespace. applicationlogin, loginvo );
}
Else
{
Loginpanel. labstatus. Text = "Enter your username and password ";
}
}

}
}

Similarly, the loginmediator name comes from namespace. As. It inherits the mediator implementation imediator. loginmediator registers and listens to two events: logon success and failure, and responds accordingly. The onlogin () method sends a notification after collecting logon information. There is also an applicationmediator:

Package View
{
Import model. VO. loginvo;

Import MX. Controls. label;

Import org. puremvc. as3.interfaces. imediator;
Import org. puremvc. as3.interfaces. inotification;
Import org. puremvc. as3.patterns. mediator. Mediator;

Import system. namespace;

Public class applicationmediator extends mediator implements imediator
{
Private var loginapplication: pureloginmvc;

// Constructor to obtain the application instance
Public Function applicationmediator (APP: Object)
{
Super (namespace. applicationmediatorname, APP );
Loginapplication = app as pureloginmvc;
}

// Listen for notifications
Override public function listnotificationinterests (): Array
{
Return [namespace. loginsuccess];
}

// Response notification
Override public function handlenotification (Notification: inotification): void
{
Switch (notification. getname ())
{
Case namespace. loginsuccess:
Setloginsuc (notification. getbody () as loginvo );
Break;
Default:
Break;
}
}

Private function setloginsuc (loginvo: loginvo): void
{
VaR label: Label = new label ();
Label. Text = "Welcome !" + Loginvo. Username;
Loginapplication. addchild (Label );
}

}
}

This mediator only listens for Logon success notifications and responds to updates to data on the primary application.

Controller and command

The Controller and command look like a link to connect the mediator and proxy. it processes the notifications sent by the mediator and calls the public method in the proxy for processing. command must inherit simplecommand or mocrocommand and implement icommand. for the analysis system, you must register the proxy and mediator in the command and a login processing. The design ideas here are: modelcommand (used to register proxy), viewcommand (register mediator), applicationcommand (used to integrate modelcommand and viewcommand at system startup) and logincommand (used to receive logon notifications and call proxy for Logon ). First look at modelcommand:

Package Controller
{
Import model. loginproxy;

Import org. puremvc. as3.interfaces. icommand;
Import org. puremvc. as3.interfaces. inotification;
Import org. puremvc. as3.patterns. Command. simplecommand;

Public class modelcommand extends simplecommand implements icommand
{
Public Function modelcommand ()
{
Super ();
}

Override public function execute (Notification: inotification): void
{
Facade. registerproxy (New loginproxy ());
}

}
}

Then write viewcommand:

Package Controller
{
Import org. puremvc. as3.interfaces. icommand;
Import org. puremvc. as3.interfaces. inotification;
Import org. puremvc. as3.patterns. Command. simplecommand;

Import view. applicationmediator;
Import view. loginmediator;

Public class viewcommand extends simplecommand implements icommand
{
Public Function viewcommand ()
{
Super ();
}

// Register Mediator
Override public function execute (Notification: inotification): void
{
VaR app: pureloginmvc = notification. getbody () as pureloginmvc;
Facade. registermediator (New applicationmediator (APP ));
Facade. registermediator (New loginmediator (APP ));
}

}
}

Register the preceding two commands in applicationcommand:

Package Controller
{
Import org. puremvc. as3.interfaces. icommand;
Import org. puremvc. as3.patterns. Command. macrocommand;

Public class applicationcommand extends macrocommand implements icommand
{
// Constructor, writable or not
Public Function applicationcommand ()
{
Super ();
}

// Write method 1
Override protected function initializemedia command (): void
{
Addsubcommand (modelcommand );
Addsubcommand (viewcommand );
}

}
}

Logincommand used to process logon notifications:

Package Controller
{
Import model. loginproxy;
Import model. VO. loginvo;

Import org. puremvc. as3.interfaces. icommand;
Import org. puremvc. as3.interfaces. inotification;
Import org. puremvc. as3.patterns. Command. simplecommand;

Import system. namespace;

Public class logincommand extends simplecommand implements icommand
{
Public Function logincommand ()
{
Super ();
}

Override public function execute (Notification: inotification): void
{
VaR loginvo: loginvo = notification. getbody () as loginvo;
// Var loginproxy: loginproxy = new loginproxy ();
// Obtain the Proxy from Facade
VaR loginproxy: loginproxy = facade. retrieveproxy (namespace. loginproxyname) as loginproxy;
Loginproxy. checklogin (loginvo );
}

}
}

After completing these steps, we will go to the core of puremvc: facade, through which mediator, proxy, and command can be well combined. Name it myfacade. The Code is as follows:

Package MyApp

{

Import MyApp. Controller. geturllistcommand;

Import MyApp. Controller. startupcommand;

Import org. puremvc. as3.interfaces. ifacade;

Import org. puremvc. as3.patterns. facade. facade;

 

Public class myappfacade extends facade implements ifacade

{

Public static const app_startup: String = 'app _ startup ';

Public static const app_startup_over: String = 'app _ startup_over ';

Public Function myappfacade ()

{

Super ();

}

Public static function getinstance (): myappfacade {

If (instance = NULL ){

Instance = new myappfacade ();

}

Return instance as myappfacade;

}

Override protected function initializecontroller (): void {

Super. initializecontroller ();

// Register some commands

Registercommand (app_startup, startupcommand );

Registercommand (app_startup_over, geturllistcommand );

}

Public Function startup (APP: Object): void {

Sendnotification (app_startup, APP );

}

}

}

Finally, in the main application, a single instance calls myfacade:

<? XML version = "1.0" encoding = "UTF-8"?>
<Mx: Application fontsize = "12 ″
Xmlns: MX = "http://www.adobe.com/2006/mxml"
Creationcomplete = "Init ()"
Layout = "absolute">
<Mx: SCRIPT>
<! [CDATA [
Import system. myfacade;
Import org. puremvc. as3.patterns. facade. facade;

Public Function Init (): void
{
VaR myfacade: myfacade = myfacade. getinstance ();
Myfacade. startup (this );
}
]>
</MX: SCRIPT>
</MX: Application>

So far, a login example built by puremvc has been completed ~

Download source code: puremvclogin.rar (523)