Grid > GridBandControl

개요

Grid의 Band를 지정하는 오브젝트입니다.

Grid는 Head,Body,Summary Band로 구성됩니다. 각 Band는 Cell 의 List를 각각 소유하여 구성됩니다.
Head Band는 Grid의 상단에 출력되는 Cell 들이며, Body Band는 Bind된 Dataset Row 가 반복되어 출력되는 Cell 들이며, Summary Band는 Grid의 하단에 출력되는 Cell 들의 집합입니다.

지원 환경

Desktop NRE

Desktop WRE

☑ Windows

☑ macOS

☑ Edge

☑ Chrome

☑ Safari

☑ Firefox

☑ Opera

Mobile NRE

Mobile WRE

☑ Android

☑ iOS/iPadOS

☑ Android

☑ iOS/iPadOS




- Head Band의 style이 css또는 theme에 정의되어 있지 않을 때에는 Body Band의 style을 참조합니다.
  또한, Summary Band의 style이 css 또는 theme에 정의되어 있지 않을 때에는 Head Band의 style을 참조하며,
  Summary Band와 Head Band의 style이 모두 css나 theme에 정의 되어있지 않다면, Body Band의 style값을 참조하게 됩니다.

Status

Name

Type

Description

disabled

status

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

readonly

status

컴포넌트가 읽기 전용인 상태

mouseover

status

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

focused

status

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

enabled

status

컴포넌트가 활성화된 상태

Control

Name

TypeName

row

nexacro.GridRowControl

selection

nexacro.GridSelectionControl

속성

accessibilityaction

GridBandControl에 선택상자 이동 시 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

문법

GridBandControl.accessibilityaction[= strAction]

문법 설정

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

strAction

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

참고

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

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

accessibilitydesclevel

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

지원 환경

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

문법

GridBandControl.accessibilitydesclevel[= enumLevel]

문법 설정

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

"all"

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

"self"

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

"child"

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

"none"

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

참고

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

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

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

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

accessibilitydescription

GridBandControl에 선택상자 이동 시 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

문법

GridBandControl.accessibilitydescription[= strDescription]

문법 설정

this.GridBandControl00.accessibilitydescription = "Option";

strDescription

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

참고

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

accessibilityenable

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

지원 환경

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

문법

GridBandControl.accessibilityenable[= bEnable]

문법 설정

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

true

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


방향키 또는 제스처로 선택상자 이동 시 Static 과 같이 포커스를 갖지 않는 컴포넌트에도 선택상자가 이동됩니다.

false

GridBandControl 에 선택상자가 이동되어도 접근성 관련 속성값을 출력하지 않습니다.


데스크탑 환경에서 방향키로 선택상자가 GridBandControl 에 이동되지 않습니다.

모바일 환경에서 제스처로 선택상자가 GridBandControl 에 이동되지 않습니다.

참고

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

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

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

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


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

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


◆ WRE 접근성 제약

- accessibilitytype 속성값이 'sensereader'이고 센스리더에서 가상커서 사용으로 설정한 경우에 accessibilityenable 속성은 항상 false로 동작합니다.

accessibilitylabel

GridBandControl에 선택상자 이동 시 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

문법

GridBandControl.accessibilitylabel[= strLabel]

문법 설정

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

strLabel

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

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

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

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

참고

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

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

accessibilityrole

GridBandControl에 선택상자 이동 시 스크린 리더가 읽어주는 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

문법

GridBandControl.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.GridBandControl00.accessibilityrole = "none"; 
this.GridBandControl00.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 속성값을 설정하지 않으면 GridBandControl의 기본 Role 로 적용됩니다.

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

background

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

지원 환경

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

문법

GridBandControl.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.Gird00.head.background = "#ffffaa";
this.Gird00.body.background = "URL('./images/smiley.gif')" no-repeat center center #ffffaa;
this.Gird00.summary.background = "linear-gradient( red , blue , yellow )";
this.Gird00.head.background = "linear-gradient( #FF0000 , rgb(0,0,255) , rgb(255,255,0))";

<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" 설정 시 GridBandControl 의 왼쪽면과 이미지의 왼쪽면이 정렬되어 표시됩니다.

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

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

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


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

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

<vertical-position>

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


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

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

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

<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 보다 큰 값을 설정 시 GridBandControl 의 영역을 벗어난 가상의 위치로 적용됩니다.


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

<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" 이면 GridBandControl 의 right 위치가 시작점이 되고, left 위치가 끝점이 됩니다.

<angle> 값이 "to right" 이면 GridBandControl 의 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 보다 큰 값을 설정 시 GridBandControl 의 영역을 벗어난 가상의 위치로 적용됩니다.

예를 들어 "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> 에 적용된 이미지에 투명으로 적용된 부분이 있거나 이미지가 GridBandControl 영역보다 작다면 해당 영역에 배경색이 표시됩니다.


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

<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

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

지원 환경

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

문법

GridBandControl.borderRadius[= strborderradius]

문법 설정

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

* Script ( normal property )
this.Grid00.head.borderRadius = "10px";
this.Grid00.body.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 에 적용된 색이 모든 테두리에 적용됩니다.

color

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

지원 환경

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

문법

GridBandControl.color[= strcolor]

문법 설정

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

