출처 : http://www.cflex.net/showFileDetails.cfm?ObjectID=415
May 12, 2006 - Filter a dataGrid with a comboBox
Dynamically load result values into a comboBox to be used to filter a dataGrid.

A common practice in Flex is to use a comboBox to filter the data that is displayed in a dataGrid.  In this tip, the goal is to display a dataGrid with data from an authors database table that has the following structure:

    authorId : String;
    authorName : String;
    status : String;

In addition, the user will be allowed to select from a comboBox that contains the different author status values and cause the author data in the dataGrid to be filtered.  It is recommended that you cast the result from a server call to an arrayCollection and use the arrayCollection as the dataProvider for the dataGrid.  By doing this, you will see that it is easy to manipulate and filter the data that is displayed.  Getting the data is beyond the scope of this tip, but there are plenty of examples available on that topic. 

First, cast the result to an arrayCollection:

 
The mxml would look like this:

      <mx:DataGrid id="dgAuthors"
                 dataProvider="{ authorsDataProvider }"/>

Next, dynamically load the comboBox with the unique author status values that exist in the search result.  
In this case, the possible author status values in the database are "Active", "Inactive" and "Deleted".  

Before proceeding though, let’s review the use-case.  The user is presented with a data grid view of the result 
from an authors search.  After viewing the grid, the user may wish to filter the result to only show the "Active" 
authors.  Sure, the "Active", "Inactive" and "Deleted" status values in the comboBox could be hard coded.  
But, in doing so, the program would have to be maintained when a new status value is added to the database.  
Also, the comboBox should only contain author status values that exist in the returned search result.  If the 
search result includes only "Active" and "Inactive" authors, the comboBox should only contain those same 
values (not “Deleted”).  If all of the possible author status values in the database were hard coded into the 
comboBox, the user would be able to select the "Deleted" value, which in this case would display a blank 
dataGrid.  We don't want to confuse the user.

The following code dynamically loads the author status values into an array that is used as the dataProvider 
for the comboBox.

     // Use the authorsStatusArray as the dataProvider for the comboBox.

 

     [Bindable]
     public var authorsStatusArray : Array = populateAuthorsStatusArray(authorsArray);

     public function populateAuthorsStatusArray(authorsArray:Array):Array 
     {
             var statusArrayHashMap : Object = new Object();
             var statusArray : Array = new Array;
             
             var n:int = authorsArray.length;
             for (var i:int = 0; i < n; i++)
             {
                    if (statusArrayHashMap[authorsArray [i].status] == undefined)
                    {
                               statusArrayHashMap[authorsArray [i].status] = new Object();
                               statusArray.push(authorsArray [i].status);
                    }
              }




             statusArray.sort();
             statusArray.unshift("All");

 // The "All" value is used programmatically to un-filter (reset) the result in the dataGrid. 



 
return statusArray;

      }

 Finally, filter the results in the dataGrid based upon the author status value that is selected in the comboBox. 

       public function filterAuthorsGrid():void
       {       
               authorsDataProvider.filterFunction=authorsStatusFilter;
               authorsDataProvider.refresh();   
       } 

       public function authorsStatusFilter(item:Object):Boolean
       {
               if (cboAuthorsStatusFilter.selectedItem != "All")
               {
                       return item.status == cboAuthorsStatusFilter.selectedItem; 

               } else {

                        return true;
               }
       }

      <mx:ComboBox id="cboAuthorsStatusFilter" 
               dataProvider="{ authorsStatusArray }"
               change=" filterAuthorsGrid();"/>

That’s all there is to it!  Because the dataProvider for the dataGrid utilizes binding, the grid will display the filtered result automatically, when the user selects an author status value in the comboBox.  Please keep in mind, that this is just a tip and may contain some typos.  However, you should be able to grasp the concepts from the code.

Good Coding,

Tim Hoff

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS");
java.util.Date date = sdf.parse("2004-07-24 09:45:52.189");
java.sql.Timestamp timestamp = new java.sql.Timestamp(date.getTime());

      




SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd hh:mm:ss");
try{
    String samplingTime = data.getSAMPLINGTIME();
    java.util.Date date = sdf.parse(samplingTime);
    java.sql.Timestamp timestamp = new java.sql.Timestamp(date.getTime());
    pstmt.setTimestamp(2, timestamp);
}catch(Exception ex){
    log.error(ex.getMessage());
} 
 
