LuNA`s Dev

 1.     아래의 경로에서 LiveCycle DataService ES 를 다운로드를 합니다.
      계정을 추가하고 로그인 해야 다운로드가 가능하기 때문에 위의 경로와 다를 수도 있음

http://www.adobe.com/cfusion/entitlement/index.cfm?e=lcds26_td

- Serial Number 는 다운로드 페이지에 존재하나 입력하지 않아도 설치 가능함.

2.     다운받은 lcds261-win.exe 파일을 실행해서 LCDS 를 설치한다.
설치중 내장된 Tomcat 을 사용할지 다른 WAS를 사용할지 선택하는 부분이 나오는데 본 문서에서는 Tomcat을 사용하도록 설치한다. 설치는 어렵지 않게 할 수 있다.

3.     설치된 경로에 보면 lcds 라는 폴더가 존재하고 이 구조는 다음과 같다.

      폴더에 Tomcat 이 보인다. 이 내부는 기존의 Tomcat 과 동일한 구조를 가진다.
또한 tomcat 의 webapps 에 올라갈 lcds.war 와 lcds-samples.war 도 보인다.

4.     Tomcat 폴더를 보면 Tomcat 6.0.14 가 그대로 들어있다.
Tomcat 실행을 위해 JAVA_HOME 과 CATALINA_HOME 의 환경변수를 설정한다.
JAVA_HOME : java jdk 가 설치된 경로
CATALINA_HOME : tomcat 이 설치된 경로(%LCDS_HOME%\tomcat)

%LCDS_HOME%\tomcat\lib\lcds : LCDS 관련 lib
%LCDS_HOME%\tomcata\webapps\lcds : LCDS 관련 content root

5.     %LCDS_HOME%\tomcat\bin\startup.bat 를 통해 tomcat을 실행시킨다.
시작프로그램 – Adobe - LiveCycle Data Services ES 2.6.1 - Start LiveCycle Data Services Server
을 시작하면 bin\catalina.bat 을 실행시키는데 이는 JAVA_HOME path를 안 잡아줘도 되는듯..
어느 방법을 사용하든 서버를 시작하면 다음과 같이 된다.

서버 시작 후 http://localhost:8400/lcds 로 들어가서 다음과 같은 화면이 나오면 서버가 정상적으로 동작하는 것이다.

6.     접속 port를 바꾸려면 %\LCDS_HOME%\tomcat\conf\server.xml 에서 다음의 부분을 찾아 port 를 변경해 준 뒤 서버를 재 시작 하면 port 변경이 된다.
             <Connector port="8400" protocol="HTTP/1.1"
                 connectionTimeout="20000" redirectPort="9400" />

7.     서버 시작 후 http://localhost:8400/lcds-samples/ 로 들어가게 되면 기본으로 제공되는 LCDS 관련 Sample 들을 볼 수 있다.  

8.     Flex Builder 에서 LCDS 프로젝트 만드는 방법

9.     New – Flex Project 를 선택한다.
그 후 아래의 그림과 같이 Server type을 설정한다.
Application Server Type : J2EE
LiveCycle Data Services 선택

10.   LCDS 가 설치된 경로를 찾아 Server location 을 설정해 준다.

      현재 버전은 Tomcat에서 돌아가는 LCSD 이기 때문에 LCSD가 설치된 경로를 기준으로 위와 같이 설정 후 Validate Configuration 버튼을 눌러 확인해 준다.
Root folder : \lcds\tomcat\webapps\lcds [tomcat 에 기본으로 존재하는 경로(lcds)]
Root URL : http://localhost:8400/lcds/
Context root : /lcds

11.   이상의 방법까지 하면 LCDS 설치가 왼료 되고, LCDS로 프로젝트가 생성된다.
프로젝트 생성시마다 context root 인 webapps/lcds 안에 XXX-debug 폴더가 생성되고 그 내부에 swf 파일, html wrapper 파일들이 들어가게 된다

LCDS 의 설정 파일들은 webapps\lcds\WEB-INF\flex 내부에 존재한다.

출처 : http://kwlee.tistory.com/62

// set과 get이라는 키워드를 제공하여 getter와 setter 메서드를 지원한다.

// 아래와 같은 방법으로 get/set 메서드를 정의하고  set에서의 파라미터와 get에서의 return 값이 같아야 한다.

public function set Annual(paramAnnual:String):void{
    _annual = Number(paramAnnual);
   
    if(_annual<=2000){
     tax = _annual * 0.05;
    }else if(_annual <= 3000){
     tax = _annual * 0.07;
    }else if(_annual <= 4000){
     tax = _annual * 0.08;
    }else if(_annual <= 5000){
     tax = _annual * 0.1;
    }else{
     tax = _annual * 0.15;
    }
   }  
   
   public function get Annual():String{
    return "연봉 :" + _annual.toString() + "만원";
   }


호출 하는 방법은 다음과 같다.

var temp:String;
Annual = "test"; 이렇게 호출하면 setter가 되는 것이고
temp = Annual; 이라고 하게 되면 getter가 호출 되는 것이다.

어떤 면에서는 편리하지만. 확실히 명시적이지 않기 때문에 혼란을 줄 여지가 있지 않나 싶다.

브라우저에서 지원하는 히스토리 기능 같은것을 플렉스로 지원 할 것이냐 말 것이냐를 선택 할 수 있다.

브라우저에서 뒤로 가기 버튼을 누르더라도 플렉스 내의 히스토리에서

이전에 했던 플렉스 메뉴로 돌아간다던가 하는 것이 가능하다.

아래 그림에서 가장 하단에 있는 Enable Intergration with browser navigation 항목을

토글하여 지원 / 지원 안함으로 구분 지을 수 있다.

 <mx:Script>
  <![CDATA[
   
   private function onClick(event:MouseEvent):void{
    trace("hello");
   }

   // Add event 를 클릭하면 btn 에 마우스 이벤트를 등록하여
   // 앞으로 btn을 클릭하였을때 oncClick 함수를 실행하도록 한다.
   private function addEvent():void{
    btn.addEventListener(MouseEvent.CLICK, onClick);
   }  
   
   
   // Remove event 를 클릭하면 btn 에 마우스 이벤트를 삭제하여
   // 앞으로 btn을 클릭해도 아무 반응이 없게 한다.
    private function removeEvent():void{
    btn.removeEventListener(MouseEvent.CLICK, onClick);
   }
  ]]>
 </mx:Script>
 
 <mx:Button id="btn" label="hi" />
 <mx:Button label="add event" click="addEvent()"/>
 <mx:Button label="remove event" click="removeEvent()" />

private var dataAC:ArrayCollection = new ArrayCollection([
   // 생성자에 parameter를 줄 경우에는 {} 로 감싸 표현해 준다. JSON과 비슷..
    {label:"월요일", day:17},
    {label:"화요일", day:18},
    {label:"수요일", day:19},
    {label:"목요일", day:20},
    {label:"금요일", day:21}    
   ]);


JSON 과 비슷한 경향을 보인다.

저런식으로 해 놓으면 아래와 같이
Repeater를 이용하여 반복 출력 할 수 있다.

<mx:Repeater id="rp" dataProvider="{dataAC}">
 <!--
  id의 currentItem으로 접근하면 현재 돌아가고 Collection index의 데이터가 온다.
  Repeater는 타 반복문과 비슷하지만 반복의 시작과 종료를 정할 수 있는 for문과 달리
  dataProvider에 Binding되어 있는 데이터, 즉 ArrayCollection의 길이만큼 돌아간다.
 -->
 
  <mx:Button label="{rp.currentItem.label}"  />
 </mx:Repeater>

 <mx:Button label="추가" click="addComponent()" />
 <mx:Button label="삭제" click="removeComponent()" />
 
// 추가 버튼을 누르면 VBOX에 버튼을 생성하여 추가한다.
 <mx:VBox id="vb" width="100%" height="100%" />


1. 우선 추가 버튼을 눌렀을 때 버튼이 생성되게 해보자.

   private var cnt:int;
   private function addComponent():void{
    if(vb.getChildren().length < 5){
     cnt++;
     
     /**
      * 사용자가 추가 버튼을 클릭하면 실행되는 함수.
      * 버튼 객체를 하나 생성하여 속성값을 지정한 다음
      * 이벤트 리스너를 등록하여 준다.
      * vBox에 버튼 객체를 추가한다.
      *
      */
     var btn:Button = new Button();
     btn.label = "동적버튼" + cnt;
     
     /**
      *
      *  flex 이벤트란..? 플렉스 컴포넌트에서 호출되는 이벤트..??
      *  ADD이벤트와 REMOVE이벤트를 등록하여 버튼이 추가되거나 삭제될때
      *  메시지를 보여주기 위해 eventHandler라는 함수를 하나 만든다.
     */
     btn.addEventListener(MouseEvent.CLICK, onClick);
     
     
     btn.addEventListener(FlexEvent.ADD, eventHandler);
     btn.addEventListener(FlexEvent.REMOVE, eventHandler);
     
    // 버튼 생성
     vb.addChild(btn);    
    }else{
     mx.controls.Alert.show("5개 이상은 만드실 수 없습니다!!!!!!!");
    }
   
   }


// 컴포넌트에서 실행된(?) 이벤트를 받아와서 어떤 타입의 이벤트인지 Console창에 출력.
   private function eventHandler(e:FlexEvent):void{
    var btn:Button = e.currentTarget as Button;
    trace(e.type + ":" + btn.label);
   }

private function onClick(e:MouseEvent):void{
    // as 키워드를 이용하여 형변환을 할 수 있다.
    // 아래 소스는 e.currentTarget이라는 객체를 DisplayObject형으로 형변환을 한 것이다.
    // 사용자가 클릭한 currentTarget을 삭제 하는 소스이다.
    var btn:Button = e.currentTarget as Button;
   
    // 이벤트 리스너가 포함된 객체를 remove 하였기 때문에 이벤트 리스너가 더 이상 존재할 필요가 없으므로
    // 해당 이벤트 리스너를 삭제 해 주는 작업이 필요하다
    // 아래 코드는 그런 작업을 해주는 녀석이다-0-
   
    btn.removeEventListener(MouseEvent.CLICK, onClick);
   
    vb.removeChild(e.currentTarget as DisplayObject);
   }
   
   // 부모 노드를 죽일때 자식노드를 모두 없애고 죽이는게 좋다
   // removeAllChildren(); 을 이용하면 된다.
   private function removeComponent():void{
   
    if(vb.getChildren().length <= 0){
     mx.controls.Alert.show("지울 버튼이 없어요!!!!!!");
    }else{
     vb.removeAllChildren();
    }
   }

우선 컴포넌트 mxml을 만든다.



컴포넌트를 만든 다음에.

<mx:VBox horizontalAlign="center">  
   <mx:Label id="lb2ndDayCondition" text="{ '('+ forecastCondition[1].day_of_week.data +')'} />
   <mx:Image source="http://www.google.co.kr{forecastCondition[1].icon.data}" />
   <mx:Label text="{forecastCondition[1].low.data + '/' + forecastCondition[1].high.data}" />  
</mx:VBox>

위와 같이 각각의 날짜별로 만들었던 날씨 정보 출력을 반복을 피하기 위해 컴포넌트로 만들기로 한다.



위에서 만든 컴포넌트 mxml파일에
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
 <mx:Script>
  <![CDATA[
   [Bindable] public var item:Object;
   
  ]]>
 </mx:Script>
 <mx:Label text="{ '('+ item.day_of_week.data +')'} "/>
 <mx:Image source="http://www.google.co.kr{item.icon.data}" />
 <mx:Label text="{item.low.data + '/' + item.high.data}" />
</mx:VBox>

이런 코드를 작성하여 item이라는 변수로 접근이 가능하게 한다.

만들어진 컴포넌트를 아래와 같이 컴포넌트 사이에 추가한다.


그럼 기존 소스에
<ns1:WeatherInfo item="{forecastCondition[0]}" /> 요런 소스가 생긴다.
WeatherInfo는 파일명이고 item은 컴포넌트에 미리 작성했던 변수명이다.
거기에 google API 에서 return한 forecastCondition 배열에 접근하여 컴포넌트를 동적으로 생성할 수 있다.

같은 방법으로 4개의 배열을

<ns1:WeatherInfo item="{forecastCondition[1]}" />
  <ns1:WeatherInfo item="{forecastCondition[2]}" />
  <ns1:WeatherInfo item="{forecastCondition[3]}" />

요렇게 생성하면 총 4개의 컴포넌트가 동적으로 생성이 된다.

기존 클릭 이벤트 코드도 조금 변경하여

<mx:Button label="날씨보기" click="requestHandler()"   labelPlacement="bottom"/> 에서

<mx:Button label="서울" click="requestHandler('seoul')"   labelPlacement="bottom"/>
위와같이 변경하여 날씨를 지역별로 가져오게끔 button을 생성한다.



이와같이 누르면 지역명에 따라 해당 지역의 정보가 return 되는 것을 확인 할 수 있다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Script>
  <![CDATA[
   import mx.binding.utils.BindingUtils;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.ResultEvent;
   

   // 서버에 요청을 하는 핸들러
   private function requestHandler():void
   {
    // api로 전송할 parameter를 정의한다.
    var params:Object = new Object();

    // seoul의 날씨를 얻기 위한 parameter 정의
    params.weather = "seoul";
    srv.send(params);
   }

   [Bindable] private var currentCondition:Object;
   [Bindable] private var forecastCondition:ArrayCollection;
   
   // 서버의 응답을 처리하는 핸들러
   private function resultHandler(event:ResultEvent):void
   {
    // 현재 날씨 정
    
    currentCondition = event.result.xml_api_reply.weather.current_conditions;
    
    // 첫째날 날씨 정보
    forecastCondition = event.result.xml_api_reply.weather.forecast_conditions;
        
// 바인딩을 했기 때문에 아래 정보는 주석 처리 한다.
//    lb1stDayCondition.text = forecastCondition[0].day_of_week.data;
//    lb1stDayCondition.text += forecastCondition[0].low.data;
//    lb1stDayCondition.text += forecastCondition[0].high.data;
//    lb1stDayCondition.text += forecastCondition[0].condition;
   }
  ]]>
 </mx:Script>
 <mx:Button label="서버요청" click="requestHandler()"  />
 
  // google API 에 접속하기 위한 주소를 정의
  // url 로의 요청을 HTTPService를 이용해 접근하고 그 결과를 받는 정보를 result에 받는다. 
  // 결과는 xml로 return 된다. 직접 브라우저에 주소를 입력해 보면 xml형태의 결과물을 확인할 수 있다.
  // 마치 ajax의 callback 함수와 같은 역할을 한다고 생각된다.
 <mx:HTTPService id="srv" url="http://www.google.co.kr/ig/api"
  result="resultHandler(event)" />  
  
 <mx:Panel title="날씨 정보"  fontSize="20"  horizontalAlign="center" textAlign="center">
  <mx:Label text="현재날씨 : {currentCondition.condition.data + '( ' +
  currentCondition.temp_c.data+ ' ) '
  }" />
 
 <mx:HBox horizontalAlign="center" verticalAlign="middle">
  <mx:VBox horizontalAlign="center">   
   <mx:Label id="lb1stDayCondition" text="{ '('+ forecastCondition[0].day_of_week.data +')'} "/>
   // 아래와 같이 이미지의 경로를 배열로 접근하여 해당 날씨 정보의 이미지를 가져올 수도 있다.
   <mx:Image source="http://www.google.co.kr{forecastCondition[0].icon.data}" />
   <mx:Label text="{forecastCondition[0].low.data + '/' + forecastCondition[0].high.data}" />   
  </mx:VBox>
  
  <mx:VBox horizontalAlign="center">   
   <mx:Label id="lb2ndDayCondition" text="{ '('+ forecastCondition[1].day_of_week.data +')'} "/>
   <mx:Image source="http://www.google.co.kr{forecastCondition[1].icon.data}" />
   <mx:Label text="{forecastCondition[1].low.data + '/' + forecastCondition[1].high.data}" />   
  </mx:VBox>
  
  <mx:VBox horizontalAlign="center">   
   <mx:Label id="lb3rdDayCondition" text="{ '('+ forecastCondition[2].day_of_week.data +')'} "/>
   <mx:Image source="http://www.google.co.kr{forecastCondition[2].icon.data}" />
   <mx:Label text="{forecastCondition[2].low.data + '/' + forecastCondition[2].high.data}" />   
  </mx:VBox>
  
  <mx:VBox horizontalAlign="center">   
   <mx:Label id="lb4thDayCondition" text="{ '('+ forecastCondition[3].day_of_week.data +')'} "/>
   <mx:Image source="http://www.google.co.kr{forecastCondition[3].icon.data}" />
   <mx:Label text="{forecastCondition[3].low.data + '/' + forecastCondition[3].high.data}" />   
  </mx:VBox>
 </mx:HBox> 
  
 </mx:Panel>
 
 
</mx:Application>



실행 화면

바인딩 : text={parent.childe.data} 같이 xml에 정의된 값을 바인딩을 통해 가져올 수 있다.
            EL태그와 비슷한 양식을 보인다.