'AS3'에 해당되는 글 20건
2008.06.05 14:40
 이 글은 http://kuwamoto.org/ 에 올라온 Avoid ints in ActionScript의 번역 포스팅입니다.
에이레네님이 올리신 글을 보고 알게 된 포스트인데 상당히 좋은 내용이라서 번역하여 올려봅니다.
엉터리로 번역되었을 가능성 다분함.. 태클환영..;

2009. 8. 19. 내용 추가

이 글은 작성시 부터 여러 많은 개발자 분들이 내용에 오류가 있다고 지적해주셨습니다. 글의 내용에 대해서 지적해주시고 하는 것은 정말 감사드립니다. 제가 부족한 점이 많아 이해를 제대로 못하였거나, 글 작성에 문제가 있을 수 있기때문에 여러분의 덧글 하나하나가 정말 도움이 많이 되고 있습니다.

제가 본문을 수정하거나 혹은 이 글을 삭제하려고 했으나, 혹시 필요하신 분들이 있을 것 같아 본문을 수정하거나 삭제하지는 않겠습니다. 글을 다 읽으신 후 밑에 다른 분들의 덧글도 읽어보시면 더욱 좋은 것들을 배우실 수 있다고 생각합니다.

ActionScript 에서 int는 피하자구요!
Flex에 대해 알아갈수록, int에 대해서 알게 될수록, int를 사용하지 않게 되었습니다.
int가 정말 필요하지 않는 이상 int는 더 이상 사용하지 않을 것입니다.

이유 1 : Number가 int보다 실제적으로 더 빠릅니다.

놀랍게도, 사실입니다. ECMAScript Edition 4는 ECMAScript 이전 버전과 호환이 가능하게 설계되었습니다.
그래서 수학적으로 완전 무결하게 옳다라는 것을 보장하기가 어렵습니다.



어떤 방법이 더 빠를 것 같은가요? 제가 사용하는 컴퓨터에서는 int 를 사용하여 331ms 걸렸고, Number 는 291ms 걸렸습니다.



▲ 실제로 이 글을 읽는 분이 걸린 시간.

왜 그럴까요? 다음의 표현식을 보시죠.


만약 여러분이 j = 2^23 - 1 로 값을 시작했으면 어떠할 것 같습니까? 일부 프로그래밍 언어에서는 15번 더하자 마자 오버플로우 문제가 나타날 것입니다. 그러나 ECMAScript는 수의 개념이 좀 느슨합니다. 시스템에서 필요시 int에서 double로 변환되는 것을 지원하고 있습니다. 이 때문에 실질적으로 모든 수학적 계산은 내부적으로 int가 아니라 Number로 합니다.

Number로 모든 것이 완료되는 것을 감안해보면 int를 Number로 변환하는 비용과 그 만큼의 시간이 왜 int 를 사용하면 시간이 더 걸리는지에 대한 이유입니다.

다음은 Number는 실제로 int 보다 정확하게 정수 값을 저장시키기 때문에, int보다 Number 를 써야 되는 이유입니다.  

이유 2 : Number는 더 많은 bit를 가집니다.

이 이유는 후에 확실하게 할게된 Number에 대한 놀라운 사실입니다. 어떻게 알게된 것인지 설명해보겠습니다.

Date 객체에는 1970년 1월 1일 자정 부터의 시간을 milliseconds 단위의 숫자로 반환하는 time 이라는 속성이 있습다. 그 값은 정수형 값이고 ActionScript에는 long 타입이 없기 때문에, 반환 타입이 진짜 int (아니면 아마도 uint) 라고 가정했습니다.



왜 버그가 나는 걸까요?
 back of the envelope calculation 에서 1970년 1월 1일부터 2^32 milisecond 보다 더 값을 가지기 때문에 결과가 오버플로우 난다는 것을 알려주고 있습니다. 바보같은 실수죠.

int로 받으면 2,129,587,200, Number로 받으면 1,209,015,397,376. (2008년 4월 24일 기준)
위의 값으로 Date() 객체에 다시 넣어보면 각각 1970년 1월 26일, 2008년 4월 24일 이 출력됨. - 검쉰


그렇다면 int의 bit보다 더 큰 수를 써야할 때, ActionScript는 Long 타입이 없는 상태에서 어떻게 오버플로우나 이런 부정확한 값을 해결할 수 있을까요?



속을 살펴보면, Number는 아래에 있는 숫자형을 포함하고 있습니다.

  • int
  • uint
  • IEEE double

저는 항상 정수의 계산를 위해 double 형태를 사용하는 것을 피했습니다. 왜냐하면 모든 자리수가 보존될 것이라고 전혀 확신할 수 없었기 때문입니다. 왜냐하면, 개인적인 견해로는 정확성 측면에서 보자면 double은 int 보다 더 큰 범위의 수를 저장하기 때문입니다.

결국엔 ActionScript 의 경우에, Number는 더 큰 수의 범위를 저장할 수 있습니다. 그리고 어떤 정수형보다 정확합니다. 그건 아마도 ActionScript 는 64bit 의 정수형 타입이 없기 때문인 것 같습니다.

IEEE double 포멧은 다음과 같이 구현되어 있습니다.


부호를 위한 1 bit, 지수를 위한 11 bit, 숫자부분을 위한 52 bit. 따라서, 정밀도의 손실 없이 int보다 더 큰 bit의 수를 확실히 저장할 수 있습니다.

언제 int를 사용해야 될까요?

다음은 int의 적당한 사용방법입니다.

  1. 메모리를 절약하고 싶을 때 (비록 아주아주 많은 양의 저장공간이 있다 하더라도 결국에는 좋지 않은 영향을 줄 것입니다)
  2. 정수 값으로 강제변환 시 (예를 들어 var i: int = j / 2)
  3. 클라이언트에서 서버쪽으로 정수값을 보낼 때 버그를 줄이기 위해서 (값 전달용 객체안에 int 필드가 있을 때).

이제 다 설명했으니, 저는 이제 제 코드의 대부분의 Number를 확인해 볼 것입니다.


 4. loop 시에 카운터로 사용 - 예를 들어 for(var i:int = 0; i < X.length; i++)


--- 2008년 6월 16일에 추가

참고 : 제가 추가로 좀 더 서술하자면, 위에서 int보다 Number가 더 빠르다는 것은 특정 상황에 대해서 그렇다는 것입니다.

 int로 어떤 연산을 진행하는 것이 int보다 더 큰 Number로 연산을 진행하는 것 보다 더 빠른 것이 당연합니다. int가 Number보다 처리해야할 bit가 적으니까요. (var i:int = 0; i++; 이런경우) 다만, int형으로 연산중에 int형의 크기보다 더 큰 수를 처리해야하는 경우에 다른 언어에서는 잘못된 값이 출력이 됩니다만(이유 2에서 이런 문제를 지적하고 있습니다), AS3는 자동으로 Number 로 변환하여 연산을 진행합니다.
 이런 이유에서 "int가 내부적으로 Number로 변환되는(int의 크기를 넘어서는 연산) 경우에는 Number로 진행하는 것이 더 빠르다." 라는 것이 이 포스트의 속도 문제에서의 핵심입니다.

원저자가 약간 int에 대한 매우 안좋은 감정이 있긴 한 모양입니다만, 이 글을 보신 분들은 때에 따라서 잘 사용하시면 좋겠죠?


신고
Creative Commons License
Creative Commons License
Favicon of http://sunyoungheo.tistory.com BlogIcon 다롱냥 | 2008.04.24 15:04 신고 | PERMALINK | EDIT/DEL | REPLY
요호... 유용한 정보네염 꺅, 검쉰님은 머쨍이 히히
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 11:17 신고 | PERMALINK | EDIT/DEL
감사감사
Favicon of http://lovedev.tistory.com BlogIcon lovedev | 2008.04.25 11:46 신고 | PERMALINK | EDIT/DEL | REPLY
저도 느낌만으로 int는 절약할 때
Number는 정확한 숫자결과를 찾고 싶을때(나눗셈이나 좌표에 대한 controll을 할 때등) 사용하고 있었는데
이 글에서 명확하게 설명해 주셨네요.
좋은 정보 감사드립니다 : )
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.25 15:27 신고 | PERMALINK | EDIT/DEL
어설픈 번역으로 잘못된 정보를 접하신건 아닌지 더 걱정이. ^^;
방문해주셔서 감사합니다.
CyD707 | 2008.05.07 19:37 신고 | PERMALINK | EDIT/DEL | REPLY
저는 몇번을 테스트해봐도 number보다 int가 2배정도 더 빠른데요..;;;;
제 컴퓨터가 이상한건가요=_=;;;;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.07 23:02 신고 | PERMALINK | EDIT/DEL
회사컴이나 제 노트북, 기타 등등 에서 본 페이지 열어서 해봐도 Number 가 빠른 걸로 나오긴 합니다만.. ^^;

컴퓨터 사양이 어떤가요?
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.05.10 14:21 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 정보입니다. 적절하게 잘 사용하면 될거라 생각해요.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.10 22:34 신고 | PERMALINK | EDIT/DEL
이 포스트 번역하고 깨달은 사실인데,
레퍼런스에는 항상 루프 카운터는 int 로 쓰더군요 ㅎ
Favicon of http://blog.naver.com/kieat_seo BlogIcon 남남남 | 2008.05.12 12:25 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요... actionscript를 사용하면서 오래전에 생겼던 의문이 하나 있는데요... 늘 해답을 찾지 못하고 있는데 좀 도와주시겠어요?
http://blog.naver.com/kieat_seo 에 와보시면 제가 포스팅해놓은게 있습니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.12 17:40 신고 | PERMALINK | EDIT/DEL
AS3 의 버그인 것으로 사료됩니다.
저도 예전에 비슷한 문제를 겪었는데, 난감하더군요.
제가 겪었던 문제는 소수점 아래의 값들이 제대로 계산이 안되는...;;;
공룡 | 2008.05.14 00:43 신고 | PERMALINK | EDIT/DEL | REPLY
소수 부분이 2진수의 배수로 처리되서 나오는 어쩔수 없는 오차 입니다.
컴퓨터 자체의 처리 오차 죠...

