Introduction
Part 1 - Frameworks
Part 2 - Directory structure
Part 3 - Application and ApplicationFacade
Part 4 - Notifications, Commands & Use Cases
Part 5 - Model & Proxy
Part 6 - The Application View & Mediator
Part 7 - The Login View & Mediator
Part 8 - The Roster View & Mediator
Part 9 - The Chat View & Mediator
Conclusion, Demo & Downloads
Here is a working demo of the application!
If you get a ‘Security Error’ when trying to connect, it means that the particular Jabber server you are connecting to hasn’t implemented its crossdomain.xml file correctly (many servers leave out the content-type which means that the latest versions of Flash Player will refuse to load it). Anyway, this security policy is ignored when running from your local machine so even if you have trouble using it here it will work fine when you compile it yourself.
You can download the full source code for the project here.
If you spot any mistakes, want to have a lively discussion or just want to say how much you enjoyed this tutorial please feel free to leave comments on the appropriate page!
My thanks go out to Jive Software for XIFF, Cliff Hall for PureMVC and all Flashers everywhere 
Dave
Really nice tutorial!
I started developing with Flex and PureMVC couple of months ago and it was very frustrating that it is very hard to find good material about it. And I´ve never head of Xiff either! Your tutorial opened my eyes! Thanks a lot!
Grats!
I don’t see a link to a demo.
Dave
thanks for this. one thing that throws me is the use of wildcards for the class imports. it would be nice to see the list of specific dependencies
The PureMVC templates use wildcards specifically so that you don’t have have to worry about importing every class individually. For example, the ApplicationFacade template imports .controller.* so that you can instantly do RegisterCommand(NOTIFICATION, AnyCommant) without have to worry about it.
Even if you use a wildcard to import the AS3 compiler will only include classes that you’ve actually used in the SWF, so it won’t have any impact on the final filesize.
However, if you are set on using specific imports just delete the wildcards and (in FlashDevelop) go through the source selected each class and pressing Ctrl-Alt-Space to auto-import it.
Cheers,
Dave
Dave,
I am currently using flex and xiff to make a multi user chat and I was wondering if you knew of a way to get a list of the chatrooms that would be on the openfire conference server. I see how you create chatrooms but not how to view ones that are already created. Any help would be greatly appreciated. Great work on this tutorial!
Thanks,
Kyle Cleaver
Glad you enjoyed it
I’ve not actually done this before, but I’m guessing that its something to do with the Browser class. You need to query the chat service for a list of associated items - have a look at http://www.xmpp.org/extensions/xep-0045.html#disco-rooms for more info on the XML side of things.
Sorry I can’t be more help!
Dave
Hi Dave,
This is very nice tutorial. I enjoyed it but unfortunately I am not able to run from flex builder3.
Can you please let me know how to make it work in flex builder3. also I am not able to find user name and password to login from above screen to test it.
Thanks
eduser
The tutorial is really based around FlashDevelop, but the code itself should compile and run in FB3 just fine. The only thing you won’t be able to use are the FlashDevelop templates, but if you open them up in a text editor you should get the idea.
To get a Jabber username and password you just need to register with a jabber server (e.g. jabber.org) - however, there’s not much point as most public Jabber servers don’t implement the crossdomain.xml file needed to run a Flash client. Instead download and compile the source and run it from your own machine.
Sorry not to be more help, but fiddle around with FB3 and you’ll work it out
Dave
I am running this application in flex builder 3, but how to register a user to get username and password for this application.
Great tutorial.
Got it working with OpenFire (3.6.0a) server.
Had to do some modification thought.
1. need to use svn version of XIFF (Not the download version 3.0.0-beta1 ). org.jivesoftware.xiff.core.JID no longer exist. i’ve change all reference of it to use org.jivesoftware.xiff.core.EscapedJID
2. change all reference of function .toBareJID() to just .bareJID
Thanks for the comments! The trunk version of XIFF has a bunch of improvements - strangely enough I’m just finishing up a job using OpenFire 3.6.0a and ran into the same changes that you mention here
Another cool thing to try is to replace the connection instantiation in XMPPProxy.as with xmppConnection = new XMPPBOSHConnection();
Without any further work this makes XIFF use a BOSH connection instead of a socket connection - this seems to be a lot more reliable and stops the connection getting randomly dropped every 10 minutes or so.
Glad you enjoyed the tutorial!
Dave
Very nice tutorial. Helps to get into it.
Your job is very appreciated.
hi dave
How can make an exe in FlashDevelopmet?
Hi dave
Just wana ask What does sendNotification do?
Thank you for that great tutorial.
Many weeks ago i have wanted to learn PureMVC but i’d never found a good documentation easy and learnful.
Enjoy
Hi got this error:
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\controller\SimpleCommand.as(4): col: 10 Error: Syntax error: expecting leftbrace before leftparen.
package $(Package) $(CSLB){
^
Build halted with errors (fcsh).
Done (1)
I’m not sure why you are getting these errors; it sounds like FlashDevelop isn’t correctly substituting values into the templates. What version of FlashDevelop are you using?
m using version 3. I think i managed to fix dat problem. but now i have more errors.
public function ChatEvent(type:String, jid:JID, message:String = null, bubbles:Boolean=false, cancelable:Boolean=false) {
^
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\events\ChatEvent.as(25): col: 28 Error: Type was not found or was not a compile-time constant: JID.
public function getJID():JID {
^
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\model\XMPPProxy.as(119): col: 39 Error: Type was not found or was not a compile-time constant: Message.
public function sendMessage(message:Message):void {
^
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\model\XMPPProxy.as(128): col: 39 Error: Type was not found or was not a compile-time constant: LoginEvent.
private function onLogin(loginEvent:LoginEvent):void {
^
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\model\XMPPProxy.as(139): col: 47 Error: Type was not found or was not a compile-time constant: XIFFErrorEvent.
private function onXiffError(xiffErrorEvent:XIFFErrorEvent):void {
^
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\model\XMPPProxy.as(158): col: 52 Error: Type was not found or was not a compile-time constant: DisconnectionEvent.
private function onDisconnect(disconnectionEvent:DisconnectionEvent):void {
^
C:\Documents and Settings\Aminiasi\My Documents\XIFFer\src\org\davekeen\xiffer\model\XMPPProxy.as(167): col: 43 Error: Type was not found or was not a compile-time constant: MessageEvent.
private function onMessage(messageEvent:MessageEvent):void {
^
Build halted with errors (fcsh).
Done (1)
was working with flex builder 3 earlier(NOT USING THIS TUTORIAL) with the same xiff and it had the same errors….or is it we need to compile xiff first b4 using it with a new project.
sorry m kinda new to flex applications!!
@Dave Great tutorial! I appreciate all the work you put into explaining jabber, PureMVC and it’s implementation. I wish there were more smart and throughout tutorials out there like this one.
I’m hoping you can help me out with an issue. I have jabber running on an internal sever and keep getting the sandbox error. I get it locally and even when the swf loads the crossdomain policy file from the server. You mentioned something about many servers leaving out the content-type? Could you expand on that and let me know if you think that may be my issue?
Much obliged!
Great Work Dave, this is the most detailed and understandable explanation of a pureMVC with flex that I could find on the web, thanks a lot and keep up the good work.
Great tutorial, thank you!
but… It doesn’t work
I get
there was a security error of type: securityError
Error: Error #2048: Security sandbox violation: file:///D:/Work/Flex/Application/bin-debug/Application.swf cannot load data from localhost:5222.
I use Openfire 3.6.3, XIFF API 3.0.0-beta1 and try to connect to localhost with existing user.
If I connect via browser to http://localhost:5229 - I get crossdomain.xml
If I connect to localhost:5222 with IM client (Spark\Miranda) - everything works fine.
I try use Security.loadPolicyFile(”http://”+ server +”:5229″) in XMMPProxy - the same error.
Sorry, I’m newbie *embarassed*
sorry, It became works fine when I set server to 127.0.0.1 instead of localhost *embarassed*
but I have next issue
TypeError: Error #1010: A term is undefined and has no properties.
at org.davekeen.xiffer.view::ChatMediator/handleNotification()[D:\Work\Flex\Application\src\org\davekeen\xiffer\view\ChatMediator.as:92]
it appeared when MotD received from Openfire
The application isn’t set up to deal with the MOTD. I leave this as an exercise for the reader! A few hints:
o In the XMPPProxy when receiving a new message you need to determine whether it is a real message or a MOTD, and fire off a different notification based on what is it.
o Somewhere else in the application catch this new RECEIVED_MOTD notification and display it!
Have fun,
Dave
Salut Dave,
I’d like to join the others: this is really very nice. Just recently started with Flex and your tutorial helped a lot. I use Maven as a build system and created a “mavenized” version of your tutorial with the Flex Maven plugin from http://www.servebox.org … if you want to have it just drop me a line.
Cheers,
Aleks
Hi there!
Thank you very very much for this tutorial.
But could you tell me what the sence is of this jabber-client if it actually works only on local computers?:)
We cannot tell all existinf jabber-servers’ owners to edit (or add) crossdomain.xmls on their domains.
Is there any solution to make this all work online?
Cheers;)
There is no sense as such - its just a useful example for showing how to program using PureMVC. Having said that I’ve just implemented a Flex Jabber client based on this using a custom Openfire server so if you have control over thhe server yourself then it works very well.
Good luck!
Dave
Oh, I see.
I’m just trying to start creating an AIR based jabber-client. So I surfed the web and found your posts. They are very useful. But I’m getting more and more dissappointed, — it looks like this is barely possible. Hard to beleive that such a thing as universal jabber is so difficult.
Sorry, I’m getting offtopic here.
Hi Aleksandar, i`m very interested in your “mavenized” version of the tutorial with the Flex Maven plugin. Please Post your code, thanks a lot!
Thanks a lot for this tutorial! It has helped me understand Flex an gave me the kick in the right direction for a school project. I am attempting to implement a whiteboard using XIFF but I’m having some trouble with XIFFs whiteboard extensions. Do you have any experience with extending messages? Or could you possibly point me in the right direction?
Thank you,
A
Good luck!
Dave
Thank you so much for offering such a fine tutorial.
In the near future I will join in a similar project.
that’s really great!
i’m thinking of building an AIR app to integrate activeCollab and Jabber IM and this article is just insane.
thanks a lot. you really rocked with this one.
Error: Ignoring policy file requested from http://jabber.org/crossdomain.xml because a cross-domain redirect to http://www.jabber.org/crossdomain.xml occurred
, when i running from my local mashine!!! How to resolve this?
Hi Dave, just to say thanks for such a great tutorial, after reading thru the puremvc docs and watching the slideshows this is the first puremvc tutorial i’ve looked at and it has given me really good insight into how everything works and I have a working jabber client
For anyone who wants to build in Flex Builder 3
I built the project in Flex Builder 3 and the only differences were that instead of using the FD templates to create new classes; simply right click to add a new actionscript class (on the folder where it is to be created) and type in the name of the super class it extends. I removed the constructors (that were automatically generated by Flex) for these classes, except where they are mentioned in the tutorial and also removed mediatorName:String=null, from the sub classes of Mediator.
I also couldn’t figure out how to get FB3 to use XIFFer.mxml as the default application file unless it was in the root src directory but that didn’t affect anything.
Thanks again Dave!
Ali
It looked like a building society home page. ,
Not necessarily a good idea. ,
[...] Comoa hacer un logIN/Out y chat usando PureMVC [...]
I was looking for PureMVC in the last couple of days to implement in our project. Your tutorial really helped me lot to get an idea in PureMVC.
I trying to do a sample project in PureMVC. But I face some problems in mediators and data binding.
This is the scenario in my project.
I have an accordion and with three datagrid custom components.
DO i need to have 3 mediators to associate these three views?
Please give me some good idea on this?
Thanks
Praveen
I put a breakpoint on line 101 of LoginMediator, the notification is sent when I click connect, but the LoginCommand never get’s it, or the execute function of Login command is never reached, because my breakpoint is never reached.
Since the Facade registers the loging command registerCommand(LOGIN, LoginCommand);
shouldn’t pure mvc, have a handle to the Login Command, and invoke the .execute?
The only execute being called in the StartupCommand
Thanks
Thoughts?
just to clarify, line 101 of LoginMediator is reached, but my additional breakpoint on line 17 of LoginCommand is never reached.
Thanks
please ignore my previous post, as the commands are properly being executed, I had a error prior that I just resolved. thanks
Dave
There is no easy answer to this; you could have a single mediator containing the accordian which manages the datagrid contents within it, or you could just as validly have seperate mediators for the accordian and each of the datagrids.
It totally depends on what makes the most sense for your particular application. A rule of thumb is to start with a single mediator for the accordian and its contents, and if it starts to get complicated seperate the functionality out into seperate mediators as required.
As you get more experienced with PureMVC you’ll get a feeling as to how you need to set the granularity of the mediators, but everyone will have the own coding style and there are no hard and fast rules here.
Dave