Hello world in the puremvc framework!

Puremvc is an MVC framework that can be applied to multiple languages and platforms. According to the description on the official website, the following languages are supported:

The Chinese documents for best practices are also officially released. Of course, some brothers in the garden say it is bad.

 

Unlike the Asp.net MVC Framework, in Asp.net MVC, when an HTTP request is sent, the Controller automatically retrieves data and converts it to a model. Then, a view is selected for presentation, at the same time, it is relatively easy to upload the model to the view.

 

However, in addition to the MVC pattern, puremvc incorporates more patterns, such as facade, observer, and Singleton.

Let alone others. Let's get a flex version of Hello world. (Note: The following content refers to the first step of pure MVC: the simplest puremvc)

The entire project structure:

This project is to display a text box and a button on the interface. When you click the button, the content of the text box changes. (Note: This project is purely for the sake of puremvc and puremvc. It has no practical significance. It is just an example that is deliberately simplified for the purpose of learning.) Another example: because this project does not involve specific data entity classes, the model part is saved.

In puremvc, model, view, and controller are centrally managed by a single facade instance.

The general process can be understood:Start the puremvc environment through a single-piece instance of the facade class (that is, a unified facade), start and register the command object (equivalent to the Controller in Asp.net MVC) at the same time ), then, the command registers the mediator through the Associated facade (that is, the previous single-piece instance) (mediator: Used to associate view with command ).

When there is a movement on the UI (View) (for example, a button is clicked), the mediator associated with it will send a notification to the facade, then, facade calls the command object to execute related processing. (That is, message response)

 

It should be hard to understand:

1,Create a flex project in Flash builder and add SWC references related to puremvc. The main. mxml content on the main interface is as follows:

 
<? XML version = "1.0" encoding = "UTF-8"?> <S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "minwidth =" 300 "minheight =" 200 "Height =" 42 "width =" 300 "> <FX: declarations> <! -- Place non-visual elements (e.g ., services, value objects) Here --> </FX: declarations> <s: textinput x = "10" Y = "10" width = "206" id = "txtresult"/> <s: buttons x = "224" Y = "9" label = "button" id = "btnsend"/> </S: Application>
 

2,Create a facade appfacade class

Package MVC {import MVC. controller. appcommand; import Org. puremvc. as3.interfaces. ifacade; import Org. puremvc. as3.patterns. facade. facade; public class appfacade extends facade implements ifacade {public static const start_up: String = "start_up"; public static const change_text: String = "change_text"; Public Function appfacade () {} public static function getinstance (): appfacade {If (instance = NULL) {instance = new appfacade ();} return instance as appfacade;} protected override function initializecontroller (): void {super. initializecontroller (); this. registercommand (start_up, appcommand); // entry: Register command} // start the public function startup (_ main: Main) in the puremvc environment: void {// note: the main here is the UI main. this. sendnotification (start_up, _ main); // send a notification at startup }}}
 

Of course, this is not a strict single piece (the constructor is still callable, but I do not wantCodeIt is too complicated. You can treat it as a single piece for the time being ).

Note: note that the annotated part here registers a command object in initializecontroller (appcommand will be pasted below the Code) to associate the facade with the command, in addition, the main interface main. the class instance corresponding to mxml is passed in using _ main, so that the puremvc environment isProgramThe main class is connected.

3,Create an appcommand class

 
Package MVC. controller {import MVC. view. buttonmediator; import MVC. view. textmediator; import Org. puremvc. as3.interfaces. inotification; import Org. puremvc. as3.patterns. command. simplecommand; public class appcommand extends simplecommand {public function appcommand () {super ();} public override function execute (inote: inotification): void {VaR _ main: Main = inote. getbody () as main; // registration: The Mediator (used to connect view and command) facade. registermediator (New textmediator(_main.txt result); facade. registermediator (New buttonmediator (_ main. btnsend ));}}}
 

Note: In the execute method, use facade reference to obtain a unique instance of the facade in puremvc, register the mediator intermediary, and set the elements on the interface (that is, the input box and button) it is also associated with the facade.

4,Mediator (textmediator and buttonmediator)

This is also different from Asp.net MVC. puremvc does not directly operate the view elements, but introduces the mediator concept, it is equivalent to the bridge between "view specific elements" and command. This advantage is to further decouple and eliminate dependencies on specific interfaces to a certain extent.

Buttonmediator.

 
Package MVC. view {import spark. components. button; import flash. events. mouseevent; import MVC. appfacade; import Org. puremvc. as3.interfaces. imediator; import Org. puremvc. as3.patterns. mediator. mediator; public class buttonmediator extends mediator implements imediator {public static const name: String = "buttonmediator"; Public Function buttonmediator (viewcomponent: button) {super (name, viewcomponent); this. btnins Tance. addeventlistener (mouseevent. Click, btnclick);} private function btnclick (E: mouseevent): void {This. sendnotification (appfacade. change_text, "Hello puremvc! ") ;}// Get the" button instance "Private function get btninstance (): button {return viewcomponent as button ;}} on the UI Interface ;}}}
 

As you can see, buttonmediator is done by calling the sendnotification method to send the message change_text to the puremvc environment. It does not matter who receives the message.

 

Textmediator.

Package MVC. view {import spark. components. textinput; import MVC. appfacade; import Org. puremvc. as3.interfaces. imediator; import Org. puremvc. as3.interfaces. inotification; import Org. puremvc. as3.patterns. mediator. mediator; public class textmediator extends mediator implements imediator {public static const name: String = "textmediator"; Public Function textmediator (viewcomponent: textinput) {super (name, viewcomponent );} public override function listnotificationinterests (): Array {return [appfacade. change_text];} // Response Message public override function handlenotification (Notification: inotification): void {Switch (notification. getname () {Case appfacade. change_text: this.txt instance. TEXT = notification. getbody () as string; break ;}// obtain the "text input box" Private function get txtinstance () on the associated UI (): textinput {return viewcomponent as textinput ;}}}
 

In this Code, textmediator is responsible for listening to change_text messages and responding to the received messages. In this way, the entire message is processed with the following buttonmediaor.

 

OK, the code is almost ready. Go back and enable the puremvc environment in Main. mxml:

 
<? XML version = "1.0" encoding = "UTF-8"?> <S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" xmlns: S = "Library: // ns.adobe.com/flex/spark" xmlns: MX = "Library: // ns.adobe.com/flex/mx "minwidth =" 300 "minheight =" 200 "Height =" 42 "width =" 300 "creationcomplete =" application1_1_creationcompletehandler (event) "> <FX: declarations> <! -- Place non-visual elements (e.g., services, value objects) Here --> </FX: declarations> <FX: SCRIPT> <! [CDATA [import MVC. appfacade; import MX. events. flexevent; protected function application1_creationcompletehandler (Event: flexevent): void {// start the appfacade in the puremvc environment. getinstance (). startup (this);}]> </FX: SCRIPT> <s: textinput x = "10" Y = "10" width = "206" id = "txtresult"/> <s: buttons x = "224" Y = "9" label = "button" id = "btnsend"/> </S: Application>
 

Download the sample source code (in the Flash builder4 environment)

 

The following is a structure diagram of puremvc: