개요

Tab 컴포넌트를 구성하는 TabpageControl 오브젝트입니다.

지원 환경

- Tab 컴포넌트에 item 으로 한 개 이상 추가되는 Control 입니다.

- TabButtonItemControl 과 한쌍으로 구성되는 Control 입니다.

- Tab 컴포넌트에서 TabButton 선택을 변경하면 화면에 표시되는 TabPage 가 변경됩니다.
   이 때, 변경된 TabPage 에 포커스가 자동으로 이동되지 않습니다.
   변경된 TabPage 에 포커스를 이동시키려면 스크립트를 추가하여야 합니다.

- TabPage 에 포커스가 없는 상태일 때 TabPage 의 빈영역을 선택하면 마지막에 포커스를 가지고 있던 컴포넌트로 포커스가 이동합니다.

Basic Key Action

Accessibility Key Action

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

Status

속성

accessibilityaction

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

지원 환경

속성 타입

문법

TabpageControl.accessibilityaction[= strAction]

문법 설정

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

참고

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

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

accessibilitydesclevel

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

지원 환경

속성 타입

문법

TabpageControl.accessibilitydesclevel[= enumLevel]

문법 설정

enumLevel ::= 'all' | 'self' | 'child' | 'none'

this.TabpageControl00.accessibilitydesclevel = "all";

참고

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

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

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

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

accessibilitydescription

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

지원 환경

속성 타입

문법

TabpageControl.accessibilitydescription[= strDescription]

문법 설정

this.TabpageControl00.accessibilitydescription = "Option";

참고

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

accessibilityenable

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

지원 환경

속성 타입

문법 설정

bEnable ::= 'true' | 'false'

this.Tab00.Tabpage1.accessibilityenable = false;

참고

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

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

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

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


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

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

accessibilitylabel

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

지원 환경

속성 타입

문법

TabpageControl.accessibilitylabel[= strLabel]

문법 설정

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

참고

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

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

accessibilityrole

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

지원 환경

속성 타입

문법

TabpageControl.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.TabpageControl00.accessibilityrole = "none"; 
this.TabpageControl00.accessibilityrole = "button";

참고

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

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

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

async

TabPageControl 의 url 속성값을 동적으로 변경 시 연결된 Form 의 로딩방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

bAsync ::= 'true' | 'false'

this.Tab00.Tabpage1.async = false;

참고

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

- TabPageControl 를 포함한 Form 이 최초 로딩될 때 Div 에 url 속성으로 연결된 Form 은 async 속성값에 관계없이 항상 동기(Sync)방식으로 로딩됩니다.

- TabPageControl 에 연결된 Form 내부에서 TabPageControl 의 url 속성을 변경 시 async 속성값이 false 일 경우 오동작 할 수 있습니다.
   async 속성값이 false 이면 TabPageControl 의 url 속성을 변경하는 즉시 새로운 Form 이 로드되고 기존 Form이 제거되므로
   스크립트가 끝나기 전에 해당 오브젝트가 제거되서 문제가 발생할 수 있습니다.

- async 속성값이 true 일 때 url 속성을 변경한 위치 이후의 스크립트 수행 기준은 TabPageControl 에 연결된 Form 의 캐시여부에 따라 달라집니다.
   Form 이 넥사크로가 관리하는 캐시에서 로드될 경우는 Form 의 로드가 완료된 이후에 나머지 스크립트가 수행됩니다.
   Form 이 서버 또는 브라우저 캐시에서 로드될 경우는 Form 의 로드와 관계없이 나머지 스크립트가 수행됩니다.

background

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

지원 환경

속성 타입

문법

TabpageControl.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 : linear-gradient( red , blue , yellow );

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

참고

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

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

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

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

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

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

border-radius

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

지원 환경

속성 타입

문법

TabpageControl.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.Tabpage1.borderRadius = "10px";
this.Tab00.Tabpage1.borderRadius = "5px 6px 10px / 5px 10px";

참고

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

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

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

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


◆ NRE 제약

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

color

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

지원 환경

속성 타입

문법

TabpageControl.color[= strcolor]

문법 설정

strcolor ::= <NamedColor> | <NumericColor>

* XCSS
color : #999999;
color : rgb ( 255, 0, 0 );
color : red;

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

참고

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


◆ web runtime environment 제약

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

cssclass

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

지원 환경

속성 타입

문법

TabpageControl.cssclass[= strcssclass]

문법 설정

strcssclass ::= <ClassName> [ , &ltClassName> ]*

this.Tab00.Tabpage1.cssclass = "TestClass";
this.Tab00.Tabpage1.cssclass = "TestClass,TestClass2";

