본문 바로가기

OM

달력을 이용한 다이어리


diary.mxml===========================================================================================

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="450" height="250" initialize="init()">
 <mx:Style>
  Application{
   backgroundColor : #ffffff;
   fontSize : 11;
  }
 </mx:Style>
 
 <mx:Script>
  <![CDATA[
   
   import mx.rpc.events.ResultEvent;
   import mx.controls.*;
   import mx.collections.*;
   
   private var startX:Number = 20;
   private var startY:Number = 60;
   
   private var spaceX:Number = 27;
   private var spaceY:Number = 27;
   
   private var month:Array;
   
   private var now:Date;
   private var time:Date;
   
   private var diaryArr:Array;
     
   private function clearAll():void
   {
    for(var i:int=1; i<32; i++)
    {
     var mc:DisplayObject = this.getChildByName(i.toString());
     
     if(mc!=null)
     {
      this.removeChild(mc);
     }
    }
   }
   
   private function diaryInfoResult(e:ResultEvent):void
   {
    var infoResult:XML = new XML(e.result);
    diaryArr = new Array(31);
   
    for(var i:int=0; i<32; i++)
    {
     if(infoResult.item[i])
     {
      diaryArr[int(infoResult.item[i].@day)] = infoResult.item[i];
     }
    }
   
    generateCalendar(time.getFullYear(), time.getMonth());
    displayText();
   }
   
   private function init():void
   {
    month = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
   
    now = new Date();
    time = new Date();
   
    diaryInfo.send();
   }
   
   private function generateCalendar(_year:Number, _month:Number):void
   {
    clearAll();
   
    var temp:Date = new Date(_year, _month, 1);
    var posY:Number = startY;
   
    for(var i:int=1; i<32; i++)
    {
     temp.setDate(i);
     
     if(temp.getMonth()==_month)
     {
      var mc:Text = new Text();
      mc.width = 23;
      mc.height = 18;
      mc.setStyle("textAlign", "right");
     
      if(temp.getFullYear()==now.getFullYear() && temp.getMonth()==now.getMonth() && temp.getDate()==now.getDate())
      {
       mc.setStyle("color", "#CC00FF");
      }
      else{
       if(temp.getDay()==0)
       {
        mc.setStyle("color", "#ff0000");
       }
       else if(temp.getDay()==6){
        mc.setStyle("color", "#0033FF");
       }
       else{
        mc.setStyle("color", "#000000");
       }
      }
     
      mc.x = startX + spaceX*temp.getDay();
     
      if(temp.getDay()==0 && temp.getDate()!=1)
      {
       posY += spaceY;
      }
     
      mc.y = posY;
     
      mc.text = i.toString();
      mc.name = i.toString();
     
      if(diaryArr[i]!=null)
      {
       mc.mouseChildren = false;
       mc.buttonMode = true;
       mc.setStyle("color", "#339900");
       
       mc.addEventListener(MouseEvent.CLICK, clickHandler);
      }
     
      this.addChild(mc);
     }
     else{
      break;
     }
    }
   }
   
   private function clickHandler(e:MouseEvent):void
   {
    txtTitle.text = time.getFullYear() + "년" + (time.getMonth()+1) + "월" + e.currentTarget.name + "일";
    txtInfo.text = diaryArr[e.currentTarget.name];
   }
   
   private function displayText():void
   {
    txtMonth.text = month[time.getMonth()];
    txtYear.text = time.getFullYear().toString();
   }
   
   private function nextMonth():void
   {
    time.setMonth(time.getMonth()+1);
   
    txtTitle.text = "";
    txtInfo.text = "";
   
    diaryInfo.send();
   }
   
   private function prevMonth():void
   {
    time.setMonth(time.getMonth()-1);
   
    txtTitle.text = "";
    txtInfo.text = "";
   
    diaryInfo.send();
   }
   
  ]]>
 </mx:Script>
 
 <mx:HTTPService id="diaryInfo" url="./diary.xml" useProxy="false" resultFormat="xml" result="diaryInfoResult(event)"/>
 
 <mx:Label x="18" y="38" text="Sun" color="#ff0000"/>
 <mx:Label x="46" y="38" text="Mon"/>
 <mx:Label x="75" y="38" text="Tue"/>
 <mx:Label x="100" y="38" text="Wed"/>
 <mx:Label x="128" y="38" text="Thu"/>
 <mx:Label x="155" y="38" text="Fri"/>
 <mx:Label x="182" y="38" text="Sat" color="#0033FF"/>
 <mx:Button x="150" y="218" label="Next" buttonMode="true" click="nextMonth()"/>
 <mx:Button x="18" y="218" label="Prev" buttonMode="true" click="prevMonth()"/>
 <mx:Text x="18" y="11" fontWeight="bold" id="txtYear"/>
 <mx:Text x="131" y="11" width="75" textAlign="right" fontWeight="bold" id="txtMonth"/>
 <mx:VRule x="224" y="10" height="230"/>
 <mx:Text x="234" y="12" width="206" textAlign="center" fontWeight="bold" id="txtTitle"/>
 <mx:TextArea x="234" y="38" width="206" height="202" editable="false" id="txtInfo"/>
</mx:Application>

=====================================================================================================

diary.xml=============================================================================================

<?xml version="1.0" encoding="utf-8"?>
<items>
 <item day="3">DB와 연동할 때에는 flex에서 month값을 넘겨주고 php나 asp, jsp등에서 query를 실행, xml을 뿌려주면 diary 완료.</item>
 <item day="5">diary example xml_05</item>
 <item day="13">diary example xml_13</item>
 <item day="18">diary example xml_18</item>
 <item day="22">diary example xml_22</item>
 <item day="27">diary example xml_27</item>
 <item day="29">diary example xml_29</item>
</items>

=====================================================================================================

'OM' 카테고리의 다른 글

색칠공부  (4) 2008.02.23
영어 학습 컨텐츠  (0) 2008.02.22
keyUtil  (0) 2008.02.09
타자게임  (0) 2008.02.09
달력  (0) 2008.02.07
D-day 구하기 2  (0) 2008.02.07
D-day 구하기 1  (0) 2008.02.05
아날로그 시계  (0) 2008.02.04
디지털 시계  (0) 2008.02.03