With the XML list of movies in hand, it's time to create a Flex application that extends the simplemovie.mxml player with the list of movies. This upgraded Flex application is shown in Listing 7.
<?xml version="1.0" encoding="utf-8"?> <application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationcomplete="movieXmlData.send()"> <httpservice method="get" url="http://localhost:8080/movies.php" id="movieXmlData" result="onGetMovies( event )"></httpservice> <script> import mx.rpc.events.ResultEvent; import mx.controls.VideoDisplay; import mx.controls.List; import mx.rpc.http.HTTPService; import mx.collections.ArrayCollection; [Bindable] private var movies : ArrayCollection = new ArrayCollection(); public function onGetMovies( event : ResultEvent ) : void { var firstMovie : String = event.result.movies.movie[0].source.toString(); videoPlayer.source = firstMovie; movies = event.result.movies.movie; movieList.selectedIndex = 0; } public function onPrevious() : void { if ( movieList.selectedIndex == 0 ) movieList.selectedIndex = movies.length - 1; else movieList.selectedIndex -= 1; videoPlayer.source = this.movieList.selectedItem.source.toString(); } public function onPlay() : void { videoPlayer.source = this.movieList.selectedItem.source.toString(); videoPlayer.play(); } public function onNext() : void { if ( movieList.selectedIndex >= ( movies.length - 1 ) ) movieList.selectedIndex = 0; else movieList.selectedIndex += 1; videoPlayer.source = this.movieList.selectedItem.source.toString(); } public function onChange() : void { videoPlayer.source = this.movieList.selectedItem.source.toString(); } </script> <hbox width="100%" paddingleft="10" paddingtop="10" paddingright="10"> <vbox> <videodisplay width="400" height="300" id="videoPlayer" complete="onNext()"></videodisplay> <hbox width="100%" horizontalalign="center"> <button label="<<" click="onPrevious()"></button> <button label="Play" click="onPlay()"></button> <button label=">>" click="onNext()"></button> </hbox> </vbox> <list width="100%" height="340" id="movieList" dataprovider="{movies}" change="onChange()" labelfield="title"></list> </hbox> </application>