참고

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

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

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

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


◆ web runtime environment 제약

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

cursor

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

지원 환경

속성 타입

문법

TabpageControl.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.Tabpage1.cursor = "default";

참고

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

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

enable

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

지원 환경

속성 타입

문법 설정

benable ::= 'true' | 'false'

this.Tab00.Tabpage1.enable = true;
this.Tab00.Tabpage1.enable = false;

참고

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

활용 예제

• 탭 버튼 비활성화

enableevent

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

지원 환경

속성 타입

문법

TabpageControl.enableevent[= bEvent]

문법 설정

bEvent ::= 'true' | 'false'

this.Tab00.Tabpage1.enableevent = true;
this.Tab00.Tabpage1.enableevent = false;

참고

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

font

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

지원 환경

속성 타입

문법

TabpageControl.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.Tabpage1.font = "bold 12pt/30px arial, sans-serif";

참고

- 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" 을 설정하면 마지막 텍스트의 기울어진 부분이 잘려서 표시될 수 있습니다.
   웹브라우저에서 텍스트영역을 일반글자 기준으로 처리한 후 기울임을 적용하면서 발생하는 문제입니다.

form

TabpageControl 에서 모든 오브젝트가 등록된 Form을 갖는 읽기전용 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.form.Button00.click();

참고

- TabpageControl 내부에 정의된 컴포넌트에 접근하기 위해서는 form 속성을 사용하여야 합니다.

- url 속성을 사용하여 연결된 Form의 변수, 함수, 컴포넌트에 접근할 때도 form 속성을 사용하여야 합니다.

formscrollbarbarminsize

TabpageControl 의 내부 Form 에 표시되는 스크롤바의 트랙바(TrackBar) 최소크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.formscrollbarbarminsize[= nSize]

문법 설정

this.Tab00.Tabpage1.formscrollbarbarminsize = 20;

참고

- formscrollbarbarminsize 속성값을 설정하지 않으면 undefined 가 설정되고 트랙바 크기에 맞는 적당한 값으로 동작합니다.

- formscrollbartrackbarsize 속성값이 설정되어 있으면 formscrollbarbarminsize 속성값은 무시됩니다.

- Form 의 크기 또는 내부 컨텐츠 변경에 의해 트랙바의 크기가 자동변경될 때 formscrollbarbarminsize 속성값 미만으로 작아지지 않습니다.

- 트랙바가 표시되는 영역보다 formscrollbarbarminsize 속성값을 크게 설정해도 트랙바는 표시영역까지만 표현됩니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollbarbarminsize 속성보다 formscrollbarbarminsize 속성이 우선 적용됩니다.

formscrollbarbaroutsize

TabpageControl 의 내부 Form 에 표시되는 스크롤바에서 트랙바(TrackBar)가 사라지는 기준 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.formscrollbarbaroutsize[= nSize]

문법 설정

this.Tab00.Tabpage1.formscrollbarbaroutsize = 50;

참고

- formscrollbarbaroutsize 속성값을 설정하지 않으면 undefined 가 설정되고 스크롤바 크기에 맞는 적당한 값으로 동작합니다.

- TabpageControl 의 크기가 변경되어 스크롤바가 줄어들 때 트랙바를 표시할 공간이 formscrollbarbaroutsize 속성값보다 작아지면 트랙바를 표시하지 않습니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollbarbaroutsize 속성보다 formscrollbarbaroutsize 속성이 우선 적용됩니다.

formscrollbardecbuttonsize

TabpageControl 에서 내부 Form 에 표시되는 스크롤바의 감소 버튼(DecButton) 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.formscrollbardecbuttonsize = 30;

참고

- formscrollbardecbuttonsize 속성값은 수직/수평 스크롤바에 동일하게 적용됩니다.

- 수직스크롤바의 감소 버튼(DecButton) 높이는 formscrollbardecbuttonsize 속성으로 설정하고 너비는 formscrollbarsize 속성으로 설정합니다.

- 수평스크롤바의 감소 버튼(DecButton) 너비는 formscrollbardecbuttonsize 속성으로 설정하고 높이는 formscrollbarsize 속성으로 설정합니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollbardecbuttonsize 속성보다 formscrollbardecbuttonsize 속성이 우선 적용됩니다.

formscrollbarincbuttonsize

TabpageControl 에서 내부 Form 에 표시되는 스크롤바의 증가 버튼(IncButton) 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.formscrollbarincbuttonsize = 30;

참고

- formscrollbarincbuttonsize 속성값은 수직/수평 스크롤바에 동일하게 적용됩니다.

