[FLEX] fullscreen 기능을 이용한 응용

2009. 8. 11. 14:23

728x90

얼마전에 아래와 같은 화면이 가능할지 요구가 들어왔다.

http://www.hotpepper.jp/A_20500/strJ000026604.html

화면의 로딩이 끝나고 버튼을 누르면 Fullscreen으로 전환된다. 그리고 음식사진이 나오는데, 이 사진을 아래있는 컨트롤바의 조작으로 바꿀수도 있고, 여러 이벤트 처리가 가능한다.
잘 아시다시피, Fullscreen 화면에서는 키보의 이벤트가 ESC만 적용이된다. (운영체제에 따라서 약간은 다름) 그렇기 때문에 제약 상항이 많아진다. 이를 해결하기 위해서 위 사이트처럼 아래 마우스로 조작이 가능한 컨트롤바를 넣어서 해결을 하는 방법을 생각해 보았다.

일단 아래 화면을 보자.

위 화면을 Fullscreen일 경우에만 보여준다고 생각을 하면, 어떨까? 그러니깐 FullScreen 화면과 일반화면에 보여지는 것이 전혀 다르게 하는것이 목적이다. 굳이 이렇게 작업할 필요는 없지만, 사용자 입장에서는 풀화면으로 전환시 다른 화면이 나왔다고 느끼게 하기 위해서 이다.

일반 화면은 아래와 같은 화면으로 한다.

이 화면은 Flex 예제사이트를 참고했다.

일반 부분의 소스를 보면...fullScreenHandler라는 함수를 주목하자. 이부분이 중요하다. 이부분에 Fullscreen 화면과 일반화면의 전환시 동작해야하는 기능들을 넣어주면 된다.
<<FullScreen.mxml>>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" applicationComplete="init(event)">
	
	<mx:Script>
		<![CDATA[
			import flash.display.StageDisplayState;
		
			private function init(evt:Event):void {
                /* Set up full screen handler. */
                Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                dispState = Application.application.stage.displayState;
            }
            
            private function fullScreenHandler(evt:FullScreenEvent):void {
                dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
                if (evt.fullScreen) {
                    /* Do something specific here if we switched to full screen mode. */
                    /* 바로 이부분이다. Fullscreen 일경우의... */
                } else {
                    /* Do something specific here if we switched to normal mode. */
                    /* 바로 이부분이다. 일반화면 경우의*/
                }
            }
		
			private function toggleFullScreen():void {
                try {
                    switch (Application.application.stage.displayState) {
                        case StageDisplayState.FULL_SCREEN:
                            /* If already in full screen mode, switch to normal mode. */
                            Application.application.stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                            /* If not in full screen mode, switch to full screen mode. */
                            Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                } catch (err:SecurityError) {
                    // ignore
                }
            }
			
		]]>
	</mx:Script>
	
	<mx:String id="dispState" />
	
	<mx:Label text="width={Application.application.width}" />
    <mx:Label text="height={Application.application.height}" />
    <mx:Label text="displayState={dispState}" />

<mx:Button id="btn_fullscreen" label="Toggle fullscreen" click="toggleFullScreen()" />
	
</mx:Application>

그리고 Fullscreen의 경우의 화면 소스
<<FullDisplay.mxml>>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ty="*"
	layout="absolute" creationComplete="creationCompleteHdlr()">
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			//** IMAGE DATA */
			private var item:ArrayCollection = new ArrayCollection([
						{no:"1", label:"Autumn Leaves", data:"assets/Autumn Leaves.jpg"}, 
						{no:"2", label:"Creek", data:"assets/Creek.jpg"}, 
						{no:"3", label:"Desert Landscape", data:"assets/Desert Landscape.jpg"}, 
						{no:"4", label:"Dock", data:"assets/Dock.jpg"}, 
						{no:"5", label:"Forest Flowers", data:"assets/Forest Flowers.jpg"}, 
						
						{no:"6", label:"Forest", data:"assets/Forest.jpg"},
						{no:"7", label:"Frangipani Flowers", data:"assets/Frangipani Flowers.jpg"},
						{no:"8", label:"Garden", data:"assets/Garden.jpg"},
						{no:"9", label:"Green Sea Turtle", data:"assets/Green Sea Turtle.jpg"},
						{no:"10", label:"Humpback Whale", data:"assets/Humpback Whale.jpg"},
						
						{no:"11", label:"Oryx Antelope", data:"assets/Oryx Antelope.jpg"},
						{no:"12", label:"Toco Toucan", data:"assets/Toco Toucan.jpg"},
						{no:"13", label:"Tree", data:"assets/Tree.jpg"},
						{no:"14", label:"Waterfall", data:"assets/Waterfall.jpg"},
						{no:"15", label:"Winter Leaves", data:"assets/Winter Leaves.jpg"}
					]);
			
			private function creationCompleteHdlr():void{
				menuBar.item = this.item;
			}		
			
		]]>
	</mx:Script>
	
	<mx:Image source="{menuBar.horizontalList.selectedItem.data}" 
		maintainAspectRatio="true"
        horizontalAlign="center"
        width="100%"
        height="100%"/>
	
	<ty:MenuBar id="menuBar" x="0" y="{Application.application.height-30}"/>
	
	
</mx:Application>

item 이라는 ArrayCollection변수를 생성하여 이곳에 이미지가 있는 주소 데이터를 만들어준다. MenuBar라는 새로만든 컨포넌트의 데이터이기도 하다.

<<MenuBar.mxml>>

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="30" 
	backgroundColor="#242323" verticalAlign="middle">
	
	<mx:Script>
		<![CDATA[
			import mx.graphics.ImageSnapshot;
			import mx.controls.Image;
			import mx.collections.ArrayCollection;
			
			private var timer:Timer = new Timer(scrollSpeed);;
			
			public var scrollSpeed:Number = 100;
								
			private function itemListScrollOverEventHdlr(event:MouseEvent):void{
				
				var btn:Button = event.currentTarget as Button;
				
				if(btn.id == "btn_next"){
					
												
					if(timer.running) {
						timer.stop();
					}
					
					timer = new Timer(this.scrollSpeed);
					timer.addEventListener(TimerEvent.TIMER, scrollNextFunction);
					
					timer.start();
					
				}else if(btn.id ==  "btn_previous"){
					
					if(timer.running) {
						timer.stop();
					}
					
					timer = new Timer(this.scrollSpeed);
					timer.addEventListener(TimerEvent.TIMER, scrollPreviousFunction);
					
					timer.start();
				}
				
			}
			
			private function stopScrolling(event:Event):void {
		    	if(timer.running) {
					timer.stop();
				}
		    }
		    
		    private function scrollNextFunction(event:TimerEvent):void{
		    	if(horizontalList.horizontalScrollPosition < horizontalList.maxHorizontalScrollPosition){
		    		horizontalList.horizontalScrollPosition++;
		    	}
		    }
		    
		    private function scrollPreviousFunction(event:TimerEvent):void{
		    	if(horizontalList.horizontalScrollPosition > 0){
					horizontalList.horizontalScrollPosition--;
				}
		    }
		]]>
	</mx:Script>
	
	<mx:ArrayCollection id="item" />
	
	<mx:HBox width="100%" verticalAlign="middle" horizontalAlign="center"
		paddingLeft="10" paddingRight="10">
		
		<mx:Text text="Index : " color="#FFFFFF"/>
		<mx:Text id="txt_index" text="{horizontalList.selectedIndex}" color="#FFFFFF"/>
	
		
		<mx:HBox id="itemScrollBox" width="95%" horizontalAlign="center" horizontalGap="2">
			<mx:Button id="btn_previous" 
				width="40" height="20" label="＜" 
				mouseOver="itemListScrollOverEventHdlr(event)" 
				mouseOut="stopScrolling(event)"/>
            <mx:HorizontalList id="horizontalList"
                    labelField="label"
                    dataProvider="{item}"
                    itemRenderer="CustomItemRenderer"
                    columnCount="9"
                    columnWidth="20"
                    rowCount="1"
                    rowHeight="20"
                    horizontalScrollPolicy="off"
                    paddingBottom="0" paddingTop="0" borderStyle="none"/>
			<mx:Button id="btn_next" 
				width="40" height="20" label="＞"
				mouseOver="itemListScrollOverEventHdlr(event)" 
				mouseOut="stopScrolling(event)"/>
		</mx:HBox>

<mx:Button id="btn_exit" label="Exit" />
	</mx:HBox>
	
</mx:HBox>

MenuBar에서 HorizontalList 컨포넌트안에 들어가는 item을 itemRenderer를 이용하도록 만들었다.
<<CustomItemRenderer.mxml>>

이것들을 이용해서 Fullscreen 모드에서만 동작하도록 만들어보았다. (좀더 응용을 해보았다.)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ty="*"
	layout="absolute" 
	applicationComplete="init(event)"
	creationComplete="creationCompleteHdlr()"
	horizontalScrollPolicy="off"
	verticalScrollPolicy="off">
	
	<mx:Script>
		<![CDATA[
			import flash.display.StageDisplayState;
			import mx.collections.ArrayCollection;
			
			//** IMAGE DATA */
			private var item:ArrayCollection = new ArrayCollection([
						{no:"1", label:"Autumn Leaves", data:"assets/Autumn Leaves.jpg"}, 
						{no:"2", label:"Creek", data:"assets/Creek.jpg"}, 
						{no:"3", label:"Desert Landscape", data:"assets/Desert Landscape.jpg"}, 
						{no:"4", label:"Dock", data:"assets/Dock.jpg"}, 
						{no:"5", label:"Forest Flowers", data:"assets/Forest Flowers.jpg"}, 
						
						{no:"6", label:"Forest", data:"assets/Forest.jpg"},
						{no:"7", label:"Frangipani Flowers", data:"assets/Frangipani Flowers.jpg"},
						{no:"8", label:"Garden", data:"assets/Garden.jpg"},
						{no:"9", label:"Green Sea Turtle", data:"assets/Green Sea Turtle.jpg"},
						{no:"10", label:"Humpback Whale", data:"assets/Humpback Whale.jpg"},
						
						{no:"11", label:"Oryx Antelope", data:"assets/Oryx Antelope.jpg"},
						{no:"12", label:"Toco Toucan", data:"assets/Toco Toucan.jpg"},
						{no:"13", label:"Tree", data:"assets/Tree.jpg"},
						{no:"14", label:"Waterfall", data:"assets/Waterfall.jpg"},
						{no:"15", label:"Winter Leaves", data:"assets/Winter Leaves.jpg"}
					]);
			
			private function creationCompleteHdlr():void{
				menuBar.item = this.item;
				menuBar.btn_exit.addEventListener(MouseEvent.CLICK, toggleFullScreen);
			}
		
			private function init(evt:Event):void {
                /* Set up full screen handler. */
                Application.application.stage.addEventListener(FullScreenEvent.FULL_SCREEN, fullScreenHandler);
                dispState = Application.application.stage.displayState;
            }
            
            private function fullScreenHandler(evt:FullScreenEvent):void {
                dispState = Application.application.stage.displayState + " (fullScreen=" + evt.fullScreen.toString() + ")";
                if (evt.fullScreen) {
                    /* Do something specific here if we switched to full screen mode. */
                    contBox.visible = false;
                    
                    menuBarMoveChk.visible = true;
                    menuBar.visible = true;
                    img.visible = true;
                    
                } else {
                    /* Do something specific here if we switched to normal mode. */
                    contBox.visible = true;
                    
                    menuBarMoveChk.visible = false;
                    menuBar.visible = false;
                    img.visible = false;
                }
            }
		
			private function toggleFullScreen(event:MouseEvent):void {
                try {
                    switch (Application.application.stage.displayState) {
                        case StageDisplayState.FULL_SCREEN:
                            /* If already in full screen mode, switch to normal mode. */
                            Application.application.stage.displayState = StageDisplayState.NORMAL;
                            break;
                        default:
                            /* If not in full screen mode, switch to full screen mode. */
                            Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;
                            break;
                    }
                } catch (err:SecurityError) {
                    // ignore
                }
            }
            
            private function showMenuBar(evt:Event):void{
            	var chk:CheckBox = evt.target as CheckBox;
            	
            	//show menu bar controller move effect
            	moveeff.end(); 
            	
            	if(chk.selected){            	   	
	            	moveeff.yTo = Application.application.height - 30;
	            } else{
	            	moveeff.yTo = Application.application.height;
	            }
	            
            	moveeff.play();
            	
            }
			
		]]>
	</mx:Script>
	<mx:Move id="moveeff" target="{menuBar}" duration="500" />
	<mx:String id="dispState" />
	
	<mx:VBox id="contBox" y="10" width="100%" horizontalAlign="center">
		<mx:Label id="labal1" text="width={Application.application.width}"/>
	    <mx:Label id="labal2" text="height={Application.application.height}" />
	    <mx:Label id="labal3" text="displayState={dispState}" />
	
	    <mx:Button id="btn_fullscreen" 
	    	label="Toggle fullscreen" click="toggleFullScreen(event)" />
	</mx:VBox>
    
    <mx:Image id="img" source="{menuBar.horizontalList.selectedItem.data}" 
		maintainAspectRatio="true"
        horizontalAlign="center"
        width="100%"
        height="100%"
        visible="false"/>
	
	
	<ty:MenuBar id="menuBar" 
		x="0" y="{Application.application.height}" 
		visible="false"/>
	<mx:CheckBox id="menuBarMoveChk" x="10" y="{Application.application.height-50}" 
		visible="false" change="showMenuBar(event)"/>
</mx:Application>

소스를 보면 Fullscreen 모드일때 숨겨두었던 컴포넌트를 보여주고, 일반화면일때 보이던 컴포넌트를 숨기는 단순한 방법을 선택하였다. 더좋은 방법이 있을까??
Fullscreen 모드에 관한 html 설정은 아래 포스트를 참조하길..

참고글
2009/08/05 - [Programe Note/FLEX] - [FLEX] HorizontalList의 스크롤을 버튼으로 만들기
2009/04/14 - [Programe Note/FLEX] - [FLEX] 브라우져 풀스크린 모드 전환

도움이 되셨다면 추천 부탁드립니다.

728x90

Typiler

[FLEX] fullscreen 기능을 이용한 응용

+ Recent posts

티스토리툴바