傳統網絡程式的開發是基于頁面的、伺服器端資料傳遞的模式,把網絡程式的表現層建立于HTML頁面之上,而HTML是适合于文本的,傳統的基于頁面的系統已經漸漸不能滿足網絡浏覽者的更高的、全方位的體驗要求了。而富網際網路應用(Rich Internet Applications,縮寫為RIA)的出現就是為了解決這個問題。在HTML5釋出以前,RIA領域的技術解決方案一直相都是各展所長,并無争議。Adobe體系中,Flash做不了的事情,Flex可以做到;.Net系決策者在選用RIA解決方案時,Silverlight是不二之選。随着HTML 5橫空出世,Flex“易主”(這裡說的是Adobe将Flex捐給Apache),Silverlight被“雪藏”(這裡指微軟停止對Silverlight的更新),RIA領域的技術解決方案開始變得撲朔迷離。
要求
-
必備知識
本文要求基本了解 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元件皮膚完成,可以參考我之前的一個修改執行個體:
Flex4/Flash多檔案上傳(帶進度條)執行個體分享
五,後端代碼實體實作(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工程 對使用者資訊進行管理執行個體
- 在自己網站中引入CU3ER/Flash 3D幻燈片效果和照片畫框
如以上文章或連結對你有幫助的話,别忘了在文章結尾處輕輕點選一下 “還不錯”按鈕或到頁面右下角點選 “贊一個” 按鈕哦。你也可以點選頁面右邊“分享”懸浮按鈕哦,讓更多的人閱讀這篇文章。
作者:Li-Cheng
出處: http://www.cnblogs.com/Li-Cheng/p/3837554.html
由于本人水準有限,文章在表述和代碼方面如有不妥之處,歡迎批評指正。留下你的腳印,歡迎評論哦。你也可以關注我,一起學習哦!