2진수 :1 1 1 1 1 1 1 1 1 1 1 1 1
자릿수:4 3 2 1 0 -1 -2 -3 -4 -5 -6 -7 -8
값 :16 8 4 2 1 0.5 0.25 0.125 0.0625 0.03125 0.015625 0.0078125
비교해 보시면, 실제 0.4을 만들기 위해서는 0.25 + 0.0.... 이런 식으로 2진수의 1/2승수로 밖에 갈수 없어 가장 유사한 수를 가지고 계산 하게됩니다.

그래서 0.5는 2진수 0.1 로 나오나 특정의 수는 완전 일치 하는 수가 나올수 없는, 즉 최악의 경우 1/2^52의 오차가 생기게됩니다.
이를 근본적으로 해결하면, 실수가 아닌, (문자열) Decimal 처리 식이 있으나, 속도및 메모리의 문제로 인하여, 아주 정밀한 연산에서만 설계되어 사용됩니다.
<span class="name" | 2008.05.14 01:43 신고 | PERMALINK | EDIT/DEL
아하.. 그런 이유가 있었군요 ;)
좋은 정보 감사합니다.

그렇다면 정밀한 연산을 플렉스에서 한다는 자체가 부담이겠네요.... 음..
<span class="name" | 2008.05.14 11:41 신고 | PERMALINK | EDIT/DEL
String(mynum)대신에 mynum.toFixed(2)를 사용하니까 오차가 안 생기고 결과값이 딱 0.05씩 증가하더군요... ^^제 블로그에 수정한 swf파일을 업로드 했습니다....
박스농사 | 2008.05.21 15:07 신고 | PERMALINK | EDIT/DEL | REPLY
닌텐도 파는날 모이는건가요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.21 15:08 신고 | PERMALINK | EDIT/DEL
벌써 팔았답니다?
dongland | 2008.05.30 18:06 신고 | PERMALINK | EDIT/DEL | REPLY
j 랑 m 에 연산 부분에서 "/" 나누기 등 연산땜에 느려지는 듯 싶습니당
걍 단순히 연산을 ++ 증감 해두고 계산해 보면... Number 가 더 느립니다.
int 가 더 빠르더군요. 즉.. 속도가 int 가 더 느리다는 아닌듯 싶네요~


var intTime : Number;
var numberTime : Number;

var i : int;
var j : int = 0;

intTime = (new Date()).time;
for (i=0; i&lt;10000000; i++)
j++;

intTime = (new Date()).time - intTime;

var n : Number;
var m : Number = 0;

numberTime = (new Date()).time;
for (n=0; n&lt;10000000; n++)
m++;

numberTime = (new Date()).time - numberTime;

var message : String = "int version: " + intTime + "ms\n" +
"Number version: " + numberTime + "ms";

trace(message);
-------------
결과
-------------
int version: 63ms
Number version: 78ms
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.30 18:56 신고 | PERMALINK | EDIT/DEL
나누기 연산이 키 포인트입니다. ;)
증감 같은 경우는 당연히 크기가 작은 int가 더 빠릅니다. 하지만, 나누기 같은 경우는 내부적으로 int도 Number로
변환해서 작업을 하기때문에 그냥 Number로 하는 것 보다 더 시간이 오래 걸리는 것이지요. (이유1에 마지막에 서술)

들어주신 예처럼 j++ 경우는 int가 더 빠르기때문에 for문의 카운터로 이용하면 좋다. 라고 제가 글의 마지막 부분에 추가 서술해놓았습니다.

상황에 맞게 선택해서 사용하면 좋겠습니다. ;)
의견 감사합니다. ;)
Favicon of http://hangunsworld.com BlogIcon Han Sanghun | 2008.06.09 08:53 신고 | PERMALINK | EDIT/DEL | REPLY
이게 CPU에 따라서 다른 결과가 나오는 것인지???
어떤 컴퓨터에서는 int가 어떤 컴퓨터에서는 Number가 더 빠르네요.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.09 09:48 신고 | PERMALINK | EDIT/DEL
대부분의 컴퓨터에서는 Number 가 빠르게 나옵니다만,
몇몇 분들이 int가 더 빠르다고 하시네요 ^^;
약간 의심 가는 상황이 있습니다만, 정확하진 않네요 ^^;
혹시 알게되면 좀 가르켜주세요 ^^;;;
Favicon of http://wooyaggo.tistory.com BlogIcon wooyaggo | 2008.06.16 11:48 신고 | PERMALINK | EDIT/DEL | REPLY
아 제가 이 부분을 만나는 분들마다 설득하느라 가끔 고생하는데
검쉰님도 이부분을 오해하고 계신거 같습니다.

예전 Flash 9 알파때 해외 블로거의 포스트에서 발발된 내용인데
물론 아직도 갑론을박하는 분들도 계시는거 같은데
결론은 "쓰임새에 맞게 사용하면 int 가 더 빠른것이 맞다." 입니다.

즉 굳이 Number 타입을 int 에 넣는 행위를 반복하는 테스트로
int 가 느리다라는 결론은 옳지 않다는 것입니다.
AVM 은 Number 타입을 int 에 대입할때는
소숫점을 버리고 int 형으로 계산하는 과정을 거치게 되므로 당연히 그만큼의 시간이 더 걸리게 되죠.

int 에 정수값을 넣고 테스트하고
Number 에도 정수값을 넣고 테스트해야지만 올바른 테스트가 아닐까 합니다.

즉 이 테스트의 오류가 시작된 부분은 Number 에 유리한 숫자로 테스트를 진행했다라는 것입니다.

이상 제 의견이었습니다^0^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.16 14:19 신고 | PERMALINK | EDIT/DEL
덧글 달아주신 내용은 충분히 이해하고 있습니다 ;)

이 포스트는 제가 작성한 것이 아니고 번역한 거라서.. ㅎㅎ 원본 포스트에서 제가 이해한 것은 지적하신 것과 같이 Number에 유리한 숫자로 진행한 경우에 int보다 Number가 더 빠르다... 라는 것입니다.
물론 int에 유리한 숫자(예를 들어 i++) 같은 경우는 int가 빠른게 당연하겠죠 ;)

상황에 따라 알맞게 사용하는게 가장 중요한 것 같습니다. ;)
drawtree | 2009.03.03 00:06 신고 | PERMALINK | EDIT/DEL | REPLY
http://www.onflex.org/ACDS/AS3TuningInsideAVM2JIT.pdf

25페이지를 참조하기 바랍니다.

ECMA스크립트 사양에서 일부 수치 연산시 int에서 Number로의 암시적 형변환이 일어나며, 이 식을 int를 요구하는 연산으로 바로 전달하면 다시 int로의 암시적 형변환이 일어납니다. 이 두번의 암시적 형변환 때문에 성능이 저하되는 것이며, 부동소수 형식에 내재된 오류를 보정해야 한다는 것을 생각하며, 실제로는 int가 훨씬 더 빠릅니다.

int가 유리한 상황이나 Number가 유리한 상황이 따로 존재하기는 하지만 위에 올려진 포스트는 그것과는 무관하며, 암시적 형변환을 생각하지 못했기 때문에 도출된 결론입니다.

또한 Number는 부동소수 형식이며, 연산오류가 누적되기 때문에, 특히 for문의 인덱서로는 거의 사용할 수 없습니다. 굳이 사용해야 한다면 매 회마다 정수로 보정해야 하기 때문에 성능이 좋을 수 없습니다. (int형이 없고 인덱싱 오류가 발생해도 좋은 상황에서만 사용됩니다. double연산이 int와 속도가 같다 해도, 이러한 이유들 때문에 Number는 for문에서 좋은 성능을 보일 수 없습니다. 본문에서 for문의 인덱서로 부동소수를 사용하면서 오류 보정을 하지 않고 있는데, 그것 자체가 버그입니다.

하지만, ECMA스크립트 명세상 Number로 암시적 형변환이 일어날 수 밖에 없는 상황이라도 결과식을 다시 int로 강제 형변환을 수행해주면 컴파일러가 전체 식을 int연산으로 추론할 수 있으므로 최적화할 수 있다고 위 문서에서 밝히고 있습니다.

주의할 것은, 일반적인 언어에서는 오버플로우를 무시나 예외로 해결하지만, ECMA스크립트에서는 더 큰 용량의 수로 암시적인 형변환을 통해 이를 해결합니다. 일반적인 C 계열 언어에서 i+1 과 같은 코드는 절대적으로 결과가 int일 것이 보장되지만, AS는 Number로 형변환합니다. 이러한 암시적 형변환에 대해 잘 알지 못하면 위와 같이 int가 느리다는 결론을 얻을 수도 있습니다.

또한 본문 중에 실제적으로 모든 수를 Number로 수행한다고 언급한 부분이 있는데, 위와 같이 형식을 강제해주면 컴파일러가 형변화을 피하도록 최적화할수 있으므로 그렇지는 않습니다.

그리고, Number가 가장 정확하다는 언급이 있는데, 이는 보는 관점에 따라 달라집니다. 단순히 실제 수치와 일치를 말한다면 Number는 정확하지 않습니다. 하지만 수치 표현 범위를 기준으로 비교한다면 좀 더 정확하다고 말할 수도 있습니다. 하지만 일반적으로 정확하다는 표현은 수치의 일치를 가리키고, 수치 표현 범위를 가리킬 때는 좀 더 '정밀하다'는 표현을 사용합니다. 원문에서 precise라는 단어를 사용해 혼란을 주고 있는데 accurate라고 하는 것이 일반적입니다.

int가 필요한 상황은 한가지밖에 없습니다. 수치적으로 정확한 고성능 정수 연산이 필요한 경우입니다. 하지만 대부분의 성능 문제는 for문이나 배열 엑세스같은 카운트나 인덱스에서 발생하고, 이런 곳에는 int 외에는 답이 없습니다.

제생각에 이 포스트의 제목은 잘못되었습니다. 성능 때문이라면 위와 같은 for문에서는 int를 더욱 적극적으로 사용해야 합니다. 위에서 언급된 성능 문제는 Number로의 형변환 때문에 생기는 것이지 int의 문제가 아닙니다.

제가 뭐라할 부분은 아니지만, 구글 광고를 게시하는 블로그에서 자극적인 제목의 잘못된 정보를 게시하는 것은 사실 좋게는 안보이지요.
태클환영이라 태클 좀 달아봤습니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.03.04 20:58 신고 | PERMALINK | EDIT/DEL
긴 글 쓰시느냐 고생많으셨겠습니다. 지적 감사합니다.

그리고 폼으로 달아놨던 구글광고는 삭제했습니다. 내용적인 부분에서 태클은 항상 환영합니다.
뭐라할 부분이 아닌데 뭐라해주셔서 기분이 썩 좋지는 않군요.

당분간 글을 쓰지 않을 생각입니다만, 앞으로도 글 내용에 문제가 있으면 태클걸어주시면 감사하겠습니다.
Favicon of http://www.iruis.net BlogIcon ☆~ | 2009.08.17 12:26 신고 | PERMALINK | EDIT/DEL | REPLY
글 내용은 좋지만 int, uint는 이제 버려라. 라는 내용으로 와닿는 것에 대한건 어쩔 수 없네요. drawtree님의 지적이 그렇기 때문인듯합니다.
(아마 직접 작성한 글 내용이 아니라 번역 한 글인데 저렇게까지 지적당한것에 불쾌하신게 아닐까 생각되네요. 이젠 번역하기에 앞서 문제점부터 알아봐야 할듯하네요.)

본론으로 들어가자면 위의 댓글 중 남남남님의 소숫점 버그란것은 엑션스크립트의 버그가 아닙니다. IEEE표준에 의해 처리 되는 모든 소숫점 처리에 공통으로 가지고있는 문제입니다(참고: http://msdn.microsoft.com/ko-kr/library/c151dt3s.aspx).
남남남님의 댓글에서 해당 문제에 대해 포스팅 해보겠다는 내용을 보았는데 포스팅이 되어 있지 않아서 혹시나 아직도 AS의 버그로 아시는건 아닐까... 하는 생각에 오래 지난 글이지만 이렇게 댓글을 답니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.08.19 10:36 신고 | PERMALINK | EDIT/DEL
오해의 여지가 있어 글 자체를 삭제하려다가 그냥 두었습니다. 번역한 글 자체를 지적하는 것은 상관없습니다만(제 글에 대해 내용적으로 반박하는 것도 환영입니다), 그외의 것인 제 블로그에 이래라저래라 하는 것이 불쾌한 것이죠.

보다 건설적인 방법으로는 위의 drawtree님처럼 저렇게 글 하나를 쓸 정도의 덧글을 쓰는 것 보다는 자신의 블로그에 해당 글을 올려서 공유한다면 더 유익하지 않을까요? 트랙백이라는 유용한 기능이 있으니까요.
제가 심심해서 번역한 것이 아니라 유익하다 판단하여 공유하고자 올린 글이기때문에 더더욱 제 블로그에 대해서 지적한 것이 불쾌합니다.
앞으로는 왠만하면 외국 블로거의 글을 번역하지는 않겠습니다. 해서 좋은 소리 못듣겠군요.

그리고 소숫점 버그에 대한 의견은 감사합니다. 공통적으로 가지고 있는 문제라면, 해당 문제에 대해 API 에서 공지하던지, 아니면 해결했어야 된다고 생각합니다. 저 같이 경험이 일천한 개발자로써는 해당 내용을 잘 몰랐으니까요.
관련 내용에 대해 글을 쓰셔서 다른 개발자들을 위해 공개해주시는 것은 어떨까요?
공명 | 2009.09.18 10:36 신고 | PERMALINK | EDIT/DEL | REPLY
이상하네요!!
왜 저는 int가 number 보다 빠르게 나올까요??
제 컴이 이상한걸까요??
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.09.20 02:01 신고 | PERMALINK | EDIT/DEL
이번에 새로 산 (Intel Q9550) 컴퓨터에서 테스트해보니, 저도 int 형이 더 빠르게 나오네요.
FP 는 10,0,32,18 입니다.

뭔가 바뀐 것이 있는 모양입니다.
그냥 적절하게 사용하여야 된다. 라고 이해해주시면 좋겠네요.
Favicon of http://blog.chanik.com BlogIcon 찬익 | 2009.10.01 18:26 신고 | PERMALINK | EDIT/DEL | REPLY
둘다 1ms 1ms 나와서 성능 비교 불가 (...)
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.10.03 18:25 신고 | PERMALINK | EDIT/DEL
대충 짜자. -ㅁ-;;;
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.05.13 20:35
Canvas에 cornerRadius="20" 을 주어서 테두리를 라운드하게 변환한다고 하더라도, 자식 객체인 Button이 라운드 처리된 영역을 빠져나가면 아래와 같이 Button이 라운드 처리된 영역을 빠져나와있는 것을 보실 수 있습니다.




라운드로 처리하더라도 벗어나는 자식객체가 문제가 됩니다.
그렇다면, 만약에 컴포넌트가 원형이어야 된다면 어떨까요? 라운드 처리된 곳도 빠져나가는데, 원형의 컴포넌트가 필요하다면?
원형을 벗어나는 영역은 화면에서 나타나지 않게 하면 간단하게 해결 할 수 있습니다. 이럴 때 mask를 쓰면 됩니다.

maskDisplayObject 의 속성으로 mask로 할당된 DisplayObject 의 영역만큼만 해당 컴포넌트를 보여주게 됩니다.
나머지는 화면에 나타나지 않게 되죠. 아래는 레퍼런스에 있는 마스크 예제입니다.
 
 

▲ 네모난 mask를 Drag 해보세요. mask 영역만큼만 TextField가 보입니다.


그럼 위에서 보신 mask를 이용하여 Canvas를 상속받은 myCircleCanvas라는 이름의 둥근 컴포넌트를 만들도록 하겠습니다.
위의 소스에서는 mask를 Sprite 객체를 이용하였습니다만, Flex에서는 Canvas에 Sprite 객체를 addChild 하면 오류가 나므로(Canvas가 상속하고 있는 Container에 addChild 시 IUIComponent가 구현되어있어야 하므로), UIComponent를 이용하도록 하겠습니다.

( 참고: 왜 Sprite는 Canvas에 addChild 안되는 걸까요? )

 UIComponent Inheritance FlexSprite Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject

레퍼런스에서 마스크로 사용하였던 Sprite 나 현재 mask로 사용하는 UIComponent는
둘 다 DisplayObject를 상속하고 있으므로 mask 로 할당하여도 됩니다.


아래는 myCircleCanvas 클래스의 코드입니다.
컴포넌트의 구분을 위해 결과물에는 backgroundColor 값을 주었습니다.


 


결과물은 myCircleCanvas 객체에 Button을 올려놓은 모습입니다.
둥근 mask 영역 밖으로 벗어나는 Button의 영역은 화면에서 나타나지 않음을 확인하실 수 있습니다.
이상 mask를 이용하여 둥근 컴포넌트를 생성하는 것에 대해 간단하게 다루어 보았습니다.
신고
Creative Commons License
Creative Commons License
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.05.14 01:39 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 팁입니다. ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.14 01:44 신고 | PERMALINK | EDIT/DEL
태일러님이 카페에 질문해놓으셨길래요 ㅋㅋ
마스크가 있는 줄은 알고 있었는데 이렇게 쓸 수 있을 줄은 저도 몰랐습니다. ㅋ
덕분에 저도 하나 배웠음.!
후니 | 2008.05.14 11:40 신고 | PERMALINK | EDIT/DEL | REPLY
요즘도 2시까지 하는 거삼 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.14 13:13 신고 | PERMALINK | EDIT/DEL
넵. 너무 노는거 같아서 다시 공부중 ㅋ
시드 | 2008.05.14 13:17 신고 | PERMALINK | EDIT/DEL | REPLY
너무 졸려요~ -_ㅠ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.14 13:57 신고 | PERMALINK | EDIT/DEL
그럼 자...
잘 자~
박스농사 | 2008.05.15 08:55 신고 | PERMALINK | EDIT/DEL | REPLY
여기 낙서장 아니였나요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.15 09:28 신고 | PERMALINK | EDIT/DEL
낙서해놓은거 안보이세요?
아델 | 2008.07.23 13:12 신고 | PERMALINK | EDIT/DEL | REPLY
여기 검쉰님 블로그네~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.23 14:50 신고 | PERMALINK | EDIT/DEL
그렇죠~ 제 블로그입니다 ㅋ
Favicon of http://butterguy.tistory.com BlogIcon 버터백통 | 2008.07.30 17:07 신고 | PERMALINK | EDIT/DEL | REPLY
오 그렇군요~~잘보고 갑니다~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.30 21:41 신고 | PERMALINK | EDIT/DEL
방문 감사합니다. ;)
Favicon of http://reikop.raony.net/blog BlogIcon reikop | 2009.06.23 15:02 신고 | PERMALINK | EDIT/DEL | REPLY
명품 예제네요 감사합니다. ^^
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.24 11:21 신고 | PERMALINK | EDIT/DEL
방문 감사드립니다 ;)
| 2010.05.07 03:32 | PERMALINK | EDIT/DEL | REPLY
비밀댓글입니다
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.05.07 11:20 신고 | PERMALINK | EDIT/DEL
방문 감사드립니다. 위의 코드를 보시면 마스크를 원형으로 그렸을뿐, 어떠한 모양으로 그리더라도 상관은 없습니다. 그림의 패스를 어떻게 그리냐가 중요하죠.
이미지또한 마스크로 사용가능 합니다.
http://www.cynergysystems.com/blogs/blogs/andrew.trice/masks/masks.html
여기를 참고해보시면 좋겠네요 ;)

아마 위의 링크로 해결가능할 것 같습니다만, 혹 안되신다면 제가 네이트온은 현 사무실에서 사용이 안되어서, 가능하시면 gtalk 으로 연결 부탁드릴께요. 주소는 프로필 사진 아래에 있습니다 ;)
| 2010.05.11 04:38 | PERMALINK | EDIT/DEL | REPLY
비밀댓글입니다
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.05.11 09:23 신고 | PERMALINK | EDIT/DEL
네~ 추가하였습니다 ;)
좋은 하루되세요! ^^
택이 | 2016.01.04 16:13 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.05.09 13:39
사용자 삽입 이미지
머드초보님의 블로그 포스트에서 알게된 책중에 자바 성능을 결정짓는 코딩 습관과 튜닝 이야기란 책이 있습니다. 제목이 너무 맘에 들어 바로 사서 요즘 출퇴근 길에 열독 하고 있습니다.  

잠 시 책 소개를 하자면, 초보 개발자 '나초보' 씨가 실력있는 선배 '김경험', '이튜닝' 같은 분들에게 하나씩 배워가는 스토리로 쓰여 있습니다. 참 읽기 편하네요. 저 역시 '나초보' 와 그닥 다를 바 없는 실력 형편없는 개발자인지라 공감도 많이 되고, 많이 읽으면서 배우고 있습니다. 저자이신 '이상민'님 정말 감사합니다. ;)

참 유용하니 꼭 읽어보시길 권해드립니다.

아무튼, 상당히 유용한 이야기들로 가득차 있는데요, 책 내용 중 간단하게 언급된 for문 관련 이야기중 ActionScript를 쓰는 개발자들에게도 유용할 것 같은 Tip 이라 포스팅해봅니다. (사실 저 같은 어리버리 개발자한테만 유용할지도?)
 
for문은 상당히 많이 쓰는 loop 중에 하나입니다.
하지만 프로그래머들이 흔히 간과할 수 있는 부분이 있습니다.
우선 for문에 대해서 알아봅시다.
for 루프를 사용하면, 특정의 범위의 값에 대한 변수의 반복 처리를 실행할 수가 있습니다.
for 명령문(statement)에는, 3 개의 식을 지정할 필요가 있습니다.
해당 식은,
1. 초기치로 설정하는 변수
2. 루프가 언제 종료하는지를 지정하는 조건문(conditional statement )
3. 각 루프로 변수의 값을 변경하는 식 입니다.
예를 들어, 다음의 코드는 5 회 루프 합니다. 변수 i 는 0 으로 시작되어, 4 로 끝납니다.
출력은 0 ~ 4 의 수치가 되어, 각 수치는 개별의 행에 출력됩니다.
 
출처 : flexdocs.kr


여기서 눈여겨 봐야할 것은 2번째 조건문 입니다.
만약 Array 에 값을 for 루프를 돌아 처리한다고 할 때, 흔히 아래와 같이 쓰게 됩니다.  



이 때 2번째 조건 명령문에 들어있는 dataArray.length 가 문제가 됩니다. 루프를 도는 도중에 계속 호출되어 배열의 길이를 알아오기 때문입니다.
이 것은 다음과 같이 변경하여 좀 더 빠르게 바꿀 수 가 있습니다.


변수 dataArrayLength에 배열의 길이를 담은 후에 조건문에 대입하므로서 불필요하게 dataArray.length 를 매번 호출하지 않아도 되죠.

이와 비슷한 경우가 종종 있을 경우가 있습니다.
예를 들어  Canvas에 있는 자식 객체들의 수를 구하기 위해 Container 클래스에 정의된 numChildren 속성을 호출한다던지 말이죠.
아래의 코드는 클릭 이벤트가 발생하면 클릭된 Canvas의 자식 객체에 대해서 어떤 동작을 하는 코드입니다.



이제 실제 테스트를 해보겠습니다.
테스트해본 코드는 다음과 같고요, 그 아래 실제 결과물로 이 포스트를 읽는 분들이 테스트를 해보세요!


(참고 : creationComplete 시에 init() 을 실행시켜 dataArray 에는 10,000,000개의 데이터를 넣었습니다.)

저는 length 사용시: 953ms, length 미사용시: 187ms  걸렸습니다. ;)



▲ 실제로 이 글을 읽는 분이 걸린 시간.

알고도 그냥 지나칠 수 있는 부분이니까 습관을 들이도록 합시다. ;)
긴 글 읽으신다고 고생하셨습니다.
신고
Creative Commons License
Creative Commons License
시드 | 2008.05.09 15:16 신고 | PERMALINK | EDIT/DEL | REPLY
오~~ 맨날 length로만 해결했다는 1人 -_ㅠ 속도차이가 심하게 나네요~~
좋은 정보 감사합니다~~!! 형~~ 닌텐도 팔고 밥사줘요~ ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.09 16:02 신고 | PERMALINK | EDIT/DEL
닌텐도 팔아서 뭐 남는다고..... ㅋ
남남남 | 2008.05.09 18:12 신고 | PERMALINK | EDIT/DEL | REPLY
저는 결과가 578ms,203ms 이렇게 나왔습니다.
컨디션 부분은 반복될때마다 다시 값을 계산하는군요...
오늘 처음 알았네요... 좋은 정보 감사합니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.09 18:32 신고 | PERMALINK | EDIT/DEL
방문해주셔서 감사합니다. ;)
레이 | 2008.05.10 10:26 신고 | PERMALINK | EDIT/DEL | REPLY
length 사용시: 295ms
length 미사용시: 135ms
2배이상 차이나는군요... 좋은정보 감사합니다
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.10 10:39 신고 | PERMALINK | EDIT/DEL
제 회사 컴에서는 엄청난 차이를 보이던데, 레이님 컴에서는 2배정도의 차이가 아는군요 ;)
컴이 좋으신듯? ㅎㅎ
방문해 주셔서 감사합니다.
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.05.10 14:19 신고 | PERMALINK | EDIT/DEL | REPLY
좋은글 감사해요. 저도 이것때문에 많이 애먹은적이 있어서요. ^^;
for 문뿐 아니라 XML node 참조할때도 마찬가지 입니다.

var myXML:XML =
&lt;customers&gt;
&lt;customer&gt;
&lt;name&gt;jidolstar&lt;/name&gt;
&lt;product&gt;
&lt;item id="1"&gt;&lt;name&gt;a&lt;/name&gt;&lt;/item&gt;
&lt;item id="2"&gt;&lt;name&gt;b&lt;/name&gt;&lt;/item&gt;
&lt;item id="3"&gt;&lt;name&gt;c&lt;/name&gt;&lt;/item&gt;
&lt;item id="4"&gt;&lt;name&gt;d&lt;/name&gt;&lt;/item&gt;
&lt;/product&gt;
&lt;/customer&gt;
&lt;customer&gt;
......
&lt;/customers&gt;

for each(var item:XML in myXML.customer.(name=="jidolstar").item )
{
trace("id="+item.@id + ", name" + item.name );
}

이런식보다.

var items:XML = myXML.customer.(name=="jidolstar").item;
for each( var item:XML in items )
{
trace("id="+item.@id + ", name" + item.name );
}

이 훨씬 빠르다는거~ ^^

반복하면서 하여튼 dom 형식으로 많이 접근하는 것보다는 참조변수를 만들어서 사용하는 방법이 훨씬 좋은 방법입니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.10 22:32 신고 | PERMALINK | EDIT/DEL
좋은 예제 감사합니다.
루프시에 항상 조건을 따지는 것 같아요.
다른 루프문들도 한번 테스트 해봐야겠습니다.
후니 | 2008.05.13 11:25 신고 | PERMALINK | EDIT/DEL | REPLY
ㅋㅋ 재미있는 시험 마니 하는 구나 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.13 13:05 신고 | PERMALINK | EDIT/DEL
부러워요? ㅋㅋㅋ
공상 | 2008.05.13 13:20 신고 | PERMALINK | EDIT/DEL | REPLY
위에 코드출력하는 플러그인은 어떻게 하는거에요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.13 13:33 신고 | PERMALINK | EDIT/DEL
열이아빠님 블로그 http://koko8829.tistory.com/305
여기 참고하시면 되겠습니다 ;)
후니 | 2008.05.13 17:11 신고 | PERMALINK | EDIT/DEL | REPLY
NDSL 팔아서 맛난거 사죠 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.13 17:56 신고 | PERMALINK | EDIT/DEL
왜 이러셈. =_+
박스농사 | 2008.05.21 14:58 신고 | PERMALINK | EDIT/DEL | REPLY
난 왜 9배차이가 나는거지?..
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.05.21 15:02 신고 | PERMALINK | EDIT/DEL
컴이 구려서? ㅋ
Favicon of http://singah.tistory.com BlogIcon 싱아 | 2008.06.21 04:02 신고 | PERMALINK | EDIT/DEL | REPLY
250ms , 98ms 나오는구먼
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.21 08:51 신고 | PERMALINK | EDIT/DEL
오.. 컴 좋은가봐? ㅎ
Favicon of http://butterguy.tistory.com BlogIcon 버터백통 | 2008.06.25 11:13 신고 | PERMALINK | EDIT/DEL | REPLY
아하 그렇군요~~ 전혀 생각지도 못했던 곳이였는데 좋은 정보 감사합니다~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.25 11:40 신고 | PERMALINK | EDIT/DEL
방문 감사합니다 ;)
Favicon of http://2rang.tistory.com BlogIcon 꽃녀 | 2008.07.24 22:06 신고 | PERMALINK | EDIT/DEL | REPLY
아주 멋진 정보입니다.
많이 알고 갑니다 ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.24 22:28 신고 | PERMALINK | EDIT/DEL
방문해주셔서 감사합니다. ;)
건찌 | 2009.11.25 15:10 신고 | PERMALINK | EDIT/DEL | REPLY
오오 좋은정보 감사요^^
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.03.17 17:08

