오늘은 컴포넌트(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보여주고 남은 것은 다 공백으로해서 컨테이너 끝에 붙어있겠죠? ^^

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

 
Posted by 머드초보
,
 
ActionScript에서 상속-_-;













부모클래스
[code]package com.withflex.myclasses
{
 public class MyClass
 {
  protected var myname:String;
 
  public function setMyname(myname:String):void {
   this.myname = myname;
  }
 }
}
[/code]
자식클래스
[code]
package com.withflex.myclasses
{
 public class MySubClass extends MyClass
 {
  public override function setMyname(myname:String):void {
   this.myname = myname;
   trace(myname);
  }
 
  public function getMyname():String {
   return myname;
  }
 }
}

[/code]
MyClass를 상속받았어요. 그래고 setMyname을 오버라이딩하고, getMyname을 추가했네요.

[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="initApp()">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import com.withflex.myclasses.MySubClass;
   import com.withflex.myclasses.MyClass;
   
   private var myObj:MyClass;
   private var mySubObj:MySubClass;
   
   private function initApp():void {
    myObj = new MyClass();
    myObj.setMyname("성종천"); //이눔은 trace안찍힘-_-;
   
    mySubObj = new MySubClass();
    mySubObj.setMyname("성종천"); //이눔은 찍힘-_-;
   }
   
   public function traceName(event:MouseEvent):void {
    Alert.show(mySubObj.getMyname());
   }
  ]]>
 </mx:Script>
 <mx:Button label="버튼입니다" click="traceName(event);"/>
</mx:Application>
[/code]
아....잘되네요.

인터페이스도 되네요.
File -> New -> Action Script interface선택!
[code]
package com.withflex.myclasses.interfaces
{
 public interface IMyClass
 {
  function setName(names:String):void;
 }
}
[/code]

[code]package com.withflex.myclasses
{
 import com.withflex.myclasses.interfaces.IMyClass;
 
 public class MyClass implements IMyClass
 {
  protected var myname:String;
 
  public function setMyname(myname:String):void {
   this.myname = myname;
  }
 }
}
[/code]

그외 액션스크립트 관한 거.

ActionScript는 " "랑 ' '랑 같은 역할을 합니다. 그 이유는 MXML에서는 property값이 ""이기때문입니다.

trace라는 내장함수가 있는데, 디버그모드에서만 작동합니다. 값을 찍어볼 수 있습니다.

도움말은 마우스대고 shift + f2입니다.

액션스크립트에서 생성한 것은 디자인모드에서 안 보입니다.

NaN은 Not a Number의 약자랍니다-_-;(뭔지 몰랐는데 ^^)

var arr:Array = []; 랑   var arr:Array = new Array(); 랑 같은 거랍니다 ^^

C#에서도 있는데 is랑 as연산자가 존재합니다.

/**      */ 라는 주석이 있는데 다큐먼트 주석이랍니다. 좀 더 알아봐야겠습니다 ^^

=== 연산자도 있는데 이것은 값뿐아니라 메모리도 참조하는지 확인한답니다 ^^

delete연산자가 있는데 그냥 변수에 null넣는 거랑 같은 거랍니다-_-;

for in, for each등 편한 for문을 제공합니다 ^^ c#에도 있어요

함수를 변수처럼 사용이 가능해요 ^^

dynamic클래스라는 게 있는데 아무것도 없는 것에 나중에 함수를 추가하고 그럴 수 있다네요. 비추랍니다-_-;

액션스크립트에서도 arguments가 있답니다.

뭐 등등 여러가지 얘기가 많고, 좋은 as3에 관한 ppt를 주셨는데 공개를 하면 안되는 거랍니다 ^^
굉장히 괜찮은 자료네요. 문법은 이것만 있으면 공부할 수 있겠어요 ^^

그리고, 책을 추천해주셨는데 Essential ActionScript 3.0
http://book.naver.com/bookdb/book_detail.php?bid=2882520

가격이.......-_-; 뭐이리 비싸지=-_-;

숙제도 내주셨어요. 컴포넌트익스플로러에서 컴포넌트 쭉 둘러보고 오시고,
ppt준거 한번 씩 해보고 확인해보랍니다. ^^

다음주가 기대되는군요 ^^
 
Posted by 머드초보
,
 

우선 한빛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에 이름이 들어갑니다.

다음으로-_-;

 
Posted by 머드초보
,
 
제가 제일 좋아하는 HelloWorld시간이군요-_-;

우선 Adobe Air를 받아야 합니다.
Window용으로 가볍게 받아서 설치합니다. 다음신공으로!
http://labs.adobe.com/downloads/air.html

Adobe Flex Builder 3 Beta 2를 받아야합니다.
Adobe 아이디가 있어야 합니다.
http://labs.adobe.com/downloads/ 
여기서 Flex Builder 3 Beta 2를 선택합니다.

여기에 AIR SDK가 포함되어 있습니다.
물론 AIR SDK만 받아서 컴파일하는 식으로 해도 되는데
전 클릭세대라서-_-;

자 우선 무쟈게 무거운 Flex Builder 3 Beta 2를 설치합시다.
StandAlone이든 Plugin방식이든 어떤 것으로 설치해도 됩니다.

Flex Builder를 실행해봅시다.

File -> New -> Flex Project를 만듭시다.
Project name은 "AirHelloWorld" 로 합니다.
Application type은 AIR를 할꺼니깐 당근 Desktop application (runs in Adobe AIR)를 선택합니다.
Finish를 클릭해서 프로젝트를 만듭시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
 
</mx:WindowedApplication>
[/code]
기본적으로 저렇게 되어있네요. 이건 WindowedApplication이라는 컴포넌트를 사용하는군요.
저기에 HelloWorld를 찍어봅시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"
title="Hello World">
<mx:Style>
Application
{
background-image:"";
background-color:"";
background-alpha:"0.5";
}
</mx:Style>
<mx:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication>
[/code]
Label컴포넌트를 하나 추가해서 Hello AIR라고 찍었네요. Flex랑 문법이 같아요-_-;
Run As를 실행해서 Adobe AIR Application을 선택하고 OK를 누릅시다.
사용자 삽입 이미지
아...예전에 빡씨게 윈도우프로그래밍을 공부하던게 생각나네요-_-;
이건뭐 디게 쉬워졌네요. 기존 C/C++기반의 윈도우즈프로그래밍보다 강력하다고는 말 못하겠지만, 웹과 연동하거나 데이터를 다루는 부분은 더욱 코딩하기 쉬워질 것 같네요.
MFC프로그래밍 해보신 분들은 알껍니다-_-;

이거를 배포해보도록 합시다-_-; install프로그램까지 친절하게 만들어주는군요-_-;

이클립스에 Flex Navigator에서 AirHelloWorld를 클릭한 뒤 export를 합시다.
그러면 Flex폴더안에 Export Release Version이라는 게 있습니다. 고걸 선택합니다.
다 default로 하고 export하는 파일의 확장자는 air인데, 이거를 더블클릭하면 자동으로 설치가 됩니다.
(물론 AIR가 설치된 Desktop에서만 되겠지요 ^^)

다음으로 넘어가면 Digital Signature라고 해서 디지털서명같은데요. 잘모르겠습니다-_-;
그냥 Create로 하나생성해서 이름쓰고, 비번정하고, 한다음에 비밀번호를 씁시다 ^^
(저작권 보호 그런건가요?-_-;)

그다음 Finish를 클릭합니다. 그러면 air파일이 생성되었습니다.
이거를 설치해봅시다.
export한 파일을 찾아서 더블클릭합니다.
사용자 삽입 이미지
그러면 저렇게 뜨는데 install을 클릭해서 설치를 해봅시다.
desktop에 아이콘을 추가할 꺼냐고 묻네요.
설치후에 application을 실행할껀가도 묻는군요.
어디다 설치할지도 묻네요. Program Files로 되어있을텐데 저기다 설치하면 자동으로 폴더가 AirHelloWorld가 만들어지게 됩니다. 설치가 완료되면...
아까 플렉스에서 실행한 화면이 뜨네요-_-;

지울때에는 프로그램 지울 때 처럼 지우세요-_-;
사용자 삽입 이미지

이거 뭔가 새로운 세계에 온 듯 하네요-_-;

따라하기 출처 - Developing AIR Applications with Adobe Flex (adobe)
 
Posted by 머드초보
,
 

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

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

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









[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로 하는군요-_-; 뭐 저런식으로 하니까 되더군요-_-;

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

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108
 
Posted by 머드초보
,