PureMVC+SWFAddress Template: Integrating SWFAddress with PureMVC [AS3] · Apr 30, 10:53 PM

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, 03: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, 08: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, 07: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, 01: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, 01: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, 05: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, 07: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, 12: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, 09:21 PM · #

Textile Help