Flex 에서 MXML로 정의한 버튼이 다음과 같이 있다고 가정합니다.

 <mx:Button id="btnAlert"  label="Alert!" />


이 버튼을 클릭할 때 어떠한 동작을 하고자 하면 해당 버튼에 다음과 같이 클릭 이벤트 핸들러를 등록시켜주면 됩니다.

Script ---

public function alert(evt:MouseEvent):void
{
  Alert.show("Hello, Flex!", "Alert");
}

MXML ---

 <mx:Button id="btnAlert" label="Alert!" click="alert(event)" />


만약, 실제 버튼을 클릭하지 않고서 버튼을 클릭한 것과 같은 이벤트를 수동으로 발생시키려면 어떻게 해야할까요?
이럴때 필요한 것이 dispatchEvent 입니다.

dispatchEvent 의 구조는 다음과 같습니다.
objectInstance. dispatchEvent(event:Event)

자세한 설명은 수동에 의한 이벤트의 송출(Dispatch)  에서 참고하도록 하고 본 포스트에서는 생략하겠습니다.


아래에 보여드릴 소스는 캔버스를 MXML로 정의하여 이 캔버스를 클릭하였을때 버튼을 클릭한 것 과 같이 수동으로 이벤트를 발생시킴으로써 버튼을 클릭하였을 때와 같이 팝업이 뜨도록 하고 있습니다.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">

    <mx:Script>
        <![CDATA[
   
        import mx.controls.Alert;

        public function alert(evt:MouseEvent):void
        {
            Alert.show("Hello, Flex!", "Alert");
        }

        public function canvasClick(evt:MouseEvent):void
        {
            btnAlert.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
        }

        ]]>
    </mx:Script>

    <mx:Canvas x="44" y="79" width="200" height="153" backgroundColor="#FF0000" borderStyle="solid"
            cornerRadius="20" click="canvasClick(event)">
        <mx:Label text="Click Here!" horizontalCenter="0" verticalCenter="0"/>
    </mx:Canvas>

    <mx:Button id="btnAlert" x="271" y="137" label="Alert!" click="alert(event)"/>

</mx:Application>

dispatchEvent 를 이용하여 마치 버튼을 클릭한 것 처럼 MouseEvent.CLICK 이벤트를 버튼에 dispatch 함으로써 버튼에서 클릭 이벤트 핸들러로 등록해놓은 alert() 메소드가 실행되게 됩니다.

물론 위의 예제에서는 단순히 클릭시에 Alert 을 띄우는 작업으로 그쳤기에 문제가 없었지만, 실제 클릭이벤트와 관련된 작업이 필요할 경우 새로 생성해준 마우스이벤트 (new MouseEvent(MouseEvent.CLICK)) 상세한 값들을 제어할 필요가 있습니다.

MouseEvent (type:String , bubbles:Boolean = true, cancelable:Boolean = false, localX:Number , localY:Number , relatedObject:InteractiveObject = null, ctrlKey:Boolean = false, altKey:Boolean = false, shiftKey:Boolean = false, buttonDown:Boolean = false, delta:int = 0)

와.. 많다.;;;

신고
Creative Commons License
Creative Commons License
박스농사 | 2008.03.18 09:13 신고 | PERMALINK | EDIT/DEL | REPLY
악, 배아퍼 화장실좀.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.03.18 20:57 신고 | PERMALINK | EDIT/DEL
음?
후니 | 2008.03.18 10:58 신고 | PERMALINK | EDIT/DEL | REPLY
검쉰님아 전에 홈 플젝 할때 이런 기술 사용하시지 않았나요 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.03.18 20:57 신고 | PERMALINK | EDIT/DEL
많이 썼지요-ㅋ
박스농사 | 2008.06.10 09:09 신고 | PERMALINK | EDIT/DEL | REPLY
어제 급하게 퍼가니라 댓글 못 남겼어요 ㅋ
검쉰님 글 잘보구 있습니다. ^^;; 막막 퍼갈께요 이해좀 해주세요 ㅎㅎㅎㅎㅎㅎㅎ ㅌㅌㅌㅌㅌㅌㅌㅌㅌㅌㅌㅌ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.10 09:36 신고 | PERMALINK | EDIT/DEL
출처만 남겨주시면 괜찮습니다. ;)
요즘 올리는 글들은 코드가 플러그인때문에 제대로 표시 안될 수도 있겠네요 ^^;
phalanx | 2013.02.26 17:35 신고 | PERMALINK | EDIT/DEL | REPLY
헉..정말 필요했는데 감사합니다!!!!!!!
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.02.28 13:12

지난 2월 19일 세미나에서 공지한 바와 같이, 이번 3월 18일에 Adobe RIA World 2008이 열린답니다.
Adobe Flex 공식사이트에서 공지가 올라왔네요.



이번에 참 볼거리가 많은 것 같아요.

Time
Session
09:00 - 09:40
등록
09:40 - 09:50
Welcome Speech - 지준영 대표이사, 한국어도비시스템즈
09:50 - 10:10 Enabling Engaging Experience - Julian Quinn, Adobe Systems APAC Vice President
10:10 - 10:40 RIA - Transform Your Business - 박민형 전무, 한국어도비시스템즈
10:40 - 11:50 Adobe RIA Technology, Flex 3 & AIR new feature
- Ryan Stewart, Adobe Systems RIA Global Evangelist
11:50 - 12:10 SAP 후원사 발표 - SAP 코리아
12:10 - 13:10
Lunch Break
  RIA in Enterprise Track
RIA in On-line Track RIA Showcase for
IT Manager Track
13:10 - 13:50
AIR 기반 금융 홈 트레이딩
시스템 개발
- 정경환 이사, 블루토트
AMP(Adobe Media Player)를 사용한
UCC 서비스 개발
- 이정웅
[RIA Case 1] 13:10 - 13:40
SAP 솔루션 기반
Flex 적용 사례
- 위영량 이사, 엑센추어
[RIA Case 2] 13 :40 -14:10
Flex로 구현된 농협
X 뱅킹 서비스 사례
- 임충일 대표, 블루토트
13:50 - 14:30 AIR 기반 BPM 업무
처리서비스 개발
- 이동호 대표, 가호컨설팅
Flex로 구현하는 플래시
영어학습 전용 미디어 개발
- 박지훈
[RIA Case 3] 14:10 - 14:40
현대기아자동차
글로벌 종합상황실
경영정보 시스템 구축
- 안종태 부장, 리아소프트
14:30 - 15:10 Flex와 오픈소스를 이용한
인사시스템 개발
- 신호승/ 정선우
AIR 기반 파일 공유
디렉토리 서비스개발
- 엄진영
[RIA Case 4] 14:40 - 15:10
교육인적자원부
내부업무시스템 적용 사례
- 김두연 서기관,
교육인적자원부
15:10 - 15:40 Coffee Break
15:40 - 16:20 Flex 3가 가져올 변화와 개발 트렌드 - 배준균 팀장, 한국키스코
16:20 - 16:50 [RIA Best Case] 해외 사례 + 국내 사례 통합 발표
- Ryan Stewart, Adobe Systems RIA Global Evangelist / 김백수 전무, 한국어도비시스템즈
16:50 - 17:00
경품 추첨
동시통역

하나같이 다 좋은 세션이네요. 죄다 들을 방법은 없을까요? ^^;
회사에서 안보내주면 휴가라도 써서 가야겠습니다. ;)
신고
Creative Commons License
Creative Commons License
Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 | 2008.02.28 19:03 신고 | PERMALINK | EDIT/DEL | REPLY
휴가라는 단어 오랜만에 들어보네요..ㅠㅠ
저도 어찌안될까요..ㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.02.29 13:12 신고 | PERMALINK | EDIT/DEL
<_>ㅋ 꼭 오세요 ㅎ
Favicon of http://okjungsoo.tistory.com/ BlogIcon 옷장수 | 2008.02.29 10:06 신고 | PERMALINK | EDIT/DEL | REPLY
저는 오전에만 가볼까 생각중입니다. 눈치가보여서 ^^;;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.02.29 13:13 신고 | PERMALINK | EDIT/DEL
휴가 써버리는 센스! ㅎ
후니 | 2008.03.18 10:57 신고 | PERMALINK | EDIT/DEL | REPLY
검쉰님아 경품 내꺼도 챙겨줘요 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.03.18 20:57 신고 | PERMALINK | EDIT/DEL
큐브주던데요ㅋ
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.02.19 23:27
사용자 삽입 이미지


오늘 (19일) 코엑스 컨퍼런스센터 402호에서 Who are RIA Developers? - Flex 3 & AIR 라는 이름의 세미나가 있었습니다.
150석 규모로 사전등록을 받았는데 공지뜬지 얼마되지 않아 마감되는 뜨거운! 열기를 느낄 수 있는 자리였던 것 같네요.
실제로 많은 분들이 오셔서 자리가 없어 뒤에 서서 세미나를 들으시는 모습도 볼 수 있었습니다.

어떠했는지는 여기를 클릭하셔서 보시면 되겠고요, 실제 세미나 자료도 올라가 있으니 참고하시기 바랍니다. (pdf로 배포해주시네요)

2월 25일에 AIR 정식버전이 발표된다고 하셨는데, 참 기대되는 이야기였습니다.

마지막 질의응답시간에는 몇가지 질문들이 나왔었는데, 한가지 기억나는건 대충 내용이
'어도비에서는 자바만 지원하는 것인지, 다른언어(php, ruby)등은 지원하지 않는지?'
였는데 서드파티 쪽은 알아보시라.. 하고 끝냈던 것이 기억나네요.

