컴포넌트

컴포넌트 배치

폼을 디자인할 때 컴포넌트 툴바에서 선택한 컴포넌트를 배치할 수 있습니다.

Type Definition에 정의된 컴포넌트를 모아둔 컴포넌트 툴박스를 사용해서 동일하게 드래그앤드롭으로 컴포넌트를 배치할 수 있습니다. 컴포넌트 툴박스는 메뉴에서 [View > Toolbox]를 선택해 활성화할 수 있습니다.

자주 사용되는 컴포넌트는 아래와 같습니다.

Form 디자인 시 빈 공간에 마우스로 드래그 하게 되면 러버밴드(Rubber Band)가 사각형으로 표시되며, 사각형의 시작과 끝 포인터 위치 및 너비와 높이 정보를 표시하여 생성될 컴포넌트의 크기를 조절할 때 사용자가 미리 가늠할 수 있도록 도와줍니다.

최종적으로 마우스로 드래그 한 영역의 크기로 컴포넌트가 생성됩니다. 만약 마우스 드래그를 하지 않은 상태로 클릭만 하게 된다면, Type Definition에 정의된 컴포넌트의 기본 크기로 생성하게 됩니다.

애플리케이션 개발 시 사용하지만 화면에 보여지지 않는 컴포넌트들을 별도로 관리할 수 있는 Invisible Objects 영역이 제공 되어 폼 디자인 작업시 각 컴포넌트의 속성을 조정할 수 있습니다.

Invisible Layout 창이 표시 되지 않는다면 Design Window [Popup Menu]에서 ‘Show Invisible Object Area’ 항목을 선택하면 Invisible Layout 창을 볼 수 있습니다.

Invisible Layout에서는 Icon 표시 방법 등을 아래그림과 같은 팝업 메뉴로 지원합니다.

선택 변경

Form 디자인 시 조합 키를 사용해 다양한 방식으로 컴포넌트를 선택할 수 있습니다.

<Tab>키를 이용하여 현재 선택된 컴포넌트를 다른 컴포넌트로 바꿀 수 있습니다. 이동순서는 컴포넌트의 taborder순서에 따라 이동하며, <Shift + Tab>키를 이용할 경우 taborder의 역순서로 이동하게 됩니다.

<Ctrl>키 또는 <Shift>키를 이용하여 선택된 항목을 추가하거나 해제할 수 있는 다중 선택 기능을 지원합니다.

마우스로 드래그하면 선택된 영역 내에 있는 컴포넌트가 모두 선택되지만 <Shift> 키를 누른 채 마우스로 드래그하면 기존에 선택한 항목은 해제되고 나머지 항목은 선택되는 반전 선택 기능을 사용할 수 있습니다.

컴포넌트가 선택되어 있는 상태에서 <ESC>키를 눌르면 선택된 컴포넌트의 상위 컴포넌트를 선택할 수 있습니다.

크기 변경

컴포넌트의 트래커(Tracker) 포인트가 활성화된 상태에서 하나의 포인트를 마우스로 드래그하면 컴포넌트의 크기를 변경할 수 있습니다.

만약 여러 개의 컴포넌트가 선택된 경우, 같은 비율로 선택된 모든 컴포넌트의 크기가 변경됩니다.

<Shift>키를 누른 상태에서 마우스를 드래그하면 드래그되는 포인트를 따라 가로, 세로가 같은 비율로 크기가 변경됩니다.

<Ctrl>키를 누른 상태에서 마우스 드래그로 크기를 변경하면, 컴포넌트의 정중앙 좌표를 기준으로 상하 또는 좌우로 같은 크기로 변경됩니다.

<Shift + Ctrl>키를 누른 상태에서 마우스 드래그로 크기를 변경하면, 두 가지 기능이 동시에 적용되어 컴포넌트의 정중앙 좌표를 기준으로 가로, 세로의 크기가 같은 비율로 변경됩니다.

마우스를 사용하지 않고 <Shift>키를 누른 상태에서 키보드의 방향키를 사용해 컴포넌트의 크기를 변경할 수 있습니다.

위치 변경

선택된 컴포넌트들은 키보드의 방향키나 마우스 드래그로 위치를 변경할 수 있으며 변경된 좌표는 속성으로 바로 적용됩니다. 또한 <Ctrl>키를 누른 상태로 마우스로 드래그하면 해당 지점에 컴포넌트가 복사됩니다.

