Creating a Playlist Proxy for a Video Player

Due to the Voices blog’s demise I rescued this tutorial for reference, V2 update out soon!

I have blogged recently about how to build a simple flv player in flash and flex using PureMVC and thought I would extend the functionality to the player by adding the ability to retrieve a simple XML playlist. Please refer to the extensive PureMVC documentation Cliff provides for further explanation regarding the framework.

  1. Start off by creating a simple xml document pointing to a couple of FLV files. Create a new XML document named playlist.xml and save it in a folder named assets in the CS3VideoPMVC directory. Build a root node videos and then 2 video nodes with a url attribute pointing to an flv within the same directory as the xml document itself and a description attribute. create a folder named vo and then create a new ActionScript 3 file named VideoVO entering the code below:
1
2
3
4
5
6
7
8

package com.nutrixinteractive.model.vo
{
public class VideoVO
{
public var v_url:String;
public var v_desc:String;public function VideoVO(){};
}
}
  1. Finally lets construct the proxy to retrieve and manage the playlist. Create a new ActionScript 3 class name PlayListProxy:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

package com.nutrixinteractive.model
{
import flash.net.*;
import flash.events.*;
import org.puremvc.interfaces.IProxy;
import org.puremvc.patterns.proxy.Proxy;
import org.puremvc.interfaces.INotification;
import com.nutrixinteractive.ApplicationFacade;
import com.nutrixinteractive.model.vo.VideoVO;public class PlayListProxy extends Proxy implements IProxy
{
public static const NAME:String = 'PlayListProxy';
private var urlLoader:URLLoader;
public function PlayListProxy()
{
super( NAME, new Array );getXML();
}

private function getXML():void
{
var urlRequest:URLRequest = new URLRequest("assets/playlist.xml");
urlLoader = new URLLoader();
urlLoader.addEventListener( Event.COMPLETE, xmlLoaded );
urlLoader.load( urlRequest );
}

private function xmlLoaded( e:Event ):void
{
var pl:XML = new XML(urlLoader.data);

for each ( var video:XML in pl..* )
{
var _video:VideoVO = new VideoVO();

_video.v_url = "assets/"+video.@url;
_video.v_desc = video.@desc;

playList.push( _video );
}

sendNotification( ApplicationFacade.PLAYLIST, playList );
}

public function get playList():Array
{
return data as Array;
}
}
}
  1. The Proxy data object is an Array, the most suitable storage for a playlist. I have chosen to run the getXML() method in the constructor meaning when this proxy is registered in the StartupCommand this method will be called. If you would like to run other tasks before the XML is requested then simply remove getXML() from the constructor and call the method from a command.
  2. Next a simple url request is made to the XML document in the assets folder and a method named xmlLoaded() is assigned to the urlLoader COMPLETE event listener. This method then creates a new XML object which is assigned the loaded xml data. We then loop through the xml targeting the video nodes creating a new VideoVO for each node, assigning the attributes to our custom value object properties and finally pushing each value object to our array (the proxies data object).

  3. Once we have fully populated the array we send a notification to the facade attaching the playlist. This is my chosen method for making the playlist Array available to the rest of the application, the alternative being retrieving the PlayListProxy instance from within a mediator to access the playlist. I prefer, if possible, to not access a proxy from a mediator and use commands or notifications to distribute the data around the application.

  4. Now we need to define a named constant in the Application Facade and register the Proxy in our StartupCommand:

1

public static const PLAYLIST:String = "playlist";
1

facade.registerProxy( new PlayListProxy() );
  1. Finally here is an example of how we can retrieve this information from within a Mediator using the 2 methods, listNotificationInterests() and handleNotification(). Add the below code to the PlayerMediator. The playlist is plucked easily from the notification using the getBody() method and cast to the appropriate data type.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

override public function listNotificationInterests():Array
{
   return [ ApplicationFacade.PLAYLIST ];
}

override public function handleNotification( note:INotification ):void
{
   switch ( note.getName() )
   {
      case ApplicationFacade.PLAYLIST:
         playlist = note.getBody() as Array;
         var totalFLVs:Number = playlist.length;
         break;
   }
}

Hopefully this simple tutorial should have given you a further insight to creating a proxy and distributing data throughout an application using PureMVC.

src: source files pre V2

Comments