머드초보의 블로그

오늘은 컴포넌트(Component)에 대해서 집중적으로 다뤄봤는데요.

직접 사용해봐야지 완벽하게 익힐 수 있을 듯하네요 ^^

우선 크게 Container와 Control로 나뉘는군요.
Container는 VBox, HBox, Canvas, ViewStack 등등~
Control은 Button, DataGrid, Aleart 등등~

Container는 무엇을 담을 수 있는 건데요.

레이아웃형태로는 VBox, HBox, Canvas가 있구요.
VBox는 컴포넌트들을 세로로 정렬하는 거구요. HBox는 반대로 가로로 정렬하겠죠?
Canvas는 좌표값을 줘가면서 원하는 위치에 컴포넌트를 가져다가 놓는거에요.
대신 브라우저창 크기가 변경이 되면, Canvas는 그 위치를 지킨다는 것 같군요.

네비게이터형태로는 ViewStack, Tabnavigator, Arccordion이 있어요.
ViewStack이 빠진 Flex는 Flex가 아니래요 ^^

숙제를 내줬는데 UIComponent의 모든 property, method, event, style 등등의 속성들을 다 한번씩 써보고 느낌점을 정리해보라는군요. 작살나게 많군요-_-; 그래도 다 해봐야겠습니다 ^^

Sprite라는 것은 눈에 보이는 최소단위의 컨테이너라고 하는데 잘 이해가 가지 않아요 ^^
오늘 마지막 시간에 Sprite로 라인도 긋고 그랬는데 해봐야겠습니다 ^^

스타일지정하는법!
[code]해당컴포넌트.setStyle('backgroundGradientColors', [0xCCCCCC, 0xCCCCCC]);
[/code]
앞에 Style속성이름을 넣구, 뒤에는 값을 넣으면 되더군요!

property는 그냥 해당컴포넌트.x = 500; 이런식으로 넣어주면 돼요!

ViewStack
유용하고 자주 쓰는 컴포넌트랍니다 ^^
[code]뷰스택ID.SelectedChild = 해당컴포넌트ID;
or
뷰스택ID.SelectedIndex = 0~~;
[/code]
클랙했을 때 저렇게 SelectedChild에 컴포넌트id를 넣어주면 화면이 다른건 숨기고 그 해당 컴포넌트를 보여지게 되죠. 이 컴포넌트들은 당연히 ViewStack태그 안에 있어야 겠죠?

ViewStack속성에 creationPolicy라고 해서 생성할 때 정책을 말하는 건데 보통 ViewStack은 auto가 기본값으로 되어있어서 첫번째 놈만 먼저 생성되고 나머지는 SelectedChild에 들어가게 되면 생성하게 되는데요.
이렇게 되면 그 두번째, 세번째 컴포넌트들은 아직 안만들어져서 거기에 있는 것을 컨트롤하려고 하면 null에러 같은 것을 낸다는군요.
all로 하면 한꺼번에 다 생성하긴 하는데, 가능하면 피하라고 하는군요 ^^

Spacer
요고이는 처음 봤는데 별거 아니더군요. 예를 들어서-_-;
[code]<mx:HBox width="800">
  <mx:Label text="Spacer전에오는버튼" />
  <mx:Spacer width="100%" />
  <mx:Button label="Spacer다음에오는버튼"/>
 </mx:HBox>
[/code]
그냥 HBox의 width가 800이면 Label앞에 두고, 중간에 여백을 어느정도 주는 거죠 ^^
100%니까 Label하고 Button보여주고 남은 것은 다 공백으로해서 컨테이너 끝에 붙어있겠죠? ^^

뭔가 열심히 적어왔는데 이번주는 너무 피곤했군요-_-;
빡쎘습니다-_-;

우선 한빛ENI가 어딘지 몰라서 삽질하다가 겨우 찾아냈습니다.

이거 8시간동안 한번에 하려니 무쟈게 힘들군요-_-;
어쨌든 재미있게 들었습니다.

FlexComponent 운영자이신 브라이언(최성훈)님이 강의하시는데 너무 잘하시네요 ^^
첫시간이라서 FLEX에 대해서 간단한 소개와 AS3의 문법 등을 강의하셨습니다.

ActionScript3를 오늘 배운 결과 자바랑 완전 같군요! AS3를 잘다뤄야하는데 그것도 모르고 FLEX를 만졌다니 부끄러울 따름입니다. 완전 강력하다는 것도 느꼈어요. 불가능한게 없군요 ^^

앞으로도 더욱 멋진 강의가 기대되네요 ^^


이날 배운 내용.
우선 컴포넌트를 생성할 때 방법이 2가지가 있습니다.
XML태그로 컴포넌트를 생성하는 방법.
[code]<mx:Button label="버튼" />[/code]
ActionScript를 이용하여 컴포넌트를 생성하는 방법.
[code]var btn:Button = new Button();
btn.label = "이것은 런타임에 생성합니다.";
this.addChild(btn);
[/code]
액션스크립트에 있는 버튼은 런타임에 생성되므로, 미리생성해놓은 mx:Button태그보다 나중에 생깁니다.

커스텀 컴포넌트를 생성할 때에도 방법이 2가지가 있습니다-_-;
MXML을 하나 새로 만들어서 하는법.
File -> New -> MXML Component 해서 기본으로 깔리는 것을 정한 뒤 Finish!
[code]<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
 <mx:Label id="lb" text="Hello World!" />
 <mx:Button id="btn" label="버튼"/>
