머드초보의 블로그

전 Array가 좀 헷깔리더군요-_-;
Array랑 ArrayCollection이 차이가 없는건지-_-; 뭐가 다른건지-_-;

ActionScript에는 배열이라는 게 없다더군요.
어떤 타입이든 다 넣을 수 있는 Collection이라고 하네요.
즉, 자바에서 벡터, 리스트 뭐 이런건가요? ^^

ArrayCollection은 데이터가 바뀌는 것을 모니터링이 가능하답니다.
바인딩해주면 값 바뀌면 자동으로 바뀐다 이런 얘기를 했는데 뭔가 테스트가 필요하겠군요.

DataGrid
요거이도 빠지면 Flex가 아닌 것입니다 ^^ 마스터 하도록 해야합니다!^^
dataProvider라는 것에 값을 넣으면 DataGrid에 값이 표현됩니다.
또한 DataGrid는 자유로워서 콤보박스, 체크박스 등도 넣을 수 있더군요(첨 알았음 ^^)
DataGrid를 이용해서 구구단을 출력해봅시다!

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 applicationComplete="setGuGuDan()"
 backgroundColor="0xffffff" backgroundImage="">
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.dataGridClasses.DataGridColumn;
   import mx.controls.Alert;
   
   [Bindable]
   public var dp:ArrayCollection = new ArrayCollection();
   
   public function setGuGuDan():void {
    for (var i:int=1; i<=9; i++) {
     var obj:Object = {};
     for (var j:int=2; j<=9; j++){
      obj["dan"+j] = j + " X " + i + " = " + (j*i);
     }
     dp.addItem(obj);
    }
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{dp}">
  <mx:columns>
   <mx:DataGridColumn headerText="2단" dataField="dan2"/>
   <mx:DataGridColumn headerText="3단" dataField="dan3"/>
   <mx:DataGridColumn headerText="4단" dataField="dan4"/>
   <mx:DataGridColumn headerText="5단" dataField="dan5"/>
   <mx:DataGridColumn headerText="6단" dataField="dan6"/>
   <mx:DataGridColumn headerText="7단" dataField="dan7"/>
   <mx:DataGridColumn headerText="8단" dataField="dan8"/>
   <mx:DataGridColumn headerText="9단" dataField="dan9"/>
  </mx:columns>
 </mx:DataGrid>
 
</mx:Application>
[/code]
DataGrid를 하나 선언해서 dg라는 id를 줬네요. dataProvider는 dp(ArrayCollection)입니다.
바인딩할 때에는 {}를 붙여주는 거라고 하네요.
DataGrid안에 columns태그를 넣어주고 이 태그안에는 DataGridColumn해서 2단부터 9단까지 넣어줬습니다.
headerText는 실제 출력되는 이름을 말하는 것이구요. dataField는 해당 필드의 이름을 말하는 겁니다.

위에 as를 보도록 합시다.
만약 정적으로 넣게 된다면 이렇게 되겠죠.
{dan2: "2 x 1 = 2", dan3: "3 x 1 = 3", dan4: "4 x 1 = 4"},
{dan2: "2 x 2 = 4", dan3: "3 x 2 = 6", dan4: "4 x 2 = 8"},
{dan2: "2 x 3 = 6", dan3: "3 x 3 = 9", dan4: "4 x 3 = 12"},
          쭈우우욱~

동적으로 넣게 되면 저 {} 이게 하나의 object가 됩니다.
그래서 object를 하나 선언해서 obj["dan2"] = 2 x 1 = 2; 해버리면 dan2: 2 x 1 = 2가 생기고,
obj["dan3"] = 3 x 1 = 3; 하면 dan3: 3 x 1 = 3이 생기고 그럽니다 ^^
이렇게 9단까지 만든 한줄의 object를 ArrayCollection에 addItem해버리면 됩니다.

ActionScript는 배열의 개념이 아니기때문에 가능한 것이라고 하더군요 ^^
어쨌든 굉장히 유연해요-_-;

차트를 보도록합시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 width="100%" height="100%">
 
 <mx:XML id="results" xmlns="">
  <gen>
   <result month="Jan-03">
    <apple>200781</apple>
    <orange>225971</orange>
    <banana>161280</banana>
   </result>
   
   <result month="Feb-03">
    <apple>188249</apple>
    <orange>179611</orange>
    <banana>150795</banana>
   </result>
   
   <result month="Mar-03">
    <apple>229774</apple>
    <orange>214767</orange>
    <banana>189889</banana>
   </result>
  </gen>
 </mx:XML>
 
 <mx:ColumnChart id="chart" dataProvider="{results.result}"
  showDataTips="true" width="100%" height="100%">
  <mx:horizontalAxis>
   <mx:CategoryAxis dataProvider="{results.result}"
    categoryField="@month" />  
  </mx:horizontalAxis>
 
  <mx:series>
   <mx:Array>
    <mx:ColumnSeries
     yField="apple" displayName="Apple" />
    <mx:ColumnSeries
     yField="banana" displayName="Banana" />
    <mx:ColumnSeries
     yField="orange" displayName="Orange" />
   </mx:Array>
  </mx:series>
 </mx:ColumnChart>
</mx:Application>
[/code]
가장 일반적인 컬럼차트인데요. dataProvider는 results의 result로 지정했네요.
horizontalAxis는 가로값은 month로  "Jan-03", "Feb-03", "Mar-03" 으로 나오구요.
series안에 ColumnSeries가 있는데 3가지가 있네요.
apple, banana, orange 값을 보여주는데 displayName은 앞글자는 대문자로 표기를 합니다 ^^

다른 차트도 해보시면 알겠지만 사용법은 비슷합니다.
여러개의 차트를 섞어서도 사용할 수 있습니다.
LineChart와 PlotChart를 동시에 사용할 수 있습니다. 라인차트는 줄만 나와서 그 해당 값이 어딘지 정확하게 집어줄 수 없는데 PlotChart는 가능하기 때문에 섞을 수 있습니다 ^^

마지막에 sprite했는데 졸려서 소스를 못 담아왔군요-_-;

여기까지-_-;

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준거 한번 씩 해보고 확인해보랍니다. ^^

다음주가 기대되는군요 ^^

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

다음으로-_-;