Form 디자인에서 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 지원하기 위해 다른 컴포넌트나 옵션에서 설정된 Dot Grid에 가까이 가져가면 자동으로 해당 위치에 배치해주는 자석(Magnetic) 기능을 지원합니다.

자석 기능은 메뉴 [Tools - Options - Form Design]의 Option값에 따라 Dot Grid 또는 다른 컴포넌트에 대해 활성화 여부를 정할 수 있습니다.

탭 순서

애플리케이션 실행 중 <Tab>키를 눌렀을 때 컴포넌트에서 다른 컴포넌트로 이동하는 순서를 설정합니다.

Tab Order Edit

디자인 창에서 <Ctrl + D>키를 누르거나, Design Window[Popup Menu]의 Tab Order Edit 메뉴를 통해 탭 순서를 편집할 수 있습니다.

마우스 커서를 특정 컴포넌트 위로 가져가면 컴포넌트가 빨간색으로 강조되어 표시되며 'Next Taborder' 값에 해당하는 컴포넌트는 마우스 커서가 위치하지 않더라도 주황색으로 강조되어 표시됩니다. 또한, 여러 개의 컴포넌트가 겹쳐져 있는 경우에는 컴포넌트가 펼쳐진 상태로 보여 각 컴포넌트의 탭 순서를 편집할 수 있습니다.

Tab Order Edit 모드에서는 컨텍스트 메뉴를 아래와 같이 지원합니다.

Tab Order List

목록 형태로 컴포넌트의 Tab Order를 확인하고 수정할 수 있습니다. 하나 이상의 항목을 선택하고 하단 버튼을 사용해 원하는 순서로 Tab Order를 변경할 수 있습니다.

메뉴에서 [Design > Tab Order List] 또는 Design Window[Popup Menu]의 Tab Order List 메뉴를 통해 탭 순서를 편집할 수 있습니다.

Tab Order View

현재 화면에 설정된 탭 순서를 확인하는 기능입니다. 메뉴에서 [Design > Tab Order View] 또는 Design Window[Popup Menu]의 Tab Order View 메뉴를 선택하면 토글 형식으로 해당 기능을 켜거나 끌 수 있습니다. 기능이 활성화되면 아래 그림과 같이 컴포넌트 왼쪽 윗부분에 2개의 숫자가 표시됩니다.

파란색 사각형 안에 표기된 것은 탭 순서를 나타냅니다. 컴포넌트의 taborder 속성을 수정하거나 'Tab Order Edit' 기능을 사용해 순서를 변경할 수 있습니다.

녹색 사각형 안에 표기된 것은 컴포넌트의 Z-Order를 표시합니다. Z-Order는 컴포넌트가 겹쳐있을 때 보여주는 순서를 지정합니다. 숫자가 큰 컴포넌트가 가장 위에 위치하며 사용자에게 보입니다.

Z-Order는 Align 툴바에서 'Bring to Front', 'Send to Back', 'Bring Forward', 'Send Backward' 4가지 기능을 사용해 변경하거나 Source 탭에서 배치된 XML 코드의 순서를 바꿔 변경할 수 있습니다.

가이드 라인

가이드 라인은 눈금자(Ruler)에서 지원되는 기능으로 개발자가 임의로 수평/수직 방향으로 안내선을 만들어 해당 선에 컴포넌트를 정렬키는 기능을 지원합니다.

눈금자 위의 원하는 지점을 마우스로 클릭하면 가이드 라인이 생성되며, 생성된 가이드 라인은 마우스 드래그로 위치를 변경할 수 있습니다. 가이드 라인을 디자인 창 영역 밖으로 드래그앤드롭하거나 눈금자 위에 있는 가이드 라인의 역삼각형 아이콘을 더블 클릭해 제거할 수 있습니다.

속성 설정

Form 디자인에서 선택된 컴포넌트 속성들은 속성창에 표시되며, 속성창에서 값을 변경하였을 경우 컴포넌트에 바로 적용됩니다.

하위 속성을 가지는 속성은 확장할 수 있는 아이콘이 표시됩니다. 해당 속성은 하위 속성들과 동기화되어 있어 상위 속성을 수정 하거나, 하위 속성을 수정하면 다른 한쪽에 자동으로 반영됩니다.

화면에 시각적으로 표현되는 컴포넌트는 스타일 속성을 가지고 있으며 각 속성을 수정해 컴포넌트의 스타일을 변경할 수 있습니다.

글꼴 설정

텍스트 속성을 가지고 있으며 글꼴을 지정할 수 있는 컴포넌트는 font 속성을 지정할 수 있습니다.

