要求
-
必備知識
本文要求基本瞭解 Adobe Flex程式設計知識和JAVA基礎知識。
-
開發環境
MyEclipse10/Flash Builder4.6/Flash Player11及以上
-
演示地址
傳統網路程式的開發是基於頁面的、伺服器端資料傳遞的模式，把網路程式的表現層建立於HTML頁面之上，而HTML是適合於文字的，傳統的基於頁面的系統已經漸漸不能滿足網路瀏覽者的更高的、全方位的體驗要求了。而富網際網路應用（Rich Internet Applications，縮寫為RIA）的出現就是為了解決這個問題。在HTML5釋出以前，RIA領域的技術解決方案一直相都是各展所長，並無爭議。Adobe體系中，Flash做不了的事情，Flex可以做到；.Net系決策者在選用RIA解決方案時，Silverlight是不二之選。隨著HTML 5橫空出世，Flex“易主”(這裡說的是Adobe將Flex捐給Apache)，Silverlight被“雪藏”(這裡指微軟停止對Silverlight的更新)，RIA領域的技術解決方案開始變得撲朔迷離。 HTML 5無疑是“明日之星”，蘋果公司前CEO賈伯斯對它讚賞有加，絕大多數智慧手機瀏覽器均支援HTML 5，基於HTML 5的網站也如雨後春筍般出現。這些似乎預示著HTML 5時代來臨，人們試圖讓決策者相信，Flash/Flex時代已經過去了，HTML 5才是RIA領域的最佳解決方案。那到底真相會是什麼呢? HTML 5其實也存在許多劣勢，並不完美。HTML 5的瀏覽器相容性問題(由於國內傳統IE瀏覽器佔了相當大的比重)；要實現html5應用，還要寫CSS與JavaScript，增加了人員構成和開發成本，其編寫難度也要遠大於Flex。在較長一段時間內，HTML5是無法”替代”Flex技術的，也許最終HTML 5與Flex將成為是兩種截然不同的技術解決方案，所以，它們是互補的，而非替代。如對Flash/Flex/Html5還不瞭解，我到網際網路上找了一篇相關的文章和大家分享一下: 淺談 Flash/Flex/HTML5 技術選型
一，Flex4&BlazeDS&JAVA整合:
Myeclipse10.6+Flash Builder 4.6安裝配置
二，使用者介面設計:
- 播放器介面的設計:
- 專輯製作介面的設計:
三，資料庫設計:
- album(專輯表)建立語句:
CREATE TABLE `album` ( `a_id` int(11) NOT NULL AUTO_INCREMENT, `a_name` varchar(20) NOT NULL DEFAULT '', `a_singer` varchar(20) NOT NULL DEFAULT '', `a_image` varchar(120) NOT NULL DEFAULT '', PRIMARY KEY (`a_id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;
- song(歌曲表)建立語句:
CREATE TABLE `song` ( `s_id` int(11) NOT NULL AUTO_INCREMENT, `a_id` int(11) NOT NULL, `s_name` varchar(120) NOT NULL DEFAULT '', `s_source` varchar(150) NOT NULL DEFAULT '', PRIMARY KEY (`s_id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 ;
四，前端程式碼物理實現(Flex4部分程式碼實現):
- 播放器介面物理實現，通過在主程式中定義三個不同的自定義元件，”專輯””列表”“播放器控制皮膚”來構成整個播放器介面。
1，程式入口檔案:myMusicPlayer.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" skinClass="skinks.ApplicationSkin" xmlns:components="components.*" creationComplete="initApp()"> <fx:Declarations> <!-- 將非可視元素（例如服務、值物件）放在此處 --> <s:RemoteObject id="albumListDist" destination="AlbumServerTaget" result="albumListDist_resultHandler(event)" fault="albumListDist_faultHandler(event)"/> <s:RemoteObject id="songListDist" destination="SongServerTaget" result="songListDist_resultHandler(event)" fault="songListDist_faultHandler(event)"/> </fx:Declarations> <fx:Metadata> [Event(name="changeitem",type="events.MyEvent")] //通過 Event後設資料 定義自定義監聽事件 </fx:Metadata> <fx:Script> <![CDATA[ import events.MyEvent; import events.MyEvent2; import events.MyEvent3; import mx.collections.ArrayCollection; import mx.collections.ArrayList; import mx.controls.Alert; import mx.events.FlexEvent; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; import valueObjects.Song; [Bindable] public var albums:ArrayCollection; public var listData:ArrayCollection=new ArrayCollection(); private var musicSource:Object; private var albumSinger:String; //專輯歌手 /** * 初始化函式 */ private function initApp():void{ albumListDist.getList(); //呼叫服務端方法 album.addEventListener(MyEvent3.CHANGEITEM,albumList_change_Handler3); //監聽自定義事件; /* //將資料放入到值物件中 for each(var temp:Object in data[0]){ var song:Song=new Song(); song.singer=temp.singer; song.song=temp.song; song.musicSource=temp.musicSource; listData.addItem(song); } //列表自動初始化第一個專輯資料繫結 list.data=listData; //專輯繫結資料 album.data=Album; player.musicItem=Object(listData[0]); player.musicNum=listData.length; //Alert.show(data[0].length); */ } /** * 重新選擇專輯後呼叫 */ private function albumList_change_Handler3(event:MyEvent3):void{ albumSinger=event.albumItem.a_singer; songListDist.getSongsById(event.albumItem.a_id); //通過專輯ID請求專輯的資料 } /** *結果函式 albumListDist.getList() 獲取專輯列表 */ protected function albumListDist_resultHandler(event:ResultEvent):void { albums=event.result as ArrayCollection; album.data=albums; //繫結專輯資料 albumSinger=albums[0].a_singer; //獲取第一個專輯裡歌手資訊 songListDist.getSongsById(albums[0].a_id); //請求第一個專輯的資料 } protected function albumListDist_faultHandler(event:FaultEvent):void{ //Alert.show(event.message.toString()); } /** * 結果函式 songListDist.getSongsById(albums[0].a_id); 請求第一個專輯的資料 */ protected function songListDist_resultHandler(event:ResultEvent):void { list.data=event.result as ArrayCollection; player.musicItem=event.result[0] as Object; //歌曲例項 player.musicNum=ArrayCollection(event.result).length; //專輯含歌曲數量 專輯長度 player.albumSinger=albumSinger; } protected function songListDist_faultHandler(event:FaultEvent):void{} ]]> </fx:Script> <!--程式主題--> <s:Group horizontalCenter="0" verticalCenter="0"> <!--背景圖片--> <s:BitmapImage width="1078" smooth="true" source="@Embed('/assets/images/contentBg.png')"/> <!--專輯--> <components:Album id="album" x="220" y="70" width="100%" height="100%"/> <!--列表--> <components:List id="list" width="220" height="605" /> <!--播放器控制皮膚--> <components:Player id="player" /> </s:Group> </s:Application>
2，自定義“專輯”元件:Album.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="group1_creationCompleteHandler(event)"> <fx:Declarations> <!-- 將非可視元素（例如服務、值物件）放在此處 --> </fx:Declarations> <fx:Metadata> [Event(name="changeitem3",type="events.MyEvent3")] </fx:Metadata> <fx:Script> <![CDATA[ import events.MyEvent2; import events.MyEvent3; import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.FlexEvent; [Bindable] public var data:ArrayCollection; /** * 初始化函式 */ protected function group1_creationCompleteHandler(event:FlexEvent):void { list.addEventListener(MouseEvent.DOUBLE_CLICK,albumDoubleClick); } /** * 雙擊事件 */ private function albumDoubleClick(event:MouseEvent):void{ dispatchEvent(new MyEvent3("changeitem3",list.selectedItem)); //分配事件 此事打List元件中呼叫 } ]]> </fx:Script> <s:BitmapImage left="-20" top="15" source="@Embed('/assets/images/RasterizedItems3.png')" /> <s:List id="list" left="0" top="43" dataProvider="{data}" itemRenderer="components.AlbumItem" skinClass="skinks.MyAlbums" doubleClickEnabled="true" requireSelection="true" selectedIndex="0"> <s:layout> <s:TileLayout paddingTop="50" paddingLeft="70" verticalGap="40" horizontalGap="40" orientation="rows" requestedColumnCount="4" /> </s:layout> </s:List> </s:Group>
3，自定義“列表”元件:List.mxml
<?xml version="1.0" encoding="utf-8"?> <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init(event)"> <fx:Declarations> <!-- 將非可視元素（例如服務、值物件）放在此處 --> </fx:Declarations> <fx:Metadata> [Event(name="changeitem",type="events.MyEvent")] </fx:Metadata> <fx:Script> <![CDATA[ import events.MyEvent; import events.MyEvent2; import mx.collections.ArrayCollection; import mx.collections.ArrayList; import mx.controls.Alert; import mx.events.FlexEvent; [Bindable] public var data:ArrayCollection; protected function init(event:FlexEvent):void { list.addEventListener(MouseEvent.DOUBLE_CLICK,itemDoubleClick); } private function itemDoubleClick(event:MouseEvent):void{ var temp:Object=list.selectedItem; dispatchEvent(new MyEvent("changeitem",temp)); } ]]> </fx:Script> <s:BitmapImage height="100%" source="@Embed('/assets/images/RasterizedItems2.png')"/> <s:VGroup top="110" left="0" right="0" bottom="0"> <s:Label color="#FFFFFF" fontFamily="微軟雅黑" fontSize="13" paddingLeft="30" text="歌單"/> <s:List id="list" dataProvider="{data}" itemRenderer="components.ListItem" skinClass="skinks.list.SongsList" doubleClickEnabled="true" requireSelection="true" selectedIndex="0" height="100%" width="100%" > <s:layout> <s:VerticalLayout gap="0" paddingLeft="0" /> </s:layout> </s:List> </s:VGroup> </s:SkinnableContainer>
4，自定義“播放器控制皮膚”元件:Player.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()"> <fx:Declarations> <!-- 將非可視元素（例如服務、值物件）放在此處 --> </fx:Declarations> <fx:Metadata> </fx:Metadata> <fx:Script> <![CDATA[ import events.MyEvent; import mx.controls.Alert; import mx.events.FlexEvent; import utils.Tool4DateTime; /** * 伺服器IP地址 */ private var serverIP:String="http://localhost:8080"; /** * List物件 */ public var MusicList:List; /** * musicItem Object 音樂資訊物件 */ [Bindable] public var musicItem:Object; /** * 列表歌曲數量 */ public var musicNum:int; /** * 歌手名稱 */ [Bindable] public var albumSinger:String; /** * 播放器音量 */ private var currentVolum:Number =0.5; /** * 正在播放的音樂的URL字串 * 從主程式中獲得 player.currentMusicUrlString=musicSource; */ public var currentMusicUrlString:String; /** * 正在播放的音樂的URLRequest */ private var currentMusicUrlRequest:URLRequest; /** * 正在播放的音樂的Sound */ private var currentMusicSound:Sound; /** * 正在播放的音樂的SoungChannel * SoundChannel 類控制應用程式中的聲音。每個聲音均分配給一個聲道，而且應用程式可以具有混合在一起的多個聲道。SoundChannel 類包含 stop() 方法、用於監控聲道幅度（音量）的屬性以及用於對聲道指定 SoundTransform 物件的屬性。 */ private var currentMusicChannel:SoundChannel; /** * 正在播放的音樂的 SoundTransform * SoundTransform 類包含音量和平移的屬性。 */ private var currentMusicTransform:SoundTransform; /** * 正在播放的音樂的播放進度引數 */ private var currentMusicPosition:int =0; /** * 正在播放的音樂的總時間 */ private var currentMusicTotleTime:Number =0; /** * 音樂是否正在播放 */ private var isplaying:Boolean = false; private function init():void{ playAndPause.addEventListener(MouseEvent.CLICK,musicPlay); //播放按鈕 previous.addEventListener(MouseEvent.CLICK,playPrevious); //上一首 next.addEventListener(MouseEvent.CLICK,playNext); //上一首 playingProcess.addEventListener(Event.CHANGE,playingProcess_changeHandler); //進度條滾動事件 volumeSlider.addEventListener(Event.CHANGE,volumeSlider_changeHandler); //音量條滾動事件 //監聽自定義事件 MusicList=parentApplication.list; //設定List物件 MusicList.addEventListener(MyEvent.CHANGEITEM,playerList_change_Handler); //監聽自定義事件 } private function musicPlay(event:MouseEvent):void{ if(!isplaying){ //播放 false //此狀態為 啟動播放器 然後點選播放按鈕 狀態(空狀態) if(currentMusicSound==null&¤tMusicChannel ==null){ currentMusicUrlString=serverIP+musicItem.s_source; currentMusicUrlRequest =new URLRequest(currentMusicUrlString); currentMusicSound = new Sound(); currentMusicSound.load(currentMusicUrlRequest); currentMusicSound.addEventListener(Event.COMPLETE,load_CompleteHandler); currentMusicChannel = currentMusicSound.play();//開始播放 timer_GetCurrentPositionHandler();//同步更新已經播放的時間的計時器 //currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 }else{//此狀態為 暫停後點選播放按鈕 狀態 currentMusicChannel = currentMusicSound.play(currentMusicPosition); } isplaying=true; }else{ //暫停 //此狀態為 播放過程中點選 暫停按鈕 狀態 currentMusicPosition = currentMusicChannel.position;//記錄暫停位置 currentMusicChannel.stop();//暫停 isplaying=false; } currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 } /** * 自動播放下一首 * @param event * */ protected function autoPlayNext(event:Event):void{//過濾引數問題 if(parentApplication.list.list.selectedIndex>=musicNum-1 ){ parentApplication.list.list.selectedIndex = 0; }else{ parentApplication.list.list.selectedIndex += 1; } if(currentMusicSound!=null&¤tMusicChannel!=null){ currentMusicChannel.stop();//暫停 } clearPar(); musicItem=parentApplication.list.list.selectedItem; currentMusicUrlString=serverIP+musicItem.s_source; currentMusicUrlRequest =new URLRequest(currentMusicUrlString); currentMusicSound = new Sound(); currentMusicSound.load(currentMusicUrlRequest); currentMusicSound.addEventListener(Event.COMPLETE,load_CompleteHandler); playAndPause.selected=true; isplaying =true; currentMusicChannel = currentMusicSound.play();//開始播放 timer_GetCurrentPositionHandler();//同步更新已經播放的時間的計時器 currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 } /** * 播放上一首 */ protected function playPrevious(event:MouseEvent):void { parentApplication.list.list.selectedIndex--; if(parentApplication.list.list.selectedIndex<0 ){ parentApplication.list.list.selectedIndex = musicNum-1; } if(currentMusicSound!=null&¤tMusicChannel!=null){ currentMusicChannel.stop();//暫停 } clearPar(); musicItem=parentApplication.list.list.selectedItem; currentMusicUrlString=serverIP+musicItem.s_source; currentMusicUrlRequest =new URLRequest(currentMusicUrlString); currentMusicSound = new Sound(); currentMusicSound.load(currentMusicUrlRequest); currentMusicSound.addEventListener(Event.COMPLETE,load_CompleteHandler); playAndPause.selected=true; isplaying =true; currentMusicChannel = currentMusicSound.play();//開始播放 timer_GetCurrentPositionHandler();//同步更新已經播放的時間的計時器 currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 } /** * 播放下一首 */ protected function playNext(event:MouseEvent):void { parentApplication.list.list.selectedIndex++; if(parentApplication.list.list.selectedIndex>musicNum-1 ){ parentApplication.list.list.selectedIndex = 0; } if(currentMusicSound!=null&¤tMusicChannel!=null){ currentMusicChannel.stop();//暫停 } clearPar(); musicItem=parentApplication.list.list.selectedItem; currentMusicUrlString=serverIP+musicItem.s_source; currentMusicUrlRequest =new URLRequest(currentMusicUrlString); currentMusicSound = new Sound(); currentMusicSound.load(currentMusicUrlRequest); currentMusicSound.addEventListener(Event.COMPLETE,load_CompleteHandler); playAndPause.selected=true; isplaying =true; currentMusicChannel = currentMusicSound.play();//開始播放 timer_GetCurrentPositionHandler();//同步更新已經播放的時間的計時器 currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 } private function playerList_change_Handler(event:MyEvent):void{ if(currentMusicSound!=null&¤tMusicChannel!=null){ currentMusicChannel.stop();//暫停 } clearPar(); musicItem=event.musicItem; currentMusicUrlString=serverIP+musicItem.s_source; currentMusicUrlRequest =new URLRequest(currentMusicUrlString); currentMusicSound = new Sound(); currentMusicSound.load(currentMusicUrlRequest); currentMusicSound.addEventListener(Event.COMPLETE,load_CompleteHandler); playAndPause.selected=true; isplaying =true; currentMusicChannel = currentMusicSound.play();//開始播放 timer_GetCurrentPositionHandler();//同步更新已經播放的時間的計時器 currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 } /** * 清除引數 * currentMusicSound = null; * currentMusicChannel = null; * currentMusicPosition = 0; * */ private function clearPar():void{ currentMusicSound = null; currentMusicChannel = null; currentMusicPosition = 0; } /** * 正在播放的歌曲的總時長 */ private var len:int; /** * 檔案載入完成 能讀取到音樂的總時長 * @param event * */ protected function load_CompleteHandler(event:Event):void{ len = currentMusicSound.length; totalTime.text = Tool4DateTime.millionSecond2MinuteSecond(len); } /** * 同步更新已經播放的時間的計時器 * */ protected function timer_GetCurrentPositionHandler():void{ var clock:Timer = new Timer(100,int(len/1000/60*10));//每0.1秒更新一次 clock.start(); clock.addEventListener(TimerEvent.TIMER,showTime); } /** * 顯示已經播放的總時間 * @param event * */ protected function showTime(event:Event):void{ playingProcess.maximum = int(len/1000)*10;//最大值 playingProcess.value = int(currentMusicPosition/1000*10); //當前值 currentMusicPosition = currentMusicChannel.position; playedTime.text = Tool4DateTime.millionSecond2MinuteSecond(currentMusicPosition); } /** * 播放進度條 可以拖動 * @param event * */ protected function playingProcess_changeHandler(event:Event):void{ if(currentMusicChannel!=null){ currentMusicPosition = playingProcess.value*1000/10;//當前音樂播放進度 currentMusicChannel.stop(); currentMusicChannel = currentMusicSound.play(currentMusicPosition); isplaying=true; playAndPause.selected=true; currentMusicChannel.addEventListener(Event.SOUND_COMPLETE,autoPlayNext);//自動播放下一首 }else{ playingProcess.value=0; } } /** * 音量調節 * @param event * */ protected function volumeSlider_changeHandler(event:Event):void{ if(currentMusicChannel != null){//正在播放時調節音量 currentMusicTransform = currentMusicChannel.soundTransform; currentMusicTransform.volume = volumeSlider.value/10; currentMusicChannel.soundTransform = currentMusicTransform; currentVolum = currentMusicTransform.volume; } currentVolum = volumeSlider.value/10; } ]]> </fx:Script> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <!--背景圖片--> <s:BitmapImage smooth="true" source="@Embed('/assets/images/headBg.png')"/> <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" > <!--播放按鈕--> <s:HGroup left="35" bottom="15" verticalAlign="middle" > <s:Button skinClass="skinks.playercontrol.PreviousButton" id="previous" /> <s:ToggleButton id="playAndPause" skinClass="skinks.playercontrol.PlayAndPause" /> <s:Button skinClass="skinks.playercontrol.NextButton" id="next"/> </s:HGroup> <!--音量條--> <s:HGroup left="200" bottom="15" height="50" gap="10" verticalAlign="middle"> <s:BitmapImage source="@Embed('/assets/images/MuteButton.png')"/> <s:HSlider id="volumeSlider" skinClass="skinks.playercontrol.volume.HSliderSkin" maximum="10" stepSize="1" value="5" /> <s:BitmapImage smooth="true" source="@Embed('/assets/images/RasterizedItems10.png')"/> </s:HGroup> <s:BitmapImage smooth="true" source="@Embed('/assets/images/Shape 14.png')" x="365" y="2"/> <!--進度條和歌曲資訊--> <s:VGroup left="372" bottom="25" horizontalAlign="center" > <s:Label text="{musicItem.s_name}" color.normal="#D6D3D3" fontFamily.normal="微軟雅黑" fontSize.normal="13" fontWeight.normal="bold"/> <s:Label text="{albumSinger}" color.normal="#D6D3D3" fontFamily.normal="微軟雅黑" fontSize.normal="11"/> <s:HGroup> <s:Label id="playedTime" text="00:00" color.normal="#D6D3D3" fontFamily.normal="微軟雅黑"/> <s:ScrubBar id="playingProcess" skinClass="skinks.playercontrol.scrubbar.ScrubBar"/> <s:Label id="totalTime" text="00:00" color.normal="#D6D3D3" fontFamily.normal="微軟雅黑"/> </s:HGroup> </s:VGroup> </s:Group> </s:Group>
關於flex操作音訊檔案，可以參考我之前做的一個簡單音樂播放器例項:
部落格中 Flex4/Flash mp3音樂播放器例項 含演示地址
- 專輯製作外掛物理實現、
MyUpload3.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" skinClass="skinks.ApplicationSkink" creationComplete="init()"> <fx:Style source="assets/styles/main.css"/> <fx:Declarations> <!-- 將非可視元素（例如服務、值物件）放在此處 --> </fx:Declarations> <fx:Script> <![CDATA[ import components.Album; import components.GridHeaderRenderer; import components.MultiFileUpload; import events.MyEvent; import mx.collections.ArrayCollection; import mx.collections.ArrayList; import mx.controls.Alert; import mx.utils.StringUtil; import spark.components.gridClasses.GridColumn; [Bindable] private var data=new ArrayCollection([ {id:"1",song:"心願",sf:".mp3"}, {id:"2",song:"心願",sf:".mp3"}, {id:"3",song:"心願",sf:".mp3"}, {id:"4",song:"心願",sf:".mp3"}, {id:"4",song:"心願",sf:".mp3"} ]); public var album:Album; //專輯資訊上傳物件 public var multiFileUpload:MultiFileUpload; //音樂檔案上傳物件 public var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png"); public var imagefilesToFilter:Array = new Array(imageTypes); //圖片過濾陣列 public var ImageUploadDestination:String = "http://localhost:8080/MyUpload4/AlbumAdd"; //專輯資訊上傳地址 public var musicTypes:FileFilter = new FileFilter("Music Files (*.mp3)","*.mp3"); public var filesToFilter:Array = new Array(musicTypes); //音樂過濾陣列 public var uploadDestination:String = "http://localhost:8080/MyUpload4/FileUploadServlet"; //專輯資訊上傳地址 private function init():void{ album=new Album(albumName,singer,ImageUploadDestination,imagefilesToFilter,img,create); album.addEventListener(MyEvent.COMPLETE,albumUpload); //初始化資料列表頭 var _nameColumn = new GridColumn; var _typeColumn = new GridColumn; var _sizeColumn = new GridColumn; _nameColumn.headerText= "File"; _nameColumn.headerRenderer=new ClassFactory(GridHeaderRenderer); _typeColumn.headerText = "File Type"; _typeColumn.width = 80; _typeColumn.headerRenderer=new ClassFactory(GridHeaderRenderer); _sizeColumn.headerText = "File Size"; _sizeColumn.width = 150; _sizeColumn.headerRenderer=new ClassFactory(GridHeaderRenderer); var _columns = new ArrayList([_nameColumn,_typeColumn,_sizeColumn]); filesDG.columns=_columns; } private function albumUpload(e:MyEvent):void{ var postVariables:URLVariables = new URLVariables; postVariables.id = e.data; multiFileUpload = new MultiFileUpload( filesDG, browseBTN, clearButton, delButton, upload_btn, progressbar, uploadDestination, postVariables, 10240000, filesToFilter ); // var test=filesDG.columns.getItemAt(0); } ]]> </fx:Script> <s:Group width="460" verticalCenter="0" horizontalCenter="0"> <s:layout> <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/> </s:layout> <!--專輯資訊--> <s:Group width="100%"> <s:Button id="create" right="0" width="60" height="150" label="建立專輯" enabled="true" skinClass="skinks.ButtonSkin1"/> <s:SkinnableContainer width="400" height="150" skinClass="skinks.SkinnableContainer"> <s:Image id="img" left="10" top="10" width="130" height="130" scaleMode="zoom" smooth="true" source="assets/images/album.png"/> <s:VGroup width="100%" height="100%" top="10" left="140" bottom="10" right="10" gap="0"> <s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="10"> <s:Label width="50" color="#FFFFFF" fontFamily="微軟雅黑" fontSize="14" text="專輯名" textAlign="right"/> <s:TextInput id="albumName" width="180" height="30" borderVisible="false" fontFamily="微軟雅黑" fontSize="14"/> </s:HGroup> <s:HGroup width="100%" height="100%" verticalAlign="middle" paddingLeft="10"> <s:Label width="50" color="#FFFFFF" fontFamily="微軟雅黑" fontSize="14" text="歌手" textAlign="right"/> <s:TextInput id="singer" width="180" height="35" borderVisible="false" fontFamily="微軟雅黑" fontSize="14"/> </s:HGroup> </s:VGroup> </s:SkinnableContainer> </s:Group> <!--資料列表--> <s:DataGrid id="filesDG" width="460" color="#FFFFFF" fontFamily="微軟雅黑" fontSize="13" requestedRowCount="4" rowHeight="70" skinClass="skinks.DG"> <!--<s:columns> <s:ArrayList> <s:GridColumn dataField="id" headerText="#" headerRenderer="components.GridHeaderRenderer" itemRenderer="components.GridItemRenderer"></s:GridColumn> <s:GridColumn dataField="song" headerText="歌曲" headerRenderer="components.GridHeaderRenderer" itemRenderer="components.GridItemRenderer"></s:GridColumn> <s:GridColumn dataField="sf" headerText="字尾" headerRenderer="components.GridHeaderRenderer" itemRenderer="components.GridItemRenderer"></s:GridColumn> </s:ArrayList> </s:columns>--> </s:DataGrid> <mx:ProgressBar id="progressbar" width="100%" height="15" labelPlacement="center" barSkin="skinks.ProgressBar.CustomProgressSkin" trackSkin="skinks.ProgressBar.CustomProgressBarTrackSkin" color="0xFFFFFF" minimum="0" visible="true" maximum="100" label="CurrentProgress 0%" direction="right" mode="manual" /> <s:HGroup gap="0"> <s:Button id="browseBTN" label="瀏覽" fontFamily="微軟雅黑"/> <s:Button id="upload_btn" label="上傳" fontFamily="微軟雅黑"/> <s:Button id="delButton" label="移除" fontFamily="微軟雅黑"/> <s:Button id="clearButton" label="移除全部" fontFamily="微軟雅黑"/> </s:HGroup> </s:Group> </s:Application>
關於檔案上傳部分，是根據MultiFile Upload外掛，通過自定義UI元件皮膚完成，可以參考我之前的一個修改例項:
五，後端程式碼物理實現(JAVA部分程式碼物理實現):
AlbumDao.java
package com.dao; import java.awt.List; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import com.bean.Album; import com.resource.JDBCUtilSingle; public class AlbumDao { /** * 插入專輯資訊 返回ID號 * @param a_name * @param a_singer * @param a_image * @return */ public int addAlbum(String a_name,String a_singer,String a_image){ Connection connection=null; PreparedStatement statement=null; ResultSet rs=null; connection=JDBCUtilSingle.getInitJDBCUtil().getConnection(); int id=0; try { //專輯資訊插入 String sql="insert into album(a_name,a_singer,a_image) values(?,?,?)"; statement=connection.prepareStatement(sql); statement.setString(1,a_name); statement.setString(2,a_singer); statement.setString(3,a_image); //System.out.println(sql); statement.executeUpdate(); //獲取插入ID rs = statement.getGeneratedKeys(); rs.next(); id = rs.getInt(1); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } JDBCUtilSingle.getInitJDBCUtil().closeConnection(rs, statement, connection); return id; } /** * 獲取所有專輯資訊 * @return 返回專輯列表 */ public ArrayList selectAlbum(){ Connection connection=null; PreparedStatement statement=null; ResultSet rs=null; connection=JDBCUtilSingle.getInitJDBCUtil().getConnection(); ArrayList albums=new ArrayList(); try { //專輯資訊插入 String sql="select * from album"; statement=connection.prepareStatement(sql); rs=statement.executeQuery(); while(rs.next()){ albums.add(new Album(rs.getInt("a_id"), rs.getString("a_name"), rs.getString("a_singer"), rs.getString("a_image"))); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } finally{ JDBCUtilSingle.getInitJDBCUtil().closeConnection(rs, statement, connection); } return albums; } }
SongDao.java
package com.dao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import com.bean.Album; import com.bean.Song; import com.resource.JDBCUtilSingle; public class SongDao { public int addSongs(int a_id,String s_name,String s_source){ Connection connection=null; PreparedStatement statement=null; ResultSet rs=null; connection=JDBCUtilSingle.getInitJDBCUtil().getConnection(); int tag=0; try { String sql="insert into song(a_id,s_name,s_source) values(?,?,?)"; statement=connection.prepareStatement(sql); statement.setInt(1,a_id); statement.setString(2,s_name); statement.setString(3,s_source); tag=statement.executeUpdate(); } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } JDBCUtilSingle.getInitJDBCUtil().closeConnection(rs, statement, connection); return tag; } public ArrayList getSongs(int a_id){ ArrayList songs=new ArrayList(); Connection connection=null; PreparedStatement statement=null; ResultSet rs=null; connection=JDBCUtilSingle.getInitJDBCUtil().getConnection(); try { String sql="select * from song where a_id="+a_id; statement=connection.prepareStatement(sql); rs=statement.executeQuery(); while(rs.next()){ songs.add(new Song(rs.getInt("s_id"), rs.getInt("a_id"), rs.getString("s_name"), rs.getString("s_source"))); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } finally{ JDBCUtilSingle.getInitJDBCUtil().closeConnection(rs, statement, connection); } return songs; } }
好吧，就寫到這裡了，因為程式碼是較早之前寫的了，由於學校放假，閒來沒事，就那之前的程式碼翻看了一遍，由於時間久遠，也沒寫什麼註釋，在程式碼的語法和程式邏輯上，自己也硬是看了半天才回過神來。現在在程式碼中加了一些註釋，新增了一些歌曲內容，已上傳到測試空間中，歡迎大家來測試。由於本人水平有限，如文章在表述或程式碼方面有何不妥之處，歡迎批評指正。
你可能還對以下關於Flex的文章內容還感興趣:
- Flex4/AS3.0自定義VideoPlayer元件皮膚,實現Flash視訊播放器
- Flex4+BlazeDS+JAVA+MySql 構建J2EE工程 對使用者資訊進行管理例項
- Flex4/Flash多檔案上傳(帶進度條)例項分享
- 在自己網站中引入CU3ER/Flash 3D幻燈片效果和照片畫框
- 部落格中 Flex4/Flash mp3音樂播放器例項 含演示地址
如以上文章或連結對你有幫助的話，別忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦，讓更多的人閱讀這篇文章。
作者:Li-Cheng
由於本人水平有限，文章在表述和程式碼方面如有不妥之處，歡迎批評指正。留下你的腳印，歡迎評論哦。你也可以關注我，一起學習哦！