컴포넌트를 만드는 이유는 무엇일까?
이유는 어플리케이션을 모듈단위로 분리해서 개발 및 보수가 가능하기 때문이다.
또 이렇게 만들면 컴포넌트의 재사용에도 용이해진다.
컴포넌트 종류에는 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
[참고사이트]
[숙제]
첨부파일과 동영상을 참고하여 실습해본다.
실습한 것을 MXML + ActionScript 3.0 으로 수정해본다.
- 자식 컴포넌트는 MXML로 만들고 나머지는 ActionScript 3.0으로 만든다.
- Base는 UIComponent이며 MXML 컴포넌트로 만들면 된다.
- 이걸 뭐~ 어떻게 하는거야~ 라고 의문이 든다면 질문/답변을 이용해주세요.
Library Project로 컴포넌트를 만들어보고 Flex Project에 컴포넌트를 추가해서 사용해보자.
제출 : 2008년 7월 24일 저녁 9시