오픈비 : 삽질은없다

AIR로 만든 날씨위젯

고려사항
1) 실시간 데이터 갱신
2) 설정값유지
3) effect
4) 원격지 xml 데이터의 인코딩타입
5) 배포파일의 용량 최적화

환경 : flex sdk 3.0 이상

데스크탑에서 사용하는 위젯을 만들었는데,
최소화 하면 상태표시줄에서 없애고 트레이에 아이콘을 삽입해서보여주고 트레이 아이콘을 누르면 화면같은 메뉴가 나오도록 구성.

        [Embed(source="/assets/icons/upa16.png")]
        [Bindable]
        private var Icon16:Class;

   /**
   * 마우스 오른쪽버튼 메뉴와 시스템트레이 메뉴생성
   *
   * @Author: chaeya@gmail.com
   */
        //마우스오른쪽버튼 메뉴생성, TrayMenu 생성
        private function CreateMenu():void {
            var bitmap16:Bitmap = new Icon16();
               
            NativeApplication.nativeApplication.icon.bitmaps =[bitmap16.bitmapData];           
            var trayMenu:NativeMenu = new NativeMenu();
            var minimizeManu:NativeMenuItem = new NativeMenuItem("Minimize");
            var maximizeManu:NativeMenuItem = new NativeMenuItem("Maximize");
            var restoreMenu:NativeMenuItem = new NativeMenuItem("Restore");
            var closeMenu:NativeMenuItem = new NativeMenuItem("Close");
           
            minimizeManu.addEventListener(Event.SELECT, handleMenuClick);
            maximizeManu.addEventListener(Event.SELECT,handleMenuClick);
            restoreMenu.addEventListener(Event.SELECT,handleMenuClick);
            closeMenu.addEventListener(Event.SELECT,handleMenuClick);
           
            trayMenu.addItem(minimizeManu);
            trayMenu.addItem(restoreMenu);
            trayMenu.addItem(maximizeManu);
            trayMenu.addItem(closeMenu);
           
            if(NativeApplication.supportsSystemTrayIcon)
            {
                SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = trayMenu;
                SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "UPA Widget";     
                SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);         
            }         
            //마우스오른쪽클릭시 메뉴
            this.contextMenu = trayMenu;           
        }

       public function undock(evt:Event):void {
          stage.nativeWindow.visible = true;
          stage.nativeWindow.orderToFront();
          NativeApplication.nativeApplication .icon.bitmaps = [];
       }
      
        private function handleMenuClick(e:Event):void
        {
            var menuItem:NativeMenuItem = e.target as NativeMenuItem;
            if(menuItem.label == "Minimize") {
                this.minimize();
                this.stage.nativeWindow.visible = false;
            }
            if(menuItem.label == "Maximize") this.maximize();
            if(menuItem.label == "Restore") {
                this.restore();
                this.stage.nativeWindow.visible = true;
            }
            if(menuItem.label == "Close") this.close();
           
        }

Flex2 와 php 를 연동한 쓸만한 멀티 파일 업로드 예제가 있어서 소개한다.

원리는 매우 간단하다.
Flex2 는 업로드할 파일들의 선택과 업로딩 상태등의 UI 를 담당하고,
php 는 보내온 파일들을 서버로 저장한다.

업로드 역할을 맡은 서버측 스크립트는 php 뿐만 아니라 다른 언어도 가능할 듯 하다.
예제에서는 간편한 php 를 사용했다.

[upload.php]

mxml 소스 : 예제화면에서 마우스우클릭->view source

예제 : http://weblog.cahlan.com/files/file_uploads/FileUpload.html
출처 : http://weblog.cahlan.com

