PureMVC Tutorial – Flex, PureMVC, Jabber and XIFF 3: Conclusion, Demo & Downloads

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

67 comments

  1. 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!

  2. WordPress decided to replace swfobject with something completely different. Now fixed, thanks for pointing that out.

    Dave

  3. 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

  4. Hey Jacob,

    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

  5. 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

  6. 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

  7. Hey 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

  8. I am running this application in flex builder 3, but how to register a user to get username and password for this application.

  9. 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

  10. Hey Jimmy,

    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

  11. FlashDevelop can’t create exes – to do that you’ll need to use an SWF wrapper such as MDM Zinc. Alternatively you can package your application using AIR and as long as the user has the runtime installed on their machine they will be able to use it (otherwise you can use a commercial product such as airAveer to package the runtime along with your app).

  12. Hi got this error:

    C:Documents and SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffercontrollerSimpleCommand.as(4): col: 10 Error: Syntax error: expecting leftbrace before leftparen.
    package $(Package) $(CSLB){
    ^
    Build halted with errors (fcsh).
    Done (1)

  13. Hey Aminiasi,

    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?

  14. 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 SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffereventsChatEvent.as(25): col: 28 Error: Type was not found or was not a compile-time constant: JID.
    public function getJID():JID {
    ^
    C:Documents and SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffermodelXMPPProxy.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 SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffermodelXMPPProxy.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 SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffermodelXMPPProxy.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 SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffermodelXMPPProxy.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 SettingsAminiasiMy DocumentsXIFFersrcorgdavekeenxiffermodelXMPPProxy.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!!

  15. @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!

  16. 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 (SparkMiranda) – everything works fine.
    I try use Security.loadPolicyFile(“http://”+ server +”:5229″) in XMMPProxy – the same error.

    Sorry, I’m newbie *embarassed*

  17. 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:WorkFlexApplicationsrcorgdavekeenxifferviewChatMediator.as:92]

    it appeared when MotD received from Openfire

  18. Hey Yourik,

    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

  19. 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

  20. 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;)

  21. Hey Roman,

    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

  22. 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.

  23. 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!

  24. 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

  25. 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.

  26. 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

  27. 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

  28. 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?

  29. just to clarify, line 101 of LoginMediator is reached, but my additional breakpoint on line 17 of LoginCommand is never reached.
    Thanks

  30. please ignore my previous post, as the commands are properly being executed, I had a error prior that I just resolved. thanks

  31. Hey Praveen (3 posts up!),

    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

  32. Hi Dave,
    This is good. But when I compile and build and when I click testMovie, it load s the swf and when i enter a us/pw and select the .ser option i get the security error, how can i see it working, what url should I give in the IE browser for it to work?
    thnaks,
    Ann

  33. Hi Dave,
    just wanted to thank you for this insightful tutorial, it really helped me get a grasp of how to develop using PureMVC (just telling me to read the PureMVC pdf’s added a lot).
    It took away a lot of the doubts I had of how I would develop my current game project using the framework.

    -Ari-

  34. @Ali and the Flex Builder community:
    When you want to have the default application file located in any subdirectory of your project, then you have to adapt the file “.actionScriptProperties” which is automatically created when you create/import a project. In it, change the application path. For me it works with:

    Now you can use the code from this tutorial without any file moving :)

  35. sorry, the commentary function took the angle brackets as code tag. Here’s the missing line:

    application path=”org/davekeen/xiffer/Application.mxml”/

  36. Excellent tutorial thank you for taking the time to write it mate, i’m still a novice when it comes to PureMVC and this was really helpful. I was able to follow all the steps to create the complete project, I had to do some changes to get it to work with the latest xiff library and spark for flex 4 but now works a treat. More tutorials like this one pls :)

  37. Hi Dave!
    This is definitely what I was looking for to start with pureMVC. Simple but precise, great job!
    Just a question… You are mentioning a general rule for registering mediators, but, that rule does not apply in the case of dinamically added and removed mediators. Weel, I know, you are already writing this new tutorial ;), but can you give me just a suggestion about that?

    Thank you!
    f

  38. Thank you so much for such great tutorial. Finally I can say I understand pureMVC. Why wouldn’t puremvc.org publish such a nice, step-by-step, clear tutorial like yours?? Thank you very much indeed!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>