using callbacks

[Ronald Wernecke]

I have this component

Code:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="250" height="150" title="{logintitel}">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

public var logintitel:String;
public var callback:Function;

private function processLogin():void{
PopUpManager.removePopUp(this);
this.callback(username.text,pw.text);
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem label="Benutzername">
<mx:TextInput id="username" width="100"/>
</mx:FormItem>
<mx:FormItem label="Kennwort">
<mx:TextInput id="pw" displayAsPassword="true" width="100" />
</mx:FormItem>
<mx:HBox>
<mx:Button click="this.callback(username.text,pw.text);" label="Anmelden" />
<mx:Button click="PopUpManager.removePopUp(this);" label="Abbrechen" />
</mx:HBox>
</mx:Form>
</mx:TitleWindow>

And, as you can see, there is a referenco to a function.
How do I set that function , and how does it do the callback?
Tjis is, how I call the component:

Code:

private function showLogin(logintitle:String, callback:Function):void{
statusMsg.text="Bitte anmelden";
var hwin:TitleWindow=TitleWindow(PopUpManager.createPopUp(this,logwin,true));
hwin.title=logintitle;

}

[kofi addaquay]

Before you open the popup dialog, you have to create a reference variable to the dialog box itself

create it like this

private var hwin:TitleWindow;

dont forget to import the TitleWindow class

in your function

Code:

private function showLogin(logintitle:String, callback:Function):void
{
statusMsg.text = "Bitte anmelden";
hwin = PopUpManager.createPopUp( this, logwin, true ) as TitleWindow;
hwin.title = logintitle;
}

so far nothing has changed...its the same as ur code, just written differently. the proper way add some kind of callback functionality is to dispatch events within your component. above your script tag in your component....add a metadata tag

Code:

<mx:Metadata>
[Event(name="loginEvent", type="eventsFolder.customEventName")]
</mx:Metadata>

when the user clicks on your button you want to dispatch a custom event and pass the event parameters. change the button mxml to look something like this

Code:

<mx:Button click="newFunction()" label="Anmelden" />

then handle it like this...

Code:

private function newFunction():void
{
var evt:customEventName = new customEventName( username.text, pw.text, "loginEvent" );
dispatchEvent( evt );
}

its best practice to use a data transfer object instead of passing all this params in the events. but i am trying to keep this post as short as possible.

now back to your main application where you call the popup. change the showLogin function to look like this

Code:

private function showLogin(logintitle:String, callback:Function):void
{
statusMsg.text = "Bitte anmelden";
hwin = PopUpManager.createPopUp( this, logwin, true ) as TitleWindow;
hwin.title = logintitle;
hwin.addEventListener("loginEvent", loginEventHandler);
}

see where i am going???;-) you add an event listen to the popup...so when a user clicks the button in ur dialog box, the application knows how to  handle it since its dispatched from the component.

Code:

private function loginEventHandler( evt:customEventName ):void
{
//handle here
}

hope this gives you an idea :-)

[Ronald Wernecke]

than you very much
I'll try this tomorrow - too tired now.

Ciao

[Ronald Wernecke]

so I am close, but not there yet.
You have defined an eventsFolder.customEventName - where and what do I have to do there, to make it see this as an valid event object?

I did, what you wrote, and it says: type not found customEventName

[kofi addaquay]

sorry...yes i left that part out. you are familiar with creating custom events in flex? because the event you are dispatching is custom (it contains username and password).. you have to create your own event. so that when u dispatch it...you are able to read the properties of that event from the application.

in your application root...have a an events folder...call it whatever you want (in the sample, i called it eventsFolder)...then create your event class in that folder

thats why you see eventsFolder.customEventName. it can be whatever you name it.

imagine that you have a class called customEventName. in that class you pass your username and password. and when the event is dispatched..you catch the params


let me know

[Ronald Wernecke]

I basicly understand - but I did not create custom events before - I feel a little lost.
But I will try to find more in the docs of flex.

[Ronald Wernecke]

this is enough

Code:

package ApplicationEvents
{
import flash.events.Event;

public class loginEvent extends Event
{
var user:String;
var pw:String;

public function loginEvent(user:String, pw:String, type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
this.user=user;
this.pw=pw;
}

}
}

It works as expected.
Now I got back on track and know how to do more of the event driven window stuff.
Thank you very much

[kofi addaquay]

yea...for now that should be enough

what you do is create your login event in your component on button click. and you dispatch that event. in your main application...you import that login event as well...because when the listener function is called it need to get an event of type loginEvent. get me? like this

private function loginEventHandler( evt:loginEvent ):void
{
   //handle here
}

then you get the event params like you do normally. evt.user and evt.pw

[kofi addaquay]

if you are have problems getting the params from the custom event...you might want to check your variable scope. always try to scope your variables...private/public.

 in this case they should be public for you to access them outside.

K

[Ronald Wernecke]

since I changed to use the event callback, this does not work anymore:

Code:

private function doLogin(evt:loginEvent):void{

statusMsg.text="Anmeldung läuft für "+evt.user;
var loginresponder:Responder = new Responder(loginConfirm, onFault);
shopCon.connect("http://wernecke-it.de/amfphp/gateway.php");
shopCon.call("shopCommunication.userLogin", loginresponder, evt.user, evt.pw);
PopUpManager.removePopUp(hwin);
}

private function loginConfirm(ret:ResultEvent):void{
statusMsg.text=ret.result.msg;
if(ret.result.code!=0){
showLogin("Systemanmeldung",doLogin);
}else{
statusMsg.text=ret.result.msg;
}
}

Charles says - everything is ok and delivers the requested object as expected.

[kofi addaquay]

what happens when you trace the username and password from the main application

Code:

private function doLogin(evt:loginEvent):void
                        {
trace("user::"+evt.user);
}

if you can trace the value, then my part is done. because it means you were able to send your data from the custom component to the main application via the callback. it would mean the problem is now coming from your new implementation. get what i mean.?

[Ronald Wernecke]

the login event is fired, and the login takes place.
I watched the traffic with charles.
I do receive the login confirm - your part is definately working.
But the other section, which was working before in a different application, quit working.
It says: conversion failed - cannot convert object someHexCode into resultEvent.
But AMFPHP sends the result exactly as expected.
So it seams to be a new construction

[kofi addaquay]

Hey Ronald... Hmm seems like its coming from your loginconfirm function.... What is someHexCode???

[Ronald Wernecke]

this is the complete german error message:

TypeError: Error #1034: Typumwandlung fehlgeschlagen: Object@8cf0c19 kann nicht in mx.rpc.events.ResultEvent umgewandelt werden.

[kofi addaquay]

Hahaha very much Ron:) like i understand german !