* Script ( normal property )
this.Grid00.head.color = "#999999";
this.Gird00.body.color = "rgb(255,0,0)";
this.Gird00.summary.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

GridBandControl 의 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

문법

GridBandControl.cssclass[= strcssclass]

문법 설정

strcssclass ::= <ClassName> [ , &ltClassName> ]*
this.Grid00.head.cssclass = "TestClass";
this.Grid00.body.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

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

지원 환경

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

문법

GridBandControl.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.Grid00.body.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 설정값이 적용됩니다.

font

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

지원 환경

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

문법

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

letter-spacing

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

지원 환경

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

문법

GridBandControl.letterSpacing[= strspace]

문법 설정

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

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

"normal"

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

<nVal>

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


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

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

참고

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

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

name

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

지원 환경

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

문법

GridBandControl.name

문법 설정

name

Control 의 이름을 설정합니다.

참고

- 컴포넌트 내부에 정의된 Control 은 name 을 설정할 수 없습니다.

-nexa-border

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

지원 환경

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

문법

GridBandControl.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.Grid00.head.border = "1px solid #999999";
this.Grid00.body.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"를 사용해야 합니다.

- Excel Export 시 테두리 선의 스타일과 색상은 적용되지만 두께는 적용되지 않습니다.
   Excel 에서 셀의 테두리 두께를 설정하는 기능이 없으므로 기본 두께로 적용됩니다.


◆ 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

GridBandControl 의 테두리(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

문법

GridBandControl.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.Grid00.body.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" 를 사용해야 합니다.

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

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

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

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


◆ WRE 제약

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

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

-nexa-rtl-background-image

GridBandControl 의 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

문법

GridBandControl.-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

GridBandControl 의 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

문법

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

opacity

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

지원 환경

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

문법

GridBandControl.opacity[= stropacity]

문법 설정

* XCSS
opacity : 0.8;
opacity : 80%;

* Script ( normal property )
this.Grid00.body.opacity = "0.8";
this.Grid00.body.opacity(0.8);
this.Grid00.body.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 의 투명도가 적용됩니다.

tooltiptext

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

지원 환경

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

문법

GridBandControl.tooltiptext[= strToolTipText]

문법 설정

this.Grid00.setBandProperty("body", "tooltiptext", "This is ToolTip Text')";
this.Grid00.setBandProperty = "body", "tooltiptext", "";          // 풍선 도움말이 표시되지 않습니다.
this.Grid00.setBandProperty("body", "tooltiptext", null);        // Grid 컴포넌트의 풍선 도움말이 표시됩니다.

strToolTipText

풍선도움말에 표시할 텍스트를 설정합니다.


빈문자열(EmptyString) 설정 시 풍선도움말이 표시되지 않습니다.

null 또는 undefined 설정 시 Grid 컴포넌트의 풍선도움말이 표시됩니다.

참고

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

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

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


◆ Desktop WRE 제약

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

tooltiptype

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

지원 환경

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

문법

GridBandControl.tooltiptype[= enumTooltipType]

문법 설정

enumTooltipType ::= 'default' | 'hover' | 'inplace' | 'default,mouseleave' | 'hover,mouseleave' | 'inplace,mouseleave'
this.Grid00.body.tooltiptype = "hover";

"default"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 GridBandControl 영역내에 위치하고 일정시간이 경과하면 풍선도움말이 사라집니다.

"hover"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 GridBandControl 영역내에 멈춰서 일정시간이 경과하면 풍선도움말이 사라집니다.

GridBandControl 영역 내에서 마우스 포인터를 이동한 후 멈추면 풍선도움말의 위치가 변경되거나 사라진 풍선도움말이 다시 표시됩니다.

"inplace"

GridBandControl 의 좌측상단 안쪽에 풍선도움말을 표시합니다.


마우스 포인터가 GridBandControl 영역내에 위치하고 일정시간이 경과하면 풍선도움말이 사라집니다.

"default,mouseleave"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 GridBandControl 영역에 있으면 풍선도움말이 사라지지 않습니다.

"hover,mouseleave"

마우스 포인터의 오른쪽 하단 위치에 풍선도움말을 표시합니다.


마우스 포인터가 GridBandControl 영역에 있으면 풍선도움말이 사라지지 않습니다.

GridBandControl 영역 내에서 마우스 포인터를 이동한 후 멈추면 풍선도움말의 위치가 변경됩니다.

"inplace,mouseleave"

GridBandControl 의 좌측상단 안쪽에 풍선도움말을 표시합니다.


마우스 포인터가 GridBandControl 영역에 있으면 풍선도움말이 사라지지 않습니다.

참고

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

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

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

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

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

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

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

word-spacing

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

지원 환경

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

문법

GridBandControl.wordSpacing[= strwordspacing]

문법 설정

strWordSpacing ::= 'normal' | <nVal>'px'
* XCSS
word-spacing : 30px;

* Script ( normal property )
this.Grid00.body.wordSpacing = "30px";

"normal"

텍스트의 단어 사이 간격을 설정하지 않습니다.


현재 font 에 맞는 기본형태로 텍스트가 표시됩니다.

<nVal>

pixel 단위로 텍스트의 단어 사이 간격을 설정합니다.

참고

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

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