Flex组件全屏实例
1. MyFlexApp.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"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<mx:Rotate id="rotate" />
<mx:Fade id="fadeIn" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import mx.managers.ToolTipManager;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
}
//
// import com.util.fullscreen.FullScreenUtil;
private function fullScreen():void{
if(FullScreenUtil.isFullScreen){
btnFullScreen.label = '全屏!';
FullScreenUtil.exitFullScreen();
}else{
btnFullScreen.label = '退出全屏!';
FullScreenUtil.goFullScreen();
// 加入要全屏的对像．videoDisplay
FullScreenUtil.addChild(videoDisplay, true, true, true);
// 将 btnFullScreen 放在全屏对像上．
FullScreenUtil.addChild(btnFullScreen, true, true, false, -1, -1, -1, 100);
}
}
]]>
</fx:Script>
<mx:TitleWindow layout="vertical" id="titleTest" title="单个控件全屏测试">
<mx:VideoDisplay height="160" width="317" id="videoDisplay"/>
<mx:Button label="全屏" id="btnFullScreen" click="fullScreen();" color="#F41131"/>
<mx:Button label="全屏" id="btnFullScreen0" click="fullScreen();" color="#F41131"/>
</mx:TitleWindow>
</s:Application>
2. FullScreenUtil.as
package
{
import flash.display.DisplayObject;
import flash.display.StageDisplayState;
import flash.events.FullScreenEvent;
import flash.geom.Point;
import flash.utils.Dictionary;
import mx.containers.Canvas;
import mx.core.Application;
import mx.core.Container;
import mx.core.FlexGlobals;
import mx.core.IVisualElementContainer;
import mx.core.UIComponent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;
public class FullScreenUtil
{
private static var theCanvas:Canvas;
private static var displayObjectMap:Dictionary = new Dictionary(true);
private static var anchorMap:Dictionary = new Dictionary(true);
private static var _canvasStyleName:String = null;
public static var isFullScreen:Boolean = false;
/**
*Getters and setters to facilitate styling the background canvas
* @param val
*
*/
public static function set canvasStyleName(val:String):void{
_canvasStyleName = val;
}
public static function get canvasStyleName():String{
return _canvasStyleName;
}
/**
*Use this method to send the application full screen
* @param color color for the full screen background to be
*
*/
public static function goFullScreen(color:uint = 0x000000):void{
isFullScreen = true;
theCanvas = new Canvas();
theCanvas.mouseEnabled = false;
if(canvasStyleName){
theCanvas.styleName = canvasStyleName;
}else{
theCanvas.setStyle('backgroundColor', color);
}
PopUpManager.addPopUp(theCanvas, FlexGlobals.topLevelApplication as DisplayObject);
FlexGlobals.topLevelApplication.stage.displayState = StageDisplayState.FULL_SCREEN;
onResize();
(FlexGlobals.topLevelApplication as DisplayObject).addEventListener(ResizeEvent.RESIZE, onResize);
theCanvas.systemManager.stage.addEventListener(FullScreenEvent.FULL_SCREEN, onExitFullScreen);
}
/**
*Use this method to exit full screen
* all cleanup and child parenting will be done automatically
*/
public static function exitFullScreen():void{
isFullScreen = false;
if(!theCanvas)return;
(FlexGlobals.topLevelApplication as DisplayObject).removeEventListener(ResizeEvent.RESIZE, onResize);
theCanvas.systemManager.stage.removeEventListener(FullScreenEvent.FULL_SCREEN, onExitFullScreen);
if(theCanvas.systemManager.stage.displayState == StageDisplayState.FULL_SCREEN)theCanvas.systemManager.stage.displayState = StageDisplayState.NORMAL;
PopUpManager.removePopUp(theCanvas);
readdChildred();
theCanvas = null;
}
/**
*Use this method to addchildren to the full screen instance after you've called the <code>goFullScreen()</code> method
* if you strech proportionally without anchoring the object will be moved to 0,0 in the canvas' coordinate space
* @param displayObject - display object to be added
* @param centerHorizontally - whether to center horizontally in the canvas space
* @param centerVertically - whether to center vertically in the canvas space
* @param stretchProportional - whether to stretch proportionally to cover all of the space
* @param anchorLeft - left anchor
* @param anchorRight - right anchor
* @param anchorTop - top anchor
* @param anchorBottom - bottom anchor
*
*/
public static function addChild(displayObject:UIComponent, centerHorizontally:Boolean = false, centerVertically:Boolean = false, stretchProportional:Boolean = false, anchorLeft:Number = -1, anchorRight:Number = -1, anchorTop:Number = -1, anchorBottom:Number = -1 ):void{
if(!theCanvas)return;
var infoObject:Object = new Object();
infoObject['parent'] = displayObject.parent;
infoObject['x'] = displayObject.x;
infoObject['y'] = displayObject.y;
infoObject['width'] = displayObject.width;
infoObject['height'] = displayObject.height;
infoObject['percentWidth'] = displayObject.percentWidth
infoObject['percentHeight'] = displayObject.percentHeight;
//获取组件在原先的父级上的索引
if(displayObject.parent){
if (displayObject.parent is IVisualElementContainer){
var ivec:IVisualElementContainer = IVisualElementContainer(displayObject.parent);
infoObject['childIndex'] = ivec.getElementIndex(displayObject);
ivec.removeElement(displayObject);
}else{
infoObject['childIndex'] = displayObject.parent.getChildIndex(displayObject);
displayObject.parent.removeChild(displayObject);
}
}
displayObjectMap[displayObject] = infoObject;
var anchorObject:Object = new Object();
anchorObject['stretchProportional'] = stretchProportional;
anchorObject['anchorLeft'] = anchorLeft;
anchorObject['anchorRight'] = anchorRight;
anchorObject['anchorTop'] = anchorTop;
anchorObject['anchorBottom'] = anchorBottom;
anchorObject['centerVertically'] = centerVertically;
anchorObject['centerHorizontally'] = centerHorizontally;
anchorMap[displayObject] = anchorObject;
theCanvas.addChild(displayObject);
onResize();
}
/**
*Remove a child explicitly from the full screen view
* cleanup is done, and it is reparented
* @param displayObject - child to be removed
*
*/
public static function removeChild(displayObject:UIComponent):void{
var uic:UIComponent = displayObject as UIComponent;
var infoObject:Object = displayObjectMap[uic];
if(!infoObject)return;
if(infoObject['parent']){
// add back to original parent
if (infoObject.parent is IVisualElementContainer)
infoObject.parent.addElementAt(uic, infoObject['childIndex']);
else
infoObject.parent.addChildAt(uic, infoObject['childIndex']);
if(isNaN(infoObject['percentWidth'])){
uic.width = infoObject['width'];
}else{
uic.percentWidth = infoObject['percentWidth'];
}
if(isNaN(infoObject['percentHeight'])){
uic.height = infoObject['height'];
}else{
uic.percentHeight = infoObject['percentHeight'];
}
uic.x = infoObject['x'];
uic.y = infoObject['y'];
delete displayObjectMap[uic];
delete anchorMap[uic];
}
}
/**
*Readds all children to their correct containers
* used when we're exiting full screen
*
*/
private static function readdChildred():void{
for(var key:Object in displayObjectMap){
if(key is UIComponent){
removeChild(key as UIComponent);
}
}
}
/**
*Called on resize to update the coordinates of anchored children throughout the canvas
*
*/
private static function updateAnchorStates():void{
for(var key:Object in anchorMap){
if(key is UIComponent){
var uic:UIComponent = key as UIComponent;
var anchorObject:Object = anchorMap[key];
var stretchProportional:Boolean = anchorObject['stretchProportional'] as Boolean;
var anchorLeft:Number = anchorObject['anchorLeft'] as Number;
var anchorRight:Number = anchorObject['anchorRight'] as Number;
var anchorTop:Number = anchorObject['anchorTop'] as Number;
var anchorBottom:Number = anchorObject['anchorBottom'] as Number;
var centerVertically:Boolean = anchorObject['centerVertically'] as Boolean;
var centerHorizontally:Boolean = anchorObject['centerHorizontally'] as Boolean;
if(stretchProportional){
var w:Number = uic.width;
var h:Number = uic.height;
var sw:Number = FlexGlobals.topLevelApplication.screen.width;
var sh:Number = FlexGlobals.topLevelApplication.screen.height;
if(w > h){
uic.width = sw;
uic.validateNow();
uic.height *= (uic.width / w);
uic.validateNow();
}else{
uic.height = sh;
uic.validateNow();
uic.width *= (uic.height / h);
uic.validateNow();
}
}
if(anchorLeft != -1){
uic.x = anchorLeft;
}
if(anchorRight != -1){
uic.x = FlexGlobals.topLevelApplication.screen.width - uic.width - anchorRight;
}
if(anchorTop != -1){
uic.y = anchorTop;
}
if(anchorBottom != -1){
uic.y = FlexGlobals.topLevelApplication.screen.height - uic.height - anchorBottom;
}
if(anchorLeft == -1 && anchorRight == -1 && stretchProportional)uic.x = 0;
if(anchorTop == -1 && anchorBottom == -1 && stretchProportional)uic.y = 0;
if(centerVertically)uic.y = FlexGlobals.topLevelApplication.screen.height / 2 - uic.height / 2;
if(centerHorizontally)uic.x = FlexGlobals.topLevelApplication.screen.width / 2 - uic.width / 2;
}
}
}
/**
*When the application is resized
* @param event
*
*/
private static function onResize(event:ResizeEvent = null):void{
if(!theCanvas)return;
theCanvas.width = FlexGlobals.topLevelApplication.screen.width;
theCanvas.height = FlexGlobals.topLevelApplication.screen.height;
theCanvas.validateNow();
updateAnchorStates();
}
/**
*When full screen is exited with the escape key this will be triggered
* @param e
*
*/
private static function onExitFullScreen(e:FullScreenEvent):void{
if(e != null && !e.fullScreen)exitFullScreen();
}
}
}