Tab

개요

Tab은 여러개의 TabPageControl 을 추가해서 보여주는 컴포넌트입니다.

Tab은 좁은 화면에 많은 수의 입출력 컴포넌트가 배치될 필요가 있을 때 사용하면 좋습니다.
Tab안의 TabPageControl 은 Tab의 Contents로 구성되거나, Form을 연결해서 사용하게 됩니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




- Tab을 4~5단계의 다단으로 사용할 경우 화면의 로딩 속도가 느려질 수 있으므로 Tab은 2~3단계 이내로 중첩해 사용하시기 바랍니다.

- "Control" 키와 조합되어 사용되는 Key Action 은 usecontrolkey 속성을 설정하여야 합니다.

컴포넌트 구조

컴포넌트, 내부 컨텐츠 크기

Tab 컴포넌트의 크기를 결정하는 기준입니다.

- Tab 컴포넌트의 tabposition 속성값이 "top" 일 경우 기준입니다.

Tab Component

Width

Tab 컴포넌트의 width 속성값이 적용됩니다.

Height

Tab 컴포넌트의 height 속성값이 적용됩니다.

tabbuttonitem Control


  • multiline, tabjustify, showextrabutton, tabindex 속성값과 TabPage 의 갯수에 따라 표시되는 tabbuttonitem 컨트롤이 결정됩니다.

Left

Tab 컴포넌트의 Width 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

Top

0 으로 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 각 라인별로 tabbuttonitem 컨트롤의 Height 를 더한 값이 적용됩니다.

Width

tabbuttonitemtext 컨트롤의 Width 와 extrabutton 컨트롤의 Width 를 더한 값이 적용됩니다.

multiline 또는 tabjustify 속성값이 "true" 이면 Tab 컴포넌트의 Width 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

Height

tabbuttonitemtext 컨트롤의 Height 와 extrabutton 컨트롤의 Height 중 큰 값이 적용됩니다.

최종적으로 각 tabbuttonitem 컨트롤 중 제일 큰 Height 가 모든 tabbuttonitem 컨트롤의 Height 에 적용됩니다.

tabbuttonitemtext Control

Left

0 으로 적용됩니다.

Top

tabbuttonitem 컨트롤의 가운데에 정렬되게 계산되어 적용됩니다.

Width

텍스트 길이에 맞게 계산된 값이 적용됩니다.

텍스트가 여러줄 일 경우 가장 긴 줄을 기준으로 계산됩니다.

Height

텍스트 크기에 맞게 계산된 값이 적용됩니다.

텍스트가 여러줄 일 경우 전체 줄의 높이가 계산됩니다.

extrabutton Control


  • showextrabutton 속성값에 의해 extrabutton 컨트롤의 표시 여부가 결정됩니다.

Left

tabbuttonitem 컨트롤의 Width 에서 extrabutton 컨트롤의 Width 를 뺀 값이 적용됩니다.

Top

tabbuttonitem 컨트롤의 가운데에 정렬되게 계산되어 적용됩니다.

Width

아이콘 이미지의 너비가 적용됩니다.

Height

아이콘 이미지의 높이가 적용됩니다.

prevbutton Control


  • tabjustify, multiline 속성값에 의해 prevbutton 컨트롤의 표시 여부가 결정됩니다.

Left

nextbutton 컨트롤의 Left 에서 prevbutton 컨트롤의 Width 를 뺀 값이 적용됩니다.

Top

tabpage 컨트롤의 Top 에서 nextbutton 컨트롤의 Height 를 뺀 값이 적용됩니다.

Width

아이콘 이미지의 너비가 적용됩니다.

Height

아이콘 이미지의 높이가 적용됩니다.

nextbutton Control


  • tabjustify, multiline 속성값에 의해 nextbutton 컨트롤의 표시 여부가 결정됩니다.

Left

tabpage 컨트롤의 Width 에서 nextbutton 컨트롤의 Width 를 뺀 값이 적용됩니다.

Top

tabpage 컨트롤의 Top 에서 nextbutton 컨트롤의 Height 를 뺀 값이 적용됩니다.

Width

아이콘 이미지의 너비가 적용됩니다.

Height

아이콘 이미지의 높이가 적용됩니다.

tabpage Control


  • tabpage 컨트롤에 속한 컴포넌트가 tabpage 컨트롤의 영역을 벗어난 경우 vscrollbar, hscrollbar 가 표시됩니다.

Left

0 으로 적용됩니다.

Top

tabbuttonitem 컨트롤의 Height 가 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 각 라인별로 tabbuttonitem 컨트롤의 Height 를 합산한 값이 적용됩니다.

Width

Tab 컴포넌트의 Width 가 적용됩니다.

Height

Tab 컴포넌트의 Height 에서 tabpage 컨트롤의 Top 을 뺀 값이 적용됩니다.

Form

Left

0 으로 적용됩니다.

Top

0 으로 적용됩니다.

Width

tabpage 컨트롤의 Width 가 적용됩니다.

Height

tabpage 컨트롤의 Height 가 적용됩니다.

- Tab 컴포넌트의 tabposition 속성값이 "bottom" 일 경우 기준입니다.

Tab Component

Width

Tab 컴포넌트의 width 속성값이 적용됩니다.

Height

Tab 컴포넌트의 height 속성값이 적용됩니다.

tabbuttonitem Control


  • multiline, tabjustify, showextrabutton, tabindex 속성값과 TabPage 의 갯수에 따라 표시되는 tabbuttonitem 컨트롤이 결정됩니다.

Top

tabpage 컨트롤의 Height 가 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 각 라인별로 tabbuttonitem 컨트롤의 Height 를 더한 값이 적용됩니다.

prevbutton Control


  • tabjustify, multiline 속성값에 의해 prevbutton 컨트롤의 표시 여부가 결정됩니다.

Top

tabpage 컨트롤의 Height 가 적용됩니다.

nextbutton Control


  • tabjustify, multiline 속성값에 의해 nextbutton 컨트롤의 표시 여부가 결정됩니다.

Top

tabpage 컨트롤의 Height 가 적용됩니다.

tabpage Control


  • tabpage 컨트롤에 속한 컴포넌트가 tabpage 컨트롤의 영역을 벗어난 경우 vscrollbar, hscrollbar 가 표시됩니다.

Top

0 으로 적용됩니다.

Height

Tab 컴포넌트의 Height 에서 tabbuttonitem 컨트롤의 Height 를 뺀 값이 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 Tab 컴포넌트의 Height 에서 각 라인별로 tabbuttonitem 컨트롤의 Height 를 합산한 값을 뺀 값이 적용됩니다.

- Tab 컴포넌트의 tabposition 속성값이 "left" 일 경우 기준입니다.

Tab Component

Width

Tab 컴포넌트의 width 속성값이 적용됩니다.

Height

Tab 컴포넌트의 height 속성값이 적용됩니다.

tabbuttonitem Control


  • multiline, tabjustify, showextrabutton, tabindex 속성값과 TabPage 의 갯수에 따라 표시되는 tabbuttonitem 컨트롤이 결정됩니다.

Left

0 으로 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 각 라인별로 tabbuttonitem 컨트롤의 Width 를 더한 값이 적용됩니다.

Top

Tab 컴포넌트의 Height 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

Width

tabbuttonitemtext 컨트롤의 Width 와 extrabutton 컨트롤의 Width 를 더한 값이 적용됩니다.

최종적으로 각 tabbuttonitem 컨트롤 중 제일 큰 Width 가 모든 tabbuttonitem 컨트롤의 Width 에 적용됩니다.

Height

tabbuttonitemtext 컨트롤의 Height 와 extrabutton 컨트롤의 Height 중 큰 값이 적용됩니다.

multiline 또는 tabjustify 속성값이 "true" 이면 Tab 컴포넌트의 Height 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

prevbutton Control


  • tabjustify, multiline 속성값에 의해 prevbutton 컨트롤의 표시 여부가 결정됩니다.

Left

tabpage 컨트롤의 Left 에서 prevbutton 컨트롤의 Width 를 뺀 값이 적용됩니다.

Top

nextbutton 컨트롤의 Top 에서 prevbutton 컨트롤의 Height 를 뺀 값이 적용됩니다.

nextbutton Control


  • tabjustify, multiline 속성값에 의해 nextbutton 컨트롤의 표시 여부가 결정됩니다.

Left

tabpage 컨트롤의 Left 에서 nextbutton 컨트롤의 Width 를 뺀 값이 적용됩니다.

Top

tabpage 컨트롤의 Height 에서 nextbutton 컨트롤의 Height 를 뺀 값이 적용됩니다.

tabpage Control


  • tabpage 컨트롤에 속한 컴포넌트가 tabpage 컨트롤의 영역을 벗어난 경우 vscrollbar, hscrollbar 가 표시됩니다.

Left

tabbuttonitem 컨트롤의 Width 가 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 각 라인별로 tabbuttonitem 컨트롤의 Width 를 합산한 값이 적용됩니다.

Top

0 으로 적용됩니다.

Width

Tab 컴포넌트의 Width 에서 tabpage 컨트롤의 Left 를 뺀 값이 적용됩니다.

Height

Tab 컴포넌트의 Height 가 적용됩니다.

- Tab 컴포넌트의 tabposition 속성값이 "right" 일 경우 기준입니다.

Tab Component

Width

Tab 컴포넌트의 width 속성값이 적용됩니다.

Height

Tab 컴포넌트의 height 속성값이 적용됩니다.

tabbuttonitem Control


  • multiline, tabjustify, showextrabutton, tabindex 속성값과 TabPage 의 갯수에 따라 표시되는 tabbuttonitem 컨트롤이 결정됩니다.

Left

Tab 컴포넌트의 Width 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

Top

Tab 컴포넌트의 Height 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

Width

tabbuttonitemtext 컨트롤의 Width 와 extrabutton 컨트롤의 Width 를 더한 값이 적용됩니다.

최종적으로 각 tabbuttonitem 컨트롤 중 제일 큰 Width 가 모든 tabbuttonitem 컨트롤의 Width 에 적용됩니다.

Height

tabbuttonitemtext 컨트롤의 Height 와 extrabutton 컨트롤의 Height 중 큰 값이 적용됩니다.

multiline 또는 tabjustify 속성값이 "true" 이면 Tab 컴포넌트의 Height 와 multiline, tabjustify, showextrabutton, tabindex 속성값, TabPage 의 갯수를 고려하여 계산된 값이 적용됩니다.

prevbutton Control


  • tabjustify, multiline 속성값에 의해 prevbutton 컨트롤의 표시 여부가 결정됩니다.

Left

tabpage 컨트롤의 Width 가 적용됩니다.

Top

nextbutton 컨트롤의 Top 에서 prevbutton 컨트롤의 Height 를 뺀 값이 적용됩니다.

nextbutton Control


  • tabjustify, multiline 속성값에 의해 nextbutton 컨트롤의 표시 여부가 결정됩니다.

Left

tabpage 컨트롤의 Width 가 적용됩니다.

Top

tabpage 컨트롤의 Height 에서 nextbutton 컨트롤의 Height 를 뺀 값이 적용됩니다.

tabpage Control


  • tabpage 컨트롤에 속한 컴포넌트가 tabpage 컨트롤의 영역을 벗어난 경우 vscrollbar, hscrollbar 가 표시됩니다.

Left

0 으로 적용됩니다.

Top

0 으로 적용됩니다.

Width

Tab 컴포넌트의 Width 에서 tabbuttonitem 컨트롤의 Width 를 뺀 값이 적용됩니다.

Tab 컴포넌트의 multiline 속성값이 "true" 이면 Tab 컴포넌트의 Width 에서 각 라인별로 tabbuttonitem 컨트롤의 Width 를 합산한 값을 뺀 값이 적용됩니다.

Height

Tab 컴포넌트의 Height 가 적용됩니다.

Basic Key Action

Action

Key

Description

포커스 이동

Tab

Tab 이동 순서에 따라 다음 컴포넌트로 포커스가 이동합니다.

TabPage 이동

Ctrl + Tab

화면에 표시된 TabPage 를 변경합니다.

TabPage 이동

좌우방향키

focusacceptable 속성값이 "true" 이고, TabButton 에 포커스가 있을 때 화면에 표시된 TabPage 를 변경합니다.

TabButton 클릭

Ctrl + BackSpace

화면에 표시된 TabPage 의 TabButton 이 클릭 처리되어 onextrabuttonclick 이벤트가 발생합니다.

Accessibility Key Action

접근성 기능이 활성화 되어 있을 때 적용되는 키 액션입니다.

Action

Key

Description

포커스 이동

Tab

Tab 이동 순서에 따라 다음 컴포넌트로 포커스가 이동합니다.

선택상자 이동

상하방향키

Tab Order 가 이전/다음인 컴포넌트로 선택상자가 이동합니다.

TabPage 이동

Ctrl + Tab

화면에 표시된 TabPage 를 변경합니다.

TabPage 이동

좌우방향키

focusacceptable 속성값이 "true" 이고, TabButton 에 포커스가 있을 때 화면에 표시된 TabPage 를 변경합니다.

TabButton 클릭

Ctrl + BackSpace

화면에 표시된 TabPage 의 TabButton 이 클릭 처리되어 onextrabuttonclick 이벤트가 발생합니다.

TabButton 선택 결정

Space

이동한 TabButton을 선택 결정하여 TabPage를 변경합니다.

생성자

Tab.init( strName, vLeft, vTop , vWidth, vHeight [, vRight, vBottom, [vMinWidth, [vMaxWidth, [vMinHeight, [vMaxHeight]]]]] )

Parameters

Type

Description

strName

String

Tab 의 ID를 설정합니다.

vLeft

String, Number

Tab 의 left 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 right 속성값을 기준으로 Tab 의 left 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 left 가 결정됩니다.

vTop

String, Number

Tab 의 top 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 bottom 속성값을 기준으로 Tab 의 top 이 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 top 이 결정됩니다.

vWidth

String, Number

Tab 의 width 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 width 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 width 가 결정됩니다.

vHeight

String, Number

Tab 의 height 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 height 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 height 가 결정됩니다.

vRight

String, Number

Tab 의 right 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


vLeft, vWidth 값을 모두 설정했을 경우 vRight 값은 무시됩니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 left 속성값을 기준으로 Tab 의 right 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 right 가 결정됩니다.

vBottom

String, Number

Tab 의 bottom 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


vTop, vHeight 값을 모두 설정했을 경우 vBottom 값은 무시됩니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 top 속성값을 기준으로 Tab 의 bottom 이 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 bottom 이 결정됩니다.

vMinWidth

String, Number

Tab 이 화면에 표시되는 최소 너비값을 pixel 단위의 숫자로 설정합니다.

vMaxWidth

String, Number

Tab 이 화면에 표시되는 최대 너비값을 pixel 단위의 숫자로 설정합니다.


vMinWidth 보다 작은 값을 설정하면 vMinWidth 값으로 설정됩니다.

vMinHeight

String, Number

Tab 이 화면에 표시되는 최소 높이값을 pixel 단위의 숫자로 설정합니다.

vMaxHeight

String, Number

Tab 이 화면에 표시되는 최대 높이값을 pixel 단위의 숫자로 설정합니다.


vMinHeight 보다 작은 값을 설정하면 vMinHeight 값으로 설정됩니다.

var objComp = new Tab();

objComp.init( "Tab00", 30, 120, 196, 46 );
objComp.init( "Tab00", 30, 120, 196, 46, null, null );
objComp.init( "Tab00", null, null, 300, "400px", "80%", 300 );
objComp.init( "Tab00", 0, 0, 200, 100, null, null, 300, 500, 200, 500 );
objComp.init( "Tab00", "Button00:10", 300, null, null, "Static00:10", "20%", 300, 500, 200, 500 );
// Create Object  
var objTab = new Tab();  
objTab.init("Tab", 30, 120, 196, 46, null, null);
objTab.init("Tab", null, null, 300, "400px", "80%", 300);
or
var objTab = new Tab("Tab", 30, 120, 196, 46, null, null);
var objTab = new Tab("Tab", null, null, 300, "400px", "80%", 300);
 
// Add Object to Parent Form  
this.addChild("Tab", objTab); 
 
// Insert Object to Parent Form  
this.insertChild(1, "Tab", objTab); 
 
// Remove Object form Parent Form  
this.removeChild("Tab"); 
 
// Show Object  
objTab.show(); 
 
// Destroy Object  
objTab.destroy(); 
objTab = null;

Status

Name

Type

Description

disabled

status

컴포넌트가 비활성화된 상태

mouseover

status

마우스 커서가 컴포넌트 또는 컴포넌트의 특정 아이템 위에 있는 상태

focused

status

컴포넌트가 포커스를 받은 상태

enabled

status

컴포넌트가 활성화된 상태

Control

Name

TypeName

tabbuttonitem

nexacro.TabButtonItemControl

prevbutton

nexacro.Button

nextbutton

nexacro.Button

tabpage

nexacro.TabpageControl

속성

accessibilityaction

Tab에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 action 정보를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☑ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☑ StringResource

문법

Tab.accessibilityaction[= strAction]

문법 설정

this.Tab00.accessibilityaction = "Accessibility Action Message"; 
this.Tab00.accessibilityaction = "Select by direction key";

strAction

accessibilitydescreadtype 속성값에 "action"이 포함된 경우 스크린 리더의 음성 출력 대상으로 포함할 값을 설정합니다.

참고

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

- 컴포넌트에 선택상자 이동 시 사용자가 추가적인 정보를 얻기 위해 필요한 동작을 안내하는 용도로 사용합니다. 
  예를 들어 컴포넌트 특성에 따라 다음과 같이 속성값을 설정할 수 있습니다.
  
  - CheckBox 컴포넌트의 경우 아래와 같은 안내문을 accessibilityaction 속성값으로 설정할 수 있습니다.
  "선택 상태를 전환하려면 스페이스 바를 누릅니다."
  
  - WebBrowser, WebView 컴포넌트의 경우 스크린 리더 사용자를 위한 안내문을 accessibilityaction 속성값으로 설정할 수 있습니다.
  "웹 브라우저 컴포넌트 내 콘텐츠를 이용하기 위해서는 가상커서를 해제해 주세요."
  그리고 WebBrowser, WebView 컴포넌트를 벗어났을 때 필요한 안내문을 accessibilityleavemessage 속성값으로 설정합니다.
  "가상커서를 설정해 주세요"

accessibilitydesclevel

Tab 에 선택상자 이동 시 하위 컴포넌트의 접근성 출력여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☑ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.accessibilitydesclevel[= enumLevel]

문법 설정

enumLevel ::= 'all' | 'self' | 'child' | 'none'
this.Tab00.accessibilitydesclevel = "all";

"all"

Tab 와 자식 컴포넌트에 대한 접근성을 모두 출력합니다.

"self"

Tab 의 접근성만 출력하고 자식 컴포넌트의 접근성은 출력하지 않습니다.

"child"

Tab 의 접근성은 출력하지 않고, 자식 컴포넌트의 접근성은 출력합니다.

"none"

Tab 와 자식 컴포넌트에 대한 접근성을 모두 출력하지 않습니다.

참고

- accessibilitydesclevel 속성값을 설정하지 않으면 "all" 로 적용됩니다.

- Button 과 같이 자식 컴포넌트가 없는 컴포넌트는 "all" 또는 "child" 로 설정 시 "self" 로 적용됩니다.

- Div 와 같은 컨테이너 컴포넌트는 "child" 설정 시 실제 컨텐츠의 접근성만을 출력합니다.

- accessibilitydesclevel 속성은 선택상자의 이동에 영향을 주지 않으므로 방향키로 선택상자가 Tab 에 이동되게 하지 않으려면 accessibilityenable 속성을 설정하여야 합니다.

accessibilitydescription

Tab에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 description 정보를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☑ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☑ StringResource

문법

Tab.accessibilitydescription[= strDescription]

문법 설정

this.Tab00.accessibilitydescription = "Option";

strDescription

accessibilitydescreadtype 속성값에 "description"이 포함된 경우 스크린 리더의 음성 출력 대상으로 포함할 값을 설정합니다.

참고

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

accessibilityenable

Tab 에 선택상자 이동 시 접근성 관련 속성값 출력여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☑ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.accessibilityenable[= bEnable]

문법 설정

bEnable ::= 'true' | 'false'
this.Tab00.accessibilityenable = false;

true

Tab 에 선택상자가 이동되면 접근성 관련 속성값을 출력합니다.


데스크탑 환경에서 방향키로 Tab 에 선택상자가 이동됩니다.

모바일 환경에서는 Tab 에 선택상자가 이동되지 않습니다.

false

Tab 에 선택상자가 이동되지 않습니다.

참고

- accessibilityenable 속성값을 설정하지 않으면 true 로 적용됩니다.

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

- 선택상자 이동 시 컴포넌트의 ARIA-LABEL + Status + Role 순서로 정보가 조합되어 접근성으로 출력됩니다.
   각 정보의 조합순서는 스크린 리더의 종류에 따라 달라질 수 있습니다.
   > ARIA-LABEL : Environment 의 accessibilitydescreadtype 속성에 설정된 속성값이 반영됩니다.
   > Status : Div 의 현재 상태가 반영됩니다.
   > Role : accessibilityrole 속성값이 반영됩니다. accessibilityrole 속성값을 설정하지 않으면 Tab 의 고유 Role 이 반영됩니다.

- accessibilityenable 속성값이 false 일 때 데스크탑 환경에서 방향키 외의 방법으로 선택상자를 Tab 으로 이동시키면 스크린 리딩 프로그램에서 임의의 값을 출력할 수 있습니다.


◆ 컨테이너 컴포넌트 선택상자 이동 제약

아래와 같은 환경에서 컨테이너 컴포넌트로 선택상자가 이동하지 않고 컨테이너 컴포넌트 내에 배치된 컴포넌트로 이동합니다.
- Android, iOS/iPadOS 운영체제에서 실행 시 (Div, PopupDiv, TabpageControl, View)
- Windows 운영체제에서 센스리더 가상커서 사용 시 (Div, PopupDiv, View)

accessibilitylabel

Tab에 선택상자 이동 시 accessibilitydescreadtype 속성에 따라 스크린 리더의 음성 출력 대상으로 포함할 label 정보를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☑ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☑ StringResource

문법

Tab.accessibilitylabel[= strLabel]

문법 설정

this.Tab00.accessibilitylabel = "OK Button"; 
this.Tab00.accessibilitylabel = "[@static00]"; 
this.Tab00.accessibilitylabel = "[@static00][@static01]"; 
this.Tab00.accessibilitylabel = "[@static00][@static01] OK Button";

strLabel

accessibilitydescreadtype 속성값에 "label"이 포함된 경우 스크린 리더의 음성 출력 대상으로 포함할 값을 설정합니다.

문자열로 설정하거나 부모가 같은 컴포넌트의 accessibilitylabel 속성값을 참조할 수 있습니다.

다른 컴포넌트 참조 시에는 "[@ComponentID]" 형식으로 컴포넌트의 id를 대괄호와 "@" 문자를 사용하여 설정합니다.

참조하는 참조값에 해당하는 컴포넌트를 찾을 수 없는 경우에는 참조값 자체가 문자열로 처리됩니다.

참고

- enableaccessibility 속성값이 true인 경우만 적용되는 속성입니다.

- accessibilitydescreadtype 속성값에 "label"이 포함되었으나 accessibilitylabel 속성값을 설정하지 않으면 스크린 리더의 음성 출력 대상에 포함하지 않습니다.

accessibilityrole

Tab에 선택상자 이동 시 스크린 리더가 읽어주는 Role 정보를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☑ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.accessibilityrole[= enumRole]

문법 설정

enumRole ::= 'none' | 'alert' | 'application' | 'button' | 'calendar' | 'chart' | 'checkbox' | 'columnheader' | 'combobox' | 'datepicker' | 'edit' | 'fileupload' | 'form' | 'frame' | 'grid' | 'gridcell' | 'groupbox' | 'heading' | 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6' | 'image' | 'link' | 'listbox' | 'menubar' | 'progressbar' | 'radio' | 'rowheader' | 'scrollbar' | 'spin' | 'static' | 'statusbar' | 'tab' | 'tabpage' | 'textarea' | 'titlebar' | 'toolbar' | 'tooltip' | 'treegrid' | 'treeitem' | 'webbrowser'
this.Tab00.accessibilityrole = "none"; 
this.Tab00.accessibilityrole = "button";

enumRole

- "none": 스크린 리더에서 Role 정보를 처리하지 않습니다.


- 속성값을 설정하지 않으면 컴포넌트/오브젝트에 따라 기본 accessibilityrole 값이 적용됩니다.

"application": Application, MainFrame

"button": Button, FileDownload

"calendar": Calendar

"checkbox": CheckBox

"combobox": ComboBox

"edit": Edit, MaskEdit

"frame": FrameSet, ChildFrame

"fileupload": FileUpload

"form": Form, Div

"groupbox": GroupBox

"image": ImageViewer, Sketch

"listbox": ListBox

"menubar": Menu

"progressbar": ProgressBar

"radio": Radio

"spin": Spin

"static": Static

"tab": Tab

"tabpage": TabPage

"textarea": TextArea

"webbrowser": WebBrower


- Grid 컴포넌트의 경우 하위 오브젝트까지 Role을 적용합니다.

"grid": Grid

"gridcell": Grid Cell

"columnheader": Grid Column Head

"rowheader": Grid Row Head

"treegrid": TreeGrid

"treeitem": TreeItem, TreeCell


- 기능에 따라 컴포넌트 또는 오브젝트의 하위 오브젝트 영역에 아래와 같은 Role이 적용됩니다.

"alert": Alert, Confirm, UserConfirm

"chart": Chart

"datepicker": DatePicker

"link": Link

"scrollbar": ScrollBar

"statusbar": StatusBar

"titlebar": TitleBar

"toolbar": ToolBar

"tooltip": Tooltip


- "heading" 또는 "heading1"부터 "heading6" 사이의 값으로 속성값을 설정하면 role, aria-level 값을 처리합니다.

예를 들어 속성값을 "heading3"으로 설정하면 Generate되는 코드 태그에 role="heading", aria-level="3" 형식으로 값을 처리합니다.

속성값을 "heading"으로 설정 시에는 "heading1"을 설정한 것과 같은 동작을 처리합니다.

accessibilityheadingnexthotkey, accessibilityheadingprevhotkey 속성값으로 설정한 단축키로 이동 시 사용할 수 있습니다.

참고

- enableaccessibility 속성값이 true 인 경우만 적용되는 속성입니다.

- accessibilityenable 속성값을 설정하지 않으면 Tab의 기본 Role 로 적용됩니다.

- 추가적인 속성값이 필요한 Role 설정 시 Tab에 해당 속성이 없으면 스크린 리더에 따라 정상적으로 정보를 읽지 못할 수 있습니다.

background

Tab 의 배경 영역을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.background[= strbackground]

문법 설정

strBackground ::= [<bg-image> | <linear-gradient>] [<background-origin> [<background-clip>]] [<background-color>]

<bg-image> ::= 'none' | <imageurl> [<repeat-style>] [<position>]
   <imageurl> ::= 'URL(' <Theme-Image> | <Web-Image> ')'
   <repeat-style> ::= 'repeat-x' | 'repeat-y' | 'repeat' | 'no-repeat'
   <position> ::= <horizontal-position> <vertical-position> ['/' <background-size>]
      <horizontal-position> ::= 'left' | 'center' | 'right' | <pos-percentage> '%'
      <vertical-position> ::= 'top' | 'center' | 'bottom' | <pos-percentage> '%'
      <background-size> ::= 'auto' | 'cover' | 'contain' | (<length> 'px' | <percentage> '%') {1,2}

<linear-gradient> ::= 'linear-gradient(' [<angle> , ] <color-stop> ')'
   <angle> ::= 'to left' | 'to right' | 'to top' | 'to bottom' | 'to left top' | 'to left bottom' | 'to right top' | 'to right bottom'
   <color-stop> ::= <startcolor-stop> [<listcolor-stop>] <endcolor-stop>
      <startcolor-stop> ::= <color> [<percentage>'%']
      <endcolor-stop> ::= <color> [<percentage>'%']
      <listcolor-stop> ::= <color> [<percentage>'%"] [,<listcolor-stop>]*
         <color> ::= <NamedColor> | <NumericColor>

<background-origin> ::= 'border-box' | 'padding-box'
<background-clip> ::= 'border-box' | 'padding-box'
<background-color> ::= <NamedColor> | <NumericColor>
* XCSS
background : #ffffaa;
background : "URL('./images/smiley.gif')" no-repeat center center #ffffaa;
background : "URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa;
background : "URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa;
background : linear-gradient( red , blue , yellow );
background : linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0));
background : "URL('./images/smiley.gif')" border-box border-box #ffffaa;

* Script ( normal property )
this.Tab00.background = "#ffffaa";
this.Tab00.background = ""URL('./images/smiley.gif')" no-repeat center center #ffffaa";
this.Tab00.background = ""URL('./images/smiley.gif')" no-repeat center center /auto #ffffaa";
this.Tab00.background = ""URL('./images/smiley.gif')" no-repeat center center /15px 15% #ffffaa";
this.Tab00.background = "linear-gradient( red , blue , yellow )";
this.Tab00.background = "linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0))";
this.Tab00.background = ""URL('./images/smiley.gif')" border-box border-box #ffffaa";

<bg-image>

배경에 표시될 이미지를 "'none' | <imageurl> [<repeat-style>] [<position>]" 형식으로 설정합니다.


<background-color> 값이 설정되어 있으면 배경색 위로 이미지가 표시됩니다.


"none" 으로 설정하면 이미지를 설정하지 않습니다.

<imageurl> 값으로 이미지를 설정할 수 있습니다.

<repeat-style> 값으로 이미지의 반복표시 방향을 설정할 수 있습니다.

<position> 값으로 이미지의 표시위치를 설정할 수 있습니다.


그라데이션과 배경이미지를 동시에 설정할 수 없습니다.

<imageurl>

배경에 표시될 이미지를 "'URL(' <Theme-Image> | <Web-Image> ')'" 형식으로 설정합니다.


"URL ( [이미지경로] )" 형식으로 테마 또는 웹의 이미지를 설정합니다.

<Theme-Image>

테마에 선언된 이미지를 "theme://images\이미지명" 형식으로 설정합니다.


테마에 해당 이미지가 등록되어 있어야 합니다.

<Web-Image>

웹의 이미지를 "http://경로/이미지명", "https://경로/파일명" 형식으로 설정합니다.


웹에 접근 가능한 환경이어야 합니다.

<repeat-style>

배경에 표시될 이미지의 반복표시 방향을 설정합니다.


"repeat-x" 설정 시 이미지가 가로 방향으로 반복표시 됩니다.

"repeat-y" 설정 시 이미지가 세로 방향으로 반복표시 됩니다.

"repeat" 설정 시 이미지가 가로,세로 방향으로 모두 반복표시 됩니다.

"no-repeat" 설정 시 이미지가 반복표시 되지 않습니다.


값을 설정하지 않으면 "repeat" 로 적용됩니다.

<horizontal-position>

배경에 표시될 이미지의 가로 위치를 설정합니다.


"left" 설정 시 Tab 의 왼쪽면과 이미지의 왼쪽면이 정렬되어 표시됩니다.

"center" 설정 시 Tab 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다.

"right" 설정 시 Tab 의 오른쪽면과 이미지의 오른쪽면이 정렬되어 표시됩니다.

<pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다.


<vertical-position> 값을 설정하고, <horizontal-position> 값을 설정하지 않으면 <horizontal-position> 은 "center" 로 적용됩니다.

<vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <horizontal-position> 은 "left" 로 적용됩니다.

<vertical-position>

배경에 표시될 이미지의 세로 위치를 설정합니다.


"top" 설정 시 Tab 의 윗쪽면과 이미지의 윗쪽면이 정렬되어 표시됩니다.

"center" 설정 시 Tab 의 중앙과 이미지의 중앙이 정렬되어 표시됩니다.

"bottom" 설정 시 Tab 의 아랫쪽면과 이미지의 아랫쪽면이 정렬되어 표시됩니다.

<pos-percentage> '%' 형식으로 설정 시 이미지의 위치가 비율로 설정됩니다.


<horizontal-position> 값을 설정하고, <vertical-position> 값을 설정하지 않으면 <vertical-position> 은 "center" 로 적용됩니다.

<vertical-position> 값과 <horizontal-position> 값을 모두 설정하지 않으면 <vertical-position> 은 "top" 으로 적용됩니다.

<pos-percentage>

배경에 표시될 이미지의 가로/세로 위치를 비율로 설정합니다.


<horizontal-position> 에 "0%" 설정 시 "left" 와 같은 위치로 적용됩니다.

<horizontal-position> 에 "50%" 설정 시 "center" 와 같은 위치로 적용됩니다.

<horizontal-position> 에 "100%" 설정 시 "right" 과 같은 위치로 적용됩니다.

<vertical-position> 에 "0%" 설정 시 "top" 와 같은 위치로 적용됩니다.

<vertical-position> 에 "50%" 설정 시 "center" 와 같은 위치로 적용됩니다.

<vertical-position> 에 "100%" 설정 시 "bottom" 과 같은 위치로 적용됩니다.


0 보다 작거나 100 보다 큰 값을 설정 시 Tab 의 영역을 벗어난 가상의 위치로 적용됩니다.


값 설정 시 "%" 단위를 생략할 수 없습니다.

<background-size>

배경에 표시될 이미지의 크기를 설정합니다.

- auto: 원본 이미지 크기를 유지합니다.

- cover: 이미지 비율을 유지하는 한도 내에서 배경에 빈 공간이 없도록 가장 크게 설정합니다.

width 또는 height 길이가 긴 쪽은 잘려서 표시될 수 있습니다.

- contain: 이미지가 잘리지 않고 비율을 유지하는 한도 내에서 가장 크게 설정합니다.

- <length> | <percentage>: 이미지의 width, height 크기 또는 컴포넌트 대비 비율을 설정합니다.

width 값만 설정하면 원본 이미지 비율에 따라 height 크기를 자동으로 처리합니다.

height 값만 설정할 수는 없습니다.

음수값은 설정할 수 없습니다.

<linear-gradient>

배경에 표시될 그라데이션을 "'linear-gradient(' [<angle> , ] <color-stop> ')'" 형식으로 설정합니다.


<background-color> 값이 설정되어 있으면 배경색 위로 그라데이션이 표시됩니다.


"linear-gradient ( [방향, 색상값, 색상값, ...] )" 형식으로 그라데이션 방향과 색상을 설정할 수 있습니다.


그라데이션과 배경이미지를 동시에 설정할 수 없습니다.

<angle>

그라데이션의 표시 방향을 설정합니다.


"to left" 설정 시 오른쪽에서 왼쪽 방향으로 그라데이션이 표시됩니다.

"to right" 설정 시 왼쪽에서 오른쪽 방향으로 그라데이션이 표시됩니다.

"to top" 설정 시 아래쪽에서 윗쪽 방향으로 그라데이션이 표시됩니다.

"to bottom" 설정 시 윗쪽에서 아래쪽 방향으로 그라데이션이 표시됩니다.

"to left top" 설정 시 오른쪽 아래 방향에서 왼쪽 윗 방향으로 그라데이션이 표시됩니다.

"to left bottom" 설정 시 오른쪽 윗 뱡향에서 왼쪽 아래 방향으로 그라데이션이 표시됩니다.

"to right top" 설정 시 왼쪽 아래 방향에서 오른쪽 윗 방향으로 그라데이션이 표시됩니다.

"to right bottom" 설정 시 왼쪽 윗 방향에서 오른쪽 아래 방향으로 그라데이션이 표시됩니다.


값을 설정하지 않으면 "to bottom"으로 적용됩니다.

<color-stop>

그라데이션의 시작점, 끝점, 중간점의 색을 "<startcolor-stop> [<listcolor-stop>] <endcolor-stop>" 형식으로 설정합니다.


<angle> 값에 설정된 방향에 따라 시작점과 끝점의 위치가 결정됩니다.

예를 들어 <angle> 값이 "to left" 이면 Tab 의 right 위치가 시작점이 되고, left 위치가 끝점이 됩니다.

<angle> 값이 "to right" 이면 Tab 의 left 위치가 시작점이 되고, right 위치가 끝점이 됩니다.


<listcolor-stop> 에 그라데이션 중간점의 색을 한개 이상 설정할 수 있으며 <percentage> 값 생략 시 균등하게 표시됩니다.

<startcolor-stop>

그라데이션의 시작점 색을 "<color> [<percentage>'%']" 형식으로 설정합니다.


<angle> 값에 설정된 방향에 따라 시작점 위치가 결정됩니다.

시작점의 <percentage> 값을 "0" 이상으로 설정 시 "시작점~설정값"까지 동일한 색상으로 표시됩니다.

<endcolor-stop>

그라데이션의 끝점 색을 "<color> [<percentage>'%']" 형식으로 설정합니다.


<angle> 값에 설정된 방향에 따라 끝점 위치가 결정됩니다.

끝점의 <percentage> 값을 "100" 이하로 설정 시 "설정값~끝점"까지 동일한 색상으로 표시됩니다.

<listcolor-stop>

그라데이션의 중간점 색을 "<color> [<percentage>'%"] [,<listcolor-stop>]*" 형식으로 설정합니다.


시작점과 끝점 사이에 적용될 중간색을 ","로 구분하여 여러개 설정할 수 있습니다.

뒤에 선언된 색의 <percentage> 값은 먼저 선언된 색의 <percentage> 값보다 커야 합니다.

<color>

그라데이션 색상을 색상이름 또는 색상코드로 설정합니다.

<percentage>

<color> 에 해당하는 색이 적용될 위치를 비율값으로 설정합니다.


<angle> 값에 의해 결정된 시작점이 "0%" 로 적용됩니다.

<angle> 값에 의해 결정된 끝점이 "100%" 로 적용됩니다.


0 보다 작거나 100 보다 큰 값을 설정 시 Tab 의 영역을 벗어난 가상의 위치로 적용됩니다.

예를 들어 "150%" 설정 시 시작점에서 끝점까지 거리의 반만큼 끝점에서 벗어난 위치에 <color> 값이 적용됩니다.


<percentage> 값을 생략하면 균등한 위치에 <color> 값이 적용됩니다.

값 설정 시 "%" 단위를 생략할 수 없습니다.

<background-origin>

배경으로 처리될 기준영역을 설정합니다.


"border-box" 설정 시 Border 를 포함한 영역이 배경영역으로 처리됩니다.


"padding-box" 설정 시 Border 의 안쪽 영역이 배경영역으로 처리됩니다.

"padding-box" 설정 시 그라데이션의 시작점, 끝점과 배경이미지의 반복 기준위치가 Border 안쪽 영역으로 처리됩니다.


값을 설정하지 않으면 "padding-box" 로 적용됩니다.

<background-clip>

배경이 실제로 표시될 영역을 설정합니다.


"border-box" 설정 시 Border 를 포함한 영역에 배경이 표시됩니다.

"padding-box" 설정 시 Border 의 안쪽 영역에 배경이 표시됩니다.


값을 설정하지 않으면 <background-origin> 에 설정한 값이 동일하게 적용됩니다.

<background-origin> 값도 설정하지 않았을 경우 "border-box" 로 적용됩니다.

<background-color>

배경에 표시될 색을 색상이름 또는 색상코드로 설정합니다.


<bg-image> 또는 <linear-gradient> 값이 설정되어 있다면 배경색은 배경이미지 또는 그라데이션 아래에 표시됩니다.

<bg-image> 에 적용된 이미지에 투명으로 적용된 부분이 있거나 이미지가 Tab 영역보다 작다면 해당 영역에 배경색이 표시됩니다.


그라데이션과 배경이미지를 동시에 설정할 수 없습니다.

<NamedColor>

"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.

<NumericColor>

표시할 색의 색상코드입니다.


"#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF")

red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)")

red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)")

hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)")

hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- background 속성값을 설정하지 않으면 undefined 가 설정되고, "transparent" 로 동작합니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.

- 배경의 기준영역과 표시영역은 <background-origin>, <background-clip> 값으로 각각 설정합니다.

- 배경 이미지를 중앙에 위치시키려면 <position> 값을 "center" 또는 "center center" 로 설정하여야 합니다.

- 배경이미지와 배경색을 모두 설정하면 배경색 위에 이미지가 표시됩니다.
   그라데이션과 배경색을 모두 설정하면 배경색 위에 그라데이션이 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   두 값을 동시에 설정 시 오동작이 발생할 수 있습니다.

border-radius

Tab 의 모서리 모양을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.borderRadius[= strborderradius]

문법 설정

strborderradius ::= <horizontal-radius>{4} ['/' <vertical-radius>{4}]
* XCSS
border-radius : 10px;
border-radius : 5px 6px 10px / 5px 10px;

* Script ( normal property )
this.Tab00.borderRadius = "10px";
this.Tab00.borderRadius = "5px 6px 10px / 5px 10px";

<horizontal-radius>

모서리를 둥글게 표시하기 위한 가로크기를 설정합니다.


pixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다.


값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 가로크기로 모두 동일한 값이 적용됩니다.

값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.

값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.

값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 가로크기로 첫번째 값부터 각각 적용됩니다.

<vertical-radius>

모서리를 둥글게 표시하기 위한 세로크기를 설정합니다.


pixel 단위로 입력하며 스페이스를 구분자로 4개값까지 설정할 수 있습니다.


값을 1회 입력 시 top-left/top-right/bottom-right/bottom-left 모서리의 세로크기로 모두 동일한 값이 적용됩니다.

값을 2회 입력 시 top-left/bottom-right, top-right/bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.

값을 3회 입력 시 top-left, top-right/bottom-left, bottom-right 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.

값을 4회 입력 시 top-left, top-right, bottom-right, bottom-left 모서리의 세로크기로 첫번째 값부터 각각 적용됩니다.

참고

- border-radius 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다. 

- 스크립트로 접근 시 속성명은 "borderRadius" 를 사용해야 합니다.

- <horizontal-radius>와 <vertical-radius>는 "/" 문자로 구분하여 입력합니다.

- Calendar, Combo 와 같이 하위 컨트롤이 존재하는 컴포넌트는 하위컨트롤에도 border-radius 속성을 설정해야 정상적으로 모서리가 표시됩니다.


◆ NRE 제약

- border-radius 속성을 설정하면 모든 테두리가 같은 색으로 적용됩니다.
   -nexa-border 속성에서 top 에 적용된 색이 모든 테두리에 적용됩니다.

bottom

Tab 을(를) 표시하기 위한 하단 좌표값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.bottom[= nBottom]

문법 설정

nBottom ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']
this.Tab00.bottom = 10; 
this.Tab00.bottom = "10px"; 
this.Tab00.bottom = "10%"; 
this.Tab00.bottom = "Button00:10px"; 
this.Tab00.bottom = "Button00:10%";

<strCompID>

Tab 의 좌표값을 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.


기준 컴포넌트는 Tab 와 부모(Parent)가 동일하여야 합니다.

또한, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.


값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 좌표값이 적용됩니다.

<nVal>

Tab 의 하단 좌표값을 절대 길이 단위("px"), 비율 단위("%"), 상대 길이 단위("em", "rem")의 숫자로 설정합니다.


  • <strCompID> 값을 생략했을 때 :

- "px": 부모(Parent)의 bottom 속성값을 기준으로 Tab의 하단 위치 설정

- "%": 부모(Parent)의 height 속성값을 기준으로 Tab의 하단 위치 결정

- "em": 컴포넌트의 font-size 속성값을 기준으로 Tab의 하단 위치 결정

- "rem": MainFrame font-size 속성값을 기준으로 Tab의 하단 위치 결정


  • <strCompID> 값을 설정했을 때 :

- "px": <strCompID>의 top 속성값을 기준으로 Tab의 하단 위치 결정

- "%": <strCompID>의 height 속성값을 기준으로 Tab의 하단 위치 결정

<strCompID> 값 설정 시 "em", "rem" 단위는 지원하지 않습니다.

참고

- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

box-shadow

Tab 에 그림자 효과를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.boxShadow[= strbshadow]

문법 설정

strbshadow ::= 'none' | [<inset>] <offset> [<blur>'px'] [<spread>'px'] [<color>]

<offset> ::= <horizontal>'px' <vertical>'px'
<color> ::= <NamedColor> | <NumericColor>
* XCSS
box-shadow : 10px 10px 10px #888888;
box-shadow : inset 10px 10px 10px 5px #888888

* Script ( normal property )
this.Tab00.boxShadow  = "10px 10px 10px #888888";
this.Tab00.boxShadow  = "inset 10px 10px 10px 5px #888888";

<inset>

그림자 효과가 컴포넌트 안쪽에 표시됩니다.

생략 시에는 outset으로 동작합니다.

NRE는 지원하지 않습니다.

<offset>

그림자 효과가 표시되는 위치를 설정합니다.


Tab 의 좌상단 위치를 기준으로 그림자 효과가 표시될 위치를 가로/세로 픽셀값으로 설정합니다.

<horizontal>

그림자 효과가 표시되는 가로 위치를 설정합니다.


음수로 설정 시 컴포넌트의 왼쪽에 그림자 효과가 표시됩니다.

pixel 단위로 입력하며 "px" 단위를 생략할 수 없습니다.

<vertical>

그림자 효과가 표시되는 세로 위치를 설정합니다.


음수로 설정 시 컴포넌트의 윗쪽에 그림자 효과가 표시됩니다.

pixel 단위로 입력하며 "px" 단위를 생략할 수 없습니다.

<blur>

그림자 효과에 blur를 설정합니다.

음수로 설정 시 blur가 적용되지 않습니다.

pixel 단위로 입력하며 "px" 단위를 생략할 수 없습니다.

<spread>

그림자를 확장하거나 축소합니다.

양수로 설정 시에는 그림자를 확장하고 음수로 설정 시에는 그림자를 축소합니다.

NRE는 지원하지 않습니다.

<color>

그림자 효과의 색을 색상이름 또는 색상코드로 설정할 수 있습니다.


값을 입력하지 않으면 브라우저별로 다르게 동작하거나 오동작할 수 있습니다.

<NamedColor>

"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.

<NumericColor>

표시할 색의 색상코드입니다.


"#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF")

red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)")

red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)")

hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)")

hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- box-shadow 속성값을 설정하지 않으면 undefined 가 설정되고, "none" 으로 동작합니다.

- 스크립트로 접근 시 속성명은 "boxShadow" 를 사용해야 합니다.

- <blur> 값을 크게 설정하면 시스템 자원 요구량이 많아져 성능 저하의 원인이 됩니다.

- <inset>, <spread> 값은 NRE를 지원하지 않습니다. 
  넥사크로 스튜디오 디자인 창에서도 속성값 설정 시 변경된 디자인을 확인할 수 없습니다.


