Control & Layout : Constrains 와 view State 활용

MEDINFO 를 만들면서 느낀점이 스텝별로 어떻게 화면을 전환하는지와 외형적인 틀을 유동적인 화면 크기에 어떻게 맞출건지에 대한 고민이 많았다. 결국 내가 선택한 방법은 화면전환에서는 TabNavigator 의 tab부분의 높이(Height속성) 값을 0으로 줘 탭이 없는것 처럼 보이도록 하고 탭을 이동시키는 것으로 대체하였다. 하지만 프로그램의 틀을 유지하는데는 딱히 방법이 없어서 실패하였다. 하지만 앞서서 이 Constrains와 view State 에대해서 알았더라면 좀 더 쉽게 대처할수 있었다고 생각이 든다.

Constrains는 해당 컨트롤을 항상 어느 위치에 있어야한다고 규정을 한다. 이를테면 좌측 상단으로 부터 x = 10, y = 10 만큼 떨어져 있어야 한다는 제약사항을 주면 브라우저나 프로그램의 크기가 변해도 항상 같은 위치에 컨트롤이 놓이게 된다. 버튼이나 사이즈의 확대, 축소가 가능한 컨트롤이 있다면 Constrains 를 적극 활용하도록 해야겠다.

<mx:VBox id="resultBox" left="10" top="10" bottom="10" right="10">

이곳에서는 상,하,좌,우 측에 10만큼 항상 여백을 두도록 하는 Constrain 을 사용하였다.

다음으로는 viewState에 관한 내용이다. 이부분을 공부하면서 땅을 치고 안타까워했다. 이전에 FLEX를 이용해서 매쉬업 서비스를 만들면서 화면전환에 대한 어려움이 많았다. 맨땅에 헤딩하는 심정으로 만들었기 때문에 위에서 말했듯 TabNavigator를 이용했다. 하지만 좀더 쉽고 간단한 방법이 있었다. ViewState는 위의 소스처럼 특정한 이름을 가진 State (상태) 값들이 존재한다. 해당 State 이하의 노드들은 현재의 State 값이 변할때 어떻게 화면의 구성을 변경할지를 열거해 놓는다. 또한 디자인 모드에서 State 값에 따라서 실제 설정한대로 화면이 구성되니 훨씬더 직관적이고 좋다.
(이걸 안썼다는게 애통하다..) 또한 화면전환시에 이펙트도 넣을수 있기 때문에.. (ㅠㅠ) 아주 간편하게 개발할 수 있도록 도와준다.

SetProperty 나 SetStyle 같은 엘리먼트? 컴포넌트? 들을 살펴보면 target 이라는 attribute 를 볼수 있다. 보통 HTML 태그에서의 사용법과 유사하지만 "{ }" 와 같이 중괄호 형태로 들어가 있는것을 눈여겨 볼수가 있다. 실제 큰따옴표(" ") 안에 들어가는 내용은 문자인경우가 많은데 저 중괄호 안에 선언된 것들은 해당 컴포넌트의 id의 값이다. 다시 말해 각 컴포넌트마다 고유하게 할당된 변수의 이름이다. 변수명의 선언 뿐만아니라 해당 변수의 상태 값 변경이나 함수 호출과 같은 기능도 수행할 수 있다. 단 지금 다루는 target 이라는 부분은 함수가 아닌 변수를 넣어야 맞다. 이를 데이터 바인딩이라고 한다.