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]

<?php

$errors = array();
$data = "";
$success = "false";

function return_result($success,$errors,$data) {
echo("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
?>
<results>
<success><?=$success;?></success>
<?=$data;?>
<?=echo_errors($errors);?>
</results>
<?
}

function echo_errors($errors) {

for($i=0;$i<count($errors);$i++) {
?>
<error><?=$errors[$i];?></error>
<?
}

}

switch($_REQUEST['action']) {

case "upload":

$file_temp = $_FILES['file']['tmp_name'];
$file_name = $_FILES['file']['name'];

$file_path = $_SERVER['DOCUMENT_ROOT']."/myFileDir";

//checks for duplicate files
if(!file_exists($file_path."/".$file_name)) {

     //complete upload
     $filestatus = move_uploaded_file($file_temp,$file_path."/".$file_name);

     if(!$filestatus) {
     $success = "false";
     array_push($errors,"Upload failed. Please try again.");
     }

}
else {
$success = "false";
array_push($errors,"File already exists on server.");
}

break;

default:
$success = "false";
array_push($errors,"No action was requested.");


}

return_result($success,$errors,$data);

?>


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 =[];
for each(var tempUnit2:XML in tempUnit..@id)
{
groupPages[tempUnit2] = tempUnit..page(@id == tempUnit2);
}
}

'개발도 하냐?' 카테고리의 다른 글

FLEX - 멀티파일업로드  (0) 2009.11.13
FLEX - Grid 컴퍼넌트로 그린 달력.  (0) 2009.11.11
FLEX - XML의 내용을 배열에 넣는법  (0) 2009.11.08
웹로직 DB 접속설정  (0) 2009.11.04
자동화 빌드도구 ANT  (0) 2009.11.04
JEUS 설정  (0) 2009.11.04

다운로드는 adobe 사이트에서 가능.

아래의 시리얼넘버를 사용하면 인증가능.

1377-4267-4606-8473-1846-5071
1377-4162-2060-7589-3186-7349
1377-4664-9203-3069-2677-6577
1377-4160-7004-2800-3486-3166
1377-4169-2983-5039-4046-6761
1377-4368-4890-7299-6501-2232
1377-4261-1380-8492-9605-3306
1377-4765-1210-7438-1185-3189

'삽질로그' 카테고리의 다른 글

HTML 테이블 CSS  (0) 2009.11.04
UI Component  (0) 2009.10.07
ADOBE FLEX Builder 3 CDKEY  (0) 2009.08.31
DNS 서버  (0) 2009.08.02
태그클라우드 만들기  (3) 2009.07.31
웹에서 제공하는 이메일 이미지 생성과 로고생성을 이용해서 만든 이미지  (0) 2009.07.20

+ Recent posts