◆ web runtime environment 제약

- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다.

color

Tab 에 표시되는 텍스트의 색상을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.color[= strcolor]

문법 설정

strcolor ::= <NamedColor> | <NumericColor>
* XCSS
color : #999999;
color : rgb ( 255, 0, 0 );
color : red;

* Script ( normal property )
this.Tab00.color = "#999999";
this.Tab00.color = "rgb(255,0,0)";
this.Tab00.color = "red";

<NamedColor>

"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.

<NumericColor>

표시할 색의 색상코드입니다.


"#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF")

red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)")

red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)")

hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)")

hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- color 속성값을 설정하지 않으면 undefined 가 설정되고, "#000000" 으로 동작합니다.


◆ web runtime environment 제약

- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다.

cssclass

Tab 의 Style 을 XCSS 파일에 정의된 class 로 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.cssclass[= strcssclass]

문법 설정

strcssclass ::= <ClassName> [ , &ltClassName> ]*
this.Tab00.cssclass = "TestClass"; 
this.Tab00.cssclass = "TestClass,TestClass2";

<ClassName>

XCSS 에 정의된 classname 을 설정합니다.

참고

- XCSS 에 정의된 ".classname" 형식에서 "." 를 제외하고 "classname" 만 설정합니다.

- Style 에 적용되는 방식은 XCSS Attribute 지정과 동일하게 XCSS 내의 순서대로 적용됩니다.

- Status 를 적용하고자 할 경우는 "classname" 에 Status 를 붙여서 사용합니다.

- ',' 를 사용하여 class 를 다중으로 지정하게 되면 class 가 중첩되어 적용됩니다.
   중첩된 class 의 내용에 중복이 있다면 XCSS 내의 순서상 마지막으로 기술된 것이 적용됩니다.


◆ web runtime environment 제약

- web runtime environment 는 cssclass 명의 첫문자가 숫자일 경우 속성값이 적용되지 않으므로 주의하여야 합니다.

cursor

Tab 영역에서 표시될 마우스 포인터의 종류를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.cursor[= strCursor]

문법 설정

strCursor ::= 'none' | 'auto' | 'default' | 'copy' | 'crosshair' | 'help' | 'move' | 'not-allowed' | 'pointer' | 'progress' | 'text' | 'wait' | 'ew-resize' | 'e-resize' | 'w-resize' | 'ns-resize' | 'n-resize' | 's-resize' | 'nesw-resize' | 'ne-resize' | 'sw-resize' | 'nwse-resize' | 'nw-resize' | 'se-resize'
* XCSS
cursor : default;

* Script ( normal property )
this.Tab00.cursor = "default";

"none"

마우스 포인터를 표시하지 않습니다.


  • macOS NRE는 지원하지 않습니다.

"auto"

컴포넌트의 특성에 맞는 포인터가 표시됩니다.


Edit계열 컴포넌트는 "text" 포인터가 표시됩니다.

그외 계열 컴포넌트는 "arrow" 포인터가 표시됩니다.

"default"

시스템의 기본 포인터가 표시됩니다.


일반적으로 "arrow" 포인터가 표시됩니다.

"copy"

화살표와 작은 십자("+") 모양의 포인터가 표시됩니다.


  • macOS NRE는 지원하지 않습니다.

"crosshair"

십자("+") 모양의 포인터가 표시됩니다.


  • macOS NRE 는 지원하지 않습니다.

"help"

화살표와 작은 물음표 모양의 포인터가 표시됩니다.


  • Safari 브라우저는 물음표 모양의 포인터가 표시됩니다.

  • macOS NRE 는 지원하지 않습니다.

"move"

십자 화살표 모양의 포인터가 표시됩니다.


  • macOS NRE 는 지원하지 않습니다.

"not-allowed"

금지 표지판 모양의 포인터가 표시됩니다.


  • Safari 브라우저는 화살표와 금지 표지판 모양의 포인터가 표시됩니다.

  • macOS NRE 는 지원하지 않습니다.

"pointer"

손모양의 포인터가 표시됩니다.


  • macOS NRE 는 지원하지 않습니다.

"progress"

OS 또는 환경에 따라 다른 형태의 포인터가 표시됩니다.


원, 화살표와 모래시계, 화살표와 원 등 다양한 형태로 표시됩니다.


  • macOS NRE 는 지원하지 않습니다.

"text"

아이("I") 모양의 포인터가 표시됩니다.

"wait"

OS 또는 환경에 따라 다른 형태의 포인터가 표시됩니다.


원, 모래시계, 시계 등 다양한 형태로 표시됩니다.

"ew-resize"

수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"e-resize"

수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"w-resize"

수평으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"ns-resize"

수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.


  • macOS NRE는 지원하지 않습니다.

"n-resize"

수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"s-resize"

수직으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"nesw-resize"

사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"ne-resize"

사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"sw-resize"

사선("/")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

"nwse-resize"

역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.


  • macOS NRE는 지원하지 않습니다.

"nw-resize"

역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.


  • macOS NRE 는 지원하지 않습니다.

"se-resize"

역사선("＼")으로 된 양쪽 화살표 모양의 포인터가 표시됩니다.

참고

- cursor 속성값을 설정하지 않으면 undefined 가 설정되고 "auto" 로 동작합니다.

- disable 상태인 서브컨트롤이 있는 컴포넌트의 경우 마우스 포인터는 서브컨트롤 영역에서
   서브컨트롤의 disable status값이 적용되지 않고, 컴포넌트의 enable status 설정값이 적용됩니다.
   서브컨트롤과 컴포넌트가 모두 disable 상태일 때는 parent 의 enable status 설정값이 적용됩니다.

enable

Tab 의 사용가능 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.enable[= benable]

문법 설정

benable ::= 'true' | 'false'
this.Tab00.enable = true; 
this.Tab00.enable = false;

true

Tab 을(를) 사용할 수 있게 설정합니다.

false

Tab 을(를) 사용할 수 없게 설정합니다.


하위 컨트롤이 있을 경우 하위 컨트롤에 "disabled" Status 가 적용됩니다.

참고

- enable 속성값을 설정하지 않으면 true 로 적용됩니다.

- enable 속성값이 false 이면 컴포넌트가 화면에 표시되지만 포커스나 입력을 받을 수 없습니다.

- Div 와 같은 컨테이너 컴포넌트의 enable 속성값을 false 로 설정하면 자식 컴포넌트도 모두 Disable 됩니다.

enableevent

Tab 에서 이벤트를 발생시킬지 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.enableevent[= bEvent]

문법 설정

bEvent ::= 'true' | 'false'
this.Tab00.enableevent = true;  

this.Tab00.enableevent = false;

true

Tab 에서 이벤트가 발생하도록 설정합니다.

false

Tab 에서 이벤트가 발생하지 않도록 설정합니다.

참고

- enableevent 속성을 false 로 설정하면 이벤트 발생으로 인한 처리속도 지연과 화면 깜빡임을 방지할 수 있습니다.

extrabuttonsize

탭버튼 오른쪽에 표시되는 추가버튼(Extra Button)의 크기를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.extrabuttonsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]
this.Tab00.extrabuttonsize = "20";
this.Tab00.extrabuttonsize = "40 20";

<strWidth>

추가버튼(Extra Button)의 너비를 pixel 단위의 문자열로 설정합니다.

<strHeight>

추가버튼(Extra Button)의 높이를 pixel 단위의 문자열로 설정합니다.


값을 생략할 경우 <strWidth> 값이 적용됩니다.

참고

- extrabuttonsize 속성값을 설정하지 않으면 undefined 로 적용됩니다.
   undefined 설정 시 추가버튼에 설정된 이미지의 크기를 기준으로 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

- 추가버튼(Extra Button) 은 showextrabutton 속성값이 true 일 때 표시됩니다.

- 추가버튼(Extra Button) 영역에 Padding, Border 영역이 포함되므로 extrabuttonsize 속성값 설정 시 해당영역의 크기를 함께 고려하어야 합니다.

- tabbuttonheight, tabbuttonwidth 속성을 설정하지 않으면 extrabuttonsize 속성값 설정 시 TabButton 의 크기가 변경될 수 있습니다.

- extrabuttonsize 속성값을 tabbuttonheight, tabbuttonwidth 속성값보다 크게 설정해도 TabButton의 크기는 변경되지 않습니다.
   이 때, 내부적으로 추가버튼(Extra Button)영역은 별도로 계산되므로 이미지의 위치가 변경될 수 있습니다.

flexgrow

Layout 컨테이너 내 Main Axis(type 속성값이 "horizontal"이면 수평축, type 속성값이 "vertical"이면 수직축) 여백을 설정한 비율만큼 나누어 컴포넌트의 크기를 재조정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.flexgrow[= fVal]

문법 설정

fVal

컴포넌트의 크기를 재조정할 비율을 설정합니다.

참고

- flexgrow 속성값을 설정하지 않으면 undefined로 설정되고 0 값으로 동작합니다.
  속성값이 0이면 크기를 재조정하지 않습니다.
    
- Layout 컨테이너 내 배치된 컴포넌트 중 flexgrow 속성값이 0보다 큰 값으로 설정된 컴포넌트를 대상으로 Main Axis의 여백을 설정한 비율만큼 나누어 크기에 적용합니다.

- maxwidth, maxheight 속성값을 설정한 경우에는 해당 크기보다 크게 크기가 조정되지는 않습니다.


◆ fittocontents 속성과 같이 사용하는 경우

아래와 같은 경우 컴포넌트의 flexgrow 속성값이 무시되고 fittocontents 속성만 적용됩니다.

- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "horizontal"이고
  컴포넌트의 fittocontents 속성값이 "width" 또는 "both"일 때
- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "vertical"이고
  컴포넌트의 fittocontents 속성값이 "height" 또는 "both"일 때

flexshrink

Layout 컨테이너 내 Main Axis(type 속성값이 "horizontal"이면 수평축, type 속성값이 "vertical"이면 수직축)에 컴포넌트가 배치되는 영역이 컨테이너 영역을 초과하지 않도록 설정한 비율만큼 나누어 컴포넌트의 크기를 재조정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.flexshrink[= fVal]

문법 설정

fVal

컴포넌트의 크기를 재조정할 비율을 설정합니다.

참고

- flexshrink 속성값을 설정하지 않으면 undefined로 설정되고 1 값으로 동작합니다.
  속성값이 0이면 크기를 재조정하지 않습니다.
    
- Layout 컨테이너 내 배치된 컴포넌트 중 flexshrink 속성값이 0보다 큰 값으로 설정된 컴포넌트를 대상으로 Main Axis의 초과 영역을 설정한 비율만큼 나누어 크기에 적용합니다.

- minwidth, minheight 속성값을 설정한 경우에는 해당 크기보다 작게 크기가 조정되지는 않습니다.


◆ fittocontents 속성과 같이 사용하는 경우

아래와 같은 경우 컴포넌트의 flexshrink 속성값이 무시되고 fittocontents 속성만 적용됩니다.

- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "horizontal"이고
  컴포넌트의 fittocontents 속성값이 "width" 또는 "both"일 때
- Layout 오브젝트 또는 Panel 컴포넌트의 type 속성값이 "vertical"이고
  컴포넌트의 fittocontents 속성값이 "height" 또는 "both"일 때

focusacceptable

탭키 입력에 의해 포커스 이동 시 Tab 컴포넌트가 포커스를 직접 받을 지 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.focusacceptable[= bAcceptable]

문법 설정

bAcceptable ::= 'true' | 'false'
this.Tab00.focusacceptable = true;

"true"

탭키 입력으로 포커스 이동 시 Tab 컴포넌트가 포커스를 직접 받습니다.

"false"

탭키 입력으로 포커스 이동 시 TabPage로 포커스가 바로 이동합니다.

참고

- focusacceptable 속성값을 설정하지 않으면 "false"로 적용됩니다.

- Tab 컴포넌트가 포커스를 직접 받으면 키 입력으로 TabPage 이동이 가능합니다.

- tabstop 속성값이 "false"일 때는 Tab 컴포넌트가 탭키에 의한 포커스를 받지 않습니다.

font

Tab 에서 사용하는 폰트를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.font[= strfont]

문법 설정

strfont ::= [<font-style>] [<font-weight>] <font-size> ['/'<line-height>] <font-family>

<font-style> ::= 'normal' | 'italic'
<font-weight> ::= 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'
<font-size> ::= <nSize> 'px'|'pt'|'em'|'rem'
<line-height> ::= 'normal' | <nValue> | <nPixel>'px' | <nPercent>'%'
<font-family> ::= <font-name> [',' <font-name>]*
* XCSS
font : bold 12pt/30px arial, sans-serif;

* Script ( normal property )
this.Tab00.font = "bold 12pt/30px arial, sans-serif";

<font-style>

폰트의 스타일을 설정합니다.


"normal" 설정 시 스타일이 적용되지 않습니다.

"italic" 설정 시 기울임 스타일이 적용됩니다.

<font-weight>

폰트의 굵기를 설정합니다.


"normal" 설정 시 굵기가 적용되지 않습니다.

"bold" 설정 시 굵은 폰트가 적용됩니다.


"100"~"900" 로 설정 시 설정한 굵기로 폰트가 적용됩니다.

"100"~"900" 로 설정 시 굵기에 해당하는 폰트가 정의되어 있어야 합니다.

<font-size>

폰트 크기의 단위는 아래와 같이 절대 길이 단위와 상대 길이 단위로 설정할 수 있습니다.

단위를 지정하지 않으면 속성값이 적용되지 않습니다.

- 절대 길이 단위: pixel("px"), point("pt")

- 상대 길이 단위: "em", "rem"


폰트 크기 단위를 "em", "rem"으로 설정한 경우에는 아래와 같이 폰트 크기가 계산됩니다.

- "em": 상위 컴포넌트 font-size 기준으로 상대적인 크기를 설정

- "rem": MainFrame font-size 기준으로 상대적인 크기를 설정

<nSize>

폰트 크기 단위에 따라 정수 또는 소수로 설정합니다.

음수값은 설정할 수 없습니다.

- "px", "pt": 정수

- "em", "rem": 정수 또는 소수

<line-height>

텍스트가 여러줄로 표시되는 경우 줄 사이의 간격을 설정합니다.


음수값을 설정할 수 없습니다.


"normal" 설정 시 줄 사이의 간격을 설정하지 않습니다.

"normal" 설정 시 웹브라우저마다 줄 사이의 간격이 다르게 적용됩니다.

"normal" 설정 시 Nexacro Runtime Environment는 폰트 크기에 곱할 값(<nValue>값)이 "1.15" 일 때와 동일하게 동작합니다.

<nValue>

폰트 크기에 곱할 값을 설정합니다.


계산 결과값이 줄 사이 간격으로 적용됩니다.

<nPixel>

줄 사이의 간격을 pixel 단위의 숫자로 설정합니다.


"px" 단위를 생략할 수 없습니다.

<nPercent>

폰트 크기에 곱할 비율값을 설정합니다.


계산 결과값이 줄 사이 간격으로 적용됩니다.

"%" 단위를 생략할 수 없습니다.

<font-family>

폰트 이름을 리스트로 설정합니다.


콤마(",")로 구분하여 폰트 이름을 여러개 설정할 수 있습니다.

먼저 선언된 폰트가 우선적으로 적용됩니다.

선언된 폰트가 시스템에 없을 경우 선언된 순서대로 사용 가능한 폰트를 적용합니다.

선언된 폰트가 모두 없을 경우 시스템 기본 폰트가 적용됩니다.

<font-name>

폰트의 이름을 설정합니다.

참고

- font 속성값을 설정하지 않으면 undefined 가 설정되고, "12pt/normal Verdana" 로 동작합니다.

- font 속성의 폰트 크기가 변경되면 <line-height> 에 적용된 값에 따라 줄간격이 변경될 수 있습니다.

- <font-weight> 를 수치로 설정 시 "400" 값이 일반적인 굵기로 적용되고, "700" 값이 "bold" 로 적용됩니다.
   폰트에 수치값에 해당하는 폰트굵기가 없다면 "400" 과 "700" 중 가까운 값으로 표시됩니다.

- UserFont 사용 시 환경별로 지원하는 포맷정보는 "Appendix > Supported UserFont" 항목을 참고하세요.


◆ WRE 제약

- -nexa-text-align 속성값이 "right" 일 때 font 속성에 "italic" 을 설정하면 마지막 텍스트의 기울어진 부분이 잘려서 표시될 수 있습니다.
   웹브라우저에서 텍스트영역을 일반글자 기준으로 처리한 후 기울임을 적용하면서 발생하는 문제입니다.

height

Tab 을(를) 표시하기 위한 높이를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.height[= nHeight]

문법 설정

nHeight ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']
this.Tab00.height = 10; 
this.Tab00.height = "10px"; 
this.Tab00.height = 10%"; 
this.Tab00.height = Button00:10%";

<strCompID>

Tab 의 높이를 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.


기준 컴포넌트는 Tab 와 부모(Parent)가 동일하여야 합니다.

또한, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.


값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 높이가 적용됩니다.

<nVal>

Tab 의 높이를 절대 길이 단위("px"), 비율 단위("%"), 상대 길이 단위("em", "rem")의 숫자로 설정합니다.



  • <strCompID> 값을 생략했을 때 :

- "px": Tab의 높이 설정

- "%": 부모(Parent)의 height 속성값을 기준으로 Tab의 높이 결정

- "em": 컴포넌트의 font-size 속성값을 기준으로 Tab의 높이 결정

- "rem": MainFrame font-size 속성값을 기준으로 Tab의 높이 결정


  • <strCompID> 값을 설정했을 때 :

- "px": <strCompID> 값은 무시되고 설정값이 Tab의 높이 결정

- "%": <strCompID>의 height 속성값을 기준으로 Tab의 높이 결정

<strCompID> 값 설정 시 "em", "rem" 단위는 지원하지 않습니다.

참고

- 높이값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 높이값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

hotkey

Tab 의 기본 액션을 수행하기 위한 단축키를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.hotkey[= strHotkey]

문법 설정

this.Tab00.hotkey = "G"; 
this.Tab00.hotkey = "CTRL+A"; 
this.Tab00.hotkey = "CTRL+ALT+X";

strHotkey

수식키(CTRL, ALT, SHIFT)와 일반키의 조합으로 설정합니다.

수식키는 중복으로 조합하여 설정할 수 있습니다.

각 키는 "+" 를 사용하여 조합을 설정합니다.

참고

(1) 컴포넌트 기본 액션

hotkey 속성값 설정 시 컴포넌트의 기본 액션이 수행됩니다. 컴포넌트 기본 액션은 다음과 같습니다.
- onclick : Button, CheckBox
- 포커스 이동 (접근성 설정 시) : GroupBox, Static
- onsetfocus : 나머지 Frame 오브젝트 및 컴포넌트
* GroupBox, Static 컴포넌트는 접근성 설정 환경이 아닌 경우 hotkey 속성은 처리되지 않습니다.

(2) 예외 조건

(2-1) 같은 hotkey 속성값을 가진 컴포넌트가 있을 때
Form 내에 같은 hotkey 속성값을 가진 컴포넌트가 2개 이상 있는 경우 components 속성 인덱스 순서에 따라 먼저 생성된 컴포넌트의 hotkey 속성만 처리됩니다.

(2-2) 단축키가 설정된 입력장치를 사용할 때
단축키 설정 기능이 있는 입력장치를 사용하는 경우 입력장치에서 설정된 단축키와 같은 값을 hotkey 속성값으로 설정하면 hotkey 속성은 처리되지 않습니다.
예를 들어 "CTRL+M" 키 입력을 ENTER 키 입력으로 변환해 처리하는 키보드를 사용한다면 hotkey 속성값을 "CTRL+M"으로 설정하고 해당 키를 입력해도 기본 액션이 수행되지 않습니다.

(2-3) 상위 프레임 또는 Form이 활성화되지 않았을 때
hotkey 속성은 상위 프레임 또는 Form이 활성화된 경우에만 동작합니다. 

(2-4) enable 속성값이 false 일 때
컴포넌트의 enable 속성값이 false이면 hotkey 속성은 처리되지 않습니다.

(2-5) hotkeycolumn 속성값을 설정했을 때
Menu 컴포넌트의 hotkey 속성값과 hotkeycolumn 속성값을 같은 속성값으로 설정하면 hotkeycolumn 속성은 처리되지 않습니다.

활용 예제

id

Tab의 고유 식별자를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.id

문법 설정

id

Tab를 구별할 수 있는 유일값을 갖습니다.

참고

-  addChild나 insertChild 메소드를 사용하여 컴포넌트를 등록할때 parent 가 자식컴포넌트를 구별하기 위한 고유한 key값입니다.

- 속성명이나 메소드명과 같은 예약어를 id 속성값으로 설정할 경우 오류가 발생할 수 있습니다.

- 컴포넌트의 속성은 아니지만 편의를 위하여 넥사크로 스튜디오에서 설정할 수 있는 기능이 제공됩니다.

- name 속성은 사용자가 지정한 컴포넌트의 이름으로 논리적으로 중복이 가능합니다.

- 넥사크로 스튜디오에서 컴포넌트를 생성하거나 id 값을 설정하면 name 속성에 동일한 값이 설정됩니다.

initvalueid

Tab 에 적용될 InitValue 의 ID 를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.initvalueid[= strValueID]

문법 설정

strValueID

InitValueDefinition 영역에 정의된 InitValue 파일에서 Tab 에 적용할 항목의 ID 를 문자열로 설정합니다.

참고

- Tab 가 화면에 표시된 후에는 속성값을 설정하거나 변경 할 수 없습니다.
   Tab 를 동적으로 생성 시 show() 메소드 실행 전에 속성값을 설정하여야 합니다.

- Screen 별로 Environment 의 initvaluefileid 속성을 각각 설정하면 Screen 에 따라 다른 초기값을 설정할 수 있습니다.

- InitValueDefinition 영역에 한 개 이상의 InitValue 파일을 정의할 수 있고,
   InitValue 파일에는 컴포넌트별로 여러개의 초기값 정의를 할 수 있습니다.

layoutorder

Layout 컨테이너 내 Main Axis(type 속성값이 "horizontal"이면 수평축, type 속성값이 "vertical"이면 수직축)에 컴포넌트가 배치되는 순서를 설정합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.layoutorder[= nVal]

문법 설정

nVal

컴포넌트의 배치 순서를 설정합니다.

참고

- layoutorder 속성값을 설정하지 않으면 0으로 설정됩니다.

- 속성값이 음수인 경우에는 0으로 설정됩니다.

- 같은 값으로 2개 이상의 컴포넌트의 속성값을 설정할 수 있습니다. 
  속성값이 같은 경우에는 생성 순서(Z-Order)에 따라 배치 순서가 달라집니다.

left

Tab 을(를) 표시하기 위한 좌측 좌표값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.left[= nLeft]

문법 설정

nLeft ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']
this.Tab00.left = 10; 
this.Tab00.left = "10px"; 
this.Tab00.left = "10%"; 
this.Tab00.left = "Button00:10px"; 
this.Tab00.left = "Button00:10%";

<strCompID>

Tab 의 좌표값을 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.


기준 컴포넌트는 Tab 와 부모(Parent)가 동일하여야 합니다.

또한, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.


값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 좌표값이 적용됩니다.

<nVal>

Tab 의 좌측 좌표값을 절대 길이 단위("px"), 비율 단위("%"), 상대 길이 단위("em", "rem")의 숫자로 설정합니다.


  • <strCompID> 값을 생략했을 때 :

- "px": 부모(Parent)의 left 속성값을 기준으로 Tab의 좌측 위치 설정

- "%": 부모(Parent)의 width 속성값을 기준으로 Tab의 좌측 위치 결정

- "em": 컴포넌트의 font-size 속성값을 기준으로 Tab의 좌측 위치 결정

- "rem": MainFrame font-size 속성값을 기준으로 Tab의 좌측 위치 결정


  • <strCompID> 값을 설정했을 때 :

- "px": <strCompID>의 right 속성값을 기준으로 Tab의 좌측 위치 결정

- "%": <strCompID>의 width 속성값을 기준으로 Tab의 좌측 위치 결정

<strCompID> 값 설정 시 "em", "rem" 단위는 지원하지 않습니다.

참고

- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

letter-spacing

Tab 에 표시되는 문자의 간격(자간)을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.letterSpacing[= strspace]

문법 설정

strspace ::= 'normal' | <nVal> ['px']
* XCSS
letter-spacing : 2px ;

* Script ( normal property )
this.Tab00.letterSpacing = "2px";

"normal"

문자 사이의 간격(자간)을 설정하지 않습니다.

<nVal>

문자 사이의 간격(자간)을 pixel 단위로 설정합니다.


스크립트 작성 시에는 "px" 단위 표기를 생략할 수 있습니다.

(XCSS 작성 시에는 "px" 단위를 포함해 작성해야 합니다).

참고

- letter-spacing 속성값을 설정하지 않으면 undefined 가 설정되고, "normal" 로 동작합니다.

- 스크립트로 접근 시 속성명은 "letterSpacing"을 사용해야 합니다.

maxheight

Tab 이(가) 화면에 표시되는 최대 높이를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.maxheight[= nMaxHeight]

문법 설정

nMaxHeight ::= <nVal> ['px']
this.Tab00.maxheight = 20; 
this.Tab00.maxheight = "20px";

<nVal>

Tab 이(가) 화면에 표시되는 높이의 최대값을 pixel 단위의 숫자로 설정합니다.

참고

- height 속성값이 maxheight 보다 크면 화면에 표시되는 Tab 의 높이는 maxheight 속성값으로 적용됩니다.
  표시되는 높이만 적용되고 height 속성값은 변경되지 않습니다.

- maxheight 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- maxheight 속성값을 minheight 속성값보다 작게 설정하면 minheight 속성값이 maxheight 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 Tab 의 높이가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   maxheight > height > top(상대값) > bottom(상대값) > top(절대값) > bottom(절대값) 순서로 설정값이 적용됩니다.
   이 때, height, top, bottom 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 높이가 자동 설정될 때도 적용되는 속성입니다.

maxwidth

Tab 이(가) 화면에 표시되는 최대 너비를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.maxwidth[= nMaxWidth]

문법 설정

nMaxWidth ::= <nVal> ['px']
this.Tab00.maxwidth = 20; 
this.Tab00.maxwidth = "20px";

<nVal>

Tab 이(가) 화면에 표시되는 너비의 최대값을 pixel 단위의 숫자로 설정합니다.

참고

- width 속성값이 maxwidth 보다 크면 화면에 표시되는 Tab 의 너비는 maxwidth 속성값으로 적용됩니다.
  표시되는 너비만 적용되고 width 속성값은 변경되지 않습니다.

- maxwidth 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- maxwidth 속성값을 minwidth 속성값보다 작게 설정하면 minwidth 속성값이 maxwidth 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 Tab 의 너비가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   maxwidth > width > left(상대값) > right(상대값) > left(절대값) > right(절대값) 순서로 설정값이 적용됩니다.
   이 때, width, left, right 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 너비가 자동 설정될 때도 적용되는 속성입니다.

minheight

Tab 이(가) 화면에 표시되는 최소 높이를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.minheight[= nMinHeight]

문법 설정

nMinHeight ::= <nVal> ['px']
this.Tab00.minheight = 20; 
this.Tab00.minheight = "20px";

<nVal>

Tab 이(가) 화면에 표시되는 높이의 최소값을 pixel 단위의 숫자로 설정합니다.

참고

- height 속성값이 minheight 보다 작다면 화면에 표시되는 Tab 의 높이는 minheight 속성값으로 적용됩니다.
  표시되는 높이만 적용되고 height 속성값은 변경되지 않습니다.

- minheight 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- minheight 속성값을 maxheight 속성값보다 크게 설정하면 maxheight 속성값이 minheight 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 Tab 의 높이가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   minheight > height > top(상대값) > bottom(상대값) > top(절대값) > bottom(절대값) 순서로 설정값이 적용됩니다.
   이 때, height, top, bottom 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 높이가 자동 설정될 때도 적용되는 속성입니다.

minwidth

Tab 이(가) 화면에 표시되는 최소 너비를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.minwidth[= nMinWidth]

문법 설정

nMinWidth ::= <nVal> ['px']
this.Tab00.minwidth = 20; 
this.Tab00.minwidth = "20px";

<nVal>

Tab 이(가) 화면에 표시되는 너비의 최소값을 pixel 단위의 숫자로 설정합니다.

참고

- width 속성값이 minwidth 보다 작으면 화면에 표시되는 Tab 의 너비는 minwidth 속성값으로 적용됩니다.
  표시되는 너비만 적용되고 width 속성값은 변경되지 않습니다.

- minwidth 속성값에 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

- minwidth 속성값을 maxwidth 속성값보다 크게 설정하면 maxwidth 속성값이 minwidth 속성값으로 설정됩니다.

- Position 관련 속성(left, top 등)에 기준컴포넌트를 설정하여 Tab 의 너비가 상대적으로 설정될 경우에도 적용되는 속성입니다.
   minwidth > width > left(상대값) > right(상대값) > left(절대값) > right(절대값) 순서로 설정값이 적용됩니다.
   이 때, width, left, right 값 중 먼저 2개가 설정되면 나머지는 무시됩니다.

- fittocontents 속성이 있는 컴포넌트는 속성값에 의해 너비가 자동 설정될 때도 적용되는 속성입니다.

multiline

Tab 컴포넌트의 너비보다 탭버튼이 많으면 탭버튼을 여러줄로 표시할지 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.multiline[= bMultiline]

문법 설정

bMultiline ::= 'true' | 'false'
this.Tab00.multiline = true;

true

탭버튼을 여러줄로 표시합니다.

false

탭버튼을 한줄로 표시하고, 탭버튼 이동을 위해 스핀 버튼을 표시합니다.

참고

- multiline 속성값을 설정하지 않으면 "false'로 적용됩니다.

- 탭버튼의 개수가 Tab 컴포넌트의 너비를 초과해 스핀 버튼이 활성화되어야 하는 경우에 적용되는 속성입니다.

- multiline 속성값을 "true"로 설정하면 tabjustify 속성값은 자동으로 "true" 로 적용됩니다.

활용 예제

name

Tab 의 이름을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☑ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.name[= strName]

문법 설정

strName

컴포넌트의 이름을 설정합니다.

참고

- name 속성은 사용자가 지정한 컴포넌트의 이름으로 논리적으로 중복이 가능합니다.

- 넥사크로 스튜디오에서 컴포넌트를 생성하거나 id 값을 설정하면 name 속성에 동일한 값이 설정됩니다.

-nexa-border

Tab 의 테두리를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.border[= strborder]

문법 설정

strborder ::= <line-width> <line-style> <color> [,<line-width> <line-style> <color>]{3}

<line-width> ::= 'thin' | 'medium' | 'thick' | <nWidth> 'px'
<line-style> ::= 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'
<color> ::= <NamedColor> | <NumericColor>

1회 입력 : top/right/bottom/left 에 모두 적용됩니다.
2회 입력 : top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다.
3회 입력 : top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다.
4회 입력 : top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다.

* 2회~4회 입력은 border-radius 속성값이 설정되지 않은 경우만 적용됩니다.
* XCSS
-nexa-border : 1px solid #999999;
-nexa-border : 1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999;

* Script ( normal property )
this.Tab00.border = "1px solid #999999";
this.Tab00.border = "1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999";

<line-width>

테두리 선의 두께를 설정합니다.


"thin" 설정 시 1 pixel 두께로 테두리가 표시됩니다.

"medium" 설정 시 3 pixel 두께로 테두리가 표시됩니다.

"thick" 설정 시 5 pixel 두께로 테두리가 표시됩니다.


<nWidth> 설정 시 <nWidth> pixel 두께로 테두리가 표시됩니다.

<nWidth>

테두리 선의 두께를 pixel 단위로 설정합니다.

"px" 단위는 생략할 수 없습니다.

<line-style>

테두리 선의 스타일을 설정합니다.


"none" 설정 시 테두리가 표시되지 않습니다.

"hidden" 설정 시 테두리가 표시되지 않습니다.

"dotted" 설정 시 테두리가 점선으로 표시됩니다.

"dashed" 설정 시 테두리가 긴 점선으로 표시됩니다.

"solid" 설정 시 테두리가 실선으로 표시됩니다.

"double" 설정 시 테두리가 두줄로 표시됩니다.

"groove" 설정 시 테두리가 들어간 것처럼 보이게 입체적으로 표시됩니다.

"ridge" 설정 시 테두리가 올라온 것처럼 보이게 입체적으로 표시됩니다.

"inset" 설정 시 컴포넌트가 들어간 것처럼 보이게 테두리가 입체적으로 표시됩니다.

"outset" 설정 시 컴포넌트가 올라온 것처럼 보이게 테두리가 입체적으로 표시됩니다.

<color>

테두리 색상을 색상이름 또는 색상코드로 설정합니다.

<NamedColor>

"red","blue" 와 같이 미리 정의된 색상이름을 문자열로 설정합니다.

<NumericColor>

표시할 색의 색상코드입니다.


"#" 기호로 시작하는 6자리 hexadecimal 값으로 색상코드를 설정할 수 있습니다. (ex-"#FF00FF")

red, green, blue 값을 인자로 하는 "rgb()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgb(255,0,255)")

red, green, blue, alpha 값을 인자로 하는 "rgba()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"rgba(255,0,255,0.3)")

hue, saturation, lightness 값을 인자로 하는 "hsl()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsl(120,50%,50%)")

hue, saturation, lightness, alpha 값을 인자로 하는 "hsla()" 메소드로 색상코드를 설정할 수 있습니다. (ex-"hsla(120,50%,50%,0.8)")

참고

- -nexa-border 속성값을 설정하지 않으면 undefined 가 설정되고, "medium none #999999" 로 동작합니다.

- <line-style> 이 "double" 일 때 두 줄을 다른 색으로 설정할 수 없습니다.
   <color> 에 설정된 색이 두 줄에 모두 적용됩니다.

- 스크립트로 접근 시 속성명은 "border"를 사용해야 합니다.


◆ Nexacro Runtime Environment 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 top > right > bottom > left 순으로 겹쳐서 표시됩니다.

- <line-style> 에 "double","groove","ridge","inset","outset" 값을 설정해도 적용되지 않습니다.

- <line-width> 에 "thin","medium","thick" 값을 설정해도 적용되지 않습니다.


◆ Web Runtime Environment 제약

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 웹브라우저에 따라 테두리가 겹쳐지는 순서가 다르게 처리될 수 있습니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있으면 
   두께는 각 테두리 별로 따로 적용되고, 색상은 top 에 설정된 색이 적용됩니다.

- 각 테두리의 색상이나 두께를 다르게 설정했을 경우 border-radius 속성값이 설정되어 있어도
   일부 브라우저는 각 테두리의 색상이나 두께가 각각 적용됩니다.

- XCSS 를 사용하지 않고 rgba(), hsl(), hsla() 메소드를 속성에 직접 설정할 경우 브라우저 버전에 따라 적용되지 않을 수 있습니다.

-nexa-edge

Tab 의 테두리(Border) 안쪽에 표시될 Edge 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.edge[= stredge]

문법 설정

stredge ::= 'none' | <image> [<fixedwidth>'px' <fixedheight>'px']

<image> ::= 'URL("' <Theme-Image> | <Web-Image> '")'
* XCSS
-nexa-edge : "URL('./images/border.png')" 5px 5px;

* Script ( normal property )
this.Tab00.edge = "URL('./images/border.png')" 5px 5px;

"none"

edge 이미지를 설정하지 않습니다.

<image>

'URL ("[이미지위치]")' 형식으로 테마 또는 웹의 이미지를 설정합니다.


테두리(border) 안쪽에 edge 형태로 이미지가 표시됩니다.

<Theme-Image>

테마에 선언된 이미지를 "theme://images\이미지명" 형식으로 설정합니다.


테마에 해당 이미지가 등록되어 있어야 합니다.

<Web-Image>

웹의 이미지를 "http://경로/이미지명", "https://경로/파일명" 형식으로 설정합니다.


웹에 접근 가능한 환경이어야 합니다.

<fixedwidth>

이미지가 고정되어 표시될 왼쪽/오른쪽 영역의 크기를 pixel 단위로 설정합니다.

"0px" 설정 시 왼쪽/오른쪽 영역을 고정하지 않습니다.


값을 설정하지 않으면 "0px" 로 적용됩니다.

<fixedheight>

이미지가 고정되어 표시될 위쪽/아래쪽 영역의 크기를 pixel 단위로 설정합니다.

"0px" 설정 시 위쪽/아래쪽 영역을 고정하지 않습니다.


값을 설정하지 않으면 "0px" 로 적용됩니다.

참고

- -nexa-edge 속성값을 설정하지 않으면 undefined 가 설정되고, "none" 으로 동작합니다.

- 스크립트로 접근 시 속성명은 "edge" 를 사용해야 합니다.

- Tab 내부에 테두리 형태로 이미지를 표시하고자 할 때 사용하는 속성입니다.

- -nexa-edge 속성값을 설정하면 이미지의 상/하/좌/우 일정 영역(<fixedwidth>,<fixedheight> 값)을 고정하고 안쪽 사각형 영역을 Stretch 하여 처리합니다.

- background 속성에 의해 배경색 또는 이미지가 설정되어 있어도 -nexa-edge 속성에 설정된 이미지가 제일 위에 표시됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.
   사용자 Prefix 는 스크립트 또는 넥사크로 스튜디오에서 속성값으로 설정 시 사용할 수 있습니다.


◆ WRE 제약

- <fixedwidth>,<fixedheight> 값이 이미지 사이즈의 1/2 을 초과할 경우 브라우저별로 보이는 형태가 다를 수 있습니다.

- CSS3 스펙을 지원하지 않는 브라우저 버전에서는 정상적으로 표시되지 않을 수 있습니다.

-nexa-padding

Tab 영역의 안쪽 여백을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.padding[= strpadding]

문법 설정

strpadding ::= <npadding>'px'{4}
* XCSS
-nexa-padding : 5px 5px 5px 5px;

* Script ( normal property )
this.Tab00.padding = "5px 5px 5px 5px";

<npadding>

Tab 영역의 안쪽 여백을 pixel 단위로 설정합니다.


값을 1회 입력 시 top/right/bottom/left 에 모두 동일한 값이 적용됩니다.

값을 2회 입력 시 top/bottom, right/left 에 첫번째 값부터 각각 적용됩니다.

값을 3회 입력 시 top, right/left, bottom 에 첫번째 값부터 각각 적용됩니다.

값을 4회 입력 시 top, right, bottom, left 에 첫번째 값부터 각각 적용됩니다.


"px" 단위를 생략할 수 없습니다.

참고

- -nexa-padding 속성값을 설정하지 않으면 undefined 가 설정되고, "0px" 로 동작합니다.

- 스크립트로 접근 시 속성명은 "padding" 을 사용해야 합니다.

- -nexa-padding 속성은 내부 컨텐츠영역과 Tab 사이의 여백으로 적용됩니다.

- Div 와 같이 자식을 가질 수 있는 컴포넌트에서 -nexa-padding 속성은 자식 컴포넌트의 위치에 영향을 주지 않습니다.

-nexa-rtl-background-image

Tab 의 rtl 속성이 true 로 적용될 때 배경에 표시될 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.-nexa-rtl-background-image

문법 설정

strRtlBgImage ::= "URL(' " <Theme-Image> | <Web-Image> " ')"
* XCSS
-nexa-rtl-background-image : URL("http://localhost/Test.jpg");
-nexa-rtl-background-image : URL("theme://images/Test.jpg");

strRtlBgImage

"URL ('<이미지위치>')" 형식으로 테마 또는 웹의 이미지 경로를 문자열로 설정합니다.


background 속성에 설정된 값 중 이미지만 설정한 이미지로 대체됩니다.

background 속성에 설정된 이미지 이외의 값은 동일하게 적용됩니다.

<Theme-Image>

테마에 정의된 이미지를 "theme://images/이미지명" 형식으로 설정합니다.


테마에 해당 이미지가 등록되어 있어야 합니다.

<Web-Image>

웹의 이미지를 "http://경로/이미지명", "https://경로/이미지명" 형식으로 설정합니다.


웹에 접근 가능한 환경이어야 합니다.

참고

- rtl 속성에 의해 표시기준이 변경되면 반전된 이미지를 적용하려 할 때 사용하는 속성입니다.

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-background-image 속성값을 설정하지 않으면 background 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 배경이미지가 적용되는 영역은 컴포넌트의 클라이언트 영역입니다.

- background 속성에 배경색이 설정되어 있을 경우 배경색 위에 이미지가 표시됩니다.

- 그라데이션과 배경이미지를 동시에 설정할 수 없습니다.
   background 속성에 그라데이션이 설정되어 있을 경우 오동작이 발생할 수 있습니다.

-nexa-rtl-edge-image

Tab 의 rtl 속성이 true 로 적용될 때 테두리(Border) 안쪽에 표시될 Edge 이미지를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.-nexa-rtl-edge-image

문법 설정

strRtlEgImage ::= "URL(' " <Theme-Image> | <Web-Image> " ')"
* XCSS
-nexa-rtl-edge-image : URL("http://localhost/Test.jpg");
-nexa-rtl-edge-image : URL("theme://images/Test.jpg")

strRtlEgImage

"URL ('<이미지위치>')" 형식으로 테마 또는 웹의 이미지 경로를 문자열로 설정합니다.


-nexa-edge 속성에 설정된 값 중 이미지만 설정한 이미지로 대체됩니다.

-nexa-edge 속성에 설정된 이미지 이외의 값은 동일하게 적용됩니다.

<Theme-Image>

테마에 정의된 이미지를 "theme://images/이미지명" 형식으로 설정합니다.


테마에 해당 이미지가 등록되어 있어야 합니다.

<Web-Image>

웹의 이미지를 "http://경로/이미지명", "https://경로/이미지명" 형식으로 설정합니다.


웹에 접근 가능한 환경이어야 합니다.

참고

- rtl 속성에 의해 표시기준이 변경되면 반전된 이미지를 적용하려 할 때 사용하는 속성입니다.

- XCSS 에서만 설정할 수 있는 속성으로 스크립트로 값을 변경할 수 없습니다.
   XCSS 에 -nexa-rtl-edge-image 속성값을 설정하지 않으면 -nexa-edge 속성에 설정된 이미지가 적용됩니다.

- TypeDefinition 영역의 Services 에 정의된 사용자 Prefix 는 테마 또는 XCSS 에서 이미지경로로 사용할 수 없습니다.

- 배경이미지가 적용되는 영역은 컴포넌트의 클라이언트 영역입니다.

- background 또는 -nexa-rtl-background-image 속성에 의해 배경색 또는 이미지가 설정되어 있어도 -nexa-rtl-edge-image 속성에 설정된 이미지가 제일 위에 표시됩니다.


◆ web runtime environment 제약

- CSS3 스펙을 지원하지 않는 브라우저 버전에서는 정상적으로 표시되지 않을 수 있습니다.

nextbutton

Tab 의 서브컨트롤인 nextbutton 오브젝트를 갖는 읽기전용 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☑ Control

☑ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.nextbutton

문법 설정

var objControl = this.Tab00.nextbutton ;

참고

- 표시되는 탭버튼 갯수가 Tab 컴포넌트의 너비를 초과해 모두 표시되지 않을 때 탭버튼을 오르쪽으로 스크롤하는 버튼입니다.

- 표시되는 탭버튼 갯수가 Tab 컴포넌트의 너비를 초과하면 Tab 컴포넌트의 우측 상단에 자동으로 표시됩니다.

opacity

Tab 영역의 투명도를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.opacity[= stropacity]

문법 설정

* XCSS
opacity : 0.8;
opacity : 80%;

* Script ( normal property )
this.Tab00.opacity = "0.8";
this.Tab00.opacity = 0.8;
this.Tab00.opacity = "80%";

strOpacity

0.0 ~ 1.0 사이의 값 또는 0.0% ~ 100.0% 사이의 값을 지정합니다.

0(또는 0%)을 설정하면 완전 투명, 1(또는 100%)을 설정하면 완전 불투명으로 처리됩니다.

1 이상의 값은 1로, 0 이하의 값은 0으로 처리됩니다. 마찬가지로 100% 이상의 값은 100%로, 0% 이하의 값은 0%로 처리됩니다.


XCSS는 숫자 또는 퍼센트 값으로만 설정할 수 있습니다.

Script는 숫자 또는 문자(숫자, 퍼센트 값)로 설정할 수 있습니다.

참고

- opacity 속성값을 설정하지 않으면 undefined 가 설정되고, 1 로 동작합니다.

- Div 와 같이 자식 컴포넌트를 가질 수 있는 컴포넌트에 opacity 속성을 적용하면 자식 컴포넌트도 함께 적용됩니다.

- 부모와 자식 컴포넌트에 각각 opacity 속성이 설정되어 있으면 자식 컴포넌트의 투명도는 부모의 투명도에 추가적으로 적용됩니다.
   예를 들어 부모의 opacity가 0.5 이고 자식의 opacity가 0.4 이면 결과적으로 자식 컴포넌트는 0.2 의 투명도가 적용됩니다.

parent

Tab 의 부모 오브젝트를 갖는 읽기전용 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☑ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.parent

문법 설정

var objParent = this.Tab00.parent;

참고

- parent 속성은 일반적으로 컴포넌트가 속한 Form을 갖습니다.

- Tab 이(가) Div 와 같은 컨테이너 컴포넌트에 자식으로 존재한다면 parent 속성은 해당 컨테이너 컴포넌트를 갖습니다.

- Calendar 와 같이 서브컨트롤이 존재하는 컴포넌트에서 서브컨트롤의 parent 속성은 해당 컴포넌트를 갖습니다.

positionstep

부모 오브젝트가 화면분할기능을 사용할 때 Tab 이(가) 표시될 화면의 인덱스를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.positionstep[= nStep]

문법 설정

this.Tab00.positionstep = 0; 
this.Tab00.positionstep = -1;

nStep

Tab 이(가) 표시될 분할화면의 인덱스를 설정합니다.

"-1" 로 설정하면 모든 분할화면에 Tab 이(가) 표시됩니다.


분할화면의 인덱스는 "0" 부터 시작합니다.

참고

- positionstep 에 설정된 인덱스값과 일치하는 분할화면에만 컴포넌트가 표시됩니다.

- 분할화면에 표시되지 않는 컴포넌트의 visible 속성값은 "false"로 변경되지 않습니다.

활용 예제

preload

메인 Form 이 실행될 때 모든 TabPage 의 Form 을 미리 로딩할 지 결정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.preload[= bPreload]

문법 설정

bPreload ::= 'true' | 'false'
this.Tab00.preload = true;

"true"

메인 Form 이 실행될 때 TabPage 와 연결된 모든 Form 을 로딩합니다.


메인 Form 의 onload 이벤트는 TabPage 의 모든 Form 이 로딩 된 후 발생합니다.

"false"

메인 Form 이 실행될 때 화면에 표시되는 TabPage 의 Form 만 로딩합니다.

나머지 TabPage 의 Form 은 사용자가 TabPage 를 선택 변경하여 화면에 표시될 때 로딩합니다.


메인 Form 의 onload 이벤트는 화면에 표시되는 TabPage 의 Form 이 로딩 된 후 발생합니다.

참고

- preload 속성값을 설정하지 않으면 false 로 적용됩니다.

- TabPage 의 url 속성값이 설정되어 Form 이 연결된 경우에 적용되는 속성입니다.

- preload 속성값을 true 로 설정하면 모든 TabPage 의 Form 을 초기에 로딩하기 때문에 시스템에 부하를 줄 수 있고 화면이 깜빡일 수 있습니다.

prevbutton

Tab 의 서브컨트롤인 prevbutton 오브젝트를 갖는 읽기전용 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☑ Control

☑ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.prevbutton

문법 설정

var objControl = this.Tab00.prevbutton ;

참고

- 표시되는 탭버튼 갯수가 Tab 컴포넌트의 너비를 초과해 모두 표시되지 않을 때 탭버튼을 왼쪽으로 스크롤하는 버튼입니다.

- 표시되는 탭버튼 갯수가 Tab 컴포넌트의 너비를 초과하면 Tab 컴포넌트의 우측 상단에 자동으로 표시됩니다.

right

Tab 를 표시하기 위한 우측 좌표값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.right[= nRight]

문법 설정

nRight ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']
this.Tab00.right = 10; 
this.Tab00.right = "10px"; 
this.Tab00.right = "10%"; 
this.Tab00.right = "Button00:10px"; 
this.Tab00.right = "Button00:10%";

<strCompID>

Tab 의 좌표값을 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.


기준 컴포넌트는 Tab 와 부모(Parent)가 동일하여야 합니다.

또한, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.


값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 좌표값이 적용됩니다.

<nVal>

Tab 의 우측 좌표값을 절대 길이 단위("px"), 비율 단위("%"), 상대 길이 단위("em", "rem")의 숫자로 설정합니다.


  • <strCompID> 값을 생략했을 때 :

- "px": 부모(Parent)의 right 속성값을 기준으로 Tab의 우측 위치 설정

- "%": 부모(Parent)의 width 속성값을 기준으로 Tab의 우측 위치 결정

- "em": 컴포넌트의 font-size 속성값을 기준으로 Tab의 우측 위치 결정

- "rem": MainFrame font-size 속성값을 기준으로 Tab의 우측 위치 결정


  • <strCompID> 값을 설정했을 때 :

- "px": <strCompID>의 left 속성값을 기준으로 Tab의 우측 위치 결정

- "%": <strCompID>의 width 속성값을 기준으로 Tab의 우측 위치 결정

<strCompID> 값 설정 시 "em", "rem" 단위는 지원하지 않습니다.

참고

- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

rtl

Tab 에서 내부 컨텐츠 또는 컴포넌트의 표시 기준을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.rtl

문법 설정

bRtl ::= undefined | 'true' | 'false'
var vRtl = this.Tab00.rtl;

undefined

undefined 설정 시 상위 컴포넌트의 rtl 속성값이 적용됩니다.


사용자가 rtl 속성값을 설정하지 않거나 삭제했을 경우 undefined 가 설정됩니다.

true

Tab 의 내부 컨텐츠 또는 컴포넌트가 표시되는 기준을 오른쪽으로 설정합니다.

Tab 의 내부 좌표계의 기준을 오른쪽으로 설정합니다.

Tab 의 텍스트 표시 기준을 오른쪽으로 설정합니다.

수직스크롤바가 있을 경우 왼쪽에 표시됩니다.

false

Tab 의 내부 컨텐츠 또는 컴포넌트가 표시되는 기준을 왼쪽으로 설정합니다.

Tab 의 내부 좌표계의 기준을 왼쪽으로 설정합니다.

Tab 의 텍스트 표시 기준을 왼쪽으로 설정합니다.

수직스크롤바가 있을 경우 오른쪽에 표시됩니다.

참고

- 넥사크로 스튜디오에서만 값을 설정할 수 있고, 실행중에는 수정할 수 없는 속성입니다.

- 아랍권 같이 화면의 표시기준이 오른쪽인 환경에서 컨텐츠의 표시 기준을 변경하기 위해 설정하는 속성입니다.

- Tab 부터 Environment 까지 상위의 모든 rtl 속성값이 undefined 이면
   Environment 의 locale 속성에 설정된 국가 및 언어 설정값을 기준으로 rtl 속성이 적용됩니다.
   Environment 의 locale 속성값을 설정하지 않았을 경우 시스템의 국가 및 언어 설정값이 적용됩니다.

selectchangetype

탭버튼 클릭 시 TabPage가 변경되는 시점을 결정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.selectchangetype[= enumChangetype]

문법 설정

enumChangetype ::= 'down' | 'up'
this.Tab00.selectchangetype = "up";

"down"

탭버튼을 마우스 왼쪽버튼으로 Down 했을 때 TabPage 가 변경됩니다.

"up"

탭버튼을 마우스 왼쪽버튼으로 Down&Up 했을 때 TabPage 가 변경됩니다.

참고

- selectchangetype 속성값을 설정하지 않으면 "down"으로 적용됩니다.

selectedtabbuttonheight

Tab 에서 현재 선택된 TabpageControl 의 TabButton 높이를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.selectedtabbuttonheight[= nHeight]

문법 설정

nHeight ::= <nVal> ['px']
this.Tab00.selectedtabbuttonheight = 50;
this.Tab00.selectedtabbuttonheight = "50px";

<nVal>

선택된 TabpageControl 의 TabButton 에 높이로 적용될 값을 pixel 단위의 숫자로 설정합니다.

참고

- selectedtabbuttonheight 속성값을 설정하지 않으면 undefined 로 적용되고, 선택된 TabpageControl 의 TabButton 높이는 변경되지 않습니다.

- Tab 의 multiline 속성값이 true 인 경우 selectedtabbuttonheight 속성값은 무시됩니다.

- Tab 의 tabposition 속성값이 "left" 또는 "right" 일 때 tabjustify 속성이 true 로 동작하고 있으면 selectedtabbuttonheight 속성값은 무시됩니다.

- TabButton 이 선택될 때 showextrabutton 속성에 의해 표시되는 추가버튼의 높이는 selectedtabbuttonheight 속성에 설정한 값이 적용됩니다.

- Tab 의 tabposition 속성값이 "top" 또는 "bottom" 일 때 selectedtabbuttonheight 속성값이 자동으로 계산되는 TabButton 의 높이에 영향을 줄 수 있습니다.
   예를 들어, 자동으로 생성되는 TabButton 의 높이보다 큰 값을 selectedtabbuttonheight 에 설정 시 자동으로 생성되는 TabButton 의 높이에도 적용됩니다.

selectedtabbuttonwidth

Tab 에서 현재 선택된 TabpageControl 의 TabButton 너비를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.selectedtabbuttonwidth[= nWidth]

문법 설정

nWidth ::= <nVal> ['px']
this.Tab00.selectedtabbuttonwidth = 100;
this.Tab00.selectedtabbuttonwidth = "100px";

<nVal>

선택된 TabpageControl 의 TabButton 에 너비로 적용될 값을 pixel 단위의 숫자로 설정합니다.

참고

- selectedtabbuttonwidth 속성값을 설정하지 않으면 undefined 로 적용되고, 선택된 TabpageControl 의 TabButton 너비는 변경되지 않습니다.

- Tab 의 multiline 속성값이 true 인 경우 selectedtabbuttonwidth 속성값은 무시됩니다.

- Tab 의 tabposition 속성값이 "top" 또는 "bottom" 일 때 tabjustify 속성이 true 로 동작하고 있으면 selectedtabbuttonwidth 속성값은 무시됩니다.

- TabButton 이 선택될 때 showextrabutton 속성에 의해 표시되는 추가버튼의 너비는 selectedtabbuttonwidth 속성값에 포함되어 있습니다.
   즉, 추가버튼이 표시되면 TabButton 의 텍스트 영역이 줄어들어 표시되고 TabButton 의 전체 너비는 변경되지 않습니다.

- Tab 의 tabposition 속성값이 "left" 또는 "right" 일 때 selectedtabbuttonwidth 속성값이 자동으로 계산되는 TabButton 의 너비에 영향을 줄 수 있습니다.
   예를 들어, 자동으로 생성되는 TabButton 의 너비보다 큰 값을 selectedtabbuttonwidth 에 설정 시 자동으로 생성되는 TabButton 의 너비에도 적용됩니다.

showextrabutton

탭버튼 오른쪽에 추가버튼 표시 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.showextrabutton[= bExtrabutton]

문법 설정

bExtrabutton ::= 'true' | 'false'
this.Tab00.showextrabutton = true;

"true"

탭버튼 오른쪽에 추가버튼을 표시합니다.

"false"

탭버튼 오른쪽에 추가버튼을 표시하지 않습니다.

참고

- showextrabutton 속성값을 설정하지 않으면 "false"로 적용됩니다.

- 추가버튼 클릭 시 수행할 내용을 onextrabuttonclick 이벤트에 정의하여야 합니다.

showtabbuttonicon

tabbuttonitemicon 표시 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.showtabbuttonicon[= bShow]

문법 설정

bShow ::= 'true' | 'false'
this.Tab00.showtabbuttonicon = true;

true

tabbuttonitemtext 좌측에 tabbuttonitemicon을 표시합니다.

false

tabbuttonitemicon을 표시하지 않습니다.

참고

- showtabbuttonicon  속성값을 설정하지 않으면 false로 설정됩니다.

tabbuttongap

TabButton 사이의 간격을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabbuttongap[= nGap]

문법 설정

nGap

TabButton 사이의 간격을 pixel 단위의 숫자로 설정합니다.

참고

- multiline 속성값 또는 tabjustify 속성값이 true인 경우에는 tabbuttongap 속성이 적용되지 않습니다.

tabbuttonheight

Tab 에서 TabpageControl 의 TabButton 높이를 일괄로 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabbuttonheight[= nHeight]

문법 설정

nHeight ::= <nVal> ['px']
this.Tab00.tabbuttonheight = 80;
this.Tab00.tabbuttonheight = "80px";

<nVal>

일괄로 적용될 TabButton 의 높이를 pixel 단위의 숫자로 설정합니다.

참고

- tabbuttonheight 속성값을 설정하지 않으면 undefined 로 적용되고, 각 TabButton 의 높이는 자동으로 계산되어 적용됩니다.

- TabpageControl 의 tabbuttonheight 속성이 설정되어 있지 않으면 Tab 의 tabbuttonheight 속성값이 적용됩니다.

- Tab 의 multiline 속성값이 true 인 경우 tabbuttonheight 속성값은 무시됩니다.

- Tab 의 tabposition 속성값이 "left" 또는 "right" 일 때 tabjustify 속성이 true 로 동작하고 있으면 tabbuttonheight 속성값은 무시됩니다.

- showextrabutton 속성에 의해 표시되는 추가버튼의 높이는 tabbuttonheight 속성에 설정한 값이 적용됩니다.

tabbuttoniconsize

tabbuttonitemicon 크기를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabbuttoniconsize[= strSize]

문법 설정

strSize ::= <strWidth> [ ' ' <strHeight> ]
this.Tab00.tabbuttoniconsize = "20";
this.Tab00.tabbuttoniconsize = "40 20";

<strWidth>

tabbuttonitemicon의 너비를 pixel 단위의 문자열로 설정합니다.

<strHeight>

tabbuttonitemicon의 높이를 pixel 단위의 문자열로 설정합니다.


값을 생략할 경우 <strWidth> 값이 적용됩니다.

참고

- tabbuttoniconsize 속성값을 설정하지 않으면 undefined 로 적용됩니다.
   undefined 설정 시 tabbuttonitemicon에 설정된 이미지의 크기를 기준으로 적용됩니다.

- <strWidth> 값과 <strHeight> 값은 공백문자로 구분하여 문자열로 설정합니다.

- tabbuttonitemicon은 showtabbuttonicon 속성값이 true 일 때 표시됩니다.

- tabbuttonitemicon 영역에 Padding, Border 영역이 포함되므로 tabbuttoniconsize 속성값 설정 시 해당영역의 크기를 함께 고려하어야 합니다.

- tabbuttonheight, tabbuttonwidth 속성을 설정하지 않으면 tabbuttoniconsize 속성값 설정 시 TabButton 의 크기가 변경될 수 있습니다.

- tabbuttoniconsize 속성값을 tabbuttonheight, tabbuttonwidth 속성값보다 크게 설정해도 TabButton의 크기는 변경되지 않습니다.
   이 때, 내부적으로 tabbuttonitemicon 영역은 별도로 계산되므로 이미지의 위치가 변경될 수 있습니다.

tabbuttonstartgap

첫 번째 TabButton 시작 위치를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabbuttonstartgap[= nGap]

문법 설정

nGap

첫 번째 TabButton 시작 위치를 pixel 단위의 숫자로 설정합니다.

참고

- multiline 속성값 또는 tabjustify 속성값이 true인 경우에는 tabbuttonstartgap 속성이 적용되지 않습니다.

tabbuttonwidth

Tab 에서 TabpageControl 의 TabButton 너비를 일괄로 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabbuttonwidth[= nWidth]

문법 설정

nWidth ::= <nVal> ['px']
this.Tab00.tabbuttonwidth = 80;
this.Tab00.tabbuttonwidth = "80px";

<nVal>

일괄로 적용될 TabButton 의 너비를 pixel 단위의 숫자로 설정합니다.

참고

- tabbuttonwidth 속성값을 설정하지 않으면 undefined 로 적용되고, 각 TabButton 의 너비는 자동으로 계산되어 적용됩니다.

- TabpageControl 의 tabbuttonwidth 속성이 설정되어 있지 않으면 Tab 의 tabbuttonwidth 속성값이 적용됩니다.

- Tab 의 multiline 속성값이 true 인 경우 tabbuttonwidth 속성값은 무시됩니다.

- Tab 의 tabposition 속성값이 "top" 또는 "bottom" 일 때 tabjustify 속성이 true 로 동작하고 있으면 tabbuttonwidth 속성값은 무시됩니다.

- showextrabutton 속성에 의해 표시되는 추가버튼의 너비는 tabbuttonwidth 속성값에 포함되어 있습니다.
   즉, 추가버튼이 표시되면 TabButton 의 텍스트 영역이 줄어들어 표시되고 TabButton 의 전체 너비는 변경되지 않습니다.

tabindex

Tab 컴포넌트의 TabPage 중 화면에 표시되고 있는 TabPage의 인덱스를 갖는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabindex[= nIndex]

문법 설정

this.Tab00.tabindex = 2;

nIndex

화면에 표시될 TabPage의 인덱스를 설정합니다.


인덱스는 "0" 부터 시작하며 "TabPage갯수 - 1"까지 설정할 수 있습니다.

참고

- tabindex 속성값을 변경하면 화면에 표시되는 TabPage가 변경됩니다.

tabjustify

Tab 컴포넌트의 너비에 맞게 여백 없이 탭버튼이 표시되도록 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabjustify[= bTabjustify]

문법 설정

bTabjustify ::= 'true' | 'false'
this.Tab00.tabjustify = true;

true

Tab 컴포넌트의 너비에 맞게 탭버튼의 너비를 자동 조정하여 여백 없이 표시합니다.

false

탭버튼에 표시되는 텍스트에 맞게 탭버튼을 표시하고 남는 부분은 여백으로 표시합니다.

참고

- tabjustify 속성값을 설정하지 않으면 false 로 적용됩니다.

- Tab 컴포넌트의 너비보다 표시되어야 할 TabButton 이 많으면 tabjustify 속성값에 관계없이 false 로 동작합니다.

- multiline 속성값을 true 로 설정하면 tabjustify 속성값에 관계없이 true 로 동작합니다.

tablecellarea

Layout 컨테이너 내 가상의 Table Cell 영역 내에서 컴포넌트가 배치되는 영역을 설정합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tablecellarea[= strArea]

문법 설정

strArea ::= <rowstart> <rowend> '/' <columnstart> <columnend> | <strArea>

<strPosition> ::= <rowstart> <rowend> '/' <columnstart> <columnend>

<strPosition>

컴포넌트를 배치할 Cell 좌표를 설정합니다.


rowstart, rowend 또는 columnstart, columnend 구분은 공백문자를 사용합니다.

rowstart, rowend 또는 columnstart, columnend 가 같은(하나의 Cell 영역만 설정) 경우에는 하나의 값만 표기할 수 있습니다.

예를 들어 0 / 0 또는 0 0 / 0 0 으로 설정할 수 있습니다.

<strArea>

컴포넌트를 배치할 tabletemplatearea 속성에서 설정한 Cell 이름을 설정합니다.

참고

- 유효하지 않은 값을 설정한 경우에는 layoutorder, tabledirection 속성값에 따라 배치됩니다.

- 같은 영역에 2개 이상의 컴포넌트를 배치할 수 있습니다.

- row와 column의 start, end는 반대 방향으로 설정할 수 있습니다.
  예를 들어 "2 0 / 2 0"과 "0 2 / 0 2"은 같은 영역으로 처리합니다.

활용 예제

taborder

탭키 입력으로 컴포넌트간 포커스를 이동할 때 Tab 의 순서를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.taborder[= nTabOrder]

문법 설정

nTabOrder

0 이상의 정수로 설정합니다.

참고

- taborder 속성값이 작은 컴포넌트에 포커스가 먼저 이동되고, 속성값이 클수록 나중에 포커스가 이동됩니다.

- taborder 속성값이 동일한 컴포넌트는 폼에 먼저 생성된 컴포넌트에 포커스가 먼저 이동됩니다.

- 스크립트로 taborder 속성값 변경 시 포커스 이동 순서가 변경됩니다.

- Div 와 같은 컨테이너 컴포넌트는 자식 컴포넌트 레벨에서 포커스 이동 순서가 별도로 정의됩니다.

활용 예제

tabpages

Tab 컴포넌트에 등록된 TabPage 오브젝트들을 Collection 으로 갖는 읽기전용 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☑ Control

☑ Hidden

☑ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabpages

문법 설정

var objTabPage1 = this.Tab00.tabpages[0];

참고

- tabpages 속성은 Collection 접근방식을 사용할 수 있습니다.
  this.Tab00.tabpages[0], this.Tab00.tabpages["tabpage1"], this.Tab00.tabpages.length 등의 방법을 사용합니다.

tabposition

탭버튼이 Tab 컴포넌트에 표시되는 위치를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☑ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabposition[= enumTabpos]

문법 설정

enumTabpos ::= 'top' | 'left' | 'right' | 'bottom'
this.Tab00.tabposition = "bottom";

"top"

탭버튼이 Tab 컴포넌트 위쪽에 표시됩니다.

"left"

탭버튼이 Tab 컴포넌트 왼쪽에 표시됩니다.

"right"

탭버튼이 Tab 컴포넌트 오른쪽에 표시됩니다.

"bottom"

탭버튼이 Tab 컴포넌트 아랫쪽에 표시됩니다.

참고

- tabposition 속성값을 설정하지 않으면 "top"으로 적용됩니다.

활용 예제

tabstop

탭키 입력으로 컴포넌트간 포커스를 이동할 때 Tab 이(가) 포커스를 받을 지 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tabstop[= bTabStop]

문법 설정

bTabStop ::= 'true' | 'false'

"true"

Tab 이(가) 탭키 입력에 의한 포커스를 받습니다.

"false"

Tab 이(가) 탭키 입력에 의한 포커스를 받지 않습니다.

참고

- tabstop 속성값이 "false"인 경우 taborder 속성값과 관계없이 포커스가 해당 컴포넌트를 건너뜁니다.

- tabstop 속성값에 관계없이 마우스로 직접 포커스를 주거나, setfocus() 메소드 사용 시 포커스를 갖습니다.

- Div 와 같은 컨테이너 컴포넌트에서 포커스를 받을 수 있는 자식 컴포넌트가 존재하면 해당 컴포넌트가 포커스를 갖습니다.

tooltiptext

Tab 에 마우스 포인터를 올려 놓았을 때 표시되는 풍선도움말을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☐ Android

☐ iOS/iPadOS

☐ Android

☐ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☑ StringResource

문법

Tab.tooltiptext[= strToolTipText]

문법 설정

this.Tab00.tooltiptext = "This is ToolTip Text"; this.Tab00.tooltiptext = "";          // 풍선 도움말이 표시되지 않습니다. 

this.Tab00.tooltiptext = null;        // 상위 컴포넌트의 풍선 도움말이 표시됩니다.

strToolTipText

풍선도움말에 표시할 텍스트를 설정합니다.


빈문자열(EmptyString) 설정 시 풍선도움말이 표시되지 않습니다.

null 또는 undefined 설정 시 상위컴포넌트(Form, Div 등)의 풍선도움말이 표시됩니다.

참고

- tooltiptext 속성값을 설정하지 않으면 undefined 로 적용됩니다.

- 마우스 포인터가 Tab 영역 위에서 일정시간 움직이지 않으면 풍선도움말이 표시됩니다.

- 풍선도움말이 표시된 상태에서 tooltiptext 속성값을 변경하면 풍선도움말이 사라집니다.


◆ Desktop WRE 제약

- 풍선도움말은 브라우저의 기능을 활용하므로 브라우저 사양에 따라 스타일에 차이가 있을 수 있습니다.
   NRE는 Chrome 의 스타일과 동일하게 적용됩니다.

tooltiptype

Tab 에서 풍선도움말이 표시될 위치와 방식을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☐ macOS

☐ Edge

☐ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☐ Android

☐ iOS/iPadOS

☐ Android

☐ iOS/iPadOS




속성 타입

☑ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.tooltiptype[= enumTooltipType]

문법 설정

enumTooltipType ::= 'default' | 'hover' | 'inplace' | 'default,mouseleave' | 'hover,mouseleave' | 'inplace,mouseleave'
this.Tab00.tooltiptype = "hover";

"default"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 Tab 영역내에 위치하고 일정시간이 경과하면 풍선도움말이 사라집니다.

"hover"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 Tab 영역내에 멈춰서 일정시간이 경과하면 풍선도움말이 사라집니다.

Tab 영역 내에서 마우스 포인터를 이동한 후 멈추면 풍선도움말의 위치가 변경되거나 사라진 풍선도움말이 다시 표시됩니다.

"inplace"

Tab 의 좌측상단 안쪽에 풍선도움말을 표시합니다.


마우스 포인터가 Tab 영역내에 위치하고 일정시간이 경과하면 풍선도움말이 사라집니다.

"default,mouseleave"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 Tab 영역에 있으면 풍선도움말이 사라지지 않습니다.

"hover,mouseleave"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 Tab 영역에 있으면 풍선도움말이 사라지지 않습니다.

Tab 영역 내에서 마우스 포인터를 이동한 후 멈추면 풍선도움말의 위치가 변경됩니다.

"inplace,mouseleave"

Tab 의 좌측상단 안쪽에 풍선도움말을 표시합니다.


마우스 포인터가 Tab 영역에 있으면 풍선도움말이 사라지지 않습니다.

참고

- tooltiptype 속성값을 설정하지 않으면 "default" 로 적용됩니다.

- 마우스 포인터가 Tab 영역 위에서 일정시간 움직이지 않으면 풍선도움말이 표시됩니다.

- 풍선도움말이 표시된 상태에서 tooltiptext 속성값을 변경하면 tooltiptype 속성값에 관계없이 풍선도움말이 사라집니다.

- 표시되었다가 사라진 풍선도움말은 마우스 포인터가 Tab 영역을 나갔다가 들어오면 다시 표시됩니다.

- 마우스 포인터가 Tab 영역에서 벗어나면 풍선도움말이 사라집니다.

- 풍선도움말의 크기는 풍선도움말에 표시되는 텍스트의 길이와 크기에 맞춰 자동으로 조정됩니다.

- 풍선도움말에 표시되는 텍스트의 글꼴과 크기는 변경하실 수 없습니다.

top

Tab 을(를) 표시하기 위한 상단 좌표값을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.top[= nTop]

문법 설정

nTop ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']
this.Tab00.top = 10; 
this.Tab00.top = "10px"; 
this.Tab00.top = "10%"; 
this.Tab00.top = "Button00:10px"; 
this.Tab00.top = "Button00:10%";

<strCompID>

Tab 의 좌표값을 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.


기준 컴포넌트는 Tab 와 부모(Parent)가 동일하여야 합니다.

또한, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.


값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 좌표값이 적용됩니다.

<nVal>

Tab의 상단 좌표값을 절대 길이 단위("px"), 비율 단위("%"), 상대 길이 단위("em", "rem")의 숫자로 설정합니다.


  • <strCompID> 값을 생략했을 때 :

- "px": 부모(Parent)의 top 속성값을 기준으로 Tab의 상단 위치 설정

- "%": 부모(Parent)의 height 속성값을 기준으로 Tab의 상단 위치 결정

- "em": 컴포넌트의 font-size 속성값을 기준으로 Tab의 상단 위치 결정

- "rem": MainFrame font-size 속성값을 기준으로 Tab의 상단 위치 결정


  • <strCompID> 값을 설정했을 때 :

- "px": <strCompID>의 bottom 속성값을 기준으로 Tab의 상단 위치 결정

- "%": <strCompID>의 height 속성값을 기준으로 Tab의 상단 위치 결정

<strCompID> 값 설정 시 "em", "rem" 단위는 지원하지 않습니다.

참고

- 좌표값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 좌표값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

usecontrolkey

Tab 컴포넌트에서 "Control+탭" 키 입력으로 TabPage 선택을 변경할 지 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.usecontrolkey[= bUsectrlkey]

문법 설정

bUsectrlkey ::= 'true' | 'false'
this.Tab00.usecontrolkey = true;
this.Tab00.usecontrolkey = false;

true

Tab 컴포넌트에서 "Control+탭" 키 입력 시 다음 TabPage로 포커스를 이동합니다.

마지막 TabPage 에서 "Control+탭" 키 입력 시 첫번째 TabPage로 포커스를 이동합니다.


Tab 컴포넌트에서 "Control+Shift+탭" 키 입력 시 이전 TabPage로 포커스를 이동합니다.

첫번째 TabPage 에서 "Control+Shift+탭" 키 입력 시 마지막 TabPage로 포커스를 이동합니다.


Tab 컴포넌트에서 "Control+BackSpace" 키 입력 시 onextrabuttonclick 이벤트를 발생시킵니다.

false

"Control+탭" 키 또는 "Control+Shift+탭" 키 입력으로 TabPage 선택을 변경하지 않습니다.

참고

- usecontrolkey 속성값을 설정하지 않으면 true 로 적용됩니다.

- TabPage 선택이 변경되면 tabindex 속성값도 자동으로 변경됩니다.


◆ Desktop WRE 제약

- "Control+탭" 키와 "Control+Shift+탭" 키는 웹브라우저의 탭이동으로 우선 처리되므로 Tab 컴포넌트의 TabPage 전환이 불가능합니다.

visible

Tab 이(가) 화면에 표시될지 여부를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.visible[= bVisible]

문법 설정

bVisible ::= 'true' | 'false'
this.Tab00.visible = true; 
this.Tab00.visible = false;

"true"

Tab 을(를) 화면에 표시합니다.

"false"

Tab 을(를) 화면에 표시하지 않습니다.

참고

- visible 속성값을 변경하는 즉시 컴포넌트의 표시 여부가 화면에 반영됩니다.

- visible 속성값이 "false"이면 컴포넌트가 화면에 표시되지 않고, 포커스를 받을 수 없으므로 입력이나 사용이 불가능합니다.

- Div 와 같은 컨테이너 컴포넌트의 visible 속성값을 "false"로 설정하면 자식 컴포넌트도 함께 화면에 표시되지 않습니다.

- visible 속성값이 "false"이어도 컴포넌트는 존재하기 때문에 스크립트로 제어가 가능합니다.

- 넥사크로 스튜디오에서는 visible 속성값을 'false'로 설정해도 디자인화면에서 사라지지 않습니다.

width

Tab 을(를) 표시하기 위한 너비를 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.width[= nWidth]

문법 설정

nWidth ::= [<strCompID> ':'] <nVal> ['px' | '%' | 'em' | 'rem']
this.Tab00.width = 10; this.Tab00.width = "10px"; 
this.Tab00.width = "10%"; 
this.Tab00.width = "Button00:10%";

<strCompID>

Tab 의 너비를 상대적으로 적용하기 위해 기준이 되는 컴포넌트의 ID 를 설정합니다.


기준 컴포넌트는 Tab 와 부모(Parent)가 동일하여야 합니다.

또한, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.


값을 설정하지 않거나 잘못된 값을 설정하면 부모(Parent) 를 기준으로 너비가 적용됩니다.

<nVal>

Tab 의 너비를 절대 길이 단위("px"), 비율 단위("%"), 상대 길이 단위("em", "rem")의 숫자로 설정합니다.


  • <strCompID> 값을 생략했을 때 :

- "px": Tab의 너비 설정

- "%": 부모(Parent)의 width 속성값을 기준으로 Tab의 너비 결정

- "em": 컴포넌트의 font-size 속성값을 기준으로 Tab의 너비 결정

- "rem": MainFrame font-size 속성값을 기준으로 Tab의 너비 결정


  • <strCompID> 값을 설정했을 때 :

- "px": <strCompID> 값은 무시되고 설정값이 Tab의 너비 결정

- "%": <strCompID>의 width 속성값을 기준으로 Tab의 너비 결정

<strCompID> 값 설정 시 "em", "rem" 단위는 지원하지 않습니다.

참고

- 너비값에 단위를 생략할 경우 pixel 값으로 적용됩니다.

- 너비값에 기준 컴포넌트 또는 단위문자를 포함할 경우 문자열 형태로 설정하여야 합니다.

◆ 기준 컴포넌트 설정 시 유의할 점

- 속성값을 기준 컴포넌트(<strCompID>)를 참조하도록 설정한 경우 다음 사항을 유의해주세요.

스크립트로 속성값에 설정한 기준 컴포넌트 값(<strCompID>)을 변경하는 경우 유효한 컴포넌트 값이 아니면(잘못된 컴포넌트 id, 부모 또는 stepindex가 다른 컴포넌트) 기준 컴포넌트 값은 무시하고 부모를 기준으로 좌표값(<nVal>)을 적용합니다.
스크립트로 기준 컴포넌트의 크기나 위치 속성값을 변경되는 경우(속성값에 영향을 주는 메소드 실행으로 인한 변경 포함) 변경된 속성값이 기준 컴포넌트를 참조하는 컴포넌트에 바로 반영되지 않습니다.
예를 들어 Button01 컴포넌트의 left 속성값이 "Button00:10px"인 경우 스크립트로 Button00 컴포넌트의 right 속성값이 변경하더라도 Button01 컴포넌트의 위치는 변경되지 않습니다.
기준 컴포넌트의 크기나 위치 속성값이 변경된 것을 기준 컴포넌트를 참조하는 컴포넌트에 반영하려면 스크립트에서 기준 컴포넌트의 크기나 위치 속성값 변경 후 Form 오브젝트의 resetScroll 메소드를 실행해주어야 합니다.

word-spacing

Tab 에 표시되는 텍스트의 단어 사이 간격을 설정하는 속성입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




속성 타입

☐ Enum

☐ Expr

☐ Control

☐ Hidden

☐ ReadOnly

☐ Bind

☐ Collection

☐ StringResource

문법

Tab.wordSpacing[= strwordspacing]

문법 설정

strWordSpacing ::= 'normal' | <nVal>'px'
* XCSS
word-spacing : 30px;

* Script ( normal property )
this.Tab00.wordSpacing = "30px";

"normal"

텍스트의 단어 사이 간격을 설정하지 않습니다.


현재 font 에 맞는 기본형태로 텍스트가 표시됩니다.

<nVal>

pixel 단위로 텍스트의 단어 사이 간격을 설정합니다.

참고

- word-spacing 속성값을 설정하지 않으면 undefined 가 설정되고, "normal" 로 동작합니다.

- 스크립트로 접근 시 속성명은 "wordSpacing"을 사용해야 합니다.

메서드

addEvent

Tab 에 특정 이벤트를 선언하여 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.addEvent( strEventID )

파라미터

Parameters

Type

Description

strEventID

String

Tab 에 추가할 이벤트의 ID 를 문자열로 설정합니다.

var bResult = this.Tab00.addEvent( "onmove" );

반환

Type

Description

Boolean

이벤트 추가에 성공하면 true 를 반환합니다.


이벤트 추가에 실패하거나 선언되어 있는 이벤트 ID 설정 시 false 를 반환합니다.

참고

- Composite Component 와 같은 사용자 컴포넌트에 특정 이벤트를 추가할 때 사용하는 메소드입니다.

- Tab 에서 특정 이벤트를 제거하려면 removeEvent() 메소드를 사용하여야 합니다.

addEventHandler

Tab 의 특정 이벤트에 핸들러 함수를 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.addEventHandler( strEventID, objFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수가 추가될 이벤트의 ID를 설정합니다.

objFunc

Object

이벤트 발생 시 수행될 핸들러 함수를 설정합니다.

objTarget

Object

핸들러 함수가 정의된 영역을 설정합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.addEventHandler( "onmove", this.Tab00_onmove, this);

반환

Type

Description

Number

이벤트에 추가된 핸들러 함수의 인덱스를 반환합니다.

동일한 핸들러 함수가 이미 있다면 해당 핸들러 함수의 인덱스를 반환합니다.

정상적으로 추가되지 않은 경우에는 -1 을 반환합니다.

addEventHandlerLookup

함수를 검색하여 Tab 의 특정 이벤트에 핸들러 함수로 추가하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.addEventHandlerLookup( strEventID, strFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수가 추가될 이벤트의 ID를 설정합니다.

strFunc

String

이벤트 발생 시 수행될 핸들러 함수의 이름을 문자열로 설정합니다.

objTarget

Object

핸들러 함수를 검색할 영역을 설정합니다.

해당 영역에 함수가 정의되지 않았다면 상위 영역으로 올라가며 검색을 합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.addEventHandlerLookup( "onmove", "Tab00_onmove", this);

반환

Type

Description

Number

이벤트에 추가된 핸들러 함수의 인덱스를 반환합니다.

동일한 핸들러 함수가 이미 있다면 해당 핸들러 함수의 인덱스를 반환합니다.

정상적으로 추가되지 않은 경우에는 "-1"을 반환합니다.

참고

- strFunc 이름의 함수를 objTarget 영역부터 상위로 올라가며 검색합니다.
  검색된 함수가 있다면 이벤트에 핸들러 함수로 추가합니다.

bringToFront

부모가 동일한 컴포넌트 중 Tab 이(가) 화면의 제일 앞에 표시되게 합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.bringToFront()

파라미터

this.Tab.bringToFront();

참고

- 디자인 시 소스에 컴포넌트가 선언된 순서대로 화면에 표시됩니다.
  소스에서 위에 선언된 컴포넌트가 먼저 표시되고, 아래에 선언된 컴포넌트가 나중에 표시되게 됩니다.
  컴포넌트가 겹쳐져 있을 경우 화면에 표시되는 순서에 따라 먼저 표시된 컴포넌트가 나중에 표시되는 컴포넌트에 가려지게 됩니다.

- bringToFront() 메소드는 Tab 을(를) 가장 나중에 표시되게 순서를 바꿉니다.
  따라서 화면에 표시될때는 제일 앞에 표시되게 됩니다.

bringToPrev

부모가 동일한 컴포넌트 중 Tab 이(가) 화면에 한단계 앞에 표시되게 합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.bringToPrev()

파라미터

this.Tab.bringToPrev();

참고

- 디자인 시 소스에 컴포넌트가 선언된 순서대로 화면에 표시됩니다.
  소스에서 위에 선언된 컴포넌트가 먼저 표시되고, 아래에 선언된 컴포넌트가 나중에 표시되게 됩니다.
  컴포넌트가 겹쳐져 있을 경우 화면에 표시되는 순서에 따라 먼저 표시된 컴포넌트가 나중에 표시되는 컴포넌트에 가려지게 됩니다.

- bringToPrev() 메소드는 Tab 을(를) 한단계 나중에 표시되는 컴포넌트와 순서를 바꿉니다.
  따라서 화면에 표시될때는 원래 순서보다 한단계 앞에 표시되게 됩니다.

clearEventHandler

특정 이벤트에 등록된 핸들러 함수를 모두 제거하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.clearEventHandler( strEventID )

파라미터

Parameters

Type

Description

strEventID

String

모든 핸들러 함수를 제거할 이벤트의 ID를 설정합니다.

var nCnt = this.Tab00.clearEventHandler( "onmove" );

반환

Type

Description

Number

특정 이벤트에서 제거된 핸들러 함수의 갯수를 반환합니다.

참고

- 특정 핸들러 함수만 제거하려면 removeEventHandler() 메소드를 사용하여야 합니다.

destroy

스크립트에서 동적으로 생성한 Tab 을(를) 삭제하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.destroy()

파라미터

var bSucc = this.Tab00.destroy();

반환

Type

Description

Boolean

Tab 이(가) 정상적으로 삭제되면 true 를 반환합니다.


Tab 이(가) 정상적으로 삭제되지 않으면 false 를 반환합니다.

참고

- 동적으로 생성한 Tab 을(를) 완전히 삭제하기 위해서는 destroy() 메소드를 호출해야 합니다.

findEventHandler

Tab 의 특정 이벤트에서 핸들러 함수를 찾아 인덱스를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.findEventHandler( strEventID, objFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수를 찾을 이벤트의 ID를 설정합니다.

objFunc

Object

찾으려고 하는 핸들러 함수를 설정합니다.

objTarget

Object

찾으려고 하는 핸들러 함수가 정의된 영역을 설정합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo ) { //수행할 스크립트 };

var nIndex = this.Tab00.findEventHandler( "onmove", this.Tab00_onmove, this );

반환

Type

Description

Number

특정 이벤트에서 찾은 핸들러 함수의 인덱스를 반환합니다.


특정 이벤트에 찾으려는 핸들러 함수가 존재하지 않으면 -1 을 반환합니다.

참고

- 핸들러 함수의 인덱스는 0 부터 시작합니다.

getEventHandler

Tab 의 특정 이벤트에서 지정된 인덱스에 해당하는 핸들러 함수를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getEventHandler( strEventID, nIdx )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수를 얻을 이벤트의 ID를 설정합니다.

nIdx

Number

얻으려고 하는 핸들러 함수의 인덱스를 설정합니다.


핸들러 함수의 인덱스는 0 부터 시작합니다.

var objFunc = Tab00.getEventHandler( "onmove", 0 );

반환

Type

Description

Object

지정된 인덱스의 핸들러 함수 오브젝트를 반환합니다.


지정된 인덱스에 핸들러 함수가 존재하지 않는다면 null 을 반환합니다.

getIndex

인수로 전달된 좌표값에 위치한 탭버튼의 인덱스를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getIndex( nXpos, nYpos)

파라미터

Parameters

Type

Description

nXpos

Number

Tab 컴포넌트의 좌상단을 기준으로 한 x 좌표값을 설정합니다.

nYpos

Number

Tab 컴포넌트의 좌상단을 기준으로 한 y 좌표값을 설정합니다.

var nFindIndex = this.Tab00.getIndex( 10,10 );

반환

Type

Description

Number

인수로 전달된 좌표값에 위치한 탭버튼의 인덱스를 반환합니다.

인수로 전달된 좌표 위치에 탭버튼이 없다면 "-1"을 반환합니다.

getOffsetBottom

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 bottom 값을 픽셀단위의 숫자로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getOffsetBottom();

파라미터

var nBottom = this.Tab.getOffsetBottom();

반환

Type

Description

Number

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 bottom 값을 픽셀단위의 숫자로 반환합니다.

참고

- 화면에 표시된 부모 컴포넌트의 Top 위치를 기준으로 Tab 의 bottom 값을 동적으로 계산합니다.

getOffsetHeight

Tab 의 높이를 픽셀단위의 숫자로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getOffsetHeight();

파라미터

var nHeight = this.Tab.getOffsetHeight();

반환

Type

Description

Number

Tab 의 높이를 픽셀단위의 숫자로 변환하여 반환합니다.

참고

- 화면에 표시된 Tab 의 높이를 동적으로 계산합니다.

활용 예제

getOffsetLeft

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 left 값을 픽셀단위의 숫자로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getOffsetLeft();

파라미터

var nleft = this.Tab.getOffsetLeft();

반환

Type

Description

Number

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 left 값을 픽셀단위의 숫자로 반환합니다.

참고

- 화면에 표시된 부모 컴포넌트의 Left 위치를 기준으로 Tab 의 left 값을 동적으로 계산합니다.

getOffsetRight

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 right 값을 픽셀단위의 숫자로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getOffsetRight();

파라미터

var nRight = this.Tab.getOffsetRight();

반환

Type

Description

Number

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 right 값을 픽셀단위의 숫자로 반환합니다.

참고

- 화면에 표시된 부모 컴포넌트의 Left 위치를 기준으로 Tab 의 right 값을 동적으로 계산합니다.

getOffsetTop

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 top 값을 픽셀단위의 숫자로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getOffsetTop();

파라미터

var nTop = this.Tab.getOffsetTop();

반환

Type

Description

Number

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 top 값을 픽셀단위의 숫자로 반환합니다.

참고

- 화면에 표시된 부모 컴포넌트의 Top 위치를 기준으로 Tab 의 top 값을 동적으로 계산합니다.

getOffsetWidth

Tab 의 너비를 픽셀단위의 숫자로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getOffsetWidth();

파라미터

var nWidth = this.Tab.getOffsetWidth();

반환

Type

Description

Number

Tab 의 너비를 픽셀단위의 숫자로 변환하여 반환합니다.

참고

- 화면에 표시된 Tab 의 너비를 동적으로 계산합니다.

활용 예제

getPixelBottom

Tab 의 bottom 속성값을 픽셀단위로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getPixelBottom();

파라미터

var nbottom = this.Tab.getPixelBottom();

반환

Type

Description

Number

Tab 의 bottom 속성값을 픽셀단위로 반환합니다.


bottom 속성값을 설정하지 않았을 경우 null 을 반환합니다.

참고

- bottom 속성에 설정한 값의 단위가 퍼센트(%)여도 픽셀(pixel) 단위의 값을 반환합니다.

getPixelHeight

Tab 의 height 속성값을 픽셀단위로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getPixelHeight();

파라미터

var nheight = this.Tab.getPixelHeight();

반환

Type

Description

Number

Tab 의 height 속성값을 픽셀단위로 반환합니다.


height 속성값을 설정하지 않았을 경우 null 을 반환합니다.

참고

- height 속성에 설정한 값의 단위가 퍼센트(%)여도 픽셀(pixel) 단위의 값을 반환합니다.

getPixelLeft

Tab 의 left 속성값을 픽셀단위로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getPixelLeft();

파라미터

var nleft = this.Tab.getPixelLeft();

반환

Type

Description

Number

Tab 의 left 속성값을 픽셀단위로 반환합니다.


left 속성값을 설정하지 않았을 경우 null 을 반환합니다.

참고

- left 속성에 설정한 값의 단위가 퍼센트(%)여도 픽셀(pixel) 단위의 값을 반환합니다.

getPixelRight

Tab 의 right 속성값을 픽셀단위로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getPixelRight();

파라미터

var nright = this.Tab.getPixelRight();

반환

Type

Description

Number

Tab 의 right 속성값을 픽셀단위로 반환합니다.


right 속성값을 설정하지 않았을 경우 null 을 반환합니다.

참고

- right 속성에 설정한 값의 단위가 퍼센트(%)여도 픽셀(pixel) 단위의 값을 반환합니다.

getPixelTop

Tab 의 top 속성값을 픽셀단위로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getPixelTop();

파라미터

var ntop = this.Tab.getPixelTop();

반환

Type

Description

Number

Tab 의 top 속성값을 픽셀단위로 반환합니다.


top 속성값을 설정하지 않았을 경우 null 을 반환합니다.

참고

- top 속성에 설정한 값의 단위가 퍼센트(%)여도 픽셀(pixel) 단위의 값을 반환합니다.

getPixelWidth

Tab 의 width 속성값을 픽셀단위로 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getPixelWidth();

파라미터

var nwidth = this.Tab.getPixelWidth();

반환

Type

Description

Number

Tab 의 width 속성값을 픽셀단위로 반환합니다.


width 속성값을 설정하지 않았을 경우 null 을 반환합니다.

참고

- width 속성에 설정한 값의 단위가 퍼센트(%)여도 픽셀(pixel) 단위의 값을 반환합니다.

getTabpageCount

Tab 컴포넌트에 등록된 TabPage의 갯수를 반환하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.getTabpageCount()

파라미터

var nCount = this.Tab00.getTabpageCount();

반환

Type

Description

Number

Tab 컴포넌트에 등록된 TabPage의 갯수를 반환합니다.

init

스크립트에서 동적으로 Tab 컴포넌트를 생성한 후에 초기화하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.init( strName, vLeft, vTop , vWidth, vHeight [, vRight, vBottom, [vMinWidth, [vMaxWidth, [vMinHeight, [vMaxHeight]]]]] )

파라미터

Parameters

Type

Description

strName

String

Tab 의 ID를 설정합니다.

vLeft

String, Number

Tab 의 left 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 right 속성값을 기준으로 Tab 의 left 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 left 가 결정됩니다.

vTop

String, Number

Tab 의 top 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 bottom 속성값을 기준으로 Tab 의 top 이 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 top 이 결정됩니다.

vWidth

String, Number

Tab 의 width 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 width 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 width 가 결정됩니다.

vHeight

String, Number

Tab 의 height 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 height 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 height 가 결정됩니다.

vRight

String, Number

Tab 의 right 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


vLeft, vWidth 값을 모두 설정했을 경우 vRight 값은 무시됩니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 left 속성값을 기준으로 Tab 의 right 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 right 가 결정됩니다.

vBottom

String, Number

Tab 의 bottom 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


vTop, vHeight 값을 모두 설정했을 경우 vBottom 값은 무시됩니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 top 속성값을 기준으로 Tab 의 bottom 이 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 bottom 이 결정됩니다.

vMinWidth

String, Number

Tab 이 화면에 표시되는 최소 너비값을 pixel 단위의 숫자로 설정합니다.

vMaxWidth

String, Number

Tab 이 화면에 표시되는 최대 너비값을 pixel 단위의 숫자로 설정합니다.


vMinWidth 보다 작은 값을 설정하면 vMinWidth 값으로 설정됩니다.

vMinHeight

String, Number

Tab 이 화면에 표시되는 최소 높이값을 pixel 단위의 숫자로 설정합니다.

vMaxHeight

String, Number

Tab 이 화면에 표시되는 최대 높이값을 pixel 단위의 숫자로 설정합니다.


vMinHeight 보다 작은 값을 설정하면 vMinHeight 값으로 설정됩니다.

var objComp = new Tab();

objComp.init( "Tab00", 30, 120, 196, 46 );
objComp.init( "Tab00", 30, 120, 196, 46, null, null );
objComp.init( "Tab00", null, null, 300, "400px", "80%", 300 );
objComp.init( "Tab00", 0, 0, 200, 100, null, null, 300, 500, 200, 500 );
objComp.init( "Tab00", "Button00:10", 300, null, null, "Static00:10", "20%", 300, 500, 200, 500 );

참고

- 인수값에 기준 컴포넌트를 포함하면 Tab 의 위치는 기준 컴포넌트를 기준으로 상대적으로 결정됩니다.
  vLeft, vTop, vWidth, vHeight, vRight, vBottom 값에 기준 컴포넌트를 포함할 때는 "ID:Value" 형태로 설정하여야 합니다.

- 기준 컴포넌트는 Tab 과 부모(Parent)가 동일하여야 하며, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.
  기준 컴포넌트를 설정하지 않거나 잘못된 값을 설정하면 부모(Parent)를 기준으로 좌표값이 적용됩니다.

- 인수값에 기준 컴포넌트 또는 단위를 포함할 경우 문자열로 설정하여야 합니다.

- 스크립트에서 동적으로 컴포넌트를 생성한 후에만 사용할 수 있습니다.
  동적으로 생성한 컴포넌트가 아닌 경우에는 오동작이 발생할수 있습니다.

- show() 메소드로 컴포넌트가 화면에 표시되면 초기화가 끝난 상태입니다.
  초기화가 끝난 후에 init() 메소드를 호출하면 오류가 발생하며 설정한 값은 적용되지 않습니다.

- Tab 에 TabPage 를 추가하려면 show() 메소드로 Tab 을 화면에 표시한 후 insertTabpage() 메소드를 사용하여야 합니다.

- 동적으로 생성한 컴포넌트를 컨테이너 컴포넌트에 추가하기 위해서는 addChild() 메소드나 insertChild() 메소드를 사용하여야 합니다.

insertEventHandler

Tab 의 특정 이벤트에 핸들러 함수를 지정한 위치에 삽입하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.insertEventHandler( strEventID, nIndex, objFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수가 삽입될 이벤트의 ID 를 설정합니다.

nIndex

Number

핸들러 함수가 삽입될 위치를 인덱스로 설정합니다.


-1 값 설정 시 마지막에 추가됩니다.

이벤트에 설정된 핸들러 함수의 갯수보다 큰 값을 설정한 경우 마지막에 추가됩니다.

NaN 값을 입력하면 ECMA 의 정수 변환 규칙에 따라 0 이 설정됩니다.

objFunc

Object

이벤트 발생 시 수행될 핸들러 함수를 설정합니다.

objTarget

Object

핸들러 함수가 정의된 영역을 설정합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };

var nIndex = this.Tab00.insertEventHandler( "onmove", 0, this.Tab00_onmove, this);

반환

Type

Description

Number

이벤트에 삽입된 핸들러 함수의 인덱스를 반환합니다.

동일한 핸들러 함수가 이미 있다면 해당 핸들러 함수의 인덱스를 반환합니다.


핸들러 함수가 정상적으로 삽입되지 않은 경우에는 -1 을 반환합니다.

참고

- 첫번째 핸들러 함수의 인덱스는 0 입니다.

insertTabpage

Tab 컴포넌트에서 지정한 위치에 TabpageControl 을 삽입하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.insertTabpage( strID, nIndex [,strURL [,strText [,nTabBtnWidth [,nTabBtnHeight]]]] )

파라미터

Parameters

Type

Description

strID

String

삽입된 TabpageControl 의 ID 로 사용할 유일값을 문자열로 설정합니다.

nIndex

Number

삽입될 위치를 인덱스로 설정합니다.


-1 로 설정시 마지막으로 추가됩니다.

strURL

String

삽입된 TabpageControl 에 연결할 Form 의 URL 을 문자열로 설정합니다.


연결할 Form 이 없으면 빈값("")을 설정합니다.

값 생략 시 빈값("") 이 설정됩니다.

strText

String

삽입된 TabpageControl 의 TabButton 에 표시할 텍스트를 설정합니다.


값 생략 시 첫번째 파라미터인 strID 값이 설정됩니다.

nTabBtnWidth

Number

삽입된 TabpageControl 의 TabButton 너비를 pixel 단위의 숫자로 설정합니다.


값 생략 시 Tab 의 tabbuttonwidth 속성값이 적용됩니다.

nTabBtnHeight

Number

삽입된 TabpageControl 의 TabButton 높이를 pixel 단위의 숫자로 설정합니다.


값 생략 시 Tab 의 tabbuttonheight 속성값이 적용됩니다.

var nIndex;
nIndex = this.Tab00.insertTabpage( "newpage01",1 );
nIndex = this.Tab00.insertTabpage( "newpage02",2,"Base::page02.xfdl" );
nIndex = this.Tab00.insertTabpage( "newpage03",3,"Base::page03.xfdl","Title03" );
nIndex = this.Tab00.insertTabpage( "newpage04",4,"Base::page04.xfdl","Title04", 100, 50 );

반환

Type

Description

Number

Tab 컴포넌트에 삽입된 TabpageControl 의 인덱스값을 반환합니다.


Tab 컴포넌트에 TabpageControl 삽입을 실패하면 -1 을 반환합니다.

참고

- TabPage가 삽입된 위치 이후에 있는 TabPage의 인덱스는 자동으로 "1"씩 증가합니다.

move

Tab 의 위치와 크기를 변경하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.move( vLeft, vTop [, vWidth, vHeight [, vRight, vBottom]] )

파라미터

Parameters

Type

Description

vLeft

String, Number

Tab 의 left 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 right 속성값을 기준으로 Tab 의 left 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 left 가 결정됩니다.

vTop

String, Number

Tab 의 top 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 bottom 속성값을 기준으로 Tab 의 top 이 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 top 이 결정됩니다.

vWidth

String, Number

Tab 의 width 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 width 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 width 가 결정됩니다.

vHeight

String, Number

Tab 의 height 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 height 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 height 가 결정됩니다.

vRight

String, Number

Tab 의 right 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


vLeft, vWidth 값을 모두 설정했을 경우 vRight 값은 무시됩니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 left 속성값을 기준으로 Tab 의 right 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 right 가 결정됩니다.

vBottom

String, Number

Tab 의 bottom 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.


vTop, vHeight 값을 모두 설정했을 경우 vBottom 값은 무시됩니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트의 top 속성값을 기준으로 Tab 의 bottom 이 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 bottom 이 결정됩니다.

this.Tab00.move(10,10);
this.Tab00.move(10,10,100,100);
this.Tab00.move(null, null, 300, "400px", "80%", 300 );

참고

- 인수값에 기준 컴포넌트를 포함하면 Tab 의 위치는 기준 컴포넌트를 기준으로 상대적으로 결정됩니다.
  vLeft, vTop, vWidth, vHeight, vRight, vBottom 값에 기준 컴포넌트를 포함할 때는 "ID:Value" 형태로 설정하여야 합니다.

- 기준 컴포넌트는 Tab 와(과) 부모(Parent)가 동일하여야 하며, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.
  기준 컴포넌트를 설정하지 않거나 잘못된 값을 설정하면 부모(Parent)를 기준으로 좌표값이 적용됩니다.

- 인수값에 기준 컴포넌트 또는 단위를 포함할 경우 문자열로 설정하여야 합니다.

moveTabpage

Tab 컴포넌트에서 TabPage의 순서를 변경하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.moveTabpage( nFromindex, nToindex )

파라미터

Parameters

Type

Description

nFromindex

Number

순서를 변경할 TabPage의 인덱스를 설정합니다.

nToindex

Number

TabPage 가 위치할 새로운 인덱스를 설정합니다.

var nSuccess = this.Tab00.moveTabpage(0,1);

반환

Type

Description

Number

TabPage의 순서 변경에 성공하면 "0"을 반환합니다.

TabPage의 순서 변경에 실패하면 "-1"을 반환합니다.

참고

- nFromIndex 값과 nToIndex 값은 TabPage 순서를 변경하기 전 기준으로 설정하여야 합니다.

- moveTabpage() 메소드 수행 후 "nFromIndex ~ (nToIndex - 1)" 인덱스 범위에 해당하는 TabPage의 인덱스는 자동으로 "1"씩 증가합니다.

moveToNext

부모가 동일한 컴포넌트 중 인수로 전달된 컴포넌트보다 Tab 이(가) 화면에 한단계 뒤에 표시되게 합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.moveToNext( objComp )
Tab.moveToNext( strComp )

파라미터

Parameters

Type

Description

objComp

Object

기준이 되는 컴포넌트를 오브젝트로 설정합니다.

strComp

String

기준이 되는 컴포넌트의 ID를 문자열로 설정합니다.

this.Tab.moveToNext( this.Button00 );
this.Tab.moveToNext( "Button00" );

참고

- 인수로 전달되는 기준 컴포넌트와 Tab 은(는) 부모가 동일하여야 합니다.

- 디자인 시 소스에 컴포넌트가 선언된 순서대로 화면에 표시됩니다.
  소스에서 위에 선언된 컴포넌트가 먼저 표시되고, 아래에 선언된 컴포넌트가 나중에 표시되게 됩니다.
  컴포넌트가 겹쳐져 있을 경우 화면에 표시되는 순서에 따라 먼저 표시된 컴포넌트가 나중에 표시되는 컴포넌트에 가려지게 됩니다.

- moveToNext() 메소드는 기준 컴포넌트보다 Tab 이(가) 한단계 먼저 표시되게 순서를 바꿉니다.
  따라서 화면에 표시될때는 기준 컴포넌트보다 한단계 뒤에 표시되게 됩니다.

moveToPrev

부모가 동일한 컴포넌트 중 인수로 전달된 컴포넌트보다 Tab 이(가) 화면에 한단계 앞에 표시되게 합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.moveToPrev( objComp )
Tab.moveToPrev( strComp )

파라미터

Parameters

Type

Description

objComp

Object

기준이 되는 컴포넌트를 오브젝트로 설정합니다.

strComp

String

기준이 되는 컴포넌트의 ID를 문자열로 설정합니다.

this.Tab.moveToPrev( this.Button00 );
this.Tab.moveToPrev( "Button00" );

참고

- 인수로 전달되는 기준 컴포넌트와 Tab 은(는) 부모가 동일하여야 합니다.

- 디자인 시 소스에 컴포넌트가 선언된 순서대로 화면에 표시됩니다.
  소스에서 위에 선언된 컴포넌트가 먼저 표시되고, 아래에 선언된 컴포넌트가 나중에 표시되게 됩니다.
  컴포넌트가 겹쳐져 있을 경우 화면에 표시되는 순서에 따라 먼저 표시된 컴포넌트가 나중에 표시되는 컴포넌트에 가려지게 됩니다.

- moveToPrev() 메소드는 기준 컴포넌트보다 Tab 이(가) 한단계 나중에 표시되게 순서를 바꿉니다.
  따라서 화면에 표시될때는 기준 컴포넌트보다 한단계 앞에 표시되게 됩니다.

removeEvent

Tab 에 선언된 특정 이벤트를 삭제하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.removeEvent( strEventID )

파라미터

Parameters

Type

Description

strEventID

String

Tab 에서 삭제할 이벤트의 ID 를 문자열로 설정합니다.

var bResult = this.Tab00.removeEvent( "onmove" );

반환

Type

Description

Boolean

이벤트 삭제에 성공하면 true 를 반환합니다.


이벤트 삭제에 실패하거나 선언되지 않은 이벤트 ID 설정 시 false 를 반환합니다.

참고

- Composite Component 와 같은 사용자 컴포넌트에서 특정 이벤트를 삭제할 때 사용하는 메소드입니다.

- 이벤트에 핸들러 함수가 정의되어 있을 경우 이벤트를 삭제할 수 없습니다.

- Tab 에 특정 이벤트를 추가하려면 addEvent() 메소드를 사용하여야 합니다.

- Tab 에 기본으로 선언되어 있는 이벤트 삭제 시 오동작 할 수 있으므로 주의하여야 합니다.

removeEventHandler

Tab 의 특정 이벤트에서 핸들러 함수를 제거하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.removeEventHandler( strEventID, objFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수를 제거할 이벤트의 ID를 설정합니다.

objFunc

Object

제거할 핸들러 함수를 설정합니다.

objTarget

Object

제거할 핸들러 함수가 정의된 영역을 설정합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.removeEventHandler( "onmove", this.Tab00_onmove, this);

반환

Type

Description

Number

핸들러 함수 제거에 성공하면 1 을 반환합니다.


핸들러 함수 제거에 실패하면 0 을 반환합니다.

참고

- 핸들러 함수가 제거되면 핸들러 함수의 인덱스가 0 번부터 재조정됩니다.

- 이벤트에 등록된 핸들러 함수를 모두 제거하려면 clearEventHandler() 메소드를 사용하여야 합니다.

removeEventHandlerLookup

Tab 의 특정 이벤트에서 검색된 함수와 동일한 핸들러 함수를 제거하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.removeEventHandlerLookup( strEventID, strFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수를 제거할 이벤트의 ID를 설정합니다.

strFunc

String

제거할 핸들러 함수의 이름을 문자열로 설정합니다.

objTarget

Object

제거할 핸들러 함수가 정의된 영역을 설정합니다.

해당 영역에 함수가 정의되지 않았다면 상위 영역으로 올라가며 검색을 합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.removeEventHandlerLookup( "onmove", "Tab00_onmove", this);

반환

Type

Description

Number

핸들러 함수 제거에 성공하면 1 을 반환합니다.


핸들러 함수 제거에 실패하면 0 을 반환합니다.

참고

- 핸들러 함수가 제거되면 핸들러 함수의 인덱스가 0 번부터 재조정됩니다.

- 이벤트에 등록된 핸들러 함수를 모두 제거하려면 clearEventHandler() 메소드를 사용하여야 합니다.

removeTabpage

설정한 인덱스값에 해당하는 TabPage를 Tab 컴포넌트에서 삭제하는 메서드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.removeTabpage( nIndex )

파라미터

Parameters

Type

Description

nIndex

Number

삭제할 TabPage의 인덱스값을 설정합니다.

var bSuccess = this.Tab00.removeTabpage( 0 );

반환

Type

Description

Number

TabPage 삭제에 성공하면 0을 반환합니다.

TabPage 삭제에 실패하면 -1을 반환합니다.

참고

- TabPage 삭제 성공 시 삭제된 TabPage 다음의 TabPage 인덱스가 1씩 줄어듭니다.

- TabPage 컨트롤의 url 속성값을 설정하고 연결된 Form이 로딩된 경우, TabPage 삭제 시 연결된 Form의 onbeforeclose, onclose 이벤트가 발생합니다.

resize

Tab 의 크기를 변경하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.resize( vWidth, vHeight )

파라미터

Parameters

Type

Description

vWidth

String, Number

Tab 의 width 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.

음수값을 설정할 수 없습니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 width 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 width 속성값을 기준으로 Tab 의 width 가 결정됩니다.

vHeight

String, Number

Tab 의 height 속성값을 pixel 또는 비율("%") 단위의 숫자로 설정합니다.

음수값을 설정할 수 없습니다.


  • 값에 기준 컴포넌트를 포함하여 설정했을 때 :

pixel 단위로 설정 시 기준 컴포넌트값은 무시되고 pixel 값으로 Tab 의 height 가 결정됩니다.

비율("%") 단위로 설정 시 기준 컴포넌트의 height 속성값을 기준으로 Tab 의 height 가 결정됩니다.

this.Tab00.resize( 100,100 );

참고

- Tab 의 left 속성값이 null 이 아니면 resize() 메소드 실행 후 Tab 의 우측 위치가 변경됩니다.
  또한, 메소드 실행 후 right 속성값은 null 이 됩니다.

- Tab 의 left 속성값이 null 이면 resize() 메소드 실행 후 Tab 의 좌측 위치가 변경됩니다.
  또한, 메소드 실행 후 left 속성값은 null 로 유지됩니다.

- Tab 의 top 속성값이 null 이 아니면 resize() 메소드 실행 후 Tab 의 하단 위치가 변경됩니다.
  또한, 메소드 실행 후 bottom 속성값은 null 이 됩니다.

- Tab 의 top 속성값이 null 이면 resize() 메소드 실행 후 Tab 의 상단 위치가 변경됩니다.
  또한, 메소드 실행 후 top 속성값은 null 로 유지됩니다.

- 인수값에 기준 컴포넌트를 포함하면 Tab 의 위치는 기준 컴포넌트를 기준으로 상대적으로 결정됩니다.
  vWidth, vHeight 값에 기준 컴포넌트를 포함할 때는 "ID:Value" 형태로 설정하여야 합니다.

- 기준 컴포넌트는 Tab 와(과) 부모(Parent)가 동일하여야 하며, Form 로딩 시 Tab 보다 먼저 생성되어야 합니다.
  기준 컴포넌트를 설정하지 않거나 잘못된 값을 설정하면 부모(Parent)를 기준으로 좌표값이 적용됩니다.

- 인수값에 기준 컴포넌트 또는 단위를 포함할 경우 문자열로 설정하여야 합니다.

sendToBack

부모가 동일한 컴포넌트 중 Tab 이(가) 화면의 제일 뒤에 표시되게 합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.sendToBack()

파라미터

this.Tab.sendToBack();

참고

- 디자인 시 소스에 컴포넌트가 선언된 순서대로 화면에 표시됩니다.
  소스에서 위에 선언된 컴포넌트가 먼저 표시되고, 아래에 선언된 컴포넌트가 나중에 표시되게 됩니다.
  컴포넌트가 겹쳐져 있을 경우 화면에 표시되는 순서에 따라 먼저 표시된 컴포넌트가 나중에 표시되는 컴포넌트에 가려지게 됩니다.

- sendToBack() 메소드는 Tab 을(를) 가장 먼저 표시되게 순서를 바꿉니다.
  따라서 화면에 표시될때는 제일 뒤에 표시되게 됩니다

sendToNext

부모가 동일한 컴포넌트 중 Tab 이(가) 화면에 한단계 뒤에 표시되게 합니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.sendToNext()

파라미터

this.Tab.sendToNext();

참고

- 디자인 시 소스에 컴포넌트가 선언된 순서대로 화면에 표시됩니다.
  소스에서 위에 선언된 컴포넌트가 먼저 표시되고, 아래에 선언된 컴포넌트가 나중에 표시되게 됩니다.
  컴포넌트가 겹쳐져 있을 경우 화면에 표시되는 순서에 따라 먼저 표시된 컴포넌트가 나중에 표시되는 컴포넌트에 가려지게 됩니다.

- sendToNext() 메소드는 Tab 을(를) 한단계 먼저 표시되는 컴포넌트와 순서를 바꿉니다.
  따라서 화면에 표시될때는 원래 순서보다 한단계 뒤에 표시되게 됩니다.

setContents

Tab 의 내부 구성 컨텐츠를 동적으로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setContents( strCont );

파라미터

Parameters

Type

Description

strCont

String

Tab 의 내부 구성 컨텐츠 정보를 XML 형태의 문자열로 설정합니다.


"<Tabpages> ... </Tabpages>" 형태로 Tabpages 태그를 포함하여 설정하여야 합니다.


컨텐츠 정보에 User Property 를 포함할 수 있습니다.

컨텐츠 정보에 Invisible Object, Bind Object, InitValue Object 는 포함할 수 없습니다.

var strCont =  '<Tabpages>'
                 + '  <Tabpage id="Tabpage1" text="Tabpage1">'
                 + '    <Layouts>'
                 + '      <Layout>'
                 + '        <Button id="Button00" taborder="0" text="Button00" left="50" top="50" width="100" height="50"/>'
                 + '      </Layout>'
                 + '    </Layouts>'
                 + '  </Tabpage>'
                 + '  <Tabpage id="Tabpage2" text="Tabpage2"/>'
                 + '</Tabpages>';

this.Tab00.setContents( strCont );

반환

Type

Description

Boolean

컨텐츠 생성에 성공하면 true 를 반환합니다.

컨텐츠 생성에 실패하면 false 를 반환합니다.


문자열 파싱 중 오류가 발생하거나 잘못된 컴포넌트(오타 포함) 정의에 의해 오류가 발생할 경우 컨텐츠 생성에 실패하게 됩니다.

참고

- setContents() 메소드는 동기(Sync)로 수행되며 메소드 수행이 완료될 때까지 스크립트 수행이 중단됩니다.

setEventHandler

Tab 의 특정 이벤트에서 첫번째 핸들러 함수를 변경하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setEventHandler( strEventID, objFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수를 변경할 이벤트의 ID를 설정합니다.

objFunc

Object

기존 핸들러 함수를 대체할 함수를 설정합니다.

objTarget

Object

대체할 핸들러 함수가 정의된 영역을 설정합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo ) { //수행할 스크립트 };
var nIndex = this.Tab00.setEventHandler( "onmove", this.Tab00_onmove, this );

반환

Type

Description

Number

첫번째 핸들러 함수 변경에 성공하면 0 을 반환합니다.


첫번째 핸들러 함수 변경에 실패하면 -1 을 반환합니다.

참고

- 인덱스가 0 번인 핸들러 함수를 새로운 함수로 대체합니다.

- 인덱스가 0 번인 핸들러 함수가 없다면 0 번 인덱스에 새로운 함수를 핸들러 함수로 추가합니다.

setEventHandlerLookup

Tab 의 특정 이벤트에서 첫번째 핸들러 함수를 검색된 함수로 변경하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setEventHandlerLookup( strEventID, strFunc, objTarget )

파라미터

Parameters

Type

Description

strEventID

String

핸들러 함수를 변경할 이벤트의 ID를 설정합니다.

strFunc

Object

기존 핸들러 함수를 대체할 함수의 이름을 문자열로 설정합니다.

objTarget

Object

대체할 핸들러 함수를 검색할 영역을 설정합니다.

해당 영역에 함수가 정의되지 않았다면 상위 영역으로 올라가며 검색을 합니다.

this.Tab00_onmove = function( obj:nexacro.Tab,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.setEventHandlerLookup( "onmove", "Tab00_onmove", this);

반환

Type

Description

Number

첫번째 핸들러 함수 변경에 성공하면 0 을 반환합니다.


첫번째 핸들러 함수 변경에 실패하면 -1 을 반환합니다.

참고

- 인덱스가 0 번인 핸들러 함수를 검색된 함수로 대체합니다.

- 인덱스가 0 번인 핸들러 함수가 없다면 0 번 인덱스에 검색된 함수를 핸들러 함수로 추가합니다.

setFocus

Tab 에 포커스를 주는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setFocus( [bMoveScroll [, bInnerFocus]] )

파라미터

Parameters

Type

Description

bMoveScroll

Boolean

부모 컴포넌트에 스크롤이 있을 경우 Tab 기준으로 스크롤을 이동할지 설정합니다.


true 설정 시 Tab 이(가) 화면에 표시되도록 스크롤을 이동시킵니다.

false 설정 시 Tab 의 위치에 관계없이 스크롤을 이동시키지 않습니다.


값을 설정하지 않으면 true 로 동작합니다.

bInnerFocus

Boolean

Tab 이(가) 컨테이너 컴포넌트 일 때 자식 컴포넌트에게 포커스를 이동할지 설정합니다.


true 설정 시 자식 컴포넌트 중 포커스를 받을 수 있는 첫번째 컴포넌트가 포커스 됩니다.

false 설정 시 Tab 에 포커스 됩니다.


Tab 이(가) 컨테이너 컴포넌트 일 때 값을 설정하지 않으면 true 로 동작합니다.

var objBefComp = this.Tab00.setFocus();
var objBefComp = this.Tab00.setFocus( true );
var objBefComp = this.Tab00.setFocus( true, false );

반환

Type

Description

Object

Tab 이(가) 포커스되기 전에 포커스를 가졌던 컴포넌트를 반환합니다.


포커스를 가진 컴포넌트가 없었거나 메소드 수행이 실패하는 경우에는 null 을 반환합니다.

참고

- setFocus() 메소드는 enableaccessibility 속성값에 관계없이 파라미터값을 기준으로 동작합니다.

- Tab 이(가) 컨테이너 컴포넌트가 아니거나 자식 컴포넌트 중 포커스를 가질 수 있는 컴포넌트가
   존재하지 않을 경우에는 bInnerFocus 파라미터값에 관계없이 Tab 에 포커스 됩니다.

활용 예제

setOffsetBottom

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 bottom 값을 픽셀단위로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setOffsetBottom( nBottom );

파라미터

Parameters

Type

Description

nBottom

Number

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 bottom 값을 픽셀단위의 숫자로 설정합니다.

this.Tab.setOffsetBottom( 10 );

참고

- 메소드 실행 전 Tab 에 설정된 초기 속성에 따라 메소드 실행 후 설정되는 속성이 달라집니다.
   > Tab 에 top, height 속성이 설정되어 있었다면 메소드 실행 후 top, height 속성이 설정됩니다.
   > Tab 에 top, bottom 속성이 설정되어 있었다면 메소드 실행 후 top, height 속성이 설정됩니다.
   > Tab 에 height, bottom 속성이 설정되어 있었다면 메소드 실행 후 height, bottom 속성이 설정됩니다.

setOffsetHeight

Tab 의 높이를 픽셀단위로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setOffsetHeight( nHeight );

파라미터

Parameters

Type

Description

nHeight

Number

Tab 의 높이를 픽셀단위의 숫자로 설정합니다.

this.Tab.setOffsetHeight( 10 );

참고

- 메소드 실행 전 Tab 에 설정된 초기 속성에 따라 메소드 실행 후 설정되는 속성이 달라집니다.
   > Tab 에 top, height 속성이 설정되어 있었다면 메소드 실행 후 top, height 속성이 설정됩니다.
   > Tab 에 top, bottom 속성이 설정되어 있었다면 메소드 실행 후 top, height 속성이 설정됩니다.
   > Tab 에 height, bottom 속성이 설정되어 있었다면 메소드 실행 후 height, bottom 속성이 설정됩니다.

setOffsetLeft

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 left 값을 픽셀단위로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setOffsetLeft( nLeft );

파라미터

Parameters

Type

Description

nLeft

Number

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 left 값을 픽셀단위의 숫자로 설정합니다

this.Tab.setOffsetLeft( 10 );

참고

- 메소드 실행 전 Tab 에 설정된 초기 속성에 따라 메소드 실행 후 설정되는 속성이 달라집니다.
   > Tab 에 left, width 속성이 설정되어 있었다면 메소드 실행 후 left, width 속성이 설정됩니다.
   > Tab 에 left, right 속성이 설정되어 있었다면 메소드 실행 후 left, right 속성이 설정됩니다.
   > Tab 에 width, right 속성이 설정되어 있었다면 메소드 실행 후 left, width 속성이 설정됩니다.

setOffsetRight

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 right 값을 픽셀단위로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setOffsetRight( nRight );

파라미터

Parameters

Type

Description

nRight

Number

부모 컴포넌트의 Left 위치를 기준으로 Tab 의 right 값을 픽셀단위의 숫자로 설정합니다.

this.Tab.setOffsetRight( 600 );

참고

- 메소드 실행 전 Tab 에 설정된 초기 속성에 따라 메소드 실행 후 설정되는 속성이 달라집니다.
   > Tab 에 left, width 속성이 설정되어 있었다면 메소드 실행 후 left, width 속성이 설정됩니다.
   > Tab 에 left, right 속성이 설정되어 있었다면 메소드 실행 후 left, width 속성이 설정됩니다.
   > Tab 에 width, right 속성이 설정되어 있었다면 메소드 실행 후 width, right 속성이 설정됩니다.

setOffsetTop

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 top 값을 픽셀단위로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setOffsetTop( nTop );

파라미터

Parameters

Type

Description

nTop

Number

부모 컴포넌트의 Top 위치를 기준으로 Tab 의 top 값을 픽셀단위의 숫자로 설정합니다.

this.Tab.setOffsetTop( 10 );

참고

- 메소드 실행 전 Tab 에 설정된 초기 속성에 따라 메소드 실행 후 설정되는 속성이 달라집니다.
   > Tab 에 top, height 속성이 설정되어 있었다면 메소드 실행 후 top, height 속성이 설정됩니다.
   > Tab 에 top, bottom 속성이 설정되어 있었다면 메소드 실행 후 top, bottom 속성이 설정됩니다.
   > Tab 에 height, bottom 속성이 설정되어 있었다면 메소드 실행 후 top, height 속성이 설정됩니다.

setOffsetWidth

Tab 의 너비를 픽셀단위로 설정하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.setOffsetWidth( nWidth );

파라미터

Parameters

Type

Description

nWidth

Number

Tab 의 너비를 픽셀단위의 숫자로 설정합니다.

this.Tab.setOffsetWidth( 10 );

참고

- 메소드 실행 전 Tab 에 설정된 초기 속성에 따라 메소드 실행 후 설정되는 속성이 달라집니다.
   > Tab 에 left, width 속성이 설정되어 있었다면 메소드 실행 후 left, width 속성이 설정됩니다.
   > Tab 에 left, right 속성이 설정되어 있었다면 메소드 실행 후 left, width 속성이 설정됩니다.
   > Tab 에 width, right 속성이 설정되어 있었다면 메소드 실행 후 width, right 속성이 설정됩니다.

show

스크립트로 동적 생성한 Tab 을(를) 화면에 표시하는 메소드입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

Tab.show()

파라미터

this.Tab00.show();

참고

- show() 메소드는 컴포넌트가 폼 또는 컨테이너 컴포넌트의 자식 컴포넌트로 등록된 상태에서 사용이 가능합니다.
  자식 컴포넌트로 등록된 상태가 아닌 경우에는 오동작이 발생할 수 있습니다.

- 컴포넌트를 컨테이너에 추가하기 위해서는 addChild() 메소드나 insertChild() 메소드를 사용하여야 합니다.

이벤트

canchange

Tab 컴포넌트에서 TabPage 선택이 변경될 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

canchange(obj:nexacro.Tab,e:nexacro.TabIndexChangeEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

TabIndexChangeEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값을 "true"로 반환하면 TabPage 선택을 변경합니다.

이벤트에서 리턴값을 "false"로 반환하면 TabPage 선택을 변경하지 않습니다.


이벤트에서 리턴값을 생략하면 "true"로 적용됩니다.

onchanged

Tab 컴포넌트에서 TabPage 선택이 변경된 후 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onchanged(obj:nexacro.Tab,e:nexacro.TabIndexChangeEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

TabIndexChangeEventInfo

Event Object.

참고

- canchange 이벤트에서 "false"를 반환하면 onchanged 이벤트는 발생하지 않습니다.

oncontextmenu

Tab 영역에서 오른쪽 마우스 버튼을 클릭하거나 터치를 일정시간 유지할 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

oncontextmenu(obj:nexacro.Tab,e:nexacro.ContextMenuEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

ContextMenuEventInfo

Event Object.

참고

- 모바일 환경에서는 터치를 일정시간 유지하면 oncontextmenu 이벤트가 발생합니다.

- Tab 컴포넌트는 마우스 우클릭이나 터치에 의해 표시되는 기본팝업메뉴가 제공되지 않습니다.

ondevicebuttonup

모바일 에서 디바이스 버튼을 눌렀을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☐ Windows

☐ macOS

☐ Edge

☐ Chrome

☐ Safari

☐ Firefox

☐ Opera

Mobile NRE

Mobile WRE

☑ Android

☐ iOS/iPadOS

☐ Android

☐ iOS/iPadOS




문법

ondevicebuttonup(obj:nexacro.Tab,e:nexacro.DeviceButtonEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

DeviceButtonEventInfo

Event Object.

반환

Type

Description

Boolean

true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.

반환값을 생략하면 false로 적용됩니다.

참고

- 디바이스 버튼을 눌렀다 뗄 때 이벤트가 발생합니다.

- 버튼 형식은 MENU(1),  CANCEL(2) 2종류 입니다.

- 일부 기종에서 CANCEL 버튼을 long press 해야 MENU key event가 발생합니다.

ondrag

Tab 영역 내에서 마우스 왼쪽버튼으로 드래그를 수행했을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ondrag(obj:nexacro.Tab,e:nexacro.DragEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

DragEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 드래그 상태가 되고 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 드래그 상태가 취소되고 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- Tab 영역 내에서 마우스의 LButtonDown 후 LButtonUp 액션 없이 마우스 이동 시 ondrag 이벤트가 발생합니다.

- 이벤트의 리턴값을 true 로 하여 드래그 상태가 발생해도 아래와 같은 이유로 드래그 상태가 중단될 수 있습니다.
   > 넥사크로 내부에서 alert(), confirm(), showModal() 메소드가 실행되어 포커스가 바뀌는 경우.
   > OS 내 다른 어플리케이션으로 포커스가 바뀌는 경우.
   > 이벤트가 시작된 컴포넌트가 삭제되는 경우 등

- 에디트 계열 컴포넌트에서 마우스로 드래그 시 화면의 문자열을 선택할 지 드래그 상태를 발생시킬지 여부는 이벤트의 리턴값으로 결정됩니다.

ondragenter

Tab 영역 내로 드래그 상태의 마우스 포인터가 들어왔을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ondragenter(obj:nexacro.Tab,e:nexacro.DragEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

DragEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- 드래그 상태를 유지하고 있으면 Tab 영역으로 마우스 포인터가 들어올 때마다 이벤트가 발생합니다.

ondragleave

Tab 영역 밖으로 드래그 상태의 마우스 포인터가 나갈 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ondragleave(obj:nexacro.Tab,e:nexacro.DragEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

DragEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- 드래그 상태를 유지하고 있으면 Tab 영역에서 마우스 포인터가 나갈 때마다 이벤트가 발생합니다.

ondragmove

Tab 영역 내에서 드래그 상태의 마우스 포인터가 움직일 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ondragmove(obj:nexacro.Tab,e:nexacro.DragEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

DragEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- 드래그 상태를 유지하고 있으면 Tab 영역 내에서 마우스 포인터가 움직일 때마다 이벤트가 발생합니다.

ondrop

Tab 영역 내에서 드래그 상태의 마우스 버튼을 떼었을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ondrop(obj:nexacro.Tab,e:nexacro.DragEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

DragEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- Tab 영역 내에서 드래그 상태인 마우스의 LButtonUp 액션 발생 시 ondrop 이벤트가 발생합니다.

- 넥사크로에서 발생한 드래그 또는 어플리케이션 외부에서 파일을 드래그 했을 때 ondrop 이벤트를 발생시킬 수 있습니다.

- 드래그 상태가 발생해도 아래와 같은 이유로 드래그 상태가 중단될 수 있습니다.
   > 넥사크로 내부에서 alert(), confirm(), showModal() 메소드가 실행되어 포커스가 바뀌는 경우.
   > OS 내 다른 어플리케이션으로 포커스가 바뀌는 경우.
   > 이벤트가 시작된 컴포넌트가 삭제되는 경우 등

onextrabuttonclick

탭버튼 오른쪽에 표시된 추가버튼을 클릭했을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onextrabuttonclick(obj:nexacro.Tab,e:nexacro.TabMouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

TabMouseEventInfo

Event Object.

onkeydown

Tab 에 포커스가 있는 상태에서 키보드의 키가 눌렸을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onkeydown(obj:nexacro.Tab,e:nexacro.KeyEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

KeyEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- Tab 키 입력으로 포커스가 변경된 경우는 onkeydown 이벤트가 발생하지 않으며 이벤트가 상위로 전파되지 않습니다.

- onkeydown 이벤트는 키보드 관련 이벤트 중 키가 눌렸을 때 제일 먼저 발생하는 이벤트입니다.

- 키를 누르고 있을 경우 연속적으로 이벤트가 발생합니다.


◆ Mobile WRE 제약

- 일부 모바일 웹브라우저에서 e.keycode 속성에 입력값이 정상적으로 전달되지 않을 수 있습니다.
   또한 키보드 관련 이벤트의 순서가 바뀌어 발생할 수 있습니다.

Basic Action

- Tab 키 다운 시 컴포넌트의 포커스를 이동합니다.

Default Action

＊ 탭버튼에 포커스가 존재하고, selectchangetype="down" 인 경우       
- 방향키 다운 : 탭 페이지 변경 ( tabindex 순 )       
- 조합키 [Ctrl+Backspace] 다운 : extrabutton 클릭       
- 조합키 [Ctrl+Tab] 다운 : 탭 페이지 변경 ( tabindex 역순 )

onkeyup

Tab 에 포커스가 있는 상태에서 눌렸던 키보드가 떼어질 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onkeyup(obj:nexacro.Tab,e:nexacro.KeyEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

KeyEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- Tab 키 입력으로 포커스가 변경된 경우는 onkeyup 이벤트가 발생하지 않으며 이벤트가 상위로 전파되지 않습니다.


◆ Mobile WRE 제약

- 일부 모바일 웹브라우저에서 e.keycode 속성에 입력값이 정상적으로 전달되지 않을 수 있습니다.
   또한 키보드 관련 이벤트의 순서가 바뀌어 발생할 수 있습니다.

Default Action

＊ 탭버튼에 포커스가 존재하고, selectchangetype="up" 인 경우       - 방향키 업 : 탭 페이지 변경 ( tabindex 순 )       - 조합키 [Ctrl+Backspace] 업 : extrabutton 클릭       - 조합키 [Ctrl+Tab] 업 : 탭 페이지 변경 ( tabindex 역순 )

onkillfocus

Tab 에서 포커스가 나갈  때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onkillfocus(obj:nexacro.Tab,e:nexacro.KillFocusEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

KillFocusEventInfo

Event Object.

참고

- 서로 다른 애플리케이션 단위로 포커스가 이동할 때는 포커스 관련 이벤트가 발생하지 않습니다.

- showModal(), open() 등의 메소드로 팝업된 Frame 으로 포커스가 이동하는 경우 Tab 에서 포커스 관련 이벤트가 발생하지 않습니다.
   또한, alert(), confirm() 메소드로 표시된 팝업으로 포커스가 이동하는 경우도 Tab 에서 포커스 관련 이벤트가 발생하지 않습니다.

onlbuttondown

Tab 영역 내에서 마우스 왼쪽버튼을 눌렀을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onlbuttondown(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- Tab 영역 내에서 마우스의 LButtonDown 액션이 발생하면 이벤트가 발생합니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

Basic Action

* pseudo 표시

Default Action

* selectchangetype="down"인 경우
  - 컴포넌트 포커스 처리
  - extrabutton 클릭
  - 탭페이지 변경 처리

* selectchangetype="up"인 경우
  - 컴포넌트 포커스 처리

onlbuttonup

Tab 영역 내에서 눌렸던 마우스 왼쪽버튼을 떼었을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onlbuttonup(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- onlbuttonup 이벤트는 마우스의 왼쪽버튼을 떼었을 때 마우스의 위치와 관계없이 onlbuttondown 이벤트가 발생했던 컴포넌트에서 발생합니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

Basic Action

* pseudo 표시

Default Action

* selectchangetype="up"인 경우
  - extrabutton 클릭
  - 탭페이지 변경 처리

onmousedown

Tab 영역 내에서 마우스의 왼쪽/오른쪽 버튼을 제외한 나머지 버튼이 눌렸을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onmousedown(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

onmouseenter

Tab 영역 내로 마우스 포인터가 들어왔을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onmouseenter(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

- onmouseenter 이벤트 발생 후 onmousemove 이벤트가 발생합니다.
  https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order


◆ iPad 운영체제 제약 (블루투스 마우스 사용 시)

- iPadOS 14 이상 버전에서 블루투스 마우스 사용 시 onmouseenter 이벤트를 지원합니다.
  iPadOS 14 미만 버전은 onmouseenter 이벤트를 지원하지 않습니다.

onmouseleave

Tab 영역 밖으로 마우스 포인터가 나갈 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onmouseleave(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.


◆ iPad 운영체제 제약 (블루투스 마우스 사용 시)

- iPadOS 14 이상 버전에서 블루투스 마우스 사용 시 onmouseleave 이벤트를 지원합니다.
  iPadOS 14 미만 버전은 onmouseleave 이벤트를 지원하지 않습니다.

onmousemove

Tab 영역 내에서 마우스 포인터가 움직일 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onmousemove(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.


◆ iPad 운영체제 제약 (블루투스 마우스 사용 시)

- iPadOS 14 이상 버전에서 블루투스 마우스 사용 시 onmousemove 이벤트를 지원합니다.
  iPadOS 14 미만 버전은 onmousemove 이벤트를 지원하지 않습니다.

onmouseup

마우스의 왼쪽/오른쪽 버튼을 제외한 나머지 버튼이 떼어질 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onmouseup(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- onmouseup 이벤트는 onmousedown 이벤트와 관계없이 마우스 나머지 버튼을 떼었을 때 마우스가 위치한 컴포넌트에서 발생합니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

onmove

Tab 의 위치가 이동했을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onmove(obj:nexacro.Tab,e:nexacro.MoveEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MoveEventInfo

Event Object.

onrbuttondown

Tab 영역 내에서 마우스 오른쪽버튼을 눌렀을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onrbuttondown(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

- WRE에서 마우스 오른쪽버튼은 기본팝업메뉴 표시에 사용되므로 일반적으로 onrbuttondown 이벤트를 정의하지 않습니다.

Default Action

- onrbuttondown 이벤트 종료 후 이벤트가 발생한 컴포넌트로 포커스가 이동됩니다.
  단, GroupBox, Static 컴포넌트는 포커스가 이동하지 않습니다.

- 일반적으로 onrbuttondown -> onrbuttonup -> oncontextmenu 순서로 이벤트가 발생하지만
   예외적으로 아래 환경은 onrbuttondown -> oncontextmenu -> onrbuttonup 순서로 이벤트가 발생하므로 주의하여야 합니다.
   : Safari 브라우저, macOS 환경의 전체 웹브라우저, Mobile 전체환경

onrbuttonup

Tab 영역 내에서 마우스 오른쪽버튼을 떼었을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onrbuttonup(obj:nexacro.Tab,e:nexacro.MouseEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

MouseEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- NRE는 이벤트의 리턴값에 따라 상위 컴포넌트로 이벤트가 전파됩니다.

- onrbuttonup 이벤트는 onrbuttondown 이벤트와 관계없이 마우스 오른쪽버튼을 떼었을 때 마우스가 위치한 컴포넌트에서 발생합니다.


◆ WRE 제약

- WRE는 이벤트의 리턴값과 관계없이 상위 컴포넌트로 이벤트가 전파됩니다.

- WRE에서 마우스 오른쪽버튼은 기본팝업메뉴 표시에 사용되므로 일반적으로 onrbuttonup 이벤트를 정의하지 않습니다.

Default Action

- onrbuttonup 이벤트 종료 후 oncontextmenu 이벤트가 발생합니다.
   예외적으로 아래 환경은 onrbuttondown -> oncontextmenu -> onrbuttonup 순서로 이벤트가 발생하므로 주의하여야 합니다.
   : Safari 브라우저, macOS 환경의 전체 웹브라우저, Mobile 전체환경

onsetfocus

Tab 에 포커스가 들어올 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onsetfocus(obj:nexacro.Tab,e:nexacro.SetFocusEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

SetFocusEventInfo

Event Object.

참고

- 서로 다른 애플리케이션 단위로 포커스가 이동할 때는 포커스 관련 이벤트가 발생하지 않습니다.

- showModal(), open() 등의 메소드로 팝업된 Frame 으로 포커스가 이동하는 경우 Tab 에서 포커스 관련 이벤트가 발생하지 않습니다.
   또한, alert(), confirm() 메소드로 표시된 팝업으로 포커스가 이동하는 경우도 Tab 에서 포커스 관련 이벤트가 발생하지 않습니다.

- open() 메소드로 오픈된 Modeless 창에서 부모창의 Tab 에 setFocus() 메소드 실행 시 환경에 따라 동작에 차이가 있으므로 주의하여야 합니다.
   > Nexacro Runtime Environment
       : 부모 Form 이 활성화 되어 onactivate 이벤트가 발생합니다.
         부모 Form 으로 포커스가 이동하며 "Frame 정렬"이 수행됩니다.
   > Web Runtime Environment
       : 브라우저 제약 때문에 부모 Form 은 활성화 되지 않으며 onactivate 이벤트가 발생하지 않습니다.
         부모 Form 으로 포커스가 이동하지 않지만 "Frame 정렬"은 수행됩니다.
   * "Frame 정렬" : FrameSet 의 자식 Frame 중 하나로 포커스가 이동하면 해당 Frame 이 동일레벨 Frame 중 상위에 표시됩니다.
         이 때, Frame 간 포커스 이동이 발생했다면 해당 Frame 의 Form 에서 onsetfocus 이벤트가 발생합니다.
         Frame 간 포커스 이동이 없다면 onsetfocus 이벤트가 발생하지 않습니다.

onsize

Tab 의 크기가 변경됐을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

onsize(obj:nexacro.Tab,e:nexacro.SizeEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

SizeEventInfo

Event Object.

ontouchend

Tab 영역 내에서 터치를 떼었을 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ontouchend(obj:nexacro.Tab,e:nexacro.TouchEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

TouchEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- Environment 의 enabletouchevent 속성값이 true 인 경우에만 이벤트가 발생합니다.

ontouchmove

Tab 영역 내에서 터치 상태를 유지하며 움직일 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ontouchmove(obj:nexacro.Tab,e:nexacro.TouchEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

TouchEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- Environment 의 enabletouchevent 속성값이 true 인 경우에만 이벤트가 발생합니다.

ontouchstart

Tab 영역 내에서 터치가 시작될 때 발생하는 이벤트입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




문법

ontouchstart(obj:nexacro.Tab,e:nexacro.TouchEventInfo);

파라미터

Parameters

Type

Description

obj

Tab

Event가 발생한 Object.

e

TouchEventInfo

Event Object.

반환

Type

Description

Boolean

이벤트에서 리턴값으로 true 를 반환하면 상위 컴포넌트로 이벤트가 전파되지 않습니다.

이벤트에서 리턴값으로 false 를 반환하면 상위 컴포넌트로 이벤트가 전파됩니다.


이벤트에서 리턴값을 생략하면 false 로 적용됩니다.

참고

- Environment 의 enabletouchevent 속성값이 true 인 경우에만 이벤트가 발생합니다.

Basic Action

- 테마에 정의된 Status가 적용된 후 이벤트가 발생합니다.