Flex版Mp3播放器----大部分功能版一，前台

利用假期学习了下flex，个人感觉要做点啥东西才能算的上熟练，恰逢工作室让写一个听歌的程序，自己就尝试写了个，菜鸟作品，多多批评。

 

首先 给个预览看下

 

登录页面：（javaeye的加入图片太麻烦了 要看的同志们到这里看：http://user.qzone.qq.com/361276898 里面听听那个相册就可以看了）

 

总体将：采用 Hibernate + Spring + flex + Blades（忘了单词咋写的 ^_^） 

 

一，前台的代码 newting.mxml

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundImage="images/green/bg.png" creationComplete="init()"> <!--远程访问对象--> <mx:RemoteObject id="userServiceControl" destination="userControl"> </mx:RemoteObject> <mx:RemoteObject id="songServiceControl" destination="songControl"> </mx:RemoteObject> <mx:Script> <![CDATA[ import mx.utils.URLUtil; import mx.events.ResourceEvent; import mx.events.ListEvent; //进入该网站是的初始化 public function init():void{ var url:String = Application.application.url; uploadUrl = URLUtil.getServerName(url)+":"+URLUtil.getPort(url); //提示先登录才能使用 newtingPlayer.selectedChild=login; //默认当前是第一页 internowPage = 0; } public var uploadUrl:String; public var UUName:String; public var downSongName:String; //上一页下一页标志 0表示上一页，1表示下一页 3表示刚进入页面 public var flagPage:Number=3; //默认当前是第一页 public var internowPage:Number=0; //播放和上传的脚本 import cn.jcracker.tingting.TTupload; import cn.jcracker.tingting.Player; import mx.controls.Alert; import mx.collections.*; import mx.utils.ArrayUtil; public var applyNo:Number;//表示目前的应用 0为听歌历史 1为最新上传 2为最热应用 3为随机听歌 //用户名 public var userName:String; //播放标志，0 表示暂停，1表示播放 public var playFlag:Number = 1; [Bindable] public var player:Player; //播放前的准备工作 private function playInit():void{ //默认歌词显示 lrcPanel.visible = true; uploadPanel.visible = false; //默认音量大小 tingVolume.value = 1.5; //默认不播放 playFlag = 0; } private function Play(player:Player):void{ switch(playFlag){ case 0: player.play(); playProgressControl.value = player.nowProgress; playControl.source = "images/green/ctrl_pause.png"; playFlag = 1; break; case 1: player.pause(); playControl.source = "images/green/ctrl_play.png"; playFlag = 0; break; default: player.pause(); playControl.source = "images/green/ctrl_play.png"; playFlag = 0; } } private function ChangeVolume(player:Player):void{ volumePanel.source = "images/green/ctrl_vol.png"; player.volume = tingVolume.value; player.changeVolume(); } private function stopVolume(player:Player):void{ player.volume = 0; player.changeVolume(); volumePanel.source = "images/green/ctrl_vol_mute.png"; } private function ChangeProgress(player:Player):void{ player.nowProgress = playProgressControl.value; player.changeProcess(); //恢复到值的音量 ChangeVolume(player); } private function ShowLrc(player:Player):void{ uploadPanel.visible = false; lrcPanel.visible = true; } private function ShowUpload(player:Player):void{ lrcPanel.visible = false; uploadPanel.visible = true; } //进度条在下载完成后消失 private function dispear(player:Player):void{ downloadBar.visible = false; } //文件上传处理代码 public var ttupload:TTupload = new TTupload(); public function UploadMp3():void{ ttupload.uploadMp3(); } public function UploadLrc():void{ ttupload.uploadLrc(); } public function DownloadMp3():void{ ttupload.downloadMp3(uploadUrl,UUName); } public function UploadNow():void{ ttupload.proceedWithUpload(uploadUrl,userNameLabel.text,saySomethingToOne.text.toString()); } /** * 页面登录脚本开始 * */ import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import mx.events.ResizeEvent; import mx.controls.Alert; //用户登录 public function loginflex(event:Event):void{ userName =loguserName.text; var password:String = password.text; userServiceControl.login(userName,password); userServiceControl.addEventListener(ResultEvent.RESULT,loginSuccess); userServiceControl.addEventListener(FaultEvent.FAULT,errorHandler); } //游客登录 public function loginflexAsGuest(event:Event):void{ userName ="guest"; var password:String ="guest"; userServiceControl.login(userName,password); userServiceControl.addEventListener(ResultEvent.RESULT,loginSuccess); userServiceControl.addEventListener(FaultEvent.FAULT,errorHandler); } //登录失败处理 public function errorHandler(e:FaultEvent):void{ userServiceControl.removeEventListener(FaultEvent.FAULT,errorHandler); Alert.show("用户名或密码错误！"); } //登录成功后的处理 public function loginSuccess(e:ResultEvent):void{ //调用初始化播放器函数 playInit(); //检查是否是会员 userName = e.result.toString(); if(userName =="guest"){ uploadPanel.enabled = false; } //显示该用户的名称在播放器上 userNameLabel.text = userName; //跳转到登录成功页面， 打开huiyuan 画布 newtingPlayer.selectedChild=huiyuan; //跳转至最新上传 歌曲应用 newSong(internowPage); userServiceControl.removeEventListener(ResultEvent.RESULT,loginSuccess); // internowPage = internowPage +1; } /** * 页面登录脚本结束 * */ //-----------------------------开始处理应用请求------------------------------------------------- public function myList(nowPage:Number):void{ if(userName == "guest"){ Alert.show("未注册用户，没有歌曲收藏!"); }else { //发送得到列表请求 songServiceControl.getMyList(userName,nowPage); if(nowPage == 0 ){internowPage = 0} songServiceControl.addEventListener(ResultEvent.RESULT,myListSuccess); songServiceControl.addEventListener(FaultEvent.FAULT,myListerrorHandler); applyNo = 0; } } //获取列表成功处理函数 public function myListSuccess(e:ResultEvent):void{ // Alert.show("listSuccess"); // Alert.show("internowPage:"+internowPage); if(e!=null){ var mylist:ArrayCollection =e.result as ArrayCollection; list.dataProvider=mylist; //Alert.show("myList:"+mylist.length); // //报异常这里 // if( mylist.length > 0){ // nextpagelable.visible = true; // uppagelable.visible = true; // Alert.show("listSoon"); // list.dataProvider=mylist; // }else{ Alert.show("无歌曲列表"); // } }else{ Alert.show("您没有收藏的歌曲！"); } // songServiceControl.removeEventListener(ResultEvent.RESULT,myListSuccess); } //获取列表失败处理函数 public function myListerrorHandler(e:FaultEvent):void{ songServiceControl.removeEventListener(FaultEvent.FAULT,myListerrorHandler); Alert.show("获取列表失败，请在论坛反映。"); } //单击歌曲列表中的歌曲名称响应函数 public function playTheSong(e:ListEvent):void{ //先停止正在播放的歌曲 if(player!=null){ player.stop(); } var songName:String = (e.target as DataGrid).selectedItem[(e.target as DataGrid).columns[e.columnIndex].dataField]; downSongName = songName; //在载制定songName的uuName songServiceControl.getUUName(songName); songServiceControl.addEventListener(ResultEvent.RESULT,getUUName); var userName:String = userNameLabel.text; //replace 替换数据库中名称的.mp3为.lrc //添加这首歌曲到我的听歌历史 songServiceControl.addMyList(songName,userName); songServiceControl.addPlayTimes(songName); } public function getUUName(e:ResultEvent):void{ UUName = e.result as String; UUName = UUName; player = new Player(uploadUrl,UUName,UUName.replace(".mp3",".lrc")); playInit(); Play(player); //重新加载列表 switch(applyNo){ case 0:myList(internowPage);break; case 1:newSong(internowPage);break; case 2:hotSong(internowPage);break; case 3:randSong(internowPage);break; default:newSong(internowPage); } songServiceControl.removeEventListener(ResultEvent.RESULT,getUUName); songServiceControl.addEventListener(ResultEvent.RESULT,getSomeWords); songServiceControl.addEventListener(FaultEvent.FAULT,myListerrorHandler); } public function getSomeWords(es:ResultEvent):void{ someWords.text = es.result.toString(); songServiceControl.removeEventListener(ResultEvent.RESULT,getSomeWords); } //播放上一首歌曲 public function prevSong():void{ Alert.show("此功能尚未实现，请直接点击歌曲播放!"); } //最新上传的二十首歌曲 public function newSong(nowPage:Number):void{ //页面计数同步 if(nowPage == 0 ){internowPage = 0} // Alert.show("最新上传的歌曲"); songServiceControl.getNewSong(nowPage); songServiceControl.addEventListener(ResultEvent.RESULT,myListSuccess); songServiceControl.addEventListener(FaultEvent.FAULT,myListerrorHandler); applyNo = 1; } //最热的二十首歌曲 public function hotSong(nowPage:Number):void{ // Alert.show("It's very hot"); songServiceControl.getHotSong(nowPage); if(nowPage == 0 ){internowPage = 0} songServiceControl.addEventListener(ResultEvent.RESULT,myListSuccess); songServiceControl.addEventListener(FaultEvent.FAULT,myListerrorHandler); applyNo = 2; } //随机听歌 public function randSong(nowPage:Number):void{ // Alert.show("Rand"); songServiceControl.getRandSong(nowPage); if(nowPage == 0 ){internowPage = 0} songServiceControl.addEventListener(ResultEvent.RESULT,myListSuccess); songServiceControl.addEventListener(FaultEvent.FAULT,myListerrorHandler); applyNo = 3; } //分页 public function nextPage():void{ flagPage = 1; // Alert.show("internowPage:"+internowPage); switch(applyNo){ case 0:myList(internowPage);break; case 1:newSong(internowPage);break; case 2:hotSong(internowPage);break; case 3:randSong(internowPage);break; } internowPage = internowPage+1; } public function upPage():void{ flagPage = 0; // Alert.show("internowPage:"+internowPage); switch(applyNo){ case 0:myList(internowPage);break; case 1:newSong(internowPage);break; case 2:hotSong(internowPage);break; case 3:randSong(internowPage);break; } internowPage = internowPage -1; } ]]> </mx:Script> <mx:ViewStack id="newtingPlayer"> <!--===============================注册用户听歌页面，有上传功能，开始================================================================--> <mx:Canvas x="0" y="0" width="1275" height="536" id="huiyuan"> <!--天佑听听log--> <mx:Image x="0" y="0" width="1275" source="images/green/tingtingbar.png" height="86"/> <!--听听整个页面--> <mx:Image width="686.4394" height="394.0909" source="images/green/player.png" x="267.8" y="116"/> <!--听听后退按钮--> <!--听听播放按钮--> <mx:Image x="292" y="140" source="images/green/ctrl_play.png" click="Play(player);" id="playControl" width="36"/> <!--听听前进按钮--> <!--听听音量按钮--> <mx:Image x="345" y="152" source="images/green/ctrl_vol.png" click="stopVolume(player)" id="volumePanel"/> <!--听听音量大小滑块--> <mx:HSlider x="367" y="149" height="18" width="224" id="tingVolume" change="ChangeVolume(player)" maximum="2" minimum="0" value="{player.volume}"/> <!--听听播放进度--> <mx:HSlider x="279" y="194" width="312" height="29" id="playProgressControl" value="{player.playProgress}" change="ChangeProgress(player)" allowTrackClick="true" maximum="100" minimum="0"/> <!--听听歌曲列表--> <mx:DataGrid width="229" height="251" rowCount="15" fontSize="12" x="362" y="249" id="list" itemClick="playTheSong(event)"> <mx:columns> <mx:Array> <mx:DataGridColumn headerText="歌曲列表" dataField="songName" width="180" /> </mx:Array> </mx:columns> </mx:DataGrid> <!--听听应用列表--> <mx:DataGrid x="279" y="249" width="85" height="251" fontSize="12"> <mx:columns> <mx:Array> <mx:DataGridColumn headerText="我的应用" dataField="col1" /> </mx:Array> </mx:columns> </mx:DataGrid> <!--听听右边控制面板，通过Js修改为上传歌曲还是歌词显示！--> <!--歌词--> <mx:Label x="654" y="140" text="显示歌词" width="70" height="29" fontSize="12" alpha="1.0" fontWeight="bold" click="ShowLrc(player)"/> <mx:Label x="823" y="140" text="上传歌曲" width="74" height="29" fontSize="12" fontWeight="bold" click="ShowUpload(player)"/> <mx:Canvas x="614" y="177" width="307" height="323" id="lrcPanel"> <mx:Label x="0" y="0" text="对大家说点什么吧！" width="307" height="21" id="someWords" fontSize="12" textAlign="center"/> <mx:TextArea x="0" y="20" width="307" height="303" id="lrc" text="{player.lrc}" fontSize="15" editable="false"/> <mx:Button x="10" y="285" label="下载这首歌" width="287" height="28" fontSize="18" click="DownloadMp3()"/> </mx:Canvas> <!--上传页面--> <!--未注册用户，将uploadpanel隐藏--> <mx:Canvas x="614" y="177" width="307" height="323" id="uploadPanel"> <!-- <mx:Label x="823" y="140" text="上传歌曲" width="74" height="29" fontSize="12" fontWeight="bold" click="ShowUpload()"/> --> <mx:Label x="28" y="59" text="送歌给：" width="90" height="32" fontSize="20" fontWeight="bold" textAlign="right"/> <mx:TextInput x="114" y="59" height="32" width="171" id="saySomethingToOne" fontSize="12"/> <mx:ProgressBar id="uploadProgressBar" source="{ttupload.file}" x="28" y="280" width="257" fontSize="12" indeterminate="false" labelPlacement="center" height="27"/> <mx:Button x="28" y="137" label="浏览歌曲" width="193" height="33" fontSize="18" fontWeight="bold" click="UploadMp3();"/> <mx:Button x="28" y="215" label="浏览歌词" width="193" height="33" fontSize="18" fontWeight="bold" click="UploadLrc();"/> <mx:Button x="229" y="137" label="上传" height="33" width="56" fontSize="12" click="UploadNow()"/> <mx:Button x="229" y="217" label="上传" height="33" width="56" fontSize="12" click="UploadNow()"/> <mx:Label x="28" y="198" text="请保证歌词名与歌曲名相同" width="161" fontSize="12"/> </mx:Canvas> <mx:ProgressBar x="279" y="224" width="312" id="downloadBar" source="{player.mySong}" labelPlacement="center" height="26"/> <mx:Label x="729" y="140" id="userNameLabel" height="29" width="88" fontSize="12" fontWeight="bold" color="#CF590A" fontFamily="Arial" textAlign="center"/> <mx:Button x="279" y="291" label="听过的歌" width="85" fontSize="12" click="myList(0);"/> <mx:Button x="279" y="332" label="最新列表" width="85" fontSize="12" click="newSong(0)"/> <mx:Button x="279" y="373" label="最热列表" width="85" fontSize="12" click="hotSong(0)"/> <mx:Button x="279" y="414" label="随便听听" width="85" fontSize="12" click="randSong(0)"/> <!-- <mx:Label x="372" y="476" text="上一页" id="uppagelable" width="74" height="22" fontSize="12" textAlign="center" fontWeight="bold" click="upPage()"/> <mx:Label x="493" y="476" text="下一页" id="nextpagelable" width="74" height="22" fontSize="12" textAlign="center" fontWeight="bold" click="nextPage()"/> --> </mx:Canvas> <!--===============================注册用户听歌页面，有上传功能，结束================================================================--> <!--=========================================================登录页面开始=====================================================--> <mx:Canvas x="0" y="0" width="1275" height="536" id="login"> <mx:Image x="0" y="0" width="1275" source="images/green/tingtingbar.png" height="86"/> <mx:Panel x="350" y="133" width="468" height="332" layout="absolute" fontSize="14" title="登录" borderColor="#82F5B0"> <mx:Label x="92" y="67" text="用户名：" width="84" fontWeight="bold" fontSize="18"/> <mx:Label x="92" y="114" text="密码：" width="84" fontSize="18" fontWeight="bold" textAlign="left" /> <mx:TextInput x="184" y="67" height="28" width="162" id="loguserName"/> <mx:TextInput x="184" y="114" height="28" width="162" id="password" displayAsPassword="true"/> <mx:Button x="92" y="191" label="注册"/> <mx:Button x="196" y="191" label="登录" click="loginflex(event);"/> <mx:Button x="290" y="191" label="游客" click="loginflexAsGuest(event);"/> </mx:Panel> </mx:Canvas> <!--=========================================================登录页面结束=====================================================--> </mx:ViewStack> </mx:Application>

 

关于以上的  有些函数没有用到在应用中，主要是自己还没那水平，希望以后能补上 .

 

二，配置和后台交互相关的

      remoting-config.xml

 

    

<?xml version="1.0" encoding="UTF-8"?> <service id="remoting-service" class="flex.messaging.services.RemotingService"> <adapters> <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/> </adapters> <default-channels> <channel ref="my-amf"/> </default-channels> <destination id="userControl"> <properties> <source>cn.jcracker.tingting.controller.UserControl</source> </properties> </destination> <destination id="songControl"> <properties> <source>cn.jcracker.tingting.controller.SongControl</source> </properties> </destination> </service>

 

web.xml

  

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="WebApp_ID" version="2.4" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>newting</display-name> <context-param id="flex"> <param-name id="flexp">flex.class.path</param-name> <param-value id="flexvalue">/WEB-INF/flex/hotfixes,/WEB-INF/flex/jars</param-value> </context-param> <!-- Http Flex Session attribute and binding listener support --> <listener> <listener-class>flex.messaging.HttpFlexSession</listener-class> </listener> <!-- MessageBroker Servlet --> <servlet> <servlet-name>MessageBrokerServlet</servlet-name> <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class> <init-param> <param-name>services.configuration.file</param-name> <param-value>/WEB-INF/flex/services-config.xml</param-value> </init-param> <init-param> <param-name>flex.write.path</param-name> <param-value>/WEB-INF/flex</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>Upload</servlet-name> <servlet-class>cn.jcracker.tingting.Upload</servlet-class> </servlet> <servlet-mapping> <servlet-name>MessageBrokerServlet</servlet-name> <url-pattern>/messagebroker/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Upload</servlet-name> <url-pattern>/songupload</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <!-- for WebSphere deployment, please uncomment --> <!-- <resource-ref> <description>Flex Messaging WorkManager</description> <res-ref-name>wm/MessagingWorkManager</res-ref-name> <res-type>com.ibm.websphere.asynchbeans.WorkManager</res-type> <res-auth>Container</res-auth> <res-sharing-scope>Shareable</res-sharing-scope> </resource-ref> --> <filter> <filter-name>Filter</filter-name> <filter-class>cn.jcracker.tingting.utils.EncodingUtils</filter-class> </filter> <filter-mapping> <filter-name>Filter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-- 添加Spring初始化 --> <!-- Spring --> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <filter> <filter-name>OpenSessionInViewFilter</filter-name> <filter-class>org.springframework.orm.hibernate3.support.OpenSessionInViewFilter</filter-class> <init-param> <param-name>singleSession</param-name> <param-value>false</param-value> </init-param> </filter> <filter-mapping> <filter-name>OpenSessionInViewFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> </web-app>

 至此前台结束！ 后面见Flex版Mp3播放器----大部分功能版二，后台。附件也在最后，这里就不上传了！