looking for very simple example

[snowy]

Hi, im a Belgian student who is new to pureMVC, I've been at the pureMVC subject for several weeks now but I still can't manage to create a simple application. I'm having difficulties to understand how everything should be passed on to the different objects.

I've read many tutorials but I'm still clueless.

So I'm wondering if anyone could guide me to an example or quickly create one that looks a bit like the following.

A form with 2 textboxes and a button. When the button is clicked the 2 variables in the textboxes should be passed on and a mathemetical operation (for example add them up) should be done. Then the answer of the sum should be passed on back to the form (for example on a label).

Any help would be very appreciated.

Thanks in advance!

[puremvc]

Have you read the Framework Overview and Best Practices docs? They are a good way to understand the roles responsibilities and collaborations. Then have a look at the EmployeeAdmin demo, which does a good job of showing how things data gets moved around the client.

-=Cliff>

[snowy]

i have read these documents and went through the demo but unfortunately im still not able to see the big picture.

[puremvc]

Wow. Ok, so is there some area that is specifically unclear?

-=Cliff>

[snowy]

Well i don't seem to get how something gets executed it seems very strange to me. Like for example im used to a 'normal' way of programming.

I have an object and call a method to get the variable or to get it to do something, now notifications have to be used, it all seems very complex.

I'd like to know what specifically needs to happen when a button gets clicked to add 2 numbers together (for example).

[Tekool]

Imagine your computation need access to a local class which is the only one to know how to do it, so :

1) You have to create a "Compute" view in Flash or Flex with a button, a textfield for the first value, a textfield for the second and a result TextField.

2) To be sure this view will be correctly handled in your application and to ensure loose coupling, you will create a "ComputeMediator" that will listen to the button click event. When the button is clicked, the mediator will send a PureMVC notification that you can simply call "ApplicationFacade.COMPUTE" (look in example on how to do that).

3) You have to register a "ComputeCommand" class with the "ApplicationFacade.COMPUTE" notification.

4) You will create a ComputationsProxy that will compose with your class (the class which is the only one that knows how to compute).

5) In the "ComputeCommand" you call ComputationsProxy.compute and set the result textfield value to the result you get from the proxy.

It could seems complicated, but of course in reality you only need to do that if the computation have to be done by a server or is really complex. And it helps a lot later to reuse your app and this behavior.

[snowy]

Thank you very much for your reply but something still seems a little unclear to me. The step where I have to set the result textfield value. Do i set the textfield value immediately from the computecommand class or do i have to do something else?

Thanks in advance!

[puremvc]

The step where I have to set the result textfield value. Do i set the textfield value immediately from the computecommand class or do i have to do something else?

There are three ways to go about this.

1) Send a notification from the command that the mediator is interested in. It will take the value from the note body and stick it into the view component that it has a reference to. This is the best way, because the mediator remains the only actor in the application that 'knows' the view component. This is the least tightly coupled because the mediator doesn't care where the note came and the command doesn't need to know where it's going. Also, to make the loosest possible coupling, the view component should have a method or top-level getter/setter that the mediator sets rather than the mediator knowing that the component contains a Form which has a TextInput, which has a text property. If the mediator knows that much about the view component, then it requires refactoring the mediator if you change the view component implementation.

2) Add a method on the mediator that takes the result value as an argument and sets it on the view component. In the command, retrieve the mediator by name and call this method. This keeps the command from needing to know the view component, but is more tightly coupled than the first approach because the command must 'know' the mediator.

3) Expose the mediator's typed getter for the view component as public, so that the command can retrieve the mediator and set the result on the text field via this public reference. This is the most tightly coupled because the command needs to know both the view component and the mediator.

-=Cliff>

[snowy]

there's still something unclear to me, do i have to create a 'constant' string in the mediator class for every event thats possible in the view object?

[snowy]

ok im dire need of help i tried to made this application but i cant seem to add eventlisteners to buttons and such. Below you'll find my code. these constants are really making it difficult.

Any help would be very appreciated.

