반응형
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="<" 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=">" 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>
사이즈가 너무커서 임으로 달력을 그려서 넣을 일이 생겨서 하나 만들었다.
그리드 로우 추가부분이 이상해서 검토필요.
<?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="<" 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=">" 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>
반응형
'개발도 하냐?' 카테고리의 다른 글
The value for the useBean class attribute... (0) | 2009.11.16 |
---|---|
FLEX - 멀티파일업로드 (0) | 2009.11.13 |
FLEX - XML의 내용을 배열에 넣는법 (0) | 2009.11.08 |
웹로직 DB 접속설정 (0) | 2009.11.04 |
자동화 빌드도구 ANT (0) | 2009.11.04 |