- 수직스크롤바의 증가 버튼(IncButton) 높이는 formscrollbarincbuttonsize 속성으로 설정하고 너비는 formscrollbarsize 속성으로 설정합니다.

- 수평스크롤바의 증가 버튼(IncButton) 너비는 formscrollbarincbuttonsize 속성으로 설정하고 높이는 formscrollbarsize 속성으로 설정합니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollbarincbuttonsize 속성보다 formscrollbarincbuttonsize 속성이 우선 적용됩니다.

formscrollbarsize

TabpageControl 에서 내부 Form 에 표시되는 스크롤바의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.formscrollbarsize = 30;

참고

- formscrollbarsize 속성값은 수직스크롤바의 너비와 수평스크롤바의 높이에 동일하게 적용됩니다.

- formscrollbarsize 속성값을 변경하면 수평스크롤바 내부버튼의 높이와 수직스크롤바 내부버튼의 너비가 동일하게 변경됩니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollbarsize 속성보다 formscrollbarsize 속성이 우선 적용됩니다.

formscrollbartrackbarsize

TabpageControl 의 내부 Form 에 표시되는 스크롤바의 트랙바(TrackBar) 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.formscrollbartrackbarsize[= nSize]

문법 설정

this.Tab00.Tabpage1.formscrollbartrackbarsize = 20;

참고

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

- formscrollbartrackbarsize 속성을 설정하면 내부 컨텐츠와 관계없이 트랙바 크기가 고정되어 표시됩니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollbartrackbarsize 속성보다 formscrollbartrackbarsize 속성이 우선 적용됩니다.

formscrollbartype

TabpageControl 에서 내부 Form 에 스크롤바가 표시되는 형식을 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.formscrollbartype[= strBartype]

문법 설정

strBartype ::= <scrolltype> | <pairtype>

<scrolltype> ::= <desktype> | <mobiletype>
<pairtype> ::= <desktype> ' ' <desktype> | <mobiletype> ' ' <mobiletype>

<desktype> ::= 'default' | 'none' | 'fixed' | 'auto'
<mobiletype> ::= 'default' | 'none' | 'indicator' | 'autoindicator'

this.TabpageControl00.formscrollbartype = "none"; 
this.TabpageControl00.formscrollbartype = "default autoindicator"; 
this.TabpageControl00.formscrollbartype = "auto fixed"; 
this.TabpageControl00.formscrollbartype = "indicator none";

참고

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

- 데스크탑에 적용되는 값과 모바일에 적용되는 값을 함께 설정할 수 있지만 권장하지 않습니다.
   ex) this.TabpageControl00.formscrollbartype = "fixed autoindicator";

- url 속성으로 기존에 작성된 Form 을 연결 시 연결된 Form 의 scrollbartype 속성보다 formscrollbartype 속성이 우선 적용됩니다.

formscrollindicatorsize

TabpageControl 에서 내부 Form 에 표시되는 스크롤 인디케이터바의 크기를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.formscrollindicatorsize = 30;

참고

- formscrollindicatorsize 속성값은 수직스크롤바의 너비와 수평스크롤바의 높이에 동일하게 적용됩니다.

- TabpageControl 에 스크롤 인디케이터바가 아닌 스크롤바가 표시될 경우 formscrollbarsize 속성으로 크기를 설정하여야 합니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrollindicatorsize 속성보다 formscrollindicatorsize 속성이 우선 적용됩니다.

formscrolltype

TabpageControl 의 내부 Form 에서 사용되는 스크롤의 종류를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

enumType ::= 'none' | 'both' | 'vertical' | 'horizontal'

this.Tab00.Tabpage1.formscrolltype = "vertical";

참고

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

- TabpageControl 의 내부 Form 에서 사용되는 스크롤에 대한 자세한 설정은 formscrollbartype 속성을 사용하여야 합니다.

- url 속성으로 기존에 작성된 Form 과 연결 시 연결된 Form 의 scrolltype 속성보다 formscrolltype 속성이 우선 적용됩니다.

hotkey

TabpageControl 에 포커스를 이동 시키는 단축키를 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.hotkey[= strHotkey]

문법 설정

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

참고

- TabpageControl 에 설정한 단축키가 입력되면 TabpageControl 에 포커스가 이동됩니다.

- 폼 내에서 동일한 단축키를 설정한 컴포넌트가 여러 개 존재할 경우, 가장 먼저 생성한 컴포넌트의 단축키가 동작합니다.
   이런 경우 먼저 생성한 컴포넌트를 삭제하면 자동으로 그 다음 순서로 생성한 컴포넌트의 단축키가 동작합니다.

