自定义组件开发 第二节 MXML组件开发

<?xmlversion="1.0"encoding="utf-8"?>

<!--这是Flex4的新容器组件，没有皮肤，性能更好-->

<s:Groupxmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/halo"

xmlns:rojored="com.rojored.view.controls.*"

width="100%"

creationComplete="init();">

<!--这是Flex4的新布局组件，这里采用垂直布局-->

<s:layout>

<s:VerticalLayout/>

</s:layout>

<fx:Script>

<![CDATA[

/**

*标示播放类型的常量

*/

publicstaticconstVIDEO:String="video";

publicstaticconstAUDIO:String="audio";

/**

*设置的音量

*不等同于播放对象的音量，在静音时不为0，仍然保持设置值

*/

[Bindable]

privatevarvolume:Number;

/**

*播放对象

*可选VideoElement和Audio两种类

*但是调用的接口方法类似，所以不限定类型

*/

[Bindable]

privatevarplayObject:*;

/**

*源属性

*直接和播放对象的源挂钩

*/

[Bindable]

publicfunctiongetsource():Object{

returnplayObject.source;

}

publicfunctionsetsource(value:Object):void{

//设置源后，要设置播放对象，以便选择播放视频或音频

setPlayable(value);

}

/**

*显示在控制栏的额外信息

*/

privatevar_info:String;

[Bindable]

publicfunctiongetinfo():String{

return_info;

}

publicfunctionsetinfo(value:String):void{

_info=value;

}

/**

*初始化

*默认播放是视频，音量值0.7

*/

privatefunctioninit():void{

playObject=video;

volume=0.7;

}

/**

*播放

*因为视音频播放对象播放方法一样，所以可以不用判断类型

*/

publicfunctionplay():void{

playObject.play();

}

/**

*暂停

*因为视音频播放对象暂停方法一样，所以可以不用判断类型

*/

publicfunctionpause():void{

playObject.pause();

}

/**

*切换播放和暂停状态

*如果已播放，则暂停，如果已暂停，则播放

*/

publicfunctiontogglePlayPause():void{

playObject.playing?pause():play();

}

/**

*停止

*因为视音频播放对象停止方法一样，所以可以不用判断类型

*/

publicfunctionstop():void{

playObject.stop();

}

/**

*根据源来设置播放对象

*先判断类型，然后停止非此类型的播放器，切换到此类型的播放器

*如果是视频类型，显示视频容器，如果是音频类型，隐藏视频容器

*/

privatefunctionsetPlayable(source:Object):void{

switch(judgeType(source)){

caseVIDEO:

audio.source=null;

audio.stop();

//显示视频容器

videoContainer.visible=true;

//标记显示列表失效，这样程序会自动更新绘制显示列表，否则视频位置和大小会有问题

videoContainer.invalidateDisplayList();

playObject=video;

playObject.source=source;

break;

caseAUDIO:

video.source=null;

video.stop();

//隐藏视频容器

videoContainer.visible=false;

playObject=audio;

playObject.source=source;

break;

}

}

/**

*判断播放类型

*利用正则表达式判断文件名后缀，如果是.flv，则为视频，是.mp3，则为音频

*还可以添加其它文件类型的判断，现在暂时不考虑

*/

privatefunctionjudgeType(source:Object):String{

if(newRegExp("(\.flv)$","i").test(source.toString())){

returnVIDEO;

}elseif(newRegExp("(\.mp3)$","i").test(source.toString())){

returnAUDIO;

}

returnnull;

}

/**

*格式化时间

*将

*VideoElement返回的是秒，Audio返回的是毫秒，要处理好

*/

privatefunctionformat(value:Number):String{

varseconds:Number;

if(playObjectisAudio){

seconds=Math.floor(value/1000);

}elseif(playObjectisVideoElement){

seconds=value;

}

varresult:String=Math.floor(seconds%60).toString();

//如果是秒数是1位数，则在前面添加1个0

if(result.length==1){

result=Math.floor(seconds/60).toString()+":0"+result;

}else{

result=Math.floor(seconds/60).toString()+":"+result;

}

returnresult;

}

]]>

</fx:Script>

<!--将播放对象的音量绑定为设置音量，如果静音了，则为0-->

<fx:Bindingdestination="video.volume"

source="muteBtn.selected?0:volume"/>

<fx:Bindingdestination="audio.volume"

source="muteBtn.selected?0:volume"/>

<!--音频播放对象，因为是非可视对象，所以要放在<fx:Declarations>标签内-->

<fx:Declarations>

<rojored:Audioid="audio"/>

</fx:Declarations>

<!--视频播放对象，因为VideoElement不能接受click事件，所以用一个Group包装-->

<s:Groupid="videoContainer"

click="togglePlayPause();"

width="100%"

height="100%">

<s:VideoElementid="video"

width="100%"

height="100%"

autoRewind="true"/>

<!--停止后自动回复到开头-->

</s:Group>

<!--播放时间条，将值和播放对象的播放头时间双向绑定，这样就可以同步了-->

<!--这里不采用s:HSlider组件，否则value的双向绑定会导致播放问题-->

<mx:HSliderid="timeSlider"

width="100%"

minimum="0"

maximum="{playObject.totalTime}"

value="@{playObject.playheadTime}"

liveDragging="false"/>

<s:Groupwidth="100%">

<!--播放暂停按钮，采用切换按钮，切换播放和暂停-->

<s:ToggleButtonid="playPauseBtn"

label="{playObject.playing?'暂停':'播放'}"

width="54"

x="0"

selected="{playObject.playing}"

click="togglePlayPause();"/>

<!--停止按钮，停止播放-->

<s:Buttonid="stopBtn"

label="停止"

click="stop();"

x="60"

width="52"/>

<!--播放时间显示，包括当前播放头时间和总时间-->

<mx:Labelid="time"

x="119"

width="76"

text="{format(playObject.playheadTime)}/{format(playObject.totalTime)}"/>

<!--静音按钮，采用切换按钮，切换后会自动影响绑定它的播放对象音量值-->

<s:ToggleButtonid="muteBtn"

label="静"

width="33"

x="218"/>

<!--音量条，将值和设置的音量值双向绑定，而非播放对象的当前音量，因此不受静音影响-->

<!--因为valueInterval默认为1，不合要求，要改为0，也就是无值间隔-->

<s:HSliderid="volumeSlider"

width="86"

x="252"

y="5"

minimum="0"

maximum="1"

valueInterval="0"

value="@{volume}"

liveDragging="true"/>

<!--信息标签，显示赋给的额外信息-->

<mx:Labelid="infoLabel"

text="{info}"

x="346"

width="104"/>

</s:Group>