PureMVC+SWFAddress Template: Integrating SWFAddress with PureMVC [AS3] · May 1, 12:53 AM

So I’ve been trying to chart the best course as I begin to learn about AS3. After some meandering, I’ve decided that I need to use the PureMVC Framework for AS3. So far I like PureMVC mainly because it encourages consistency. In reality, PureMVC is not a very big chunk of code. It’s pretty bare-bones. However, the design philosophy behind the framework is probably as important as the framework itself.

Googling led me to the blog of Ashier de Leon who recently did a wonderful job of integrating SWFAddress and PureMVC. I’ve repackaged Ashier’s work and modified the Class structure after reading this PureMVC forum post. A new class, SWFAddressProxy treats SWFAddress as a part of the data model (as opposed to a view component) and lets the programmer use PureMVC Notifications to interact with the browser’s address state.

Download PureMVC+SWFAddress Template

Download PureMVC+SWFAddress Template

Overview

First, your PureMVC app initializes. An event handler (onAddressChange) is created by class com.yourname.model.SWFAddressProxy which will be fired whenever the address state changes. After initialization, this event handler is fired for the base URL. The event handler sends a Notification which gets handled by a Mediator that initializes the content for the applications address state.

  1. public class SWFAddressProxy extends Proxy implements IProxy {
  2. public function SWFAddressProxy( ) {
  3. super( NAME, Number(0) );
  4. SWFAddress.addEventListener(SWFAddressEvent.CHANGE, onAddressChange);
  5. }
  6.  
  7. private function onAddressChange(e:SWFAddressEvent):void {
  8. setTargetURI( SWFAddressUtil.segmentURI(e.value) );
  9. }
  10.  
  11. private function setTargetURI(uriSegments:Array):void {
  12. sendNotification("$" + uriSegments[0], uriSegments, "Array");
  13. }
  14. ...
  15. Download this code: /files/pmvcswfa-1.1.txt

Now suppose the user clicks on a button. If this button is to affect the address state, it’s event handler in the Mediator should not perform any tasks immediately. Instead, it should just send a Notification, which gets handled by SWFAddressProxy. SWFAddressProxy subsequently calls SWFAddress.setValue() which triggers the onAddressChange event handler.

  1. public class ApplicationMediator extends Mediator implements IMediator{
  2. private function createEvents():void {
  3. base.btnHome.addEventListener(MouseEvent.CLICK, onHome);
  4. base.navigation.addEventListener("navigation_click", onNavigationClick);
  5. }
  6.  
  7. private function onNavigationClick(e:Event):void {
  8. sendNotification(ApplicationFacade.ADDRESS_CHANGE, base.navigation.deeplink);
  9. }
  10. ...
  11. Download this code: /files/pmvcswfa-1.2.txt

At this point, the process has repeated itself. The onAddressChange event handler sends a Notification which is again handled by a Mediator (may or may not be the same Mediator handling the button event).

Notice that events effecting the address state, and their subsequent actions are essentially decoupled. Seems like a good way to deal with SWFAddress to me.

Customizing the Package Structure

Most of the code is in /src/com/yourname/. You should rename the yourname directory, then perform a Find and Replace in Files operation using FlashDevelop or similar text editor. Find all instances of yourname and replace with, um, your name.

Customize SWFAddressUtil

Class com.afw.swfaddres.SWFAddressUtil should be customized to suite your application. The static public functions in this class may be used by your Mediators to standardize the format of Titles. You can also modify the segmentURI() function if you’re not satisfied with the way URI arrays are created. You might want to treat a ? as a separator, for instance.

— Pickle

---

Comment

  1. I’ve followed your example and Ashier’s example – he’s a great fellow and helped me a ton – however I can not get the address to route to any deep-links from outside of the app; however once inside the app (after init) deep-links work just fine.

    — William McBee · May 19, 05:56 AM · #

  2. William, I forgot to post a link to the demo: http://www.allflashwebsite.com/swfaddress-puremvc-demo/AppMainBase.html#/portfolio/1/
    Send me a link to your page, I can help you trouble-shoot.

    — Pickle · May 21, 10:49 AM · #

  3. The link… http://dev.bmwusfactory.com/flash2/

    The problem is that my version is Flex based, not Flash based. My SWFAddressProxy is not instantiated via applicationComplete nor creationComplete in the mainApplication.mxml. And that’s my main problem it seems.

    — William McBee · May 22, 09:13 AM · #

  4. William, I have almost no experience with Flex but I doubt that it has to do with your problem. Both Flex and Flash PureMVC implementations have an initializeController() function in the ApplicationFacade where the StartCommand is registered — StartCommand registers SWFAddressProxy.

    It seems like you are somehow bypassing SWFAddressProxy when your application initializes. Remember that in order for deep linking to work, your PureMVC Mediators need to respond to notifications sent by SWFAddressProxy only. Of course there are exceptions to this rule because you probably don’t want to deep link every piece of functionality.

    Neat site, btw.

    — Pickle · May 22, 03:02 PM · #

  5. I just noticed that your site redirects to http://dev.bmwusfactory.com/flash2/#/home/ This is not the proper way to use SWFAddress and is likely part of the problem.

    — Pickle · May 22, 03:18 PM · #

  6. That’s part of the taxonomy behind the scenes you’re seeing. The primaryNavigation is being fed by a CMS in the background and honestly, I can remove that /#/home, but it disappears – with the current logic – in the primaryNav. I’ll get around to removing that once I get through this issue.

    And your idea… tops. I think I was totally ignoring that in the appFacade.

    — William McBee · May 22, 07:04 PM · #

  7. One other thing; when I click on a link the address changes only after the content is loaded (it should be the other way around). This probably meens you are calling SWFAddress.setValue(..) from somewhere else in your app (this function should only be called from SWFAddressProxy) I take it back this problem relates to my previous comment.

    — Pickle · May 22, 09:52 PM · #

  8. Hi,

    A recent interest in swfaddress lead me to this post. Just skimming, I saw:

    “Now suppose the user clicks on a button. If this button is to affect the address state, it’s event handler in the Mediator should not perform any tasks immediately. Instead, it should just send a Notification, which gets handled by SWFAddressProxy. SWFAddressProxy subsequently calls SWFAddress.setValue() which triggers the onAddressChange event handler.”

    I just wanted to ask how the Proxy handles the Notification since Proxies only send Notifications. Looking briefly at the code, it seems like the SWFAddressProxy is instead listening for events from SWFAddress.

    — Cliff Hall · Jun 19, 02:03 PM · #

  9. Thanks for the question, Cliff. In the overview I glossed over this detail, but in the world of PureMVC I believe that it’s pretty straight forward. The ApplicationFacade registers the ADDRESS_CHANGE notification with the AddressChangeCommand:

    registerCommand(ApplicationFacade.ADDRESS_CHANGE, AddressChangeCommand);

    The AddressChangeCommand calls the requestURI function in SWFAddressProxy. It’s true that PureMVC Proxies do not have a handleNotification() function, but they are controlled directly by Commands that respond to notifications.

    — Pickle · Jun 20, 11:21 PM · #

  10. Hi there, I’ve been comparing this code to my code and it’s quite similar. The only problem I’m having however is the deeplinking won’t work. When I click a button I can get a javascript alert popping up with the correct URL I want displayed in the url bar on the browser, however, nothing actually happens; the address stays the same and I get no errors.

    I’ve got traces everywhere and from what I can see all the events and notifications are being triggered, sent and handled properly.

    Anything off the top of your head as to what I might be doing wrong?

    — KJ · Mar 3, 10:50 PM · #

  11. In response to my previous post, I realized what I was doing wrong, quite embarrassing actually. I was using the development version rather than the distro version of swfaddress. The dev has a javascript error in it which I found using Firebug in Firefox, and that gave away what was wrong. All working now.

    Thanks anyways for an informative post :)

    KJ

    — KJ · Mar 4, 12:37 AM · #

  12. thanks for the time saver !
    one side note : you could have put your stage resize handling in a StageResizeProxy

    — Benoit Jadinon · Apr 11, 08:01 AM · #

  13. How are you handling page transitions with swf and pmvc?

    — Monkey · Jul 25, 04:11 PM · #

  14. @Monkey, That’s what I created InitMonitor for.

    — Pickle · Jul 27, 04:11 AM · #

  15. woops! my typo – i actualy meant swfaddress. is the InitMonitor stil the best option using the swfaddress code above? each page needs to run a transition in and out function removing one view before adding the next at the end of transition?

    — Monkey · Jul 27, 02:05 PM · #

  16. It’s hard to tell you the best solution since I don’t really understand the problem. InitMonitor is intended for a situation where a transition would have to wait on a 1 or more proxies to load in the necessary data before continuing on. I ussually create a command for each swfaddress state (url) and then the view responds to notifications sent by InitMonitor and InitMonitor proxies (proxies that implement the IInitProxy interface)

    — Pickle · Jul 28, 08:41 AM · #

  17. I got this implemented into my site, and it is working great, but I have a problem with adding dynamic site addresses. In my project, my navigation is XML based, and so I am unable to set up static vars for the page names in my Application Facade. Do you have any ideas on how to make it so that I can dynamically create these page names?
    Thanks

    — tk · Jul 28, 09:43 AM · #

  18. @tk, I think one solution is to pass a dynamic type argument when sending the notification. While the notification name is basically intended to be static, the notification type isn’t and it’s there for you to do as you will with it. You could also check out my latest SWFAddress+PureMVC implementation in the Digizex project, which includes a complete rewrite where SWFAddress is now managed by a mediator (instead of a proxy) named AddressMediator and the states are always dynamic.

    — Pickle · Jul 29, 02:33 PM · #

  19. Hi, First, thanks a lot for this thorough example, it’s really helping. And once i understand all of it I hope to rewrite it and use it as a base for websites I build.

    But I have a question. I’m a beginner, be gentle. I appreciate any help greatly.

    Regarding cliffs post above,and your post right above, should swfaddress be a mediator instead of a proxy? I am not sure I’ll be able to incorporate AddressMediator into my rewritten version of your example. I’ll try but it might be a little too advanced.

    What do you suggest for someone trying to get a grip of puremvc? Your digizec project is fairly complex, but i would like dynamic states. anyway. thanks.

    — Russ · Oct 8, 02:20 PM · #

  20. @Russ

    If you’re feeling overwhelmed, I would stick to understanding PureMVC Single Core first, then move on to MultiCore and Pipes, and finally look into Fabrication. Digizex is based on Fabrication and once you understand Fabrication it is pretty simple.

    To adopt AddressChange.as for SingleCore you need to add the notifications. For example, the respondToAddressChange function responds to the notification named “ADDRESS_CHANGE”

    I now prefer using a Mediator for SWFAddress instead of a Proxy, and in Fabrication it especially makes sense because of how the framework is setup.

    — Pickle · Oct 19, 04:25 PM · #

Textile Help