총 게시물 62건, 최근 0 건
   
[동영상강의]UIComponent를 이용한 커스텀 컴포넌트 만들기
글쓴이 : 지용호 날짜 : 2008-07-11 (금) 21:21 조회 : 9695
UIComponentTest.zip (277.8K), Down : 3, 0000-00-00 00:00:00

 

컴포넌트를 만드는 이유는 무엇일까? 

이유는 어플리케이션을 모듈단위로 분리해서 개발 및 보수가 가능하기 때문이다.

또 이렇게 만들면 컴포넌트의 재사용에도 용이해진다.

 

컴포넌트 종류에는 2가지가 있다.

Visual Component와 Non-Visual Component이다.

즉, 보이고 보이지 않는 차이이다.

Button, Checkbox등은 Visual Component이고 HttpService, RemoteObject등은 Non-Visual Component이다.

여기서는 Visual Component에 대해서 논할 것이다.

 

Flex에서  자신이 원하는 Visual Component를 만드는 방법에는 2가지 방법이 있다.

 

1. ActionScript 3.0

  - 만들기 어렵다.

  - 완전히 새로운 컴포넌트인 UIComponent Base로 만들때 주로 사용한다.

  - formatter, validator , effect등의 비주얼하지 않은 컴퍼넌트를 작성하는 경우

 

2. MXML

  - 만들기 쉽다.

  - 기존 Component의 기능을 약간 수정할 경우

  - 복합 컴포넌트를 만들때, Flex SDK에서 제공하는 기본 Component를 새로 배치해서 하나의 모듈화된 컴포넌트를 만들경우 유리

 

ActionScript 3.0이든 MXML이든 시중 서적에 간단한 컴포넌트를 만드는 방법이 잘나와 있다.

 

Flex SDK에서 제공하는 컴포넌트들을 조합해서 만들때도 있다.

이러한 경우에는 Canvas에 Button, TextArea등을 올려서 복합적으로 컴포넌트를 배치하여 하나의 컴포넌트를 완성하는 것인데... 필요한 경우에는 기존 컴포넌트를 잘 활용하는 것이 생산적이다.

 

그러나 가끔은 Open Source나 Flex SDK에도 제공되지 않는 새로운 컴포넌트를 만들어야할때가 있다.

(가령, 시계 같은것은 Flex SDK의 기본 컴포넌트가 아니다. 그러므로 UIComponent를 확장해서 만들어야 한다.)

여기서 설명하고자 하는 것은 완전 새로운 컴포넌트를 만들때 어떻게 만들것인가 하는것이다.

새로운 컴포넌트를 만드는 경우라 하더라도 기존 컴포넌트를 가지고 만드는 방법과 크게 다르지 않다.

 

Flex SDK에 있는 모든 Visual Component는 UIComponent Class를 확장한다.

그러므로 우리도 UIComponent를 확장해서 우리만의 새로운 컴포넌트를 만들면 된다.

 

UIComponent는 DisplayObject, DisplayObjectList, Sprite등을 상속받아 만들었다.

UIComponent는 스킨기능, 적절한 자식 컴포넌트 추가, Life Cycle, 무효화 함수등이 적절하게 잘 만들어져 있기 때문에

Flex에서 사용하는 컴포넌트를 만들려면 원만하면 UIComponent를 사용하는 것이 좋다.

또한 Canvas와 같은 Container에 addChild할때 UIComponent만 되므로 어쨌든 Flex에서 원활하게 사용할려면 UIComponent를 확장해서 만들어야 하겠다. 

 

이 동영상은 UIComponent를 가지고 새로운 컴포넌트를 만드는 방법에 대해서 전반적으로 언급하고 있다.

 

이번 강의로 알 수 있는 내용

1. UIComponent의 상속관계 

2. Event 사용하는 대략적 방법

3. Event, Inspectable Metadata에 대한 이해

4. get, set 함수 활용법

5. override 함수 사용법

6. protected namespace에 대해

7. createChildren(), commitProperties(), measure() updateDisplayList()  함수들의 의미와 사용법

8. 무효화 함수 invalidateProperties(), invalidateSize(), invalidateDisplayList() 활용법

9. ActionScript를 이용해 UIComponent를 확장하여 새로운 커스텀 컴포넌트를 만드는 방법

 

 

나머지 동영상

#2 : http://www.mncast.com/?5289971 

#3 : http://www.mncast.com/?5289968

#4 : http://www.mncast.com/?5289984

#5 : http://www.mncast.com/?5289979

#6 : http://www.mncast.com/?5289997

#7 : http://www.mncast.com/?5289981

 

[동영상 다운로드]

http://blog.jidolstar.com/FlexLecture/12_UIComponet_01.avi

http://blog.jidolstar.com/FlexLecture/12_UIComponet_02.avi

http://blog.jidolstar.com/FlexLecture/12_UIComponet_03.avi

http://blog.jidolstar.com/FlexLecture/12_UIComponet_04.avi

http://blog.jidolstar.com/FlexLecture/12_UIComponet_05.avi

http://blog.jidolstar.com/FlexLecture/12_UIComponet_06.avi

http://blog.jidolstar.com/FlexLecture/12_UIComponet_07.avi

 

[참고사이트]

http://flexdocs.kr/   

 

[숙제]

첨부파일과 동영상을 참고하여 실습해본다.

실습한 것을 MXML + ActionScript 3.0 으로 수정해본다. 

 - 자식 컴포넌트는 MXML로 만들고 나머지는 ActionScript 3.0으로 만든다.

 - Base는 UIComponent이며 MXML 컴포넌트로 만들면 된다.

 - 이걸 뭐~ 어떻게 하는거야~ 라고 의문이 든다면 질문/답변을 이용해주세요.