넥사크로플랫폼 애플리케이션은 글꼴을 포함해 제공되지 않고 사용자 운영체제에 설치된 글꼴을 사용합니다. 애플리케이션 개발 시 여러 개의 글꼴을 지정해 순차적으로 사용 가능한 글꼴을 찾을 수 있게 지정할 수 있습니다.

데이터 및 이벤트 처리

데이터 바인딩

폼 디자인 시 생성되어 있는 Dataset 컴포넌트를 드래그앤드롭하거나 속성창에서 바인딩 관련 속성을 선택해 데이터를 바인딩할 수 있습니다.

드래그앤드롭으로 컴포넌트에 Dataset을 바인딩하는 경우 컴포넌트의 종류에 따라 Inner Bind Dataset 또는 Bind Item Editor 기능이 호출됩니다.

Inner Bind Dataset

ListBox나 Combo와 같이 목록 형식으로 데이터를 표현할 수 있는 컴포넌트에 Dataset을 바인딩하는 경우에 dataset의 컬럼을 지정할 수 있는 Inner Bind Dataset 기능이 호출됩니다.

Bind Item Editor

Edit나 Button등 단일 항목만 표현하는 컴포넌트에 Dataset을 바인딩하는 경우에 Bind Item Editor 기능이 호출됩니다.

Dataset이 폼이나 컴포넌트에 바인딩되면 Project Explorer의 해당 아이템에 다른 컴포넌트와 다르게 표시가 되어 쉽게 확인할 수 있습니다.

Grid Contents Editor

Grid 컴포넌트는 속성창에서 볼 수 있는 속성 외에 Grid를 구성하는 각 Cell 단위 별로 추가적인 속성을 가지고 있습니다. Grid Contents Editor는 Grid의 추가적인 속성을 편집할 수 있는 기능을 제공합니다.

디자인 창에서 Grid 컴포넌트를 더블 클릭하면 Grid Contents Editor를 호출할 수 있습니다.

Grid Contents Editor는 기본 편집 창, 속성 창 및 Design Source로 구성되어 있습니다. 기본 편집 창에서는 컨텍스트 메뉴와 단축키를 사용하여 Cell을 추가/삭제하거나 속성을 편집할 수 있습니다. 기본 편집 창의 최상단에는 Column Index가 표시되고 아래로는 Head, Body, Summary로 구분되어 표시됩니다. 속성 창에는 Cell 구분, 해당 Cell의 속성 목록, 각각의 속성 값이 표시됩니다.

기본 편집 창의 컨텍스트 메뉴에서 Column이나 Row를 추가할 수 있습니다.

Cell이 선택된 상태에서는 아래와 같은 컨텍스트 메뉴가 지원됩니다.

Design Source 창에서는 편집된 내용을 XML형태로 표시되며 원하는 항목을 직접 수정할 수 있습니다.

이벤트 생성

이벤트를 편집할 컴포넌트를 선택하고 속성창의 이벤트 편집 모드를 선택하여, 컴포넌트의 이벤트를 작성할 수 있습니다. 이벤트는 사용자가 직접 스크립트로 작성할 수 도 있지만 속성창에서 해당 이벤트를 더블 클릭하면 자동으로 이벤트 함수를 생성할 수 있습니다.

또는 폼에 배치된 컴포넌트를 더블 클릭하면, 해당 컴포넌트의 클릭 이벤트가 자동으로 생성됩니다.

화면 레이아웃

넥사크로플랫폼은 다양한 크기를 가지는 디바이스에 대응하는 화면 디자인을 하나의 소스로 개발할 수 있도록 MLM(Multi Layout Manager)기능을 제공합니다. 애플리케이션을 구성하는 폼은 화면 크기에 따라 여러 개의 레이아웃을 사용할 수 있고 서브 레이아웃을 사용하면 내부적인 컴포넌트까지 세부적으로 배치할 수 있습니다. 또한 모바일 디바이스에서 스탭 기능을 활용하면 최적화된 화면을 구성할 수 있습니다.

폼 레이아웃

새로운 폼을 만들 때 ‘New Form Wizard’에서 레이아웃을 지정하거나 폼을 만든 이후에 추가적인 레이아웃을 지정할 수 있습니다. 폼 레이아웃은 사용자가 접하는 화면의 크기에 따라 최적화된 화면 구성을 제공하기 위해 사용합니다.

화면 구성

현재 폼에서 추가된 레이아웃이 탭 형식으로 표시됩니다. 탭이 표시되는 위치는 [Tools > Options > Form Design > Layout Manager > Layout Tab Style] 항목에서 원하는 위치로 변경할 수 있습니다.

추가된 레이아웃 탭을 선택하면 해당 레이아웃으로 화면이 전환되며 컨텍스트 메뉴에서 레이아웃을 추가하거나 삭제하고 전체 레이아웃 목록을 확인할 수 있습니다. 추가된 레이아웃은 빨간 점선으로 폼의 영역을 표시해줍니다.

현재 폼에서 사용중인 레이아웃 정보는 폼 화면 또는 Project Explorer에서 폼을 선택했을 때 보여지는 컨텍스트 메뉴에서도 확인할 수 있습니다.

디자인 기능 제한

'Default' 탭에서는 모든 기능이 제공되지만, 추가된 '레이아웃' 탭에서는 일부 디자인 기능이 제한됩니다.

속성창

폼 속성 중 height와 width 속성은 레이아웃 별로 수정할 수 있으며 트래커를 마우스로 드래그해서 크기를 변경하는 경우 해당 레이아웃의 height, width 속성값이 같이 변경됩니다. 속성창에서 보여지는 폼 크기와 관련된 속성값은 ‘Layout List' 목록에서 보여지는 값과 같습니다.

‘Default’ 레이아웃 탭과 다른 정보를 가지는 추가된 레이아웃 탭에서 변경된 속성은 굵은 파랑색으로 표시됩니다. 속성창에 표시되는 정보는 굵기와 색깔에 따라서 아래와 같은 의미를 가집니다.

서브 레이아웃

컴포넌트 내부에 컨텐츠를 가지는 Div, PopupDiv, TabPage 컴포넌트도 폼과 마찬가지로 여러 개의 레이아웃을 가질 수 있습니다. 폼 레이아웃과 구분해서 서브 레이아웃(Sub Layout)이라고 표현합니다. 서브 레이아웃은 폼 레이아웃과 별개로 구성됩니다. Tab 컴포넌트를 사용하면 TabPage 별로 다른 서브 레이아웃을 구성할 수 있습니다.

폼에 추가된 레이아웃에서는 Div 에 포함된 Button 컴포넌트를 직접 편집할 수 없습니다. 때문에 해당 컴포넌트의 크기에 맞는 최적화된 화면 배치를 필요로 합니다. 서브 레이아웃를 적용하면 폼 레이아웃이 변경되면서 대상 컴포넌트의 크기가 변경되고 이에 따라 서브 레이아웃도 같이 변경되면서 최적화된 화면을 구현할 수 있습니다.

레이아웃 옵션

추가 레이아웃에서 Div와 같은 컴포넌트 내부에 포함된 컨텐츠를 편집 하기 위해서는 서브 레이아웃 에디터를 사용해야 합니다.

• Show Sub Layout Name 항목을 선택하면 현재 컴포넌트에 적용된 서브 레이아웃 이름을 확인할 수 있습니다.

• Sub Layout Edit 메뉴를 선택하면 서브 레이아웃을 편집할 수 있습니다.

• Set Sub Layout 메뉴를 선택하면 컴포넌트의 크기를 선택한 서브 레이아웃 크기로 변환해 줍니다. 설정된 Sub Layout 목록 중에서 선택할 수 있습니다.

서브 레이아웃 에디터

Sub Layout Edit 메뉴를 선택하거나 컴포넌트를 더블 클릭하면 아래 그림과 같은 서브 레이아웃 에디터가 나타납니다. default 서브 레이아웃은 선택한 컴포넌트 크기와 같습니다.

서브 레이아웃 에디터는 다음과 같은 특징을 가집니다.

• 서브 레이아웃 에디터 상태에서 부모 컴포넌트(Div 컴포넌트) 영역을 빨간색 눈금으로 표시합니다.

• 폼 디자인 상태에서는 보이지 않고 숨겨졌던 하위 컴포넌트도 편집할 수 있습니다.

• 해당 컴포넌트와 하위 컴포넌트를 제외한 다른 컴포넌트는 선택하거나 편집할 수 없습니다.

• 서브 레이아웃의 크기는 수정할 수 있지만 위치를 변경할 수는 없습니다.

하위 컴포넌트를 선택했을 때와 그렇지 않았을 때 컨텍스트 메뉴가 조금 다르게 표기되며 하위 컴포넌트를 선택했을 때 컨텍스트 메뉴는 컴포넌트에 따라 달라질 수 있습니다.

속성창

서브 레이아웃 내에서 컴포넌트의 스타일 및 일부 속성을 수정할 수 있습니다. Div 컴포넌트라면 default 서브 레이아웃에서 수정된 내용은 <Div> 태그에 저장되고 추가된 서브 레이아웃에서 수정된 내용은 해당 <Layout>에 저장됩니다.

...
<Layouts>
     <Layout>
          <Div id="Div00" left="10" top="10" width="250" height="250" 
          style="background:red;">
               <Layouts>
                    <Layout width="250" height="250"/>
                    <Layout name="iOS" width="150" height="150" 
                    style="background:blue;"/>
               </Layouts>
          </Div>
     </Layout>
</Layouts>
...

스텝

스텝(Step)이란 여러 개 단계 이루어진 페이지를 하나의 폼에서 개발할 수 있는 기능을 의미합니다. 스텝은 간단하게 폼에서 stepcount 속성값을 지정하면 구현할 수 있습니다.

stepcount

1. 현재 편집중인 스텝 영역을 표시합니다. 마우스 포인터의 위치에 따라 편집 영역이 변경됩니다.

2. 각 스탭 영역은 파란색 점선으로 구분되어 표시됩니다.

positionstep

• 컴포넌트에 positionstep Property가 추가 되었습니다. positionstep Property는 해당 컴포넌트의 소속 Step을 나타냅니다.

• 컴포넌트의 Position이 positionstep + Position으로 적용됩니다.

• 컴포넌트의 Position은 지정된 positionstep 을 기준으로 설정됩니다.

• 컴포넌트가 모든 Step영역을 벗어나면 positionstep 0으로 처리됩니다.

• positionstep이 -1일 경우에는 모든 Step에 표시됩니다.

  • -1 positionstep 컴포넌트는 모든 Step 영역에서 선택, 편집 할 수 있습니다

  • -1 positionstep 컴포넌트는 현재 편집중인 Step이 아닌 경우, 실제 컴포넌트보다 약간 투명하게 보여집니다.

  • -1 positionstep 컴포넌트는 모든 Step에서 해당 Step에서 보여지는 컴포넌트를 선택 및 편집 할 수 있습니다.

...
    <Layouts>
      <Layout width="300" height="450" stepcount="3">
        <Button id="Button00" text="Button00" 
          left="60" top="60" width="120" height="50"/>
        <Button id="Button01" text="Button01" 
          left="60" top="60" width="120" height="50" positionstep="1"/>
        <Button id="Button02" text="Button02" 
          left="60" top="60" width="120" height="50" positionstep="2"/>
        <Button id="Button03" text="Button03" 
          left="60" top="160" width="120" height="50" positionstep="-1"/>
      </Layout>
    </Layouts>
...

Position

넥사크로 스튜디오에서는 폼이나 각 컴포넌트의 위치를 left, top, right, bottom width, height 속성값을 지정해 지정할 수 있습니다. 각 속성값은 픽셀 단위(px) 또는 퍼센트(%) 중 하나를 선택해서 사용할 수 있습니다.

트래커

컴포넌트를 선택했을 때 Position 속성에 따라 해당하는 트래커(Tracker)는 붉은 색으로 표시됩니다.

눈금자 / Dot Grid

폼 디자인 상에서 위치를 지정하면서 사용한 단위에 따라 레이아웃을 쉽게 배치할 수 있도록 눈금자의 단위도 픽셀과 퍼센트 둘 중에 하나를 선택할 수 있습니다.

눈금자 컨텍스트 메뉴에서 Show Pixel Ruler / Show Percent Ruler를 선택할 경우 눈금자의 표시 단위와 Dot Grid의 표시 방법이 변경됩니다.

컴포넌트를 하나만 선택하고 크기를 수정할 때는 크기 정보를 표시해줍니다. 이 때 표기되는 크기 단위는 눈금자의 표시 단위에 따라 해당하는 단위로 표시해줍니다.

포지션 에디터

사용자가 쉽게 Position 정보를 설정할 수 있도록 별도의 에디터를 제공합니다. 포지션 에디터는 컴포넌트를 선택했을때 나타나는 미니툴바에서 실행할 수 있습니다.

포지션 에디터에서 수정된 값은 해당 컴포넌트의 left, top, right, bottom, width, height 속성값에 반영됩니다.

속성창

속성창에서 left, top, right, bottom, width, height 속성값의 단위를 변경할 수 있습니다.