- TabpageControl 의 enable 속성값이 false 인 경우에는 단축키를 입력해도 포커스가 이동되지 않습니다.

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

활용 예제

• 특정 키 입력 시 onclick 이벤트 처리하기

id

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

지원 환경

속성 타입

문법

TabpageControl.id

문법 설정

참고

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

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

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

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

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

letter-spacing

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

지원 환경

속성 타입

문법

TabpageControl.letterSpacing[= strspace]

문법 설정

strspace ::= 'normal' | <nVal> ['px']

* XCSS
letter-spacing : 2px ;

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

참고

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

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

name

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

지원 환경

속성 타입

문법

TabpageControl.name[= strName]

문법 설정

참고

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

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

-nexa-border

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

지원 환경

속성 타입

문법

TabpageControl.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.Tabpage1.border = "1px solid #999999";
this.Tab00.Tabpage1.border = "1px solid #999999, 1px solid #999999, 1px solid #999999, 1px solid #999999";

참고

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

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

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


◆ NRE 제약

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

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

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


◆ WRE 제약

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

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

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

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

-nexa-edge

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

지원 환경

속성 타입

문법

TabpageControl.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.Tabpage1.edge = "URL('./images/border.png')" 5px 5px;

참고

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

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

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

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

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

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


◆ WRE 제약

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

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

-nexa-rtl-background-image

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

지원 환경

속성 타입

문법

TabpageControl.-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");

참고

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

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

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

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

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

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

-nexa-rtl-edge-image

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

지원 환경

속성 타입

문법

TabpageControl.-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")

참고

- 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 스펙을 지원하지 않는 브라우저 버전에서는 정상적으로 표시되지 않을 수 있습니다.

opacity

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

지원 환경

속성 타입

문법

TabpageControl.opacity[= stropacity]

문법 설정

* XCSS
opacity : 0.8;
opacity : 80%;

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

참고

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

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

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

rtl

TabpageControl 에서 내부 컨텐츠 또는 컴포넌트의 표시 기준을 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.rtl

문법 설정

bRtl ::= undefined | 'true' | 'false'

var vRtl = this.TabpageControl00.rtl;

참고

- 넥사크로 스튜디오에서만 값을 설정할 수 있고, 실행중에는 수정할 수 없는 속성입니다.

- 아랍권 같이 화면의 표시기준이 오른쪽인 환경에서 컨텐츠의 표시 기준을 변경하기 위해 설정하는 속성입니다.

- TabpageControl 부터 Environment 까지 상위의 모든 rtl 속성값이 undefined 이면
   Environment 의 locale 속성에 설정된 국가 및 언어 설정값을 기준으로 rtl 속성이 적용됩니다.
   Environment 의 locale 속성값을 설정하지 않았을 경우 시스템의 국가 및 언어 설정값이 적용됩니다.

semantictag

Form Generate 시 컴포넌트의 HTML 태그를 <div> 요소 대신 설정한 시맨틱(semantic) 요소로 대체하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.semantictag // get

문법 설정

semantictag ::= 'header' | 'nav' | 'section' | 'article' | 'aside' | 'footer’

참고

- 넥사크로 스튜디오에서만 값을 설정할 수 있고, 실행 중에는 수정할 수 없는 속성입니다.

- semantictag 속성값을 설정하지 않으면 undefined 가 설정되고 <div> 요소로 Generate 됩니다.

- RTL 설정 시 테마 또는 스타일 속성 적용에 제약이 있습니다.
  넥사크로 스튜디오에서 [Use RTL] 옵션을 설정한 경우 테마 또는 스타일 속성이 정상적으로 반영되지 않습니다.
  각 오브젝트 또는 컴포넌트 속성으로 설정한 개별 스타일은 정상적으로 반영됩니다.

- 접근성 환경 설정 시 사용 환경에 따라 제약이 있습니다.
    - 센스리더  v7.4 이상 버전(Windows WRE): 
      semantictag 속성값을 설정한 경우 시맨틱 요소를 읽을 수 없습니다. 이를 보완하기 위해 컴포넌트의 accessibilitydescription 속성값을 설정할 수 있습니다.
    - TalkBack(Android WRE), VoiceOver(iOS/iPadOS WRE): 
      컨테이너 컴포넌트로 포커스를 이동할 수 없어 시맨틱 요소를 읽을 수 없습니다. 컴포넌트의 accessibilitydescription 속성값을 설정하더라도 시맨틱 요소를 구분할 수 없습니다.

tabbuttoncssclass

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

지원 환경

속성 타입

문법

TabpageControl.tabbuttoncssclass [=strcssclass]

문법 설정

