'플렉스'에 해당되는 글 2건

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

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

다운로드는 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

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