AIR로 만든 날씨위젯

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

블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.

Tag flex, 위젯
환경 : 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();
           
        }
블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.

Tag AIR, Apollo, flex

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
블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.

Tag flex
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>

블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.

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
블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.

Tag flex, xml

다운로드는 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
블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.