http://www.themidnightcoders.com/ 에 가보시면 .NET 과 Java, PHP, Ruby on Rails 로 된 AMF 가 존재합니다.
다른 AMF 서비스는  Ruby 같은 경우는 RubyAMF 가 있고, php는 AMFPHP, Zend AMF, AMFPHP가 존재하고요.
물론 Java로 된 OpenAMF 라는 AMF도 있고 .NET은 AMF.NET 이 존재합니다.

몇가지 AMF 서비스의 경우에 속도 테스트 한 결과는 지돌스타님의 글을 참고하시면 좋겠네요. ^^
 


그리고 나올때 설문지를 드리니 기념품을 주셨습니다. ;)




ps. 참고로 금주 목요일(2008년 2월 21일)에도 세미나가 있네요.
IT관리자를 위한 RIA 세미나 - 오전 , 웹 디자이너를 위한 RIA 세미나 - 오후
공지가 파묻힌 느낌이라 잘 모르시는 듯.
http://www.adobeflex.co.kr/iwt/board/board.php?tn=news&id=124&mode=view
참고하시면 되겠습니다.
신고
Creative Commons License
Creative Commons License
Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 | 2008.02.20 00:14 신고 | PERMALINK | EDIT/DEL | REPLY
보온병 참 특이하네요..ㅎㅎ
첨에는 소화기인줄 알았습니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.02.20 09:52 신고 | PERMALINK | EDIT/DEL
ㅎㅎ 꽤 쓸만합니다 ^^
부러우시죠? ㅋ
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.01.24 11:08
프로젝트에서 간단한 알림창을 필요로 했었는데, 이걸 사용자가 확인버튼을 누르려니 상당히 귀찮았습니다.
단순히 잠깐 떠있다가 없어져도 되는 것인데 말이죠.
Alert에 다가 원하는 시간을 대입하면 Alert 출력 후에 입력한 시간이 지난 후 없어지도록 만들어보았습니다.

다음과 같이 간단하게 사용하시면 됩니다.

AutoDestroyAlert.show("경고창 띄우기입니다. 곧 사라집니다.", "알림", 1000);



소스는 아래를 참고하시면 되겠습니다.

package com.warkyman
{

    import flash.events.TimerEvent;

    import flash.utils.Timer;

      

    import mx.controls.Alert;

    import mx.events.CloseEvent;

    import mx.managers.PopUpManager;

 

    public class AutoDestroyAlert

    {

        // 일정 시간동안만 Alert 보여주기. (경고용)

       

public static function show(text:String = "", title:String = "",
                                 destr
oyTime:Number = 1000, iconClass:Class = null):Alert

        {
            var myAlert:Alert;

            var myTimer:Timer;

 

            // destroyTime 타이머 발생

            function timerEventHandler(evt:TimerEvent):void

            {

                myTimer.stop();// 타이머 종료

                mx.managers.PopUpManager.removePopUp(myAlert); // Alert 제거

            }

            myTimer = new Timer(destroyTime,1); // 타이머를 설정된 값에 맞게 Setting

            myTimer.addEventListener(TimerEvent.TIMER, timerEventHandler); // 이벤트핸들러 등록

 
            myAlert = Alert.show(text, title, 4.0, null, null, iconClass, 4.0); // Alert 표시

            myTimer.start(); // 타이머 시작

                   

            return myAlert;

          }

     }

}


그럼 즐거운 개발 되시길!!!
신고
Creative Commons License
Creative Commons License
Favicon of http://nabina.net BlogIcon nabina | 2008.01.24 11:37 신고 | PERMALINK | EDIT/DEL | REPLY
setTimeout()으로 하는 게 더 간편하지 않을까요?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.01.24 11:58 신고 | PERMALINK | EDIT/DEL
물론 더 간편하게 쓸 수 있습니다!! ^^

flash.utils.setTimeout() 같은 경우는 AS 2.0에 있던 메소드인데 호환성 목적으로 남아있다고 알고 있습니다.
문서에서도 Timer 클래스를 사용 하는 것을 추천하네요.

게다가 저는 플래시에 있던 메소드에 익숙하질 않아서 ^^;
Favicon of http://nabina.net BlogIcon nabina | 2008.01.24 17:48 신고 | PERMALINK | EDIT/DEL
아하. 그렇군요-
추천하는 걸로 사용하는 게 좋죠.
아닌 건 언제 없어질지 모르는 메소드일테니= _=;;;
Favicon of http://rollin96.springnote.com/pages/2401724 BlogIcon 굴돌 | 2008.12.30 01:24 신고 | PERMALINK | EDIT/DEL | REPLY
setTimeout()으로 했더니 메모리릭이 있더군요...제가 잘못한것일지도 모르겠지만...밑에 소스 올려볼께요.
그리고 검쉰님...
AutoDestoryAlert ->
AutoDestroyAlert
한참 해맸습니다 ㅠ.ㅠ...Flex Builder가 오류를 못 찾아줘서...ㅠ.ㅠ
단순오타: destoryTime -> destroyTime
그런데 지금보니 오래된 포스트군요. ^^;
---------------------
public static function timedAlertEx( alert:Alert ):void {
//*

// setTimeout() 방식. N/G. 메모리 leak이 있다.
function timerEventHandler():void
{
mx.managers.PopUpManager.removePopUp( alert ); // Alert 제거
}

setTimeout( timerEventHandler, 500 );

/*/

// Timer() 방식. OK.
var myTimer:Timer;

function timerEventHandler(evt:TimerEvent):void
{
myTimer.stop();// 타이머 종료
mx.managers.PopUpManager.removePopUp( alert ); // Alert 제거
}
myTimer = new Timer(1100,1); // 타이머를 설정된 값에 맞게 Setting
myTimer.addEventListener(TimerEvent.TIMER, timerEventHandler ); // 이벤트핸들러 등록

myTimer.start(); // 타이머 시작
//*/
}
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.12.30 13:48 신고 | PERMALINK | EDIT/DEL
애초에 예제작성시 오타가 있었네요 ㅎ ^^;;
setTimeout 은 메모리릭이 있군요 ㅎㅎ 실제 테스트는 안해봐서 몰랐습니다. ;)
좋은 사실 알려주셔서 감사합니다.
본문은 수정하도록 할께요~ ^^
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2007.12.04 10:33
왜 Sprite는 Canvas에 addChild 안되는 걸까요?

- Sprite는 무엇인가요?

먼저 Sprite는 무엇인지 잘 모르는 분들을 위해 설명을 곁들여보죠.
ActionScript 3 에서는 Sprite Class라 불리우는 새로운 Class를 사용하게 되는데... Sprite Object는 Movie Clip과 유사합니다만, Timeline이 없다는 것이 큰 차이점입니다. Sprite는 timeline을 요구하진 않는 곳에서 쓰일 수 있는 적합한 Base Class 입니다.


물론, Sprite를 FLEX에서 사용하고 싶다면 UIComponent에 addChild  하여서 사용하면 됩니다. (참고 : 지돌스타님 블로그)

하지만, UIComponent를 상속하고 있는 Canvas에는 왜 addChild가 되지 않는가 하는 것이 이 글의 주요 주제죠.


- Sprite을 Canvas에 addChild 하면 ?

여기서 분명한 것은 Sprite를 Canvas에 addChild하면
"TypeError: Error #1034: 유형 강제 변환에 실패했습니다. flash.display::Sprite@45cd351을(를) mx.core.IUIComponent(으)로 변환할 수 없습니다."
라고 컴파일시에 Error가 난다는 겁니다.

오류가 난 곳을 따라가보면 Canvas가 상속하고 있는 Container 클래스의 addingChild 메소드에서 나는 것을 알 수 있습니다.
 override mx_internal function addingChild(child:DisplayObject):void
 {
        // Throw an RTE if child is not an IUIComponent.
      var uiChild:IUIComponent = IUIComponent(child);  // 이 줄에서 오류가 납니다.
        ...
}


IUIComponent 타입인지 확인하고 있는데, Sprite는 IUIComponent type이 아니기때문에 오류가 나고 있는 것입니다.


- IUIComponent는 무엇인가요?

그럼 IUIComponent는 무엇일까요?
클래스 안에 있는 주석으로 다음과 같이 설명되고 있습니다.

 The IUIComponent interface defines the basic set of APIs that you must implement to create a child of a Flex container or list.

FLEX의 Visual Component의 기본은 UIComponent 입니다.
IUIComponent 인터페이스는 이 UIComponent 가 구현하고 있는 인터페이스로서 위의 설명에 따르면,
Flex의 Container 나 List의 child들은 IUIComponent 인터페이스를 구현하고 있어야 된다고 합니다.
(아니면 위 에러메세지 처럼 IUIComponent 타입이 아니라서 오류나죠 ㅡㅂㅡ)


- 그렇다면 Canvas는?

 Canvas Inheritance Container Inheritance UIComponent Inheritance FlexSprite Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject Inheritance EventDispatcher Inheritance Object
인용 : Flexdocs.kr

위의 관계대로 만들어진 Canvas에는 IUIComponent가 구현된(다시 말해 UIComponent를 상속받는) 클래스들은
모두 addChild 될 수 있으나 그렇지 않은 클래스는 addChild 되지 못하게 됩니다.
Sprite는 IUIComponent 인터페이스를 구현하고 있지 않으므로
Container에는 addChild 할 수 없는 것입니다.




- Tip

Sprite를 Canvas 같은 Container 에 추가하여야 하는 일이 생긴다면 아래와 같이 클래스 만드셔서 addChild 하셔도 괜찮을 것 같네요. :)

package
{
    import flash.display.Sprite;
    import mx.core.UIComponent;

    public class mySprite extends UIComponent
    {
        private var sprite:Sprite;
 
        public function mySprite()
        {
             super();
   
             sprite = new Sprite();
         }
 
        override protected function createChildren():void
        {
            super.createChildren();
   
            this.addChild(sprite);
        }
        .....
    }
}

