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>