flex 컨트롤과 데이터베이스 연동

일반적으로 플렉스에서 db연동은  dataProvider 로  연결되는데

데이터 바인딩을 이용하게 된다.

데이터 바인딩이 이뤄지게 하려면 속성값을 표시할때 { } 기호를 써서  <mx:컴포넌트명 속성 = "{참조값}"/>  과 같이 사용한다.

액션 스크립트에서 일반적으로 선언해 사용하는 변수에 데이터 바인딩을 적용하려면

[Bindabale]

private var myData:ArrayCollection;

 

...

<mx:DataGrid dataProvider="{myData}".

     처럼  [Bindable] 을 명시해 줘야하지만  MXML에서는 내부적으로 [Bindable]이 명시 되어있기 때문에 생략해 줘도 된다.

     액션 스크립트 위의 구문을  MXML로 표기하면

private var myData:ArrayCollection;

 

...

<mx:DataGrid dataProvider="{myData}".  처럼만 표기해주면 된다.

   dataProvider  :  컴포넌트 간 데이터 연결 창구

   dataProvider를 사용해서 xml  데이터 값을 사용 할 수 있게 된다.

  플렉스에는 내부 xml구조가 몇가지 있는데

 배열값을 가지는  ArrayCollection  ,  그리고  리스트형의 <XMLListColection>  등이 있다.

ArrayCollection  를 사용할 때는

<mx:ArrayCollection id="myAC">
        <mx:Object label="사과" data="apple"/>
        <mx:Object label="포도" data="grape"/>
        <mx:Object label="멜론" data="melon"/>       
        <mx:Object label="체리" data="cherry"/>                       
    </mx:ArrayCollection>

 

    XMLListColection를 사용 할때는

mx:XMLListCollection id="myData">
        <mx:XMLList>
            <item label="메뉴" data="m">
             <item label="한식" data="k">
              <item label="비빔밥" data="k1"/>
              <item label="불고기" data="k2"/>              
              <item label="냉면" data="k3"/>                            
             </item>
             <item label="중식" data="c">
              <item label="짜장면" data="c1"/>
              <item label="짬뽕" data="c2"/>              
              <item label="탕수육" data="c3"/>                         
             </item>
            </item>
        </mx:XMLList>   
    </mx:XMLListCollection>

    처럼 사용 하게 된다.

    또한  <mx:Model> 로도 표현 할 수 있는데

<mx:Model id="myData">
        <items>
            <item label="한국" data="1"/>
            <item label="미국" data="2"/>
            <item label="일본" data="3"/>
        </items>
    </mx:Model>

       이렇게 기입하고  값을  arrayCollection 으로 가지고 올때는

     <mx:ArrayCollection id="myAC" source="{ArrayUtil.toArray(myData.item)}" />

위와같이     아이디를 먼저 지정해주고   source에   AraayUtile.toArray 메소드로    myData.item   위의 파란 부분을 루트 태그로 가지고 오게된다.

또한 다른 곳에 있는 xml데이터도  연동해서 사용할 수 있는데  

      <mydata.xml>   이란 xml 데이터가       data 폴더안에 있다고 가정할때

  <mx:Model id="myData">
        <items>
            <item label="한국" data="1"/>
            <item label="미국" data="2"/>
            <item label="일본" data="3"/>
        </items>
    </mx:Model>

    <mx:Model id="myData"  source="data/mydata.xml"/>       mx모델로 먼저 가지고 온다음  
    <mx:ArrayCollection id="myAC" source="{ArrayUtil.toArray(myData.item)}" />       arraycollection으로 변환해서 사용 할 수 있다