BlazeDS Simple Remoting (Part II – “Flex”)

Tasks:

  • Create Flex Project
  • Add ActionScript “Beans” mirroring beans we created in Java application
  • Create SportEventsManager ActionScript class which will retrieve Sport Events using blazeDS Object Remoting Service
  • Create Simple DataGrid which will Display our Records

Create Flex Project (FlexBuilder)

file –> new –> Flex Project

flex_builder_create_proj

In dialog box, we need to uncheck “use default Location” and navigate to our (Part I) java project’s web directory.
we create flex project inside web folder of our java project (i created my project inside “flex” folder which is directly under web directory of my java project, so my structure looks like this :
flex-insite_java

P.S thematically Flex project has option to create dual WTP/Flex projects in situations like this, but its a little bit buggy, so this is another way of doing it, feel free to do WTP way if you feel comfortable.

Now We need to adjust some Build parameters.
project properties –> build path.:
change output folder to be root of the project which means no value for output folder
change output Folder url to be : http://urltoyourtomcat:8080/folder_you_created_under_web/

in my case it is : http://localhost:8080/blazeDS_one/flex/

I will not go into creating datagrid and all that basic stuff, instead, I will jump directly into creating remote classes and class which will call Remote Java Class and invoke its methods.

Lets First create Action Script beans, which is basically class with private properties and public get/set functions.

Actionscript:

  1. package com.example.beans {
  2. import mx.collections.ArrayCollection;
  3. [Bindable]
  4. [RemoteClass(alias=“com.example.Event”)]
  5. public class SportEvent {
  6. private var _id:Number;
  7. public function get id () : Number {return this._id;}
  8. public function set id (newId:Number) : void { this._id = newId;}
  9. private var _name:String;
  10. public function get name () : String { return this._name;}
  11. public function set name (newName:String) : void { this._name = newName;}
  12. private var _teams:ArrayCollection;
  13. public function get teams () : ArrayCollection { return this._teams; }
  14. public function set teams (newTeams:ArrayCollection) : void {this._teams = newTeams;}
  15. private var _eventDate:Date;
  16. public function get eventDate () : Date { return this._eventDate;}
  17. public function set eventDate (newDate:Date) : void {this._eventDate = newDate;}
  18. public function SportEvent() {}
  19. }
  20. }

the most important part of this class is this :

Actionscript:

  1. [Bindable]
  2. [RemoteClass(alias=“com.example.Event”)]
  3. public class SportEvent

using RemoteClassmeta tag we are marking this class as remote and associating it with our Java Class Event which we created in part I.

we do same with Team.as class

Actionscript:

  1. package com.example.beans {
  2. [Bindable]
  3. [RemoteClass(alias=“com.example.Team”)]
  4. public class Team {
  5. private var _name:String;
  6. public function get name () : String { return this._name;}
  7. public function set name (newName:String) : void { this._name = newName;}

now its time to get all these into action. let’s create SportEventsManager which will call blazeDS services.
There are some tutorials on the net that show how to use RemoteObject with mxml tag, here I will show you how to archive that, using just actionScrpt.

This will be very simple SportEventsManager class, which we will improve in further tutorials.
First, we wire some stuff inside a constructor

Actionscript:

  1. public const name:String = “my-amf”;
  2. public const destination:String = “sportEventsManager”;
  3. private var ro:RemoteObject;
  4. public function SportEventManager() {
  5. // very simple way
  6. var chanells:ChannelSet = new ChannelSet();
  7. var simpleChannel:Channel = new AMFChannel(name,url);
  8. chanells.addChannel(simpleChannel);
  9. ro = new RemoteObject(destination);
  10. ro.channelSet = chanells;
  11. ro.addEventListener(ResultEvent.RESULT,resultHandler);
  12. ro.addEventListener(FaultEvent.FAULT,flistener);
  13. ro.addEventListener(InvokeEvent.INVOKE,Ilistener) ;
  14. }

as you see, we are hardcoding some values, for now this is good enough. (we will take care of that in part III)
First we instantiate RemoteObject class, passing a destination name as parameter, (destination name corresponds configuration node of remoting-config.xml we created in previous tutorial )

XML:

  1. ..
  2. <destination id=“sportEventsManager”>
  3. <properties>
  4. <source>com.example.EventsManager</source>
  5. </properties>
  6. </destination>

also we are creating one channel (remember we defined that channel inside our blazeDS configuration as well. channel-definition)
adding channel to ChannelSet(as you have guessed you can have as many channels as you wish).
finally we register global Event listeners to this Service,
P.S: we are not going to use these listeners to retrieve objects, these listeners will be just for observation purposes,

We are going to use AsyncToken and AsyncResponder to get the results.
lets create method called getSportEvent; it will take following parameters:

  • sportid :Number
  • Listener function – will be called when result is back (we enhance the example further and make listener function to expect SportEvent Object, instead of generic result Object … we will do dirty work of casting etc… inside this method.
  • (optional) fault listener function, if we desperately need to know when something goes wronghere is the method :
    Actionscript:

    1. public function getSportEvent(eventId:Number,
    2. resultReceiver:Function,
    3. fault:Function=null): void {
    4. var token:AsyncToken = ro.getSportEvent(eventId);
    5. token.addResponder(new AsyncResponder(
    6. // success function
    7. function(data:Object, token:Object):void {
    8. if(!data || !data.result) {
    9. throw new Error(“RO [getSportEvent] result object “ +
    10. “was null, or missing …”);
    11. return;
    12. }
    13. // as convenience we cast the result to appropriate type and invoke
    14. // the function we received.
    15. resultReceiver(data.result as SportEvent);
    16. },
    17. // error function
    18. function(info:Object, token:Object):void {
    19. // if user sent us error function, lets invoke that too.
    20. if(fault != null) fault(info);
    21. },
    22. token
    23. ));
    24. }

    we do exactly same with other method getAllSportEvents and that’s pretty much it,
    With these methods in place, we can get SportEvent Object by just calling:
    sportEventsManagerInstance.getSportEvent(sportid,ourfunction) etc ..

    P.S: Method invocation examples are shown in main application’s source, included in download below.

    here is the demo.
    oops. almost forgot: I wired in a firebug Target for blazeDS logging, so turn On Firebug when viewing the demo, more about firebug Target? read here : Flex Logging API – Simple Firebug Log Target

    full source code of both java and Flex projects

(Source: http://ledtechdesign.com/2009/02/tutorial-blazeds-simple-remoting-part-ii-flex/)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: