레이아웃 구성하기 (Div, Panel)

Div 라고 하면 HTML 태그에서 나오는 div 와 혼란스러운 부분이 있는데

일단 정의부터 확인해보겠습니다.

메뉴얼을 보면 Div를 다음과 같이 정의하고 있습니다.

하나의 화면에 여러개의 부분화면을 구성할 때 사용하는 컴포넌트로

주 화면과 독립되거나 연계된 화면을 구성할 수 있으며

다른 폼(Form)과 연결해서 사용할 수 있고

border 나 scrollbar를 사용해 영역을 분할할 수 있다.

프레임과의 차이점은 프레임은 각 프레임이 별개의 윈도우처럼 동작하는데 반해

Div는 화면을 분할해서 폼을 용이하게 사용하려는 목적이라고 볼 수 있습니다.

UX 스튜디오에서 작업은 Div 를 배치하고 해당 영역 위에 컴포넌트를 추가하면 됩니다.

코드에서 보면 다음과 같이 구성이 됩니다.

<Form id="test" ...>

    <Layout>

      <Div id="Div00" taborder="0" ...>

        <Layout>

          <Button id="Button00" taborder="0" text="Button00" position="absolute 452 78 581 122"/>

        </Layout>

      </Div>

    </Layout>

각 컴포넌트의 위치를 좌표값으로 구성하는데 Div 의 영역을 벗어나게 좌표값을 잡게 되면

스크롤이 작동합니다.

 
일단 한번 Div 영역에 들어오게 되면 빠져나갈 수가 없습니다.

Div 태그 밖으로 빼주어야 원하는대로 동작하겠죠.

그리고 Div 내에 포함된 컴포넌트는 다른 수준을 가지게 됩니다.

즉 버튼을 포함했다고 했을때 버튼에 직접 접근할 수 없고 Div0.Button0 과 같은 식으로 접근하게 됩니다.

그렇지 않는다면 다음과 같은 오류 메시지를 볼 수 있을 겁니다.

uxs (7704): 'Button0'은(는) 선언되지 않은 식별자입니다. (행: *)

Panel도 Div와 비슷한 것 같은데 역시 도움말의 정의를 보면

여러 컴포넌트를 Panel을 기준으로 정렬하여 화면을 구성할  때 사용하는 컴포넌트라고 되어있습니다.

Div 내 컴포넌트가 개별적인 좌표값을 가지고 정렬 처리는 툴에서 하는 반면

Panel 내 포함된 컴포넌트는 지정된 기준에 따라 정렬이 됩니다.

Panel을 생성하고 버튼을 배치한다고 해서 끝이 아니라

Panel 속성중에서 items 를 선택하고 Items를 편집해야 합니다.

배치와 관련해서는 componentalign 속성과 layout 속성이 영향을 미칩니다.

componentalign 은 레이아웃의 시작위치를 지정하며 layout 속성은 정렬과 관련된 기준을 지정합니다.

layout에서 absolute를 지정하게 되면 관련 컴포넌트의 좌표값을 그대로 가져가며

vertical이나 horizontal을 선택하게 되면 관련 속성을 따라갑니다.

 

Panel 을 잘 활용하면 동적으로도 화면의 배치를 변경할 수 있습니다.

좀 더 자세한 내용은 다음 기회에..

출처
http://cafe.naver.com/xplatform101/24