flex_音乐播放列表示例;

效果：

=>SortProperty.as

package com.cen.programmingas3.playList
{
/**
* 排序属性类(伪枚举)
* about:用于歌曲排序；
* @author cen
*/
public class SortProperty
{
/*歌曲名称*/
public static const TITLE:SortProperty = new SortProperty("title");
/*歌手*/
public static const ARTIST:SortProperty = new SortProperty("artist");

public static const YEAR:SortProperty = new SortProperty("year");

/*排序属性*/
private var _propertyName:String;
public function get propertyName():String{
return _propertyName;
}

/**
* constructor
* @param property
*/
public function SortProperty(property:String)
{
_propertyName = property;
}
}
}

=>Song.as

package com.cen.programmingas3.playList
{
/**
* 歌曲信息类
* @author cen
*/
public class Song
{
/**
* 属性*/
/*歌曲名称*/
private var _title:String;
public function get title():String
{
return _title;
}
public function set title(value:String):void
{
_title = value;
}

/*歌手*/
private var _artist:String;
public function get artist():String
{
return _artist;
}
public function set artist(value:String):void
{
_artist = value;
}


/*发行时间*/
private var _year:uint;
public function get year():uint
{
return _year;
}
public function set year(value:uint):void
{
_year = value;
}

/*文件名称*/
private var _filename:String;
public function get filename():String
{
return _filename;
}
public function set filename(value:String):void
{
_filename = value;
}

/*歌曲流派*/
private var _genres:String;
public function get genres():Array
{
return this._genres.split(";");
}
public function set genres(value:Array):void
{
this._genres = value.join(";");
}


/*图标*/
public var icon:Object;



/**
* constructor
* @param title
* @param artist
* @param year
* @param filename
* @param genres
*/
public function Song(title:String, artist:String, year:uint, filename:String, genres:Array)
{
this._title = title;
this._artist = artist;
this._year = year;
this._filename = filename;

/*把genres数组转换成字符串存储*/
this._genres = genres.join(";");
}

/**
* 提供转换字符串方法
* @return 
*/
public function toString():String{
var result:String = "";

result += this._title;

result += " (" + this._year + ") ";

result += " - " + this._artist;

if(this._genres != null && this._genres.length > 0) {
result += " [" + this._genres.replace(";", ", ") + "]";
}

return result.toString();
}
}
}

=>PlayList.as

package com.cen.programmingas3.playList
{
import com.cen.programmingas3.playList.Song;
import com.cen.programmingas3.playList.SortProperty;

/**
* 管理可排序的歌曲列表类
* @author cen
*/
public class PlayList
{
/**
* 属性*/
/*存储歌曲数组*/
private var _songs:Array;
/*当前排序值*/
private var _currentSort:SortProperty = null;
/*是否需要排序*/
private var _needToSort:Boolean = false;

/*获取歌曲列表*/
public function get songList():Array
{
/**
* 如果需要就排序*/
if(this._needToSort) {
var oldSort:SortProperty = this._currentSort;

this._currentSort = null;
this.sortList(oldSort);
}

return this._songs;
}


/**
* constructor
*/
public function PlayList()
{
this._songs = new Array();

/*初始化排序*/
this.sortList(SortProperty.TITLE);
}

/**
* 方法*/
/**
* Method:按照指定属性进行歌曲排序;
* @param sortProperty
*/
public function sortList(sortProperty:SortProperty):void {
if(sortProperty == this._currentSort) {// 如果是当前排序，则忽略此排序；
return;
}

/*排序参数*/
var sortOptions:uint;
switch(sortProperty)
{
case SortProperty.TITLE:
{
sortOptions = Array.CASEINSENSITIVE;
break;
}
case SortProperty.ARTIST:
{
sortOptions = Array.CASEINSENSITIVE;
break;
}
case SortProperty.YEAR:
{
sortOptions = Array.NUMERIC;
}
}

/*执行新排序*/
this._songs.sortOn(sortProperty.propertyName, sortOptions);

/*保存当前排序值*/
this._currentSort = sortProperty;

/*标志不需要排序*/
this._needToSort = false;
}

/**
* 添加歌曲
* @param song
*/
public function addSong(song:Song):void
{
this._songs.push(song);

/*标志需要排序*/
this._needToSort = true;
}
}
}

=>PlayListApp.as

<?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"
  creationComplete="creationCompleteHandler(event)">