SimpleDateFormt 에서 parse 사용사 try문 안에 적어줘야됩니다~~

출처 : http://blog.naver.com/mobil52/150006800535

http://www.adobe.com/support/flashplayer/downloads.html

Download the Windows Flash Player 9 ActiveX control content debugger (for IE) 를 다운받아서 설치한다.

출처 : http://islet4you.tistory.com/27

포토뷰어라는 예제에 있는 것을 추출해 왔습니다
항상 모듈화라는 숙제를 가지고 보니 이런 좋은 예제가 아닌가 합니다.

package samples.photoviewer
{
 import flash.events.*;

 import mx.collections.ArrayCollection;
 import mx.collections.IViewCursor;
 import mx.core.Application;
 import mx.rpc.events.ResultEvent;
 import mx.rpc.http.HTTPService;
 import mx.utils.ArrayUtil;

 public class PhotoService
 {
  private var service:HTTPService;

        [Bindable]
  public var galleries:ArrayCollection;

  public function PhotoService(url:String)
  {
   service = new HTTPService();
   service.url = url;
   service.addEventListener(ResultEvent.RESULT, resultHandler);
   service.send();
  } // httpservice를 이용한 호출

  private function resultHandler(event:ResultEvent):void
  {
      var result:ArrayCollection = event.result.galleries.gallery is ArrayCollection
          ? event.result.galleries.gallery as ArrayCollection
          : new ArrayCollection(ArrayUtil.toArray(event.result.galleries.gallery));
      var temp:ArrayCollection = new ArrayCollection();
      var cursor:IViewCursor = result.createCursor();
      while (!cursor.afterLast)
      {
          temp.addItem(new Gallery(cursor.current));
          cursor.moveNext();
      }
      galleries = temp;
  }
 }
} // 결과를 arraycollection으로 적용

이 actionscript를 적용해서 구현을 한 예제를 보면
<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
//
// Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
// All Rights Reserved.
// The following is Sample Code and is subject to all restrictions on such code
// as contained in the End User License Agreement accompanying this product.
// If you have received this file from a source other than Adobe,
// then your use, modification, or distribution of it requires
// the prior written permission of Adobe.
//
////////////////////////////////////////////////////////////////////////////////
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
 paddingBottom="0" paddingTop="0"
 paddingLeft="0" paddingRight="0"
    layout="vertical"
    pageTitle="Photo Viewer"
 creationComplete="init()">

 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.rpc.events.*;
   
   import samples.photoviewer.Gallery;
   import samples.photoviewer.PhotoService;  //위의 소스를 import
   
   [Bindable]
   private var gallery:Gallery;
   
   [Bindable]
   private var service:PhotoService;
   
   private function init():void
   {
    service = new PhotoService("data/galleries.xml"); //httpservice를 호출
   }
  ]]>
 </mx:Script>
 
 <mx:Style source="main.css" />
 
 <mx:Binding source="service.galleries.getItemAt(0)" destination="gallery" />
 
 <mx:ViewStack id="views" width="100%" height="100%">
 
  <ThumbnailView id="thumbnailView" gallery="{gallery}"
   slideshowView="views.selectedChild = slideshowView"
   carouselView="views.selectedChild = carouselView"/>
 
  <CarouselView id="carouselView" gallery="{gallery}"
   slideshowView="views.selectedChild = slideshowView"
   thumbnailView="views.selectedChild = thumbnailView"/>
 
  <SlideShowView id="slideshowView" gallery="{gallery}"
   thumbnailView="views.selectedChild = thumbnailView"
   carouselView="views.selectedChild = carouselView"/>
   
 </mx:ViewStack>
   
</mx:Application>

Viewstack을 가지고 처리를 해주는 것이다.
아울러 여기서 보여주는 콤포넌트에 대해서는 다음시간에 따로 설명을 하도록 하겠습니다.
조금씩 업무별로 가는 프레임웍에 대한 레퍼런스가 만들어지면 올리도록 하겠슴당 ㅋ

출처 : http://blog.naver.com/mash9/20046392694