FLEX 위젯을 만드는데
사이즈가 너무커서 임으로 달력을 그려서 넣을 일이 생겨서 하나 만들었다.
그리드 로우 추가부분이 이상해서 검토필요.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="130" initialize="init()">
<mx:Script>
    <![CDATA[
        import mx.states.SetStyle;
            [Bindable]
            private var _txtYearMonth:String=null;        //달력에 보이는 year-month 설정
           
            private var _calDate:Date = new Date();        //현재 달력의 날짜 (년, 월) 참조 가능
            private var _startDay:uint;                    //1일이 시작하는 날짜의 요일 (0:일, 1:월 ... 6:토)
            private var _endDate:uint;                    //해당 달의 마지막 날짜       

            private const PREV:String = "move.previous"; //달력 진행 방향
            private const NEXT:String = "move.next";         
            private const CELL_WIDTH:uint = 30;        //요일 셀 설정
            private const CELL_HEIGHT:uint = 14;   
           
            private const CELLTYPE_MASK:uint            = 0x1111;    //요일 타입 설정 & | 연산자를 통해 마스킹 처리
            private const CELLTYPE_BLANK:uint            = 0x0000;    //0
            private const CELLTYPE_SAT:uint                = 0x0100;    //256
            private const CELLTYPE_SUN:uint                = 0x1000;    //4096
           
            private function init():void{
                drawCalendar(_calDate);               
            }               
            /**
             * 달력을 이동한다
             * @param direction 이동방향 (PREV, NEXT)
             * */
            private function moveMonth(direction:String):void{

                switch(direction){
                    case PREV:
                        _calDate.setMonth(_calDate.getMonth()-1);
                    break;
                    case NEXT:
                        _calDate.setMonth(_calDate.getMonth()+1);
                    break;
                }
                //월을 받아서 달력그리기                               
                drawCalendar(_calDate);
            }       
            /**
             * 달력 년월을 설정한다.
             * @txtYearMonth txtYearMonth 날짜 ex) 2009.03
             * */
            public function set txtYearMonth(txtYearMonth:String):void{
                this._txtYearMonth = txtYearMonth;
            }
           
            /**
             * 그리드 내부 값 삭제하기
             * */
            private function initGrid():void
            {
                while(true)
                {
                    //첫번째 자식은 요일표시 제목이기때문에 삭제 안함
                    if(viewGrid.numChildren > 1)
                    {
                        viewGrid.removeChildAt(viewGrid.numChildren-1);
                    }
                    else break;
                }
               
                //타이틀 변경 : 변경된 년월을 그려준다.
                drawTitle();
            }
            /**
             * 변경된 년월을 그려준다.
             * */
            private function drawTitle():void{
                _txtYearMonth = _calDate.fullYear + "." + (_calDate.month+1) ;
            }   
            /**
             * GridRow 생성 : 1주일 - GridRow 스타일 설정
             * */
            private function getGridRow():GridRow
            {
                var item:GridRow = new GridRow();
               
                item.percentWidth = 100;
                item.height = 14;
               
                return item;
            }                   
            /**
             * GridItem 생성 : 1일 - GridItem 내부 Label 스타일 설정
             * @param row 행 0부터 시작함.
             * @param col 열 0부터 시작함.
             * */
            private function getGridItem(row:uint, col:uint):GridItem
            {
                var itemType:uint ;                    //아이템 타입
                var startCnt:uint = _startDay;
                var inputCnt:uint = row + (col*7);
               
                var calYear:uint = _calDate.fullYear;
                var calMonth:uint = _calDate.month;
                var calDate:uint = inputCnt - startCnt + 1;
                var calDay:uint = _calDate.day;
               
                //입력 범위 밖에 있는 값들 ...
                if(startCnt > inputCnt || inputCnt > (_startDay+_endDate-1) ) {
                    itemType = CELLTYPE_BLANK;
                    calDate = 0;    // 범위 밖(오류) : 날짜를 0으로 강제 셋팅 해준다.
                }
                else{
                    itemType = getCellType(new Date(calYear,calMonth,calDate));    //row는 요일과 동일
                }
               
//                trace("itemType : "+itemType);
               
                //itemType 에 따른 Grid
                var gridItem:GridItem = drawGridItem(itemType,calDate);
                return gridItem;   
            }       
            /**
             * 요일에 대하여 셀의 타입을 반환한다.
             * @date 확인하고자 하는 날짜
             * */
            private function getCellType(date:Date):uint
            {
                var yy:uint = date.fullYear;
                var mm:uint = date.month+1;    //월은 0 부터 시작하므로 +1 처리
                var dd:uint = date.date;
                var day:uint = date.day;    //0 : sun, 1 : mon ... , 6 : sat
               
                var cellType:uint = CELLTYPE_BLANK;
                if(day==0) cellType+= CELLTYPE_SUN;        //요일 정보 추가하기
                if(day==6) cellType+= CELLTYPE_SAT;
               
                return cellType;
            }   
                                /**
             * 그리드 아이템 내부에 들어가는 내용을 그려준다.
             * @param type 그리드 타입
             * @param date 날짜 (0 : 범위 밖 날짜)
             * */
            private function drawGridItem(type:uint, date:uint):GridItem{
                var gridItem:GridItem = new GridItem();
                gridItem.width = CELL_WIDTH; 
                gridItem.height = CELL_HEIGHT;
                gridItem.percentHeight = 100;
                gridItem.percentWidth = 100;
                gridItem.setStyle("textAlign","center");
                gridItem.setStyle("fontWeight","bold");
               
               
                //레이블 설정
                var lbDate:Label = new Label();
                if(date==0) lbDate.text = "";
                else lbDate.text = String(date);

                if((type & CELLTYPE_SAT)== CELLTYPE_SAT){                //날짜 - 토요일
                    //lbDate.SetStyle("color", "blue");
                }
                if((type & CELLTYPE_SUN)== CELLTYPE_SUN){                //날짜 - 일요일
                    //lbDate.SetStyle("color", "red");
                }
               
                //그리드안에 LAbel 삽입
                gridItem.addChild(lbDate);
               
                return gridItem;
            }
            /**
             * 달력을 그려준다.
             * @param date 달력을 그리고자 하는 년월           
             * */
            private function drawCalendar(date:Date):void{
                var tmpDate1:Date = new Date(date.fullYear,date.month,1);
                var tmpDate2:Date = new Date(date.fullYear,date.month+1,1);
                tmpDate2.setDate(tmpDate2.getDate()-1);
               
                _startDay = tmpDate1.getDay();    //1일이 시작하는 날짜의 요일 (0:일, 1:월 ... 6:토)
                _endDate = tmpDate2.getDate();    //해당 달의 마지막 날짜
               
                //그리드 초기화 : 그리드 내부에 존재하는 모든 아이템을 제거한다.
                initGrid();

                //내부 값 삽입
                for(var i:uint=0;i<6;i++){    //6주를 그려 줄 수 있도록 구성한다. ex) (4)x7 + (1)x1 + (1)x2 = 6주
                    var tmpGridRow:GridRow = getGridRow();
                    for(var j:uint=0;j<7;j++){    //1주일은 7일 임
                        var tmpGridItem:GridItem = getGridItem(j,i);
                        tmpGridRow.addChild(tmpGridItem);
                    }
                    viewGrid.addChild(tmpGridRow);
                }
               
            }           
    ]]>
