Mikel
[转载]Flex4/Flash+BlazeDS+JAVA+MySql 开发在线音乐播放器实例，含测试地址 – Li-Cheng – 博客园.
要求
-
必备知识
本文要求基本了解 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"?--> <!-- 将非可视元素（例如服务、值对象）放在此处 --> [Event(name="changeitem",type="events.MyEvent")] //通过 Event元数据 定义自定义监听事件 <!--程序主题--> <!--背景图片--> <!--专辑--> <!--列表--> <!--播放器控制面板-->
2，自定义“专辑”组件:Album.mxml
<!--?xml version="1.0" encoding="utf-8"?--> <!-- 将非可视元素（例如服务、值对象）放在此处 --> [Event(name="changeitem3",type="events.MyEvent3")]
3，自定义“列表”组件:List.mxml
<!--?xml version="1.0" encoding="utf-8"?--> <!-- 将非可视元素（例如服务、值对象）放在此处 --> [Event(name="changeitem",type="events.MyEvent")]
4，自定义“播放器控制面板”组件:Player.mxml
<!--?xml version="1.0" encoding="utf-8"?--> <!-- 将非可视元素（例如服务、值对象）放在此处 --> <!--背景图片--> <!--播放按钮--> <!--音量条--> <!--进度条和歌曲信息-->
关于flex操作音频文件，可以参考我之前做的一个简单音乐播放器实例:
博客中 Flex4/Flash mp3音乐播放器实例 含演示地址
-
专辑制作插件物理实现、
MyUpload3.mxml
关于flex操作音频文件，可以参考我之前做的一个简单音乐播放器实例:
博客中 Flex4/Flash mp3音乐播放器实例 含演示地址
专辑制作插件物理实现、
MyUpload3.mxml
<!--?xml version="1.0" encoding="utf-8"?-->
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<![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); } ]]>
<!--专辑信息-->
<!--数据列表-->
<!--<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>-->
关于文件上传部分，是根据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工程 对用户信息进行管理实例
在自己网站中引入CU3ER/Flash 3D幻灯片效果和照片画框
博客中 Flex4/Flash mp3音乐播放器实例 含演示地址
如以上文章或链接对你有帮助的话，别忘了在文章结尾处轻轻点击一下 “还不错”按钮或到页面右下角点击 “赞一个” 按钮哦。你也可以点击页面右边“分享”悬浮按钮哦，让更多的人阅读这篇文章。
作者:Li-Cheng
由于本人水平有限，文章在表述和代码方面如有不妥之处，欢迎批评指正。留下你的脚印，欢迎评论哦。你也可以关注我，一起学习哦！