strcssclass ::= <ClassName> [ , &ltClassName> ]*

this.Tab00.Tabpage1.tabbuttoncssclass = "TestClass";
this.Tab00.Tabpage1.tabbuttoncssclass = "TestClass,TestClass2";

참고

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

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

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

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


◆ web runtime environment 제약

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

tabbuttonheight

TabpageControl 에 표시되는 TabButton 의 높이를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

nHeight ::= <nVal> ['px']

this.Tab00.Tabpage1.tabbuttonheight = 80;
this.Tab00.Tabpage1.tabbuttonheight = "80px";

참고

- tabbuttonheight 속성값을 설정하지 않으면 Tab 의 tabbuttonheight 속성값이 적용됩니다.

- Tab 의 multiline 속성값이 true 인 경우 tabbuttonheight 속성값은 무시됩니다.

- Tab 의 tabposition 속성값이 "left" 또는 "right" 일 때 tabjustify 속성이 true 로 동작하고 있으면 tabbuttonheight 속성값은 무시됩니다.

- showextrabutton 속성에 의해 표시되는 추가버튼의 높이는 tabbuttonheight 속성에 설정한 값이 적용됩니다.

- Tab 의 tabposition 속성값이 "top" 또는 "bottom" 일 때 tabbuttonheight 속성값이 자동으로 계산되는 TabButton 의 높이에 영향을 줄 수 있습니다.
   예를 들어, 자동으로 생성되는 TabButton 의 높이보다 큰 값을 tabbuttonheight 에 설정 시 자동으로 생성되는 TabButton 의 높이에도 적용됩니다.

tabbuttonwidth

TabpageControl 에 표시되는 TabButton 의 너비를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

nWidth ::= <nVal> ['px']

this.Tab00.Tabpage1.tabbuttonwidth = 80;
this.Tab00.Tabpage1.tabbuttonwidth = "80px";

참고

- tabbuttonwidth 속성값을 설정하지 않으면 Tab 의 tabbuttonwidth 속성값이 적용됩니다.

- Tab 의 multiline 속성값이 true 인 경우 tabbuttonwidth 속성값은 무시됩니다.

- Tab 의 tabposition 속성값이 "top" 또는 "bottom" 일 때 tabjustify 속성이 true 로 동작하고 있으면 tabbuttonwidth 속성값은 무시됩니다.

- showextrabutton 속성에 의해 표시되는 추가버튼의 너비는 tabbuttonwidth 속성값에 포함되어 있습니다.
   즉, 추가버튼이 표시되면 TabButton 의 텍스트 영역이 줄어들어 표시되고 TabButton 의 전체 너비는 변경되지 않습니다.

- Tab 의 tabposition 속성값이 "left" 또는 "right" 일 때 tabbuttonwidth 속성값이 자동으로 계산되는 TabButton 의 너비에 영향을 줄 수 있습니다.
   예를 들어, 자동으로 생성되는 TabButton 의 너비보다 큰 값을 tabbuttonwidth 에 설정 시 자동으로 생성되는 TabButton 의 너비에도 적용됩니다.

text

탭버튼에 표시되는 텍스트를 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.text = "Items";

tooltiptext

TabpageControl 에 마우스 포인터를 올려 놓았을 때 표시되는 풍선도움말을 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

this.Tab00.Tabpage1.tooltiptext = "This is ToolTip Text";
this.Tab00.Tabpage1.tooltiptext = "";                // 풍선 도움말이 표시되지 않습니다.
this.Tab00.Tabpage1.tooltiptext = null;              // Tab 컴포넌트의 풍선 도움말이 표시됩니다.

참고

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

- tooltiptext 속성이 undefined 로 적용되면 상위 영역(Tab)의 tooltiptext 속성값이 적용됩니다.
   상위 영역의 tooltiptext 속성값이 undefined 일 경우는 다시 상위 영역의 tooltiptext 속성값이 적용됩니다. 

- 마우스 포인터가 TabpageControl 영역 위에서 일정시간 움직이지 않으면 풍선도움말이 표시됩니다.

- 풍선도움말이 표시된 상태에서 tooltiptext 속성값을 변경하면 풍선도움말이 사라집니다.


◆ Desktop WRE 제약

- 풍선도움말은 브라우저의 기능을 활용하므로 브라우저 사양에 따라 스타일에 차이가 있을 수 있습니다.
   NRE는 Chrome 의 스타일과 동일하게 적용됩니다.

tooltiptype

TabpageControl 에서 풍선도움말이 표시될 위치와 방식을 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

enumTooltipType ::= 'default' | 'hover' | 'inplace' | 'default,mouseleave' | 'hover,mouseleave' | 'inplace,mouseleave'