<!--播放列表示例-->
<fx:Script>
<![CDATA[
import com.cen.programmingas3.playList.PlayList;
import com.cen.programmingas3.playList.Song;
import com.cen.programmingas3.playList.SortProperty;

import mx.events.FlexEvent;

/*歌曲列表*/
private var playList:PlayList = new PlayList();

/*表单状态*/
private static const ADD_SONG:uint = 1;
private static const SONG_DETAIL:uint = 2;

/**
* 创建完成
*/
protected function creationCompleteHandler(event:FlexEvent):void
{
/*初始化表单状态*/
setFormState(ADD_SONG);

/**
* 预填充歌曲*/
playList.addSong(new Song("I Love YOU, Baby!", "tanglong", 2012, "I_Love_You_Baby.mp3", ["90's", "Pop"]));
playList.addSong(new Song("Think of Me", "cyb", 1987, "Think_of_Me.mp3", ["Showtunes"]));
playList.addSong(new Song("Unbelievable", "chuyuan", 1997, "Unbelievable.mp3", ["Pop"]));

/*获取歌曲列表*/
songList.dataProvider = playList.songList;
}

/**
* 歌曲列表渲染器
*/
private function songListLabel(item:Object):String
{
return item.toString();
}

/**
* 排序
*/
private function sortList(sortField:SortProperty):void
{
/**
* 全部取消按钮选定*/
sortByTitle.selected = false;
sortByArtist.selected = false;
sortByYear.selected = false;

/**
* 根据参数选定按钮*/
switch(sortField)
{
case SortProperty.TITLE:
{
sortByTitle.selected = true;
break;
}
case SortProperty.ARTIST:
{
sortByArtist.selected = true;
break;
}
case SortProperty.YEAR:
{
sortByYear.selected = true;
break;
}
}

/*排序*/
playList.sortList(sortField);

/*刷新list列表*/
refreshList();
}

/**
* 刷新播放列表
*/
private function refreshList():void
{
/*选定的歌曲*/
var selectedSong:Song = Song(songList.selectedItem);

/**
* 为歌曲列表重新赋值，并保持选中状态*/
songList.dataProvider = playList.songList;
if(selectedSong != null) {
songList.selectedItem = selectedSong;
}
}

private function addNewSong():void
{
/**
* 获取值*/
/*歌曲名称*/
var title:String = newSongTitle.text;
/*歌手姓名*/
var artist:String = newSongArtist.text;
/*发行时间*/
var year:uint = newSongYear.value;
/*文件名称*/
var filename:String = newSongFileName.text;
/*歌曲流派*/
var genres:Array = newSongGenres.selectedItems;

/*添加歌曲*/
playList.addSong(new Song(title, artist, year, filename, genres));

/*刷新列表*/
refreshList();

/*清楚表单值*/
setFormState(ADD_SONG);
}

/**
* 表单处理
*/
private function setFormState(state:uint):void
{
/**
* 设置表单头部以及控制表单状态*/
switch(state)
{
case ADD_SONG:
{
formTitle.text = "添加新歌曲";

/*显示保存按钮*/
submitSongData.visible = true;
showAddControlsBtn.visible = false;

/**
* 清除表单值*/
newSongTitle.text = "";
newSongArtist.text = "";
newSongYear.value = (new Date()).getFullYear();
newSongFileName.text = "";
newSongGenres.selectedIndex = -1;

songList.selectedIndex = -1;
break;
}

case SONG_DETAIL:
{
formTitle.text = "歌曲信息";

/*所选择的歌曲*/
var selectedSong:Song = Song(songList.selectedItem);
newSongTitle.text = selectedSong.title;
newSongArtist.text = selectedSong.artist;
newSongYear.value = selectedSong.year;
newSongFileName.text = selectedSong.filename;
newSongGenres.selectedItems = selectedSong.genres;

/*隐藏保存按钮*/
submitSongData.visible = false;
showAddControlsBtn.visible = true;

break;
}
}
}

/**
* 播放列表选项改变
*/
private function songSelectionChange():void
{
if(songList.selectedIndex != -1) {
setFormState(SONG_DETAIL);
} else {
setFormState(ADD_SONG);
}
}
]]>
</fx:Script>

<s:VGroup verticalCenter="0" horizontalCenter="0">
<s:VGroup width="500">
<s:HGroup width="100%" verticalAlign="bottom">
<mx:Button id="sortByTitle" label="歌曲名称" toolTip="按歌曲名称排序！"
  toggle="true" selected="true" click="{sortList(SortProperty.TITLE)}"/>
<mx:Button id="sortByArtist" label="歌手姓名" toolTip="按歌手姓名排序！"
  toggle="true" click="{sortList(SortProperty.ARTIST)}"/>
<mx:Button id="sortByYear" label="发行时间" toolTip="按发行时间排序！"
  toggle="true" click="{sortList(SortProperty.YEAR)}"/>
<s:Spacer width="100%"/>
<mx:Button id="showAddControlsBtn" label="添加歌曲" click="{setFormState(ADD_SONG);}"/>
</s:HGroup>
<mx:List id="songList" width="100%" labelFunction="songListLabel" change="{songSelectionChange()}"/>
</s:VGroup>

<mx:HBox width="500" borderStyle="solid" paddingBottom="10">
<mx:VBox>
<mx:Text id="formTitle" text="添加新歌曲" fontSize="14" fontWeight="bold" paddingLeft="10" width="100%" height="23"/>
<mx:Form paddingBottom="0" paddingTop="0" paddingRight="0">
<s:FormItem label="歌曲名称">
<s:TextInput width="275" id="newSongTitle"/>
</s:FormItem>
<s:FormItem label="歌手姓名">
<s:TextInput width="275" id="newSongArtist"/>
</s:FormItem>
<s:FormItem label="发行时间">
<s:NumericStepper maximum="2111" minimum="1400" value="2012" id="newSongYear"/>
</s:FormItem>
<s:FormItem label="文件名称">
<s:TextInput id="newSongFileName" width="275"/>
</s:FormItem>
<s:FormItem width="100%">
<s:HGroup width="100%" horizontalAlign="right">
<s:Button id="submitSongData" label="添加" width="150" click="{addNewSong()}"/>
</s:HGroup>
</s:FormItem>
</mx:Form>
</mx:VBox>

<mx:VBox width="25%" paddingRight="3" paddingTop="40">
<s:Label text="歌曲流派"/>
<mx:List id="newSongGenres" allowMultipleSelection="true" width="100%" height="100%">
<mx:dataProvider>
<s:ArrayList>
<fx:String>90's</fx:String>
<fx:String>Classical</fx:String><!--古典-->
<fx:String>Country</fx:String><!--乡村-->
<fx:String>Hip-hop</fx:String>
<fx:String>Opera</fx:String><!--歌剧-->
<fx:String>Pop</fx:String><!--流行-->
<fx:String>Rock</fx:String><!--摇滚-->
<fx:String>Showtunes</fx:String><!--滑稽-->
</s:ArrayList>
</mx:dataProvider>
</mx:List>
</mx:VBox>
</mx:HBox>
</s:VGroup>

</s:Application>