Library Project로 컴포넌트를 만들어보고 Flex Project에 컴포넌트를 추가해서 사용해보자.

 

제출 : 2008년 7월 24일 저녁 9시

 


이광우 2008-07-12 (토) 13:13
아직 동영상 안올라 왔네요....새벽 5시반까지 기다렸습니다...ㅠㅠ;; 지돌님 넘 고생하셔서 병나신 건 아닌지..ㅠㅠ;;
댓글주소
유환용 2008-07-13 (일) 01:01
지금 책을 읽으면서 가는 중인데 어여어여 따라가야겠다
댓글주소
지용호 2008-07-13 (일) 21:21
광우//죄송합니다.
제가 이것저것 해서 그런지 밤에 너무 피곤해서 동영상 만드는게 수월하지 못했습니다.
곧 올리도록 노력하겠습니다. 감사합니다. ^^
댓글주소
지용호 2008-07-13 (일) 21:21
환용//열심히~~ ^^
댓글주소
이광우 2008-07-13 (일) 21:21
사실 배우는 사람이 더 급해서 안달이 나야죠 ^^:; 제가 지금 후~끈~달아 오르다 보니 무심하게도 지돌님 건강은 뒷전이 되었네요...건강하셔야 좋은 강좌 계속 올리실테니 좀 쉬세요~~~
댓글주소
이유화 2008-07-15 (화) 01:01
그러게요 지돌님~너무 고생이 많으세요ㅠㅠ;;; 아자아자!!
댓글주소
박재영 2008-07-15 (화) 10:10
지돌님 너무 고생이 많으셔요... 스스로 학습해야 하는데 계속 동영상만 의존하다보면
응용력이 떨어 질거 같아요.. 하지만.. 초짜에겐 동영상도 감지덕지 하네요..
화이팅..
댓글주소
이유화 2008-07-16 (수) 16:16
히히히히;;;
다운받으면..음원은 들리는데 영상이 안나오네요;;(곰플레이어,자체 플레이어 동일)
힛;;;
죄송합니다^^;;;
댓글주소
어재규 2008-07-16 (수) 23:23
곰플홈피에서도 코덱을 찾을수가 없다네요.. 어느코덱을 써야하나요?
댓글주소
지용호 2008-07-17 (목) 00:00
Lossless Codec: http://www.camstudio.org/CamStudioCodec10.zip

를 받아 설치하면 동영상을 볼 수 있어요.
설치방법은 압축풀고 inf파일을 선택한다음
오른쪽 마우스를 눌러 설치를 선택하면 설치할 수 있습니다.
댓글주소
이유화 2008-07-17 (목) 03:03
우와~ 용호님!! 기뻐해주세요!!ㅠ-----------ㅠ;;;
재생이 되요~아ㅠㅠ넘 기뻐요ㅠㅠ
으꺄~~!캄사캄사!!ㅋㅋ
댓글주소
이광우 2008-07-23 (수) 15:15
숙제 보냈습니다~깊이 파고 들 수록 어렵지만 정말 재미있습니다. ㄳ ㄳ
댓글주소
   

총 게시물 62건, 최근 0 건
번호 제목 글쓴이 날짜 조회 추천
32  [Flex Camp 동영상]Flex 기반 위젯개발 및 천문지… +1 지용호 07-30 5659 67
31  [영어동영상강의]1주일 안에 Flex를.... +1 지용호 07-29 6360 79
30  mysql 이것에 대한 오류는....... +3 한원순 07-28 5830 72
29  [동영상강의]Flex 4u 카페 Flex 기초 동영상 강좌 +3 지용호 07-28 6329 64
28  MXML-ACTIONSCRIPT 관련 질문(RSSPanel 아이콘 표시) +3 이유화 07-26 6188 79
27  RSS Reader 동영상보고 만드신분중에 스스로 해… +3 박재영 07-24 4647 67
26  Flex 3 SDK version 3.0.3이 나왔군요. +1 유환용 07-21 5606 69
25  Rss리더... 웹상에 올려서 테스트 하면 에러 ㅡ… +4 한원순 07-18 5594 78
24  동영상 코덱 설치하세요. +2 지용호 07-17 6341 83
23  [공지]Flex강좌 동영상을 전부 다운로드 받을 … +2 지용호 07-16 7885 103
22  RSS구독기 만들기 관련 질문 +4 이유화 07-15 5032 69
21  Flex Camp에서 이번 프로젝트를 소개했어요. +1 지용호 07-14 5557 76
20  Flex/AIR 프로젝트 질문/아이디어제안/토론으로… 지용호 07-14 4636 75
19  Flex 자습을 해주세요. +5 지용호 07-14 4707 67
18  [동영상강의]UIComponent를 이용한 커스텀 컴포… +12 지용호 07-11 9696 81
처음  1  2  3  4  5  맨끝
 
Since 2001.2.7 과학기술정보통신부 등록 비영리민간단체 천문노트. Copyright All rights reserved.
단체명 : 천문노트  |    고유번호 : 101-82-15888  |    대표자명 : 김태욱, 조우성  |    주소 : 138-804 서울특별시 송파구 가락동 93 금강빌딩 7층 710호  |    전화 : 02-543-3295  |    Fax : 02-6918-6888  |    통신판매신고번호 : 종로 제01-5696호  |    개인정보관리책임자 및 사이트관리자 : 지용호