참고자료 :
[팁] Sprite 사용법
Flex 2 Beta 3 : Sprites

신고
Creative Commons License
Creative Commons License
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2007.12.10 09:59 신고 | PERMALINK | EDIT/DEL | REPLY
잘 읽었습니다. Canvas가 Sprit를 직접 올릴 수 없게 하는 이유를 나름대로 생각해보면
Sprit는 UIComponent가 기본적으로 가지는 CSS라든가 Canvas에서 Child에 접근할 때 공통적으로 접근하는 method가 정의되어 있지 않아서가 아닌가 싶습니다. 즉 IUIComponent로 Casting하는 절차가 바로 그것을 확인하는 작업이겠지요.
정확한 분석이 따라야 하지만 지금 생각에는 그럴 것 같다는 생각이 강하게 드는군요. ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2007.12.10 14:15 신고 | PERMALINK | EDIT/DEL
각 컴포넌트들이 구현하는 interface 에 대해서 자세히 알고 싶어지네요 ^^;
Favicon of http://blog.naver.com/eirene78 BlogIcon 에이레네 | 2008.01.30 11:35 신고 | PERMALINK | EDIT/DEL | REPLY
Canvas는 컨테이너 클래스를 상속했죠 ^^ UIComponent의 addChild 메소드는 기본적으로 대상이 Sprite를 상속한 클래스인데
컨테이너 클래스는 addChild 부분을 오버라이드하면서 대상을 IUIComponent 인터페이스를 구현한 클래스로 바꾸어 버렸더랬습니다;; 그래서 Canvas에는 Sprite를 addChild할 수가 없게 됐죠;;; 대신 이렇게 해서 좋아진 것은 Canvas의 numChildren에는 항상 UIComponent를 확장한 클래스 인스턴스들만 들어가게 되었다는;;; 또 Canvas의 rawChildren.addChild(new Sprite()); 하시면 여전히 Canvas에 Sprite를 추가하는 것도 가능합니다^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.01.30 11:48 신고 | PERMALINK | EDIT/DEL
아하~ ^^
좋은 덧글 감사합니다. ;)
박스농사 | 2008.07.31 16:21 신고 | PERMALINK | EDIT/DEL | REPLY
사진바꼇네? 이제 사람좀 된듯
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 16:57 신고 | PERMALINK | EDIT/DEL
넌 애니메이션이자나.....ㅋ
Favicon of http://cyworld.com/aqua_mir BlogIcon 물빛미르 | 2009.12.15 11:15 신고 | PERMALINK | EDIT/DEL | REPLY
감사합니다... 족보를 알아야만 하는 문제였군요... 역시 초보는 배울게 많네요 ^^;
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2007.11.20 15:56
다음의 포스팅은 Peter Ent 블로그Coloring the Background of Cells 포스트의 검쉰 맘대로 해석판입니다.
말이 안되게 타이프 해놓은 것도 있으니(ㅡㅡ;) 그러려니... 하여 주세요 ;)

아래의 결과물은 해당 포스트의 소스를 빌드하여 올려보았습니다.

")//]]>


위의 예제는 총 5개로 되어 있습니다만, 4개만 설명 합니다.
1. 아이템렌더러(itemRenderer)를 이용하여 특정컬럼의 배경색을 바꾸기 (itemRenderer Tab)
2. 컬럼에 직접 배경색을 지정하기 (backgroundColor Tab)
3. drawColumnBackground function을 재정의하여 배경색에 alpha 값을 주기 (backgroundAlpha Tab)
4. drawRowBackground function을 재정의하여 row에 배경색을 주기 (Custom Row Background Tab)



1. 아이템 렌더러(itemRenderer)를 이용하여 특정 컬럼의 배경색을 바꾸기 
   (itemRenderer Tab 참고)
사용자 삽입 이미지

특정 Cell의 배경색을 바꾸려면 아이템렌더러(itemRenderer)가 필요합니다.
아이템렌더러(itemRenderer)는 데이터그리드(Datagrid)의 전체에 적용하거나 특정 컬럼에 적용이 가능합니다만,
아래의 아이템렌더러(itemRenderer) 예제에는 Year 컬럼에만 적용하도록 하겠습니다.

간단하게 Label을 상속받아 updateDisplayList function을 재정의 하여서
Year의 값을 판단(Year의 값이 2000년 이전이면 파란색, 2000년 이후이면 녹색) 하여
Label에 파란색 또는 녹색의 사각형을 그려 배경색을 나타내고 있습니다.

<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script>
    <![CDATA[

      import flash.geom.Matrix;
      import flash.display.GradientType;
      import flash.display.Graphics;

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
        super.updateDisplayList(unscaledWidth,unscaledHeight);

        var m:Matrix = new Matrix();
        m.createGradientBox(unscaledWidth,unscaledHeight);

        var g:Graphics = graphics;
        var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);

        g.clear();
        g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
        g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
        g.endFill();
      }
    ]]>
  </mx:Script>
</mx:Label>

아래는 AS Class 로 동일하게 만들어본 아이템 렌더러입니다.
package
{
  import flash.geom.Matrix;
  import flash.display.GradientType;
  import flash.display.Graphics;
  import mx.controls.Label;

  public class ColoredBackgroundItemRenderer extends Label
  {
    public function ColoredBackgroundItemRenderer()
    {
      super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth,unscaledHeight);

      var m:Matrix = new Matrix();
      m.createGradientBox(unscaledWidth,unscaledHeight);

      var g:Graphics = graphics;
      var colors:Array = (data.col3 < 2000 ? [0x0000CC,0x0000FF] : [0x00CC00,0x00FF00]);

      g.clear();
      g.beginGradientFill(GradientType.LINEAR, colors, [0.2,0.6], [0,255], m);
      g.drawRect(0, -2, unscaledWidth, unscaledHeight+4 );
      g.endFill();
    }
  }
}



2. 컬럼에 직접 배경색을 지정하기
   (backgroundColor Tab 참고)


사용자 삽입 이미지


단지 컬럼의 모든 Cell에 배경색을 지정하고 싶은 것이라면 아이템 렌더러를 만들 필요는 없습니다.
아래와 같이 데이터그리드(Datagrid) 컬럼에 있는 backgroundColor 속성을 이용하면 쉽게 가능합니다.

<mx:DataGridColumn headerText="Make" backgroundColor="0xCC0000" dataField="col1"/>

0xCC0000은  빨강색() 입니다. backgroundColor Tab에서 Make 컬럼에 적용되어 있습니다.
backgroundColor="red" 같은 경우도 가능합니다.



3. drawColumnBackground function을 재정의하여 배경색에 alpha 값을 주기
   (backgroundAlpha Tab 참고)

사용자 삽입 이미지


데이터그리드(Datagrid) 컬럼은 투명도(Alpha)를 주는 속성이 없습니다.
하지만  데이터그리드(Datagrid)에 있는 drawColumnBackground function을 재정의하여 투명도를 줄 수 가 있습니다.
데이터그리드(Datagrid)를 상속받아서 만든 Class에서 아래와 같이 drawColumnBackground function을 재정의 합니다.

override protected function drawColumnBackground(s:Sprite, columnIndex:int, color:uint, column:DataGridColumn):void
{
  super.drawColumnBackground(s,columnIndex,color,column);

  var background:Shape = Shape(s.getChildByName(columnIndex.toString()));
 
  if( background )
  {
    background.alpha = 0.5;
  }
}

하지만 위의 코드에서는 투명도가 0.5로 하드코딩 되어 있으므로 권장할 만한 코드가 안됩니다.
그래서 다음과 같이 Class 내에 투명도를 저장할 변수 columnBackgroundAlpha를 정의합니다.

public var columnBackgroundAlpha:Number = 1;

그리고 재정의한 drawColumnBackground function의 코드를 변수 columnBackgroundAlpha에 의해
투명도를 변경할 수 있도록 다음과 같이 수정합니다.

backgroundAlpha = columnBackgroundAlpha;

외부에서 투명도는 아래와 같이 변경 할 수 있습니다.

<local:ColoredBackgroundDataGrid columnBackgroundAlpha="0.3" ... >



4. drawRowBackground function을 재정의하여 row에 배경색을 주기
   (Custom Row Background Tab 참고)

사용자 삽입 이미지

특정 컬럼이 아닌 한 줄(row)의 배경색을 바꾸려면 데이터그리드(Datagrid)를 상속받은 Class에서
아래와 같이 drawRowBackground function을 재정의 하여 배경색을 바꿀 수 있습니다.

year의 값이 2000년 이전이면 오렌지색, 2000년 이후면 흰색, 값이 없으면 녹색으로 출력하도록 하였습니다.

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
  var dp:ArrayCollection = dataProvider as ArrayCollection;
  var item:Object;

  if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);

  if( item != null && item.year < 20000 ) color = 0xFF8800;
  else if( item != null && item.year>= 2000 ) color = 0xFFFFFF;
  else color = 0x00CC00;

  super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}

하지만, 위의 코드는 색깔과 기준값들이 하드코딩되어 있어 권장할만한 코드가 못됩니다.
이 때, 배경색으로 쓰일 색을 외부에서 따로 구현할 수 있도록 하여 해결하도록 하겠습니다.

외부의 function을 쓰기 위해 Class에 아래와 같이 속성을 하나 추가하겠습니다.

public var rowColorFunction:Function;

그리고 아래와 같이 color값을 위에서 만든 Function에서 받아올 수 있도록 하여 줍니다.

override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint,dataIndex:int):void
{
  if( rowColorFunction != null )
  {
    var dp:ArrayCollection = dataProvider as ArrayCollection;
    var item:Object;
   
    if( dataIndex < dp.length ) item = dp.getItemAt(dataIndex);

    color = rowColorFunction( item, rowIndex, dataIndex, color );
  }
 
  super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}

그리고 아래와 같이 rowColorFunction에 외부의 function을 지정하여 주고,