my main class, note that i use a button to launch the entire puremvc part. (appfacade and such)

:

<?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="955" minHeight="600">


<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:TextInput x="172" y="161" id="get1"/>
<s:TextInput x="172" y="204" id="get2"/>
<s:Button x="172" y="234" label="Button" id="btn" click="btn_clickHandler(event)"/>
<s:TextInput x="172" y="263" id="result"/>
<s:Button x="172" y="101" label="Button" id="starten" click="starten_clickHandler(event)"/>
<fx:Script>
<![CDATA[


import lindsey.ApplicationFacade;

public static const NAME:String = 'calcView';
public static const BTN_CLICKED:String = NAME + 'btnclicked';



private function init():void{
ApplicationFacade.getInstance().startup( this );
}



protected function btn_clickHandler(event:MouseEvent):void
{

dispatchEvent(new Event("BTN_CLICKED", true, false));

// TODO Auto-generated method stub
}


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

]]>
</fx:Script>
</s:Application>

below youll find my code for my mediator

:

package lindsey
{
import flash.events.DataEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.ui.Mouse;

import org.puremvc.as3.interfaces.IMediator;
import org.puremvc.as3.interfaces.INotification;
import org.puremvc.as3.patterns.mediator.Mediator;

public class calcViewMediator extends Mediator implements IMediator
{
public static const NAME:String = 'calcViewMediator';

private var calcView:LS;

public function calcViewMediator(viewComponent:Object=null)
{
trace('class urlsviewmediator function urlsviewmediator');
super( NAME, viewComponent);
}

override public function onRegister():void
{
trace('class urlsviewmediator function onregister');
calcView = new LS();

calcView.addEventListener("BTN_CLICKED", clickHandler);

//calcView.addEventListener(MouseEvent.CLICK, clickHandler );

//sendNotification( ProgressView.HIDE );
}

override public function listNotificationInterests():Array
{
trace('class urlsviewmediator function listnotificationinterests');
return [
//URLsView.SHOW
];
}

override public function handleNotification(notification:INotification):void
{
/* trace('class urlsviewmediator function handlenotification, notification: ' + notification.getName());
var name:String = notification.getName();
var body:Object = notification.getBody();

switch ( name )
{
case URLsView.SHOW:
urlsView.show();

break;
}*/
}
private function clickHandler(e:Event):void
{
trace('class urlsviewmediator function handleurlsviewclicked');
calcView.result.text = (int(calcView.get1.text) + int(calcView.get2.text)).toString();

//sendNotification( URLsView.CLICKED, { index: e.data } );
}

private function get proxy():CalcProxy
{
trace('class urlsviewmediator function proxy');
return facade.retrieveProxy( CalcProxy.NAME ) as CalcProxy;
}
}
}

everything gets registered but the method clickhandler never gets executed

tha nks in advance! (getting quite desperate)

[puremvc]

In your view component, you should be dispatching an event with the constant BTN_CLICKED, not the literal "BTN_CLICKED". Then, in your Mediator you should be listening for CalcView.BTN_CLICKED.

Also, it appears you haven't started the PureMVC apparatus. You have an init method but you need to call it. The best place to do this is in the creationComplete handler for the app like creationComplete="init()"

-=Cliff>

[snowy]

This works well now, i am now trying out an other projects, but there is one issue i still struggle with, in the applicationmediator, i register differents mediators, the first one and the second one works fine, but the third one, doesn't response.
Is there a reason why this happens?

:

override public function onRegister():void
{
trace('class applicationmediator function onregister');
facade.registerMediator(new ApplicationMediator(viewComponent));
facade.registerMediator( new ProjectsViewMediator( viewComponent ) );
facade.registerMediator( new CIViewMediator( viewComponent ) );

facade.registerMediator( new SettingsViewMediator( viewComponent ) );
facade.registerMediator( new RatingSystemsViewMediator( viewComponent ) );



}

 
Thanks in advance,

[puremvc]

Why are you wrapping all these mediators around the same view component? They should be given their own specific view components to tend.

-=Cliff>