this.Tab00.Tabpage1.tooltiptype = "hover";

참고

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

- 마우스 포인터가 TabpageControl 영역 위에서 일정시간 움직이지 않으면 풍선도움말이 표시됩니다.

- 풍선도움말이 표시된 상태에서 tooltiptext 속성값을 변경하면 tooltiptype 속성값에 관계없이 풍선도움말이 사라집니다.

- 표시되었다가 사라진 풍선도움말은 마우스 포인터가 TabpageControl 영역을 나갔다가 들어오면 다시 표시됩니다.

- 마우스 포인터가 TabpageControl 영역에서 벗어나면 풍선도움말이 사라집니다.

- 풍선도움말의 크기는 풍선도움말에 표시되는 텍스트의 길이와 크기에 맞춰 자동으로 조정됩니다.

- 풍선도움말에 표시되는 텍스트의 글꼴과 크기는 변경하실 수 없습니다.

url

TabpageControl 에 Form 을 연결하여 표시할 때 설정하는 속성입니다.

지원 환경

속성 타입

문법 설정

strUrl ::= <absolute-url> | <relative-url>

this.Tab00.Tabpage1.url = "http://localhost:8080/Prj/Base/temp00.xfdl.js";     // 절대경로 
this.Tab00.Tabpage1.url = "../Base/temp00.xfdl";                                        // 상대경로
this.Tab00.Tabpage1.url = "Base::temp00.xfdl";                                           // TypeDefinition의 Services 경로

참고

- 기존에 작성된 Form 을 TabpageControl 에 연결할 때 사용하는 속성입니다.

- TabpageControl 의 위치와 크기는 연결된 Form 의 크기와 관계없이 유지됩니다.

- TabpageControl 에 연결된 Form 내부에서 TabPage 의 url 속성을 변경 시 async 속성값이 false 일 경우 오동작 할 수 있습니다.
   async 속성값이 false 이면 TabpageControl 의 url 속성을 변경하는 즉시 새로운 Form 이 로드되고,
   기존 Form이 제거되므로 스크립트가 끝나기 전에 해당 오브젝트가 제거되서 발생하는 문제입니다.
 
- TabpageControl 에 연결된 Form 내부에서 TabpageControl 의 url 속성을 변경하면 변경 시점 이후의 스크립트는 수행되지 않습니다.

- Tab 컴포넌트가 속한 Form 과 상위 Form 들은 url 속성에 설정하여 연결 할 수 없습니다.

word-spacing

TabpageControl 에 표시되는 텍스트의 단어 사이 간격을 설정하는 속성입니다.

지원 환경

속성 타입

문법

TabpageControl.wordSpacing[= strwordspacing]

문법 설정

strWordSpacing ::= 'normal' | <nVal>'px'

* XCSS
word-spacing : 30px;

* Script ( normal property )
this.Tab00.Tabpage1.wordSpacing = "30px";

참고

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

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

메서드

addChild

스크립트에서 동적으로 생성한 컴포넌트를 TabpageControl 의 자식 컴포넌트로 추가하는 메소드입니다.

지원 환경

문법

TabpageControl.addChild( strChildID, objComp )

파라미터

var nIndex = this.TabpageControl00.addChild( "Button00", Button00 );

반환

참고

- addChild() 메소드는 Frame 과 컨테이너 컴포넌트에서만 제공합니다.

- 스크립트에서 동적으로 생성한 컴포넌트만 추가할 수 있습니다.
  동적으로 생성한 컴포넌트가 아닌 경우 오동작이 발생할 수 있습니다.

- 자식 컴포넌트의 세부 속성은 addChild() 메소드로 자식 컴포넌트를 추가 후 설정해야 합니다.

- 자식 컴포넌트로 추가된 컴포넌트를 화면에 표시하기 위해서는 show() 메소드를 사용해야 합니다.

- 추가된 컴포넌트에 의해 부모 컴포넌트의 스크롤바가 갱신되야 할 때는 resetScroll() 메소드를 사용해야 합니다.
  추가된 컴포넌트에 의해 스크롤바가 자동으로 갱신되지 않습니다.

- 동적으로 추가된 컴포넌트를 제거하기 위해서는 removeChild() 메소드를 사용해야 합니다.

- removeChild() 메소드로 제거된 컴포넌트를 완전히 삭제하기 위해서는 destroy() 메소드를 사용해야 합니다.

- Div, PopupDiv, Tabpagecontrol 에서 제공하는  addChild() 메소드는 form 컨트롤에 자식 컴포넌트를 추가합니다.
   this.Div00.addChild("mysubbutton", Button00);
  수행 시  this.Div00.form.Button00  로  접근 가능합니다.