<local:ColoredBackgroundDataGrid rowColorFunction="determineColor" ... >

지정된 determineColor function은 아래와 같이 정의합니다.

private function determineColor( item:Object, rowIndex:int, dataIndex:int, oldColor:uint ) : uint
{
  if( item == null ) return 0x00CC00; // green are empty rows
  if( item.year< 2000 ) return 0xFFCC00;
  else if( item.year >= 2000 ) return 0xFFFFFF;
}

이제 정의 하였던 Class 외부에서 rowColorFunction에 알맞는 function을 정의하여 배경색을 변경 할 수 있게 되었습니다.
신고
Creative Commons License
Creative Commons License
Favicon of http://www.dalyong.com/ BlogIcon 달룡이네집 | 2007.11.20 22:35 신고 | PERMALINK | EDIT/DEL | REPLY
컬러를 볼때만해도 신기하고 재미있긴 한데..아래 알파벳을 보면서..머리가 살짝..아파오는군요..눈도 돌아가고..ㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2007.11.21 14:44 신고 | PERMALINK | EDIT/DEL
저도 매번 보지만 친해지지가 않아요 ^^;
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2007.11.29 11:08 신고 | PERMALINK | EDIT/DEL | REPLY
어제 봤던 거네요~~ Gradient에 관련된 자료 찾다가 우연히 봤었는데....
이미 한글로~~ 멋집니다.
좋은 자료 감사해요
박스농사 | 2008.03.31 19:34 신고 | PERMALINK | EDIT/DEL | REPLY
오른쪽위의 사진은 주최측의 농간입니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.03.31 21:57 신고 | PERMALINK | EDIT/DEL
안놀아줬더니 디게 심심했던 모양이네 ㅋㅋㅋㅋ
박스농사 | 2008.04.02 14:09 신고 | PERMALINK | EDIT/DEL | REPLY
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.02 18:25 신고 | PERMALINK | EDIT/DEL
좀 한가해지면 놀아줄께요 ㅋ
영희 | 2008.06.03 14:51 신고 | PERMALINK | EDIT/DEL | REPLY
검쉰님 블로그에는 데이터 그리드에 관한 자료가 많네요^^ 좋은 자료 구경 하고 갑니다~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.06.03 16:53 신고 | PERMALINK | EDIT/DEL
전에 찾았던 자료인데, 도움이 많이 될 것 같아서 (허접하게) 번역하여 올렸습니다.
도움이 되셨으면 좋겠네요 ;)
방문 감사합니다.
엠씨 | 2008.09.16 15:43 신고 | PERMALINK | EDIT/DEL | REPLY
좋은자료 감사합니다...
색깔 넣는부분이 필요해서 요기 소스를 참고해서 만들어 봤는데요..
예를 들어 마지막행의 색깔을 바꾸겠다...했을때
그리드의 크기보다 데이터의 양이 많을경우 색깔이 바뀌지 않더라구요....(스크롤바가 생겨서 스크롤링한경우)
그리드를 리사이즈해서 데이터row보다 커질경우엔 색깔이 바뀌고요...
혹시 이문제 접하신적이 있으신지....?
색깔바껴서 좋아하고 있다가 다시 머리를 싸매기 시작했네요..ㅠ.ㅠ;
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.09.16 17:03 신고 | PERMALINK | EDIT/DEL
화면에 보이지 않는 부분이라서 그런듯 합니다.
정확하지는 않지만 DataGrid의 컨테이너의 creationPolicy 값을 조정해보세요 ^^;
(아닐 가능성 90%)
박대호 | 2009.11.25 13:46 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요 ?

저는 부산의 벤쳐 S/W회사의 대표이사 입니다.
영원님의 깔금하고 잘 정돈된, 정보 덕분에 많은 도움을 받고 있습니다.

저도 전공은 컴퓨터 공학이지만, 졸업 후 프로그램을 짜보지 않았습니다.
최근 Flex의 무한한 가능성에 반하여, 나이 50을 향해 가고 있는 지금
Flex관련 작은 프로젝트를 하게되어 직접 프로그램을 하고 있습니다.

다시 한번 영원님의 정보에 감사 드립니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.11.25 13:59 신고 | PERMALINK | EDIT/DEL
안녕하세요? 박대호대표이사님.
제 글이 도움이 되셨다니 상당히 기쁩니다. ;)
덧글 남겨주셔서 감사드리고, 질문할 것이 있으시다면 메일로 해주셔도 됩니다. ;)
부산지역에도 IT 업체가 많아져야 좋을텐데요 ;) 김해에서 대학을 다녀서 그런지 부산이시라니 친근감이 드네요 ㅎㅎ 좋은 하루 되시길.
박대호 | 2009.12.03 20:12 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.12.05 09:46 신고 | PERMALINK | EDIT/DEL | REPLY
안녕하세요? 박대호 대표이사님 ;)
덧글은 잘 보았습니다. 우선 이메일과 전화번호가 남겨져 있어 승인은 하지 않았습니다. ^^; (봇들이 수집을 하기때문에 ^^:)

현재 모듈을 사용하시기 때문에 문제가 되는 듯 합니다. 모듈의 특성상 모듈이 언로드 되게되면 모듈이 가지고 있던 클래스도 같이 언로드 되게 되는데요, 이때 DataService 관련 클래스들도 같이 언로드되는듯 하네요. Application 에서 DataService 를 가지고 있도록 처리해보심 어떨까 싶네요. data management 로 개발한 경험이 없어서 관련 부분은 조언을 드리기가 어렵습니다. ^^;

어떤 에러가 나는지 에러메세지를 좀 보내주셔도 제가 찾아볼 수 있겠네요.
(이메일로 보낸 내용이나 주소가 잘못되었는지 반송되었더군요. 보실지 모르겠으나 덧글로 남겼습니다. )
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.12.05 14:08 신고 | PERMALINK | EDIT/DEL
지돌스타형 블로그에 올라온 글을 보니 메일주소를 잘못남겨주셨네요 ^^;;;
박대호 | 2009.12.10 23:37 신고 | PERMALINK | EDIT/DEL | REPLY
감사 합니다.
문제는 해결되엇는데,,,
심경쓰 주셔서 감사 합니다.
김선구 | 2009.12.24 09:47 신고 | PERMALINK | EDIT/DEL | REPLY
4번을 쓸려고 datagrid를 재정의했는데, dataprovider에 null 값이 들어가있어서 에러가났습니다.
dataprovider 에는 arraycollection 형태의 값이 들어가게 되있고요, datagrid선언부분은
<cp:myDatagrid ~~
<cp:columns>
<mx:datagridcolumn~
형식으로 되어있습니다..
김정환 | 2012.09.26 14:57 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
김정환 | 2012.10.05 13:12 | PERMALINK | EDIT/DEL | REPLY
관리자의 승인을 기다리고 있는 댓글입니다
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2007.11.12 20:50
간단한 아이템 렌더러(Item Renderer)를 만들어보자!

데이터그리드를 이용하여 데이터를 출력할 때, 아이템 렌더러를 이용하면 자신의 의도대로 출력할 수 있어 참으로 유용합니다.
다음의 소스는 Money 라는 값을 출력하는데 이 것은 CurrencyFormatter를 이용하여 달러 표시로 출력하게 하여 보았습니다.

메인 App는 레퍼런스의 Datagrid에 예제를 약간 수정하여 사용하였습니다.

myItemRenderer.as

package
{
  import mx.controls.Label;
  import mx.formatters.CurrencyFormatter;

  public class myItemRenderer extends Label
  {
    private var formatter:CurrencyFormatter;

    public function myItemRenderer()
    {
      super();
      formatter = new CurrencyFormatter(); // CurrencyFormatter
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth, unscaledHeight);

      this.text = formatter.format(data.money); // 출력될 값(data.money)에 CurrencyFormatter를 적용
    }

  }
}


Label을 상속받아서  CurrencyFormatter를 하나 추가하여 출력할 값(data.money)를 통화(Currency)형태로 출력하게 해주었습니다.
 ※ data - data를 살펴보면 Datagrid의 해당 Row의 모든 데이터가 들어있는 것을 확인할 수 있습니다.

MXML...
...
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>ccoenraets@fictitious.com</email>
<money>10000</money>
<active>true</active>
</employee>

...

<mx:DataGrid
id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
  <mx:columns>
    <mx:DataGridColumn dataField="name" headerText="Name"/>
    <mx:DataGridColumn dataField="phone" headerText="Phone"/>
    <mx:DataGridColumn dataField="email" headerText="Email"/>
    <mx:DataGridColumn dataField="money" headerText="Money" itemRenderer="{ new ClassFactory(myItemRenderer) }"/>
  </mx:columns>
</mx:DataGrid>

...

DatagridColumn 에 itemRenderer로 위에서 만든 myItemRenderer를 물려주었습니다. ItemRenderer는 IFactory 형태로 받아드리므로 new ClassFactory(CLASS) 이런 식으로 클래스를 변환하여 연결하였습니다.


잘 되나 봅시다.

Money가 $10,000 형태로 출력되고 있습니다.

즐플하세요!
신고
Creative Commons License
Creative Commons License
나비춉춉 | 2008.02.27 11:31 신고 | PERMALINK | EDIT/DEL | REPLY
잘읽었습니다 도움이 되서 퍼갈려구 했는데 안퍼지내요 ㅋㅋ 일단 북마크만 걸었습니다 ㅋ 감사합니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.02.27 18:06 신고 | PERMALINK | EDIT/DEL
퍼가기 금지 해놔서.. ^^;
박스농사 | 2008.03.31 19:32 신고 | PERMALINK | EDIT/DEL | REPLY
잘읽었습니다 도움이 되서 퍼갈려구 했는데 안퍼지내요 ㅋㅋ 일단 북마크만 걸었습니다 ㅋ 감사합니다.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.03.31 21:56 신고 | PERMALINK | EDIT/DEL
심심하구나?
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 #2 next