'component'에 해당되는 글 3건

  1. 2007.09.20 About the steps for creating a component
  2. 2007.09.19 About the invalidation methods
  3. 2007.09.19 Flex2 Component life cycle
04.IT Knowledge/Adobe Flex2007. 9. 20. 00:56

About the steps for creating a component

1. 필요한 경우 component를 위해 skin을 사용할 수 있습니다.
2. ActionScript class 파일을 만듭니다.
  2.1 UIComponent나 대상클래스를 상속합니다.
  2.2 MXML에서 사용할 속성을 정의합니다.
  2.3 graphic이나 skin을 embed합니다.
  2.4 constructor를 구현합니다.
  2.5 UIComponent.createChildren() method를 구현합니다.
  2.6 UIComponent.commitProperties() method를 구현합니다.
  2.7 UIComponent.measure() method를 구현합니다.
  2.8 UIComponent.layoutChrome() method를 구현합니다.
  2.9 UIComponent.updateDisplayList() method를 구현합니다.
  2.10 properties, methods, styles, events, and metadata 등을 추가합니다.
3. 파일을 배포합니다.
Posted by 아주 오래된 미래
04.IT Knowledge/Adobe Flex2007. 9. 19. 12:42

About the invalidation methods

 Component의 lifetime동안 작성한 Application에서 Component의 이런저런 속성을 변경하는
경우가 있습니다.
 .....<< 예시 시나리오 생략 >> ...

 Flex는 component들의 속성변경등에 대해 invalidatioin 메커니즘을 사용합니다.
 Component변경에 대해 Flex에 변경을 알리기 위해서는 component의 commitProperties, measure, layoutChrome, 또는 updateDisplayList method를 사용해야 합니다.
 - invalidateProperties() : 다음의 screen update에 commitProperties가 호출되도록
                                Mark합니다.
 - invalidateSize() : 다음의 screen update에 measure가 호출되도록 Mark합니다.
 - invalidateDisplayList() : 다음의 screen update에 layoutChrome와
                        updateDisplayList가 호출되도록 Mark합니다.

 Component가 invalidation method를 호출하면, component가 update되어야 함을 Flex에 전달합니다.
 여러 component가 invalidation method를 호출하면, Flex는 다음 screen update 모두 함께 반영
되도록 처리합니다.

 일반적으로 component 사용자들은 invalidatioin method를 직접 호출하지는 않지만, setter
method의 사용등으로 내부적으로 호출됩니다.

 
Posted by 아주 오래된 미래
04.IT Knowledge/Adobe Flex2007. 9. 19. 09:43

Flex2 Component life cycle

 Flex2 help에 있는 내용을 일부 발췌하였습니다.
 요즘 Chart renderring에 관심이 있어서 내부적으로 method call하는 방식을 찾다가
발견했네요.

 Flex2에서 component를 아래와 같이 생성할 경우 다음의 내부적인 method가 실행됩니다.
var btnXX:Button = new Button();
btnXX.label = "확인";
boxContainer.addChild(btnXX);

1. 상위 컨테이너를 component의 parent로 등록합니다.
2. component의 style 설정을 계산합니다.
3. component에 preinitialize event를 발생시킵니다.
4. component의 createChildren method를 호출합니다.
5. invalidateProperties, invalidateSize와 invalidateDisplayList
 method가 9번 항목의 render 이벤트가 수행되는 동안 commitProperties, measure또는
 updateDisplayList method에 연결되어 수행됩니다.(??)
 -- 사용자가 width, height를 지정하는 경우에는 measure() method를 호출하지 않습니다.
6. component에 initialize event를 발생시킵니다.
 이 때, component의 모든 children component가 초기되나, component의 size,
 layout이 확정되지는 않습니다. 그러므로 이 event를 이용하여 component가 위치하기
 전의 추가적인 작업을 할 수 있습니다.
7. 상위 컨테이너에 childAdd event가 발생합니다.
8. 상위 컨테이너의 initialize event가 발생합니다.
9. render 이벤트가 발생하는 동안 flex는 다음 동작을 수행합니다.
  9.1 component의 commitProperties method를 호출합니다.
  9.2 component의 measure method를 호출합니다.
  9.3 component의 layoutChrome method를 호출합니다.
  9.4 component의 updateDisplayList method를 호출합니다.
  9.5 component에 updateComplete 이벤트를 발생시킵니다.
10. commitProperties, measure또는 updateDisplayList method가
 invalidateProperties, invalidateSize또는 invalidateDisplayList를 호출하면
 flex는 추가적인 render 이벤트를 발생시킵니다.
11. render 이벤트가 발생된 이후에 flex는 다음 동작을 수행합니다.
  11.1 visible 속성을 true로 설정합니다.
  11.2 creationComplete 이벤트를 발생시킵니다. component의 크기와 layout을
   설정합니다. 이 이벤트는 component가 생성될 때 한 번 호출됩니다.
  11.3 updateComplete 이벤트가 발생합니다.
   flex는 layout, position, size 또는 다른 component의 visual 특성값이 변할
   때마다 추가적으로 updateComplete 이벤트를 발생시키며, compoent의 display가
   갱신됩니다.
12. 다음과 같은 MXML 코드도 동일하게 작동합니다.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Box><mx:Button label="확인"/></mx:Box>
</mx:Application>

Posted by 아주 오래된 미래

티스토리툴바