addEvent

TabpageControl 에 특정 이벤트를 선언하여 추가하는 메소드입니다.

지원 환경

문법

TabpageControl.addEvent( strEventID )

파라미터

var bResult = this.TabpageControl00.addEvent( "onmove" );

반환

참고

- Composite Component 와 같은 사용자 컴포넌트에 특정 이벤트를 추가할 때 사용하는 메소드입니다.

- TabpageControl 에서 특정 이벤트를 제거하려면 removeEvent() 메소드를 사용하여야 합니다.

addEventHandler

TabpageControl 의 특정 이벤트에 핸들러 함수를 추가하는 메소드입니다.

지원 환경

문법

TabpageControl.addEventHandler( strEventID, objFunc, objTarget )

파라미터

this.Tab00_Tabpage1_onmove = function( obj:nexacro.Tabpage,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.Tabpage1.addEventHandler( "onmove", this.Tab00_Tabpage1_onmove, this);

반환

addEventHandlerLookup

함수를 검색하여 TabPage 의 특정 이벤트에 핸들러 함수로 추가하는 메소드입니다.

지원 환경

문법

TabPage.addEventHandlerLookup( strEventID, strFunc, objTarget )

파라미터

this.Tab00_Tabpage1_onmove = function( obj:nexacro.Tabpage,e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.Tabpage1.addEventHandlerLookup( "onmove", "Tab00_Tabpage1_onmove", this);

반환

참고

- strFunc 이름의 함수를 objTarget 영역부터 상위로 올라가며 검색합니다.
  검색된 함수가 있다면 이벤트에 핸들러 함수로 추가합니다.

clearEventHandler

특정 이벤트에 등록된 핸들러 함수를 모두 제거하는 메소드입니다.

지원 환경

문법

TabpageControl.clearEventHandler( strEventID )

파라미터

var nCnt = this.TabpageControl00.clearEventHandler( "onmove" );

반환

참고

- 특정 핸들러 함수만 제거하려면 removeEventHandler() 메소드를 사용하여야 합니다.

findEventHandler

TabpageControl 의 특정 이벤트에서 핸들러 함수를 찾아 인덱스를 반환하는 메소드입니다.

지원 환경

문법

TabpageControl.findEventHandler( strEventID, objFunc, objTarget )

파라미터

this.Tab00_Tabpage1_onmove = function( obj:nexacro.Tabpage,  e:nexacro.MoveEventInfo ) { //수행할 스크립트 };
var nIndex = this.Tab00.Tabpage1.findEventHandler( "onmove", this.Tab00_Tabpage1_onmove, this );

반환

참고

- 인덱스는 "0"부터 시작합니다.

getEventHandler

TabpageControl 의 특정 이벤트에서 지정된 인덱스에 해당하는 핸들러 함수를 반환하는 메소드입니다.

지원 환경

문법

TabpageControl.getEventHandler( strEventID, nIdx )

파라미터

var objFunc = TabpageControl00.getEventHandler( "onmove", 0 );

반환

insertChild

스크립트로 동적 생성한 컴포넌트를 TabpageControl 의 자식 컴포넌트로 특정 순서에 추가하는 메소드입니다.

지원 환경

문법

TabpageControl.insertChild( nIdx, strChildID, objComp )

파라미터

var nIndex = this.TabpageControl00.insertChild( 0, "Button00", Button00 );

반환

참고

- 자식 컴포넌트는 선언된 순서에 따라 화면에 표시됩니다.
  따라서 nIdx 값에 따라 추가되는 컴포넌트의 화면표시 순서가 정해집니다.
  컴포넌트가 겹칠 경우 nIdx 값이 작은 컴포넌트가 nIdx 값이 큰 컴포넌트에게 가려지게 됩니다.

- insertChild() 메소드는 Frame 과 컨테이너 컴포넌트에서만 제공합니다.

- 스크립트에서 동적으로 생성한 컴포넌트만 추가할 수 있습니다.
  동적으로 생성한 컴포넌트가 아닌 경우 오동작이 발생할 수 있습니다.

- 자식 컴포넌트의 세부 속성은 insertChild() 메소드로 자식 컴포넌트를 추가 후 설정해야 합니다.

- 자식 컴포넌트로 추가된 컴포넌트를 화면에 표시하기 위해서는 show() 메소드를 사용해야 합니다.

- 추가된 컴포넌트에 의해 부모 컴포넌트의 스크롤바가 갱신되야 할 때는 resetScroll() 메소드를 사용해야 합니다.
  추가된 컴포넌트에 의해 스크롤바가 자동으로 갱신되지 않습니다.

- 동적으로 추가된 컴포넌트를 제거하기 위해서는 removeChild() 메소드를 사용해야 합니다.

- removeChild() 메소드로 제거된 컴포넌트를 완전히 삭제하기 위해서는 destroy() 메소드를 사용해야 합니다.

insertEventHandler

TabpageControl 의 특정 이벤트에 핸들러 함수를 지정한 위치에 삽입하는 메소드입니다.

지원 환경

문법

TabpageControl.insertEventHandler( strEventID, nIndex, objFunc, objTarget )

파라미터

this.Tab00_Tabpage1_onmove = function( obj:nexacro.Tabpage,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };

var nIndex = this.Tab00.Tabpage1.insertEventHandler( "onmove", 0, this.Tab00_Tabpage1_onmove, this);

반환

참고

- 첫번째 핸들러 함수의 인덱스는 0 입니다.

reload

TabpageControl 에 url 속성으로 연결된 Form 을 다시 로딩하는 메서드입니다.

지원 환경

문법

TabpageControl.reload()

파라미터

this.TabpageControl00.reload();

참고

- url 속성으로 Form 이 연결되어 있을 경우만 메서드가 정상동작 합니다.
   TabpageControl 이 자체 콘텐츠로 구성되어 있는 경우는 메서드 실행 시 모든 콘텐츠가 삭제됩니다.

- TabpageControl 의 form 컨트롤에 정의된 reload() 메서드와 동일한 메서드입니다.

- 메서드 실행 시 연결된 Form 은 초기화 상태로 로딩됩니다.


◆ onbeforeclose, onclose 이벤트

- reload 메서드 실행 시 연결된 Form의 onbeforeclose, onclose 이벤트는 발생하지 않습니다.

removeChild

TabpageControl 에 동적으로 추가된 컴포넌트를 제거하는 메소드입니다.

지원 환경

문법

TabpageControl.removeChild( strChildID )

파라미터

var objDelete = this.TabpageControl00.removeChild( "Button00" );

반환

참고

- removeChild() 메소드는 Frame 과 컨테이너 컴포넌트에서만 제공합니다.

- addChild() 또는 insertChild() 메소드를 사용하여 동적으로 추가한 컴포넌트만 제거할 수 있습니다.
  동적으로 추가한 컴포넌트가 아닌 경우 오동작이 발생할 수 있습니다.

- 제거된 컴포넌트에 의해 부모 컴포넌트의 스크롤바가 갱신되야 할 때는 resetScroll() 메소드를 사용해야 합니다.
  제거된 컴포넌트에 의해 스크롤바가 자동으로 갱신되지 않습니다.

- removeChild() 메소드로 제거된 컴포넌트를 완전히 삭제하기 위해서는 destroy() 메소드를 사용해야 합니다.

removeEvent

TabpageControl 에 선언된 특정 이벤트를 삭제하는 메소드입니다.

지원 환경

문법

TabpageControl.removeEvent( strEventID )

파라미터

var bResult = this.TabpageControl00.removeEvent( "onmove" );

반환

참고

- Composite Component 와 같은 사용자 컴포넌트에서 특정 이벤트를 삭제할 때 사용하는 메소드입니다.

- 이벤트에 핸들러 함수가 정의되어 있을 경우 이벤트를 삭제할 수 없습니다.

- TabpageControl 에 특정 이벤트를 추가하려면 addEvent() 메소드를 사용하여야 합니다.

- TabpageControl 에 기본으로 선언되어 있는 이벤트 삭제 시 오동작 할 수 있으므로 주의하여야 합니다.

removeEventHandler

TabpageControl 의 특정 이벤트에서 핸들러 함수를 제거하는 메소드입니다.

지원 환경

문법

TabpageControl.removeEventHandler( strEventID, objFunc, objTarget )

파라미터

this.Tab00_Tabpage1_onmove = function( obj:nexacro.Tabpage,  e:nexacro.MoveEventInfo) { // 수행할 스크립트 };
var nIndex = this.Tab00.Tabpage1.removeEventHandler( "onmove", this.Tab00_Tabpage1_onmove, this);

반환

참고

- 핸들러 함수가 제거되면 핸들러 함수의 인덱스가 "0"번부터 재조정됩니다.

- 이벤트에 등록된 핸들러 함수를 모두 제거하려면 clearEventHandler() 메소드를 사용하여야 합니다.

removeEventHandlerLookup

TabpageControl 의 특정 이벤트에서 검색된 함수와 동일한 핸들러 함수를 제거하는 메소드입니다.

지원 환경