Flex 빠른 시작 가이드: 간단한 유저 인터페이스 구축

목차

• 컨트롤 사용
• 컨테이너 사용
• 구성 요소 스타일 지정
• 효과 추가
• 상태 만들기
• 상태 전환 정의
• 툴팁 사용
• 커서 제어

커서 제어

Adobe® Flex™ Cursor Manager를 사용하면 Flex 어플리케이션에서 커서 이미지를 제어할 수 있습니다. 예를 들어 프로세스 처리가 완료될 때까지 사용자가 기다려야 하는 프로세스를 수행하는 어플리케이션의 경우 대기 기간을 반영할 수 있도록 커서를 모래 시계와 같은 사용자 정의 커서 이미지로 변경할 수 있습니다.

또한 커서를 변경하여 사용자에게 피드백을 제공함으로써 사용자가 수행할 수 있는 동작을 나타낼 수 있습니다. 예를 들어 사용자가 입력할 수 있음을 나타내는 커서 이미지를 사용하거나 사용자가 입력할 수 없음을 나타내는 커서 이미지를 사용할 수 있습니다.

CursorManager 클래스는 커서의 우선 순위별 목록을 제어하는 데, 가장 높은 우선 순위를 갖는 커서가 보이게 됩니다. 커서 목록에 동일한 우선 순위를 갖는 하나 이상의 커서가 포함되어 있는 경우 Cursor Manager는 가장 최근에 생성된 커서를 표시합니다.

작업 수행 중인 기본 커서 사용

Flex는 어플리케이션이 처리 중인 상태를 나타내거나 어플리케이션이 사용자 입력에 응답하기 전에 처리 과정이 완료될 때까지 사용자가 기다려야 하는 상태를 나타내는 데 사용할 수 있는 작업 수행 중인 기본 커서를 정의합니다. 작업 수행 중인 기본 커서는 시계 모양의 애니메이션입니다.

다음과 같이 여러 가지 방법으로 작업 수행 중인 커서를 제어할 수 있습니다.

• CursorManager 메서드를 사용하면 작업 수행 중인 커서를 설정하거나 제거할 수 있습니다.
• SWFLoader, WebService, HttpService, RemoteObject 클래스의 showBusyCursor 속성을 사용하면 작업 수행 중인 커서를 자동으로 표시할 수 있습니다.

다음 예제에서는 CursorManager 클래스의 정적 setBusyCursor() 및 removeBusyCursor() 메서드를 사용하여 토글 버튼의 상태에 따라 작업 수행 중인 Flex 기본 커서를 표시하거나 숨깁니다.

예제

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 

    viewSourceURL="src/CursorDefaultBusy/index.html" 
    width="400" height="160" 
> 
    <mx:Script> 
        <![CDATA[

            import mx.controls.Button; 
            import mx.managers.CursorManager; 
            import flash.events.*; 

            private const ON_MESSAGE:String = "Busy Cursor ON"; 
            private const OFF_MESSAGE:String = "Busy Cursor OFF"; 

            private function busyCursorButtonHandler(event:MouseEvent):void 
            { 

                var toggleButton:Button = event.target as Button; 
                if (toggleButton.selected) 
                { 

                    CursorManager.setBusyCursor(); 
                    toggleButton.label = ON_MESSAGE; 

                } 
                else 
                { 
                    CursorManager.removeBusyCursor(); 
                    toggleButton.label = OFF_MESSAGE; 
                } 

            } 
        ]]> 
    </mx:Script> 

    <mx:Panel 
        paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" 
        horizontalAlign="center" verticalAlign="middle" 

        title="Default busy cursor" 
    > 

        <!-- Toggle button turns default busy cursor on and off. --> 
        <mx:Button 
            label="{OFF_MESSAGE}" toggle="true" 
            click="busyCursorButtonHandler(event);" 

        /> 

        <mx:Text text="Click the button to display or hide the busy cursor."/> 
    </mx:Panel> 
</mx:Application>

결과

전체 소스를 보려면 Flex 어플리케이션을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 View Source를 선택합니다.

사용자 정의 커서 사용

JPEG, GIF, PNG 또는 SVG 이미지, Sprite 객체 또는 SWF 파일을 커서 이미지로 사용할 수 있습니다.

Cursor Manager를 사용하려면 mx.managers.CursorManager 클래스를 어플리케이션으로 가져온 다음 해당 속성과 메서드를 참조합니다.

다음 예제에서는 Adobe Flash에서 만든 모래 시계 SWF 애니메이션을 임베드하여 사용자 정의 커서로 사용합니다. 예제에서 CursorManager 클래스의 setCursor() 정적 메서드를 호출한 다음 사용자 정의 커서로 사용할 임베드된 에셋의 클래스로 참조로 전달하여 사용자 정의 커서를 만듭니다. CursorManager 클래스의 removeCursor() 정적 메서드를 호출한 다음 CursorManager 클래스의 currentCursorID 정적 속성으로 전달하여 사용 중인 사용자 정의 커서를 제거할 수 있습니다.

예제

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 

    viewSourceURL="src/CursorCustom/index.html" 
    width="400" height="160" 
> 
    <mx:Script> 
        <![CDATA[ 

            import mx.controls.Button; 
            import mx.managers.CursorManager; 
            import flash.events.*; 

            // Embed the SWF that will be used as  
            // the custom cursor.  
            [Embed(source="assets/hourglass.swf")] 

            public var HourGlassAnimation:Class; 

            private const ON_MESSAGE:String = "Custom Cursor ON"; 
            private const OFF_MESSAGE:String = "Custom Cursor OFF"; 

            private function busyCursorButtonHandler(event:MouseEvent):void 
            { 

                var toggleButton:Button = event.target as Button; 
                if (toggleButton.selected) 
                { 

                    // The setCursor() method returns a numeric ID for  
                    // the cursor being set. You can store and use this  
                    // ID later in a removeCursor() call, or, you can  
                    // use the static currentCursorID property of the  
                    // CursorManager class to achieve the same result. 
                    CursorManager.setCursor(HourGlassAnimation); 
                    toggleButton.label = ON_MESSAGE; 
                } 

                else 
                { 
                    CursorManager.removeCursor(CursorManager.currentCursorID); 
                    toggleButton.label = OFF_MESSAGE; 
                } 

            } 
        ]]> 
    </mx:Script> 

    <mx:Panel 
        paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10" 
        horizontalAlign="center" verticalAlign="middle" 

        title="Custom cursor" 
    > 

        <!-- Toggle button turns the custom cursor on and off. --> 
        <mx:Button 
            label="{OFF_MESSAGE}" toggle="true" 
            click="busyCursorButtonHandler(event);" 

        /> 

        <mx:Text text="Click the button to display or hide the custom cursor."/> 
    </mx:Panel> 
</mx:Application>

결과

전체 소스를 보려면 Flex 어플리케이션을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 View Source를 선택합니다.

추가 정보

툴팁에 대한 자세한 내용은 Flex 2 Developer's Guide*의 "Using the Cursor Manager"를 참조하십시오.

저자 소개