Flex를 어느 정도 하신 분들이라면 HTTPService 사용과 데이터 바인딩(binding)에 익숙해지셨겠지만, 제가 만난 분들 중에도

종종 실수를 하시는 분들이 계십니다. 그 분들이 누군지 밝히고자 하는건 아니고..  HTTPService 에서 데이터를 읽어와

DataGrid까지 바인딩(binding)시키는 부분에서 실수하기 쉬운 부분에 대해 설명하려 합니다.

먼저 아래처럼 웹서비스(web service)를 선언해줍니다.

여기서 result="resultHandler(event)" 는 이벤트 내부적으로 event 라는 이벤트 인스턴스(instance)가 생성되는데 이것을

콜백함수(callback function)에 넣겠다는 뜻입니다. resultFormat 은 대부분 웹서비스는 XML 기반으로 데이터를 연동시킬 목적으로

구현할것이라면 e4x 라고 선언해주어야 나중에 뒷탈(?)이 없습니다. 종종 원치않은 바이너리가 들어가는 경우가 생깁니다.

많은 분들이 이 부분에서 실수를 하는데 '예제로 배우는 Adobe 플렉스 2' 에 (저를 포함한 많은 분들이 이 책으로 시작하셨죠)

DataGrid 에 데이터를 바인딩 시키기는 부분이 나오는데 책에서는 HTTPService.lastResult 를 바로 DataGrid에 바인딩 시킵니다.

HTTPService.lastResult 을 바로 DataGrid에 바인딩 시켰을경우 데이터가 1개의 노드가 존재할때 문제가 null 객체에 접근 에러가

뜨고 말지요. XML이 한개 였을경우 데이터가 어레이(array) 형태가 아닌 오브젝트(object) 형태라고 인식하기 때문입니다. 때문에

번거롭지만 위 처럼 XMLList를 통해 어레이(array) 형태란것을 인식시키고 이것을 바인딩된 변수 dataset에 넣어주는것입니다.

저 함수에서 DataGrid.dataProvider 에 넣어줄수도 있지만 그렇게 했을경우 정상적인 바인딩이 이루어지지 않을뿐더러 버그를

유발할수도 있습니다. 외부로 들어온 데이터는 저렇게 모두 바인딩 변수에 넣어주시는 편이 좋습니다.

바인딩을 설명하기위해 dataProvider 에 ArrayCollection 을 넣어서 설명하는 부분 때문에 ArrayCollection 에 담는 분도

계시더구요. 전에도 잠깐 언급했듯이 HTTPService 는 기본 XMLListCollection 을 사용하는것이 정석입니다.

XMLListCollection를 사용해야지만 또 나중에 필터링에 대해 깊이 들어갈때 도움이 됩니다.

마무리는 다음과 같이 선언해주면 끝입니다. 간단하지만 의외로 실수하기 쉬운 부분이죠.

Cairngorm Framework

1. Cairngorm Framework 정의
cairngorm은 사전적인 의미로는 연수정이란 뜻입니다.
발음을 하면 컨검? 주위에서는 그냥 캔곰이라고 부르더군요. 이하 강좌는 캔곰이라는 용어를 사용하여 진행하도록 하겠습니다. 알아서 이해해 주시면 감사…^^
캔곰 프레임워크는 Flex를 위한 작은 규모의 프레임워크입니다. 기존에 사용하던 프레임워크와는 차이가 많이 나죠. 저도 처음엔 뭐 이런게 프레임워크인가 생각했던 적이 있습니다. 하지만 그래도 몇가지 사항에서 중요합니다.
캔곰은 Flex Application을 사용하여 Enterprise Software를 개발하기 위한 디자인패턴들로 구현되어 있습니다. 또한 캔곰 사용의 장점은 동일한 패턴으로 서비스를 정의하고 관리함으로서 간결한 코드를 작성할 수 있습니다. 단점은 파일 개수가 많아 진다는 것이 아닐까 싶네요.

2. 캔곰 프레임워크 설치하기
캔곰 프레임워크는 Flex에서 사용하는 라이브러리 포맷인 swc 형태로 배포됩니다. 또한 소스코드까지 포함되어 있으므로 좀 더 구체적인 내용을 알고 싶은 분들은 소스코드를 분석하셔도 됩니다.