</mx:HBox>
[/code]
실제 메인 mxml에서는 이렇게 사용한다.
[code]<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:local="*"/>
<!-- 여기에서 xmlns를 정하고싶은 걸로 주고, 그 해당 package를 넣으면 됩니다.-->
 <local:CompControl /><!-- 새 컴포넌트만들때 이름을 넣어주면 됩니다.
</mx:Application>
[/code]
ActionScript를 이용해서 클래스를 생성한 뒤 하는 법.
폴더를 com/withflex/comp/에다가 New -> Action Script Class를 선택!
Name에 MyButton이라고 하고, Superclass는 mx.controls.Button을 받읍시다.
[code]package com.withflex.comp
{
 import mx.controls.Button;

 public class MyButton extends Button
 {
  public function MyButton():void {
   this.label = "액션스크립트클래스로 생성한 버튼";
  }
 }
}
[/code]
Button을 상속받아서 기본 label을 저렇게 바꿨습니다. 그냥 버튼 생성하면 저게 나오게 됩니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:btn="com.withflex.comp.*">
 <mx:Button label="버튼" />
 <btn:MyButton />
</mx:Application>
[/code]
패키지명을 저렇게 줬으니 저렇게 하면 되고, btn:MyButton만 해도 label에 이름이 들어갑니다.

다음으로-_-;

챠팅 부분을 해봅시다. 저도 이쪽은 잘몰라서 책에도 잘 안나와 있고 해서 가장 쉬운 차트로 했습니다-_-;

우선 예매한 연령별 현황을 보도록 합시다.

자바클래스 소스를 보도록합시다.









[code]
public double[] getAgestatus() {
  Connection con = null;
  Statement stmt = null;
  ResultSet rs = null;
 
  double status[] = new double[6];
  int age = 0, avg_age = 0, count=0;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   stmt = con.createStatement();
   String query =
     "SELECT Age FROM bs_Book,bs_Member WHERE bs_Book.ID = bs_Member.ID";
   rs = stmt.executeQuery(query);
   
   while(rs.next()) {
    age = rs.getInt("Age");
    avg_age += age;
    if(age < 20)   // 연령별로 예약수를 조사
     status[0]++;
    else if(age >= 20 && age < 30)
     status[1]++;
    else if(age >= 30 && age < 40)
     status[2]++;
    else if(age >= 40 && age < 50)
     status[3]++;
    else
     status[4]++;
    count++;
   }
   status[0] = (status[0] / (double)count) * 100; // 퍼센트로 계산
   status[1] = (status[1] / (double)count) * 100;
   status[2] = (status[2] / (double)count) * 100;
   status[3] = (status[3] / (double)count) * 100;
   status[4] = (status[4] / (double)count) * 100;
  } catch (SQLException e) {
   e.printStackTrace();
   return null;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (stmt != null) try { stmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
  return status;
 }
[/code]
이부분은 프로시저인지 뭔지로 할 수도 있는데 제가 할줄몰라서 클래스에 때려박았습니다-_-;
보시면 예약리스트와 멤버리스트를 조인해서 그 예약된 id의 나이만 출력하도록 합니다.
그래서 for문을 이용해서 20대인지 30대인지 등을 파악해서 status에 저장해서 그 배열을 리턴합니다.
그 status를 리턴하면 0에는 20대미만의 수, 1에는 20대의 수 등이 들어가겠죠.

플렉스로 가봅시다-_-;

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="100%" height="100%"
 title="나이별 예매현황">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   [Bindable]
   public var agestatus:Array = new Array();
   
   public function UpdateAgestatus():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
    srv.getAgestatus();
   }
   private function resultHandler(event:ResultEvent):void {
    var array:Array = event.result as Array;
    agestatus = [
       {name: "20대미만", value: array[0]},
       {name: "20대", value: array[1]},
       {name: "30대", value: array[2]},
       {name: "40대", value: array[3]},
       {name: "50대이상", value: array[4]},
    ];
    parentApplication.viewstack.selectedChild = parentApplication.ViewAgeStatus;
   }
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:ColumnChart width="100%" height="100%" dataProvider="{agestatus}"
   showDataTips="true" >
        <mx:horizontalAxis>
         <mx:CategoryAxis dataProvider="{agestatus}" categoryField="name"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
         <mx:LinearAxis minimum="0" maximum="100" />
        </mx:verticalAxis>
        <mx:series>
         <mx:ColumnSeries dataProvider="{agestatus}"
           xField="name" yField="value" />
        </mx:series>
    </mx:ColumnChart>
</mx:Panel>

[/code]
RemoteObject를 이용해서 getAgestatus를 호출합니다. 리턴값은 배열로 받습니다.

var array:Array = event.result as Array; 이렇게 하면 배열로 받아올 수 있습니다.
뭐든지 다 잘받아오는 플렉스입니다-_-;

agestatus라는 Array에 name이라는 것에 20대미만 이런식으로 쓰고 value에는 받아온 해당 값을 넣습니다.

가장 보편적인 차트인 ColumnChart를 사용해봅시다. dataProvider는 방금전에 만든 agestatus로 하고 horizontalAxis는 가로에 나타낼 문자열을 말하는 듯합니다. 20대, 30대 이런것을 넣기위해 name속성을 적용합시다.

verticalAxis는 세로축 말하는 거 같은데 저도 잘모르겠습니다. 책보고 따라한거라 ^^
뭐 최소값과 최대값을 설정하는 거 같습니다 ^^
mx:series에 xField에는 name이고 yField는 value로 하는군요-_-; 뭐 저런식으로 하니까 되더군요-_-;

좀더 연구해봐야겠습니다 차팅은 ^^