</mx:Script>
    <mx:HBox x="0" y="0" width="100%" horizontalAlign="center" height="20">
        <mx:Button label="&lt;" click="moveMonth(PREV)" width="22" height="20" icon="@Embed(source='../assets/button/LEFT_ARROW.png')" buttonMode="true" id="PrevBtn"
            toolTip="Prev Month"/>
        <mx:Text text="{_txtYearMonth}" fontSize="12" textAlign="center" id="YearMonth" height="20"/>
        <mx:Button label="&gt;" click="moveMonth(NEXT)" width="22" height="20" icon="@Embed(source='../assets/button/RIGHT_ARROW.png')" buttonMode="true" id="NextBtn"
            toolTip="Next Month"/>
    </mx:HBox>   
    <mx:Canvas x="0" y="20" width="100%" height="109" fontFamily="Arial" fontSize="10" fontWeight="normal">
        <mx:Grid width="150" height="109" horizontalGap="1" horizontalAlign="right" verticalGap="1" verticalAlign="middle"  id="viewGrid" verticalScrollPolicy="off" horizontalScrollPolicy="off">
            <mx:GridRow width="100%" height="100%">
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="S" color="#FF0713" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="M" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="T" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="W" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="T" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="F" color="#000000" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
                <mx:GridItem width="100%" height="14">
                    <mx:Label text="S" color="#0118F8" width="100%" height="14" textAlign="center" fontWeight="bold" fontStyle="italic"/>
                </mx:GridItem>
            </mx:GridRow>
        </mx:Grid>
    </mx:Canvas>

   
</mx:Canvas>

for each(var tempUnit:XML in myXML.uint)
{
var groupPages:Array =[];