2.1 캔곰 프레임웍2.1을 다운로드 합니다.
URL : http://labs.adobe.com/wiki/index.php/Cairngorm

<그림 1>

2.2 다운로드 받은 파일의 압축을 풉니다.
압축을 풀면 bin 폴더에서 Cairngorm.swc 파일을 확인할 수 있습니다.

<그림 2>


2.3 프로젝트의 library path로 이동한 다음 ‘Add SWC’버튼을 클릭 한 후 bin폴더에 있는 Cairngorm.swc파일을 추가합니다.

<그림 3>


3. Cairngorm Framework 구조
3.1 캔곰은 MVC구조 형태로 패턴화 되어 있습니다. 프리젠테이션과 비즈니스 로직을 분리 할 수 있는 형태의 템플릿을 제공합니다.
3.2 캔곰 architecture

<그림 4>

- View : End User의 View화면을 지칭합니다. View는 사용자의 이벤트를 받아 CairngormEventDispatcher를 사용하여 Controller에 등록되어 있는 커맨드를 호출하는 역할을 담당합니다.
- Model : Controller와 View를 중계하는 역할을 담당합니다. 최종적으로 처리된 결과를 ModelLocator를 통해 View에 전달됩니다.
- Controller : Command를 실행하여 서비스를 요청하는 역할을 담당합니다. 처리된 결과는 ModelLocator를 통해 View에 전달됩니다.

3.3 캔곰 패키지 구조
각각의 기능 그룹별로 패키지 폴더를 구성합니다. 뭐 반드시 지켜야 하는 구조는 아니지만 되도록이면 동일한 형태의 Naming Rule을 사용하기를 권장합니다.

- Business : Delegate 클래스를 모아 놓은 폴더입니다. 그리고 데이터 서비스를 정의하는 Services.mxml도 이곳이 포함됩니다.
- Commands : Delegate를 호출하고 리턴된 결과 값을 View에 전달하는 역할을 담당하는 command 클래스를 모아 놓은 폴더입니다. Command 클래스는 캔곰에서 제공하는 Command,Responder 인터페이스를 상속받아 구현합니다.
- Control : command를 관리하는 controller 클래스를 모아 놓은 폴더입니다. CairngormEventDispatcher를 통해 Control에 등록된 Command를 실행합니다. Controller 클래스는 캔곰에서 제공하는 FrontController를 상속받아 구현합니다.
- Model : View들을 관리하는 역할을 담당하는 ModelLocator를 모아 놓은 폴더입니다. ModelLocator 클래스는 캔곰에서 제공하는 ModelLocator클래스를 상속받아 구현합니다(개인적으로는 사용 안 함).
- Vo : RemoteObject서비스를 사용할때만 해당되는 클래스일 듯 합니다. Value Object의 약어로서 View에서 표시될 속성들을 모아놓은 클래스입니다. Vo는 ValueObject를 상속받아 구현합니다. Vo사용의 장점은 타입 체크를 통해 좀 더 명확하게 무슨 정보 인지를 판단 할 수 있습니다.

4. 캔곰 사용하기
예제로 게시판 리스트와 게시글 읽기 기능 두 가지를 가지고 캔곰을 적용해 서비스 데이터를 연동해 보도록 하겠습니다. 단 RemoteObject를 정의하여 자바 클래스를 호출하는 부분은 “RemoteObject 사용하기” 강좌에서 계속 진행 할 예정입니다.

4.1 프로젝트의 패키지를 아래와 같이 business,command,control,event,model,view.vo를 정의합니다.

<그림 5>

4.2 이벤트 정의

- ViewEvent.as : CairngormEvent를 상속받은 클래스로서 리턴 페이지 객체를 저장하기 위한 view 속성을 포함하고 있습니다. 추후 커맨드를 호출하기 위해서는 반드시 ViewEvent를 생성하여 사용해야 합니다

사용자 이벤트 정의

<그림 6>

  *

initialize 이벤트

<그림 7>

  *

serviceResult” 이벤트 처리

<그림 8>

-

완성된 전체 게시판 구조는 아래 그림 형태로 실행됩니다

<그림 9>

○  Visual Studio 단축키

• Main Editor

• Text Editor