오픈비 : 삽질은없다

1. 웹폰트 생성프로그램을 아래에서 다운로드 받는다.
http://www.microsoft.com/typography/web/embedding/weft3/download.aspx

2. 웹폰트로 사용할 폰트를 미리 준비한다.
(네이버에서 무료배포하는 나눔고딕을 사용해서 해본다)
http://static.campaign.naver.com/nfs1/file/2008/11/hangeul2715/NanumFontSetup_Win_TTF.exe

3. 웹폰트변환을 위해서 필요한 파일을 준비한다.

이미지 순서대로 적용시킨 후 서버에 업로드하고
CSS를 생성하여 확인해본다.

신규프로젝트를 생성하고 TRAC을 사용할수 있도록 설정하는 방법에 대한 내용이다.

프로젝트를 생성하는 과정은 2가지의 과정으로 진행된다.
우선 버전관리를 위한 SVN Repository 를 생성하고 사용자권한을 설정해 준다.



여기까지 설정했다면, svn 클라이언트를 이용해서 테스트 해본다.
svn co svn://abydos.kr/viralapp
위의 명령이 정상적으로 진행되면, svn 설정이 완료된 상태이다.

그다음 해야 할 일은 이슈관리를 위하여 TRAC 을 설정하는 일이다.


설정이 완료되었으면 http://abydos.kr/trac/ 으로 접속하여 프로젝트를 사용한다.

xml문서를 자바스크립트로 읽어와서 표현해야 할 경우

읽어올 xml의 내용

자바스크립트로 읽어오는 부분

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();
           
        }

Tomcat 5.5 에서 자바빈즈를 사용하는데 문제가 발생해서 해결하는데 3일이나 걸렸습니다. 문제의 원인은 server.xml 설정의 문제였는데요, Tomcat 4.1 까지는 정상적으로 동작한다는 것이 해결의 발목을 잡았습니다. Host 태그의 appBase 내용을 Context 태그의 docBase 로 옮기고 나니 정상적으로 동작하는 것을 확인하였습니다. server.xml 의 설정값을 어떻게 해야되는지 내용을 알기가 어렵더군요. 아무튼 이렇게 설정하고나니 모든 것이 잘 돌아가고 있습니다. server.xml 에 대해서 아주 쉽고 상냥하게 설명되어 있는 문서가 없을까요? ^^;

* 문제 발생시의 server.xml 내용

<Host name="test.com" debug="0" appBase="/opt/project/test.com/web" unpackWARs="true" autoDeploy="true">
  <Logger className="org.apache.catalina.logger.FileLogger" directory="logs" prefix="test.com_" suffix=".log" timestamp="true"/>  
  <Context path="" docBase="" debug="0">
    <Resources className="org.apache.naming.resources.FileDirContext" allowLinking="true" />
  </Context>
</Host>


* 문제 해결후의 server.xml 내용

<Host name="test.com" debug="0" appBase="" unpackWARs="true" autoDeploy="true">
  <Logger className="org.apache.catalina.logger.FileLogger" directory="logs" prefix="test.com_" suffix=".log" timestamp="true"/>  
  <Context path="" docBase="/opt/project/test.com/web" debug="0">
    <Resources className="org.apache.naming.resources.FileDirContext" allowLinking="true" />
  </Context>
</Host>

Flex2 와 php 를 연동한 쓸만한 멀티 파일 업로드 예제가 있어서 소개한다.

원리는 매우 간단하다.
Flex2 는 업로드할 파일들의 선택과 업로딩 상태등의 UI 를 담당하고,
php 는 보내온 파일들을 서버로 저장한다.

업로드 역할을 맡은 서버측 스크립트는 php 뿐만 아니라 다른 언어도 가능할 듯 하다.
예제에서는 간편한 php 를 사용했다.

[upload.php]

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 =[];