Anchor

AutoComplete

선택 항목 설정

AutoComplete 컴포넌트를 더블 클릭하여 선택 항목을 직접 입력하거나 DataList 혹은 LinkedDataList와 바인딩할 수 있습니다.

직접 입력

DataList와 바인딩

일부 선택 항목 숨기기

DataList와 바인딩하여 선택 항목을 표시할 경우, 바인딩된 DataList의 특정 컬럼 값을 기준으로 일부 선택 항목을 숨길 수 있습니다.

일부 선택 항목 비활성화하기

DataList와 바인딩하여 선택 항목을 표시할 경우, 바인딩된 DataList의 특정 컬럼 값을 기준으로 일부 선택 항목을 숨길 수 있습니다.

속성을 통한 설정 (enableColumn & enableColumnFalseValue)

enableColum 및 enableColumnFalseValue 속성을 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

• enableColumn : 비활성화 여부를 위해 참고할 DataList의 컬럼.

• enableColumnFalseValue : 비활성화하기 위한 조건. (비활성화를 위해 참고하는 컬럼의 데이터 값.)

아래 예제는 두 항목이 비활성화되어 표시된 경우입니다.

함수를 통한 동적 설정 (setEnableColumn())

setEnableColumn() 함수를 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

$r_title(사용 예)
autoComplete1.setEnableColumn("Country", "Canada");
// "Country" 컬럼의 값이 "Canada"인 항목을 선택 항목 목록에서 비활성화

label 및 value 표시

선택 목록 상에서 표시

displayMode 및 delimiter 속성을 사용하여 선택 항목 표시 방법을 설정할 수 있습니다.

편집 모드에서 표시

displayModeSync="true" 속성 설정을 적용하면, 편집 모드에서도 displayMode 속성 설정값에 따라 value 및/혹은 label 값을 표시할 수 있습니다. 즉, displayMode="value delim label" 속성 설정이 적용된 경우, 선택 목록 창에서 편집 모드로 들어가면 입력값이 "value delim label" 형태로 표시됩니다. 단, searchTarget="both"인 경우에만 유효합니다.

아래와 같이 displayModeSync="false" 속성 설정이 적용된 경우, 편집 모드에서는 label 값이 표시됩니다.

아래와 같이 displayModeSync="true" 속성 설정이 적용된 경우, 편집 모드에서 입력값이 "value delim label" 형태로 표시됩니다.

label 및 value 표시 방법 동적 설정

setDisplayMode() 및 setDelimiter() 함수를 사용하면 displayMode 및 delimiter 속성을 동적으로 변경할 수 있습니다.

setDisplayMode()

$r_title(사용 예)
// displayMode 속성값을 "value delim label"로 지정. 

autoComplete1.setDisplayMode("value delim label");

setDelimiter()

$r_title(사용 예)
// delimiter 속성값을 " || "로 지정. 

autoComplete1.setDelimiter(" || ");

목록의 화살표 숨기기/표시하기

appearance 속성을 사용하여 선택 항목 목록에 화살표를 표시하거나 숨길 수 있습니다.

마우스 휠 스크롤링 제어

선택 목록 및 브라우저 상에서의 마우스 휠 스크롤링을 제어할 수 있습니다.

검색

AutoComplete는 사용자의 입력을 키워드를 기반으로 선택 목록 상의 항목을 검색하여 그 결과를 표시합니다. 아래의 속성을 사용하여 검색 기능 관련 기능을 정의할 수 있습니다.

입력 검증 및 검증 실패 메시지 표시

mandatory="true"인 경우, validate(); 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

포커스 이동

nextTabID

AutoComplete에서 Tab 키를 입력할 경우 포커스를 이동할 대상 컴포넌트를 nextTabID 속성으로 정의할 수 있습니다.

autoFocus="true" (자동 포커스 이동)

autoFocus="true" 설정을 적용할 경우, 사용자가 선택 목록의 값과 일치하는 값이 입력할 경우 nextTabID 컴포넌트로 포커스를 이동합니다.

nextTabByEnter (Enter 키를 통한 이동)

AutoComplete에서 Enter 키를 입력하여 nextTabID 속성으로 지정한 컴포넌트로 이동할 수 있습니다. 단, 이 기능을 이용하려면 nextTabByEnter="true" 설정을 추가하십시오.

특정 키 동작 방지

keycode와 콤마(,)를 사용하여 특정 키의 동작을 막을 수 있습니다. 동작을 막으려는 키(들)의 keycode를 preventKeyList 속성값으로 정의하십시오. 사용 예는 아래와 같습니다.

$r_title(사용 예)
preventKeyList="37,38,39,40"
// 상하좌우 화살표(37=left, 38=up, 39=right, 40=down) 키의 동작을 방지.

$r_title(사용 예)
preventKeyList="13"
// 엔터(13=enter) 키의 동작을 방지.

$r_title(사용 예)
preventKeyList="all"
// 모든 키의 동작을 방지.

이벤트

onbeforeselect

onbeforeselect 이벤트는 사용자가 항목을 선택한 후 바로 발생하며, 이때 이벤트 핸들러가 함수가 true를 반환하면 새로 선택한 항목을 사용하고 false를 반환하면 이전 항목을 유지합니다.

$r_title(사용 예)
scwin.autoComplete_onbeforeselect = function(selectedIndex, index) {
    if (selectedIndex < index) {
        return true;
    } else {
        return false;
    }
};

onchange

onchange 이벤트는 사용자가 선택 항목을 변경할 때 발생하며 이전 선택 항목과 새로 선택된 항목을 반환합니다.

$r_title(사용 예)
scwin.autoComplete1_onchange = function(info) {
    var oldValue = info.oldValue;
    var newValue = info.newValue;
    alert(oldValue + " changed to " + newValue + ".");
};

oneditenter

oneditenter 이벤트는 사용자가 편집 모드에 진입한 후 Enter 키를 누를 때 발생합니다.

oneditkeyup

oneditkeyup 이벤트는 사용자가 키를 누른 후 누른 키를 다시 놓을 때 발생합니다. 반환 인자는 아래와 같습니다.

• info.oldValue : 이전 값

• info.newValue : 새로 입력된 값

• info.keyCode : 새로 입력된 키의 코드 값

$r_title(사용 예)
scwin.input1_oneditkeyup = function(info, e) {
    var message = ("Previous selection is " + info.oldValue + ". The pressed key is " + info.newValue + ", and the code of the pressed key is " + info.keyCode + ".");
    alert(message);
};

onselected

onselected 이벤트는 사용자가 목록에서 항목을 선택할 경우 발생합니다. 단, onitemclick 이벤트 이후에 발생합니다.

onviewchange

onviewchange 이벤트는 사용자가 마우스 클릭이나 키보드를 사용하여 선택 항목을 변경할 때 발생합니다. 단, 스크립트를 통해 선택 항목을 변경할 경우에는 발생하지 않습니다.

$r_title(사용 예)
scwin.autoComplete1_onviewchange = function(info) {
    var oldValue = info.oldValue;
    var newValue = info.newValue;
    var oldSelectedIndex = info.oldIndex;
    var newSelectedIndex = info.newIndex;
    alert(oldValue + " changed to " + newValue + ".");
};

AutoComplete vs. SelectBox

AutoComplete와 SelectBox는 기본적으로 동일한 기능을 제공합니다. 선택 항목을 콤보 박스에 표시하며 사용자는 한 개의 항목만 선택할 수 있습니다. 단, AutoComplete의 경우, 검색 기능을 제공합니다. 즉, 사용자가 키워드를 입력하면, 입력된 키워드를 기반으로 선택 항목을 검색하여 목록에 표시합니다.

Calendar

시작 요일 지정 (weekStartsOn)

weekStartsOn 속성을 통해 달력의 시작 요일을 지정할 수 있습니다.

• "0" : 일요일

• "1" : 월요일

• "2" : 화요일

• "3" : 수요일

• "4" : 목요일

• "5" : 금요일

• "6" : 토요일

Today 버튼 위치 결정 (topLayout)

사용자가 클릭할 경우 오늘 날짜를 표시하는 Today 버튼의 표시 위치는 topLayout 속성을 통해 결정할 수 있습니다.

날짜 표시 형식 (calendarValueType)

달력의 날짜 표시 형식은 calendarValueType 속성을 사용하여 설정할 수 있습니다.

오늘 날짜 이전/이후의 날짜의 선택 방지

특정 날짜를 기준으로 이전/이후 날짜를 비활성화하여 사용자 선택을 막을 수 있습니다.

선택한 날짜가 속한 주를 다른 색으로 표시

highlightSelectedWeek 속성을 사용하여 선택한 날자가 속한 주를 다른 색으로 표시할 수 있습니다.

표시할 주(Week)의 수 설정

visibleWeekNum 속성을 통해 달력에 표시할 주(Week)의 수를 설정할 수 있습니다.

요일을 텍스트 혹은 이미지로 표시 (displayDayType)

displayDayType 속성을 사용하여 달력의 요일 부분을 텍스트 혹은 이미지 형태로 표시할지 선택 선택할 수 있습니다.

displayDayType="text"인 경우, 요일이 텍스트로 표시되어, 복사가 가능합니다.

휴일 지정 및 취소

직접 지정 (setHoliday())

setHoliday() 함수를 사용하여 아래와 같이 특정 날짜를 휴일로 지정할 수 있습니다.

setHoliday(dateStr , toRemove)

dateStr : 휴일로 지정할 날짜.

toRemove : 기존 휴일 설정을 취소할지 여부. ("true" : 취소. "false" (기본 값) : 취소하지 않음.)

$r_title(사용 예)
calendar1.setHoliday("20220207 20220208", true);

DataList와의 바인딩을 통한 지정 (setHolidayRef())

setHolidayRef() 함수를 사용하여 DataList의 특정 컬럼을 참조하여 해당 값을 휴일로 지정할 수 있습니다. 단, DataList의 컬럼 ID 앞에 "data:"를 붙여아 합니다.

$r_title(사용 예)
calendar1.setHolidayRef("data:dataList1.col1");

휴일 지정 취소 (removeHoliday())

removeHoliday() 함수를 사용하여 setHoliday() 및 setHolidayRef() 함수를 사용하여 지정한 휴일 설정을 모두 취소할 수 있습니다.

$r_title(사용 예)
calendar1.removeHoliday();

이벤트

onmonthselect

onmonthselect 이벤트는 달력에서 월을 변경할 때 발생하며 아래의 info 오브젝트를 반환합니다.

• info.oldValue : 이전 선택된 월.

• info.newValue : 새로 선택한 월.

onyearselect

onyearselect 이벤트는 달력에서 연도를 변경할 때 발생하며 아래의 info 오브젝트를 반환합니다.

• info.oldValue : 이전 선택된 연도.

• info.newValue : 새로 선택한 연도.

CheckBox

선택 항목 설정

CheckBox 컴포넌트를 더블 클릭하여 선택 항목을 직접 입력하거나 DataList 혹은 LinkedDataList와 바인딩할 수 있습니다.

직접 입력

DataList와 바인딩

일부 선택 항목 숨기기

DataList와 바인딩하여 선택 항목을 표시할 경우, 바인딩된 DataList의 특정 컬럼 값을 기준으로 일부 선택 항목을 숨길 수 있습니다.

일부 선택 항목 비활성화하기

속성을 통한 설정 (enableColumn & enableColumnFalseValue)

enableColum 및 enableColumnFalseValue 속성을 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

• enableColumn : 비활성화 여부를 위해 참고할 DataList의 컬럼.

• enableColumnFalseValue : 비활성화하기 위한 조건. (비활성화를 위해 참고하는 컬럼의 데이터 값.)

아래 예제는 세 개의 항목이 비활성화되어 표시된 경우입니다.

함수를 통한 동적 설정 (setEnableColumn())

setEnableColumn() 함수를 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

$r_title(사용 예)
checkbox1.setEnableColumn("Country", "Korea,China");
// "Country" 컬럼의 값이 "Canada" 혹은 "China"인 항목을 선택 항목 목록에서 비활성화

툴팁

CheckBox의 각 선택 항목에 label 값 혹은 사용자 지정 값을 툴팁으로 표시할 수 있습니다.

CheckComboBox

항목 설정

CheckComboBox 컴포넌트를 더블 클릭하여 선택 항목을 직접 입력하거나 DataList 혹은 LinkedDataList와 바인딩할 수 있습니다.

직접 입력

DataList와 바인딩

일부 항목 숨기기

DataList와 바인딩하여 선택 항목을 표시할 경우, 바인딩된 DataList의 특정 컬럼 값을 기준으로 일부 선택 항목을 숨길 수 있습니다.

일부 선택 항목 비활성화하기

속성을 통한 설정 (enableColumn & enableColumnFalseValue)

enableColum 및 enableColumnFalseValue 속성을 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

• enableColumn : 비활성화 여부를 위해 참고할 DataList의 컬럼.

• enableColumnFalseValue : 비활성화하기 위한 조건. (비활성화를 위해 참고하는 컬럼의 데이터 값.)

아래 예제는 한 개의 항목이 비활성화되어 표시된 경우입니다.

함수를 통한 동적 설정 (setEnableColumn())

setEnableColumn() 함수를 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

$r_title(사용 예)
checkcombobox1.setEnableColumn("Type", "Overseas");
// "Type" 컬럼의 값이 "Overseas"인 항목을 선택 항목 목록에서 비활성화

"선택완료" 및 "선택해제" 버튼 표시

navBtn="true" 설정을 사용할 경우 선택 목록 하단에 선택완료 및 선택해제 버튼을 표시할 수 있습니다.

"전체" 및 선택 안내 메시지 표시

label 및 value 표시

속성을 통한 설정

함수를 통한 동적 설정

setDisplayMode() 및 setDelimiter() 함수를 사용하면 displayMode 및 delimiter 속성을 동적으로 변경할 수 있습니다.

setDisplayMode()

$r_title(사용 예)
// displayMode 속성값을 "value delim label"로 지정. 

checkcombobox1.setDisplayMode("value delim label");

setDelimiter()

$r_title(사용 예)
// delimiter 속성값을 " || "로 지정. 

checkcombobox1.setDelimiter(" || ");

항목 표시

선택 목록의 열 개수

visibleColNum 속성을 사용하여 선택 항목을 표시할 열의 개수를 지정할 수 있습니다.

선택 목록의 최대 열 개수

visibleColMax 속성을 사용하여 선택 목록을 펼쳤을 때 보여줄 열의 최대 개수를 지정할 수 있습니다.

선택 항목을 목록 상단에 표시

showCheckTop 속성과 checkboxClickSync 속성을 모두 "true"로 설정하면 선택한 항목을 선택 목록 상단에 표시할 수 있습니다.

선택 항목 목록의 행 개수 설정

visibleRowNum 속성 및 setVisibleRowNum() 함수를 사용하여 선택 항목 목록에 표시할 행의 개수를 정적 혹은 동적으로 설정할 수 있습니다.

$r_title(정적 설정)
visibleRowNum="7"

$r_title(동적 설정)
checkcombobox1.setVisibleRowNum(7);

항목 선택

마우스 드래깅을 통한 선택 및 연속된 값 표시

useDrag="true" 설정을 사용하면 마우스 드래깅을 통해 여러 항목을 한꺼번에 선택할 수 있습니다. 또한, rangeSeparator 속성을 지정하여 속성을 사용하여 연속적으로 선택된 값을 "x-y" 형태로 간단하게 표시할 수 있습니다.

키보드 입력을 통한 항목 선택

useEdit="true" 설정을 사용하면 사용자가 직접 항목을 입력하여 항목을 선택할 수 있습니다.

사용자 입력 값 검증

validateOnInput 속성을 "true"로 설정할 경우, 사용자가 값을 입력(useEdit=“true”)할 때마다 해당 값의 유효성을 검증할 수 있습니다.

선택 항목 목록 너비 결정

submenuSize 속성을 사용하여 선택 항목 목록 너비를 결정하는 방법을 설정할 수 있습니다.

• "auto" (기본 값) : 선택 항목의 텍스트 길이에 맞추어서 자동으로 조정.

• "fixed" : 기본 너비 사용.

• "column" : 선택 항목 목록의 컬럼 수에 따라 너비를 결정. (한 컬럼 당 70px 할당.)

선택 항목 텍스트를 말 줄임표로 표시

submenuSize="ture" 속성 설정을 사용하고 선택 항목 텍스트의 길이가 선택 항목 목록보다 긴 경우, columnEllipsis="true" 속성을 적용하면 선택 항목 텍스트를 말 줄임표로 표시할 수 있습니다.

DatePicker

Editor

최대 입력 글자수 지정

maxCharCount 속성을 설정하여 CKEditor에 입력 가능한 최대 글자수를 지정할 수 있습

placeholder 설정

placeholder 속성 및 setPlaceholder() 함수를 사용하여 placeholder 텍스트를 정적 혹은 동적으로 설정할 수 있습니다.

$r_title(placeholder 속성 설정 예)
placeholder=“Placeholder Text”

$r_title(setPlaceholder() 함수 사용 예)
editor1.setPlaceholder("New Placeholder Text");

입력된 텍스트 반환

개행 문자를 포함하여 반환

getInnerText() 함수를 사용하면 CKEditor에 입력된 텍스트를 개행 문자를 포함하여 반환할 수 있습니다.

$r_title(사용 예)
// 다음을 입력할 경우
// a
// b
// c

editor.getInnerText()
// 반환 값 : a\nb\nc

텍스트만 반환

getText() 함수를 사용하면 CKEditor에 입력된 텍스트만 반환할 수 있습니다.

$r_title(사용 예)
// 다음을 입력할 경우
// a
// b
// c

editor.getText();
// 반환 값 :  'abc'

HTML 태그와 텍스트 모두 반환

getHTML() 함수를 사용하면 HTML 태그와 텍스트를 모두 반환할 수 있습니다.

$r_title(사용 예)
// 다음을 입력할 경우
// a
// b
// c

editor.getHTML()
// 반환 값 : 'a<br />\nb<br />\nc'

FlipToggle

Image

InputBox

포맷 적용 (dataType & displayFormat)

시간 및 날짜

dataType 및 displayFormat 속성을 사용하여 시간 및 날짜 입력 방식을 지정할 수 있습니다.

• 시간: dataType="time" displayFormat="HH:mm:ss"

• 날짜: dataType="date" displayFormat="MM-dd-yyyy"

반올림 및 무조건 올림

dataType 및 displayFormat 속성을 사용하여 반올림 및 무조건 올림을 설정할 수 있습니다.

• 반올림: dataType="number" displayFormat="##.##"

• 무조건 올림: dataType="number" displayFormat="##.##[ceil]"

dataType="number"인 경우 displayFormat 일괄 적용

dataType="number"인 경우 config.xml 파일을 이용하여 아래와 같이 displayFormat을 일괄 적용할 수 있습니다.

$r_title(config.xml 설정 예)
<input>
	<focusStyle value=""/>
	<dateMask value="yyyy-MM-dd"/>
	<timeMask value="HH:mm"/>
	<focusCalcSize value="false"/>
	<dataType valueType="number"/>
	<displayFormat defaultValue="####,####.##"/>
</input>

포맷 적용 시점 (applyFormat)

applyFormat 속성을 사용하여 포맷 적용 시점을 결정할 수 있습니다. applyFormat="display"일 경우 포커스가 인풋 박스를 빠져 나가면 포맷이 적용되고, applyFormat="all"일 경우 입력과 동시에 포맷이 적용됩니다.

대문자 변환

dataType 및 displayFormatter 속성을 사용하여 대문자 변환을 수행할 수 있습니다. displayFormatter 속성으로 함수 명을 지정하고 아래와 같이 해당 함수를 별도로 정의해야 합니다.

$r_title(속성 설정)
display="text" displayFormatter="capitalMask"

$r_title(displayFormatter로 정의한 함수를 구현)
function capitalMask(value) {
    return value.toUpperCase();
}

소수점 처리

관련 속성

dataType="float"

allowChar

maxlength

maxlength 설정 예

maxlength="0.1": 정수부는 입력할 수 없고, 소수부는 1자리까지 입력 가능.

maxlength=".11": 정수부는 자리수 제한 없고, 소수부는 11자리까지 입력가능.

$r_title(소수점 앞 세 자리 & 뒤 13자리까지 허용하는 예)
<xf:input 
	...
	dataType="float" maxlength="3.13" allowChar="0-9."
	...
</xf:input>

마스킹

dataType="text" 혹은 "number"인 경우, maskFormat 속성을 사용하여 마스킹 기능을 사용할 수 있습니다.

마스킹 방향

숫자 및 알파벳 마스킹

화폐 단위 입력

dataType이 "euro", "rupee" 혹은 "tenge"와 같은 화폐 단위일 경우, + 및 - 기호를 입력할 수 있습니다. 또한, euroMask, rupeeMask, tengeMask 속성을 사용하여 금액 입력 포맷을 설정할 수 있습니다.

좌우 공백 제거

ltrim, trim, rtrim 속성을 설정하여 포커스가 InputBox를 벗어날 때 좌우 공백을 제거할 수 있습니다.

• ltrim="true" : 좌측에 존재하는 공백을 제거.

  • 예시: "____1234____" → "1234____"

• trim="true" : 좌우 양쪽의 공백을 모두 제거.

  • 예시: "____1234____" → "1234"

• rtrim="true" : 우측에 존재하는 공백을 제거.

  • 예시: "____1234____" → "____1234"

값 설정 및 반환

setValue();와 getValue(); 함수를 통해 컴포넌트에 동적으로 값을 설정하거나 현재 값을 반환할 수 있습니다. InputBox 뿐만 아니라 Secret, Output, TextArea, TextBox, AutoComplete, Radio, Select, CheckBox, Calendar, InputCalendar 등의 컴포넌트에서 사용 가능합니다.

최대 입력 가능 길이

maxLength 속성을 통해 dataType에 상관 없이("euro", "rupee" 혹은 "tenge"와 같은 화폐 단위도 가능) 입력 가능한 최대 길이를 설정할 수 있습니다.

최대 입력 가능 바이트 길이

최대 입력 가능 바이트 길이 설정

setMaxByteLength() 함수를 통해 입력 가능한 최대 바이트 길이를 제한하는 maxByteLength 속성을 동적으로 설정하거나 초기화할 수 있습니다.

// 최대 바이트 길이를 9 바이트로 설정. 
input1.setMaxByteLength(9);

// 최대 바이트 길이 설정을 초기화.
input1.setMaxByteLength(-1); 
input1.setMaxByteLength();

최대 입력 가능 바이트 길이 적용 시점 설정

입력 가능한 최대 바이트 길이를 제한하는 maxByteLength 속성을 적용할 시점을 지정할 수 있습니다. checkMaxByteOnInput 속성을 다음과 같이 지정하십시오.

• "true" : 키를 입력하는 시점에 적용.

  (예시 : maxByteLength="3"인 경우, "12345"를 입력할 경우, "123"에서 입력이 멈춤.)

• "false" : 키보드에서 입력을 멈추는 시점에 적용.

  (예시 : maxByteLength="3"인 경우, "12345"를 입력 후 키보드에서 뗄 때 "123"으로 잘림.)

입력 검증 및 검증 실패 메시지 표시

• 검증 항목으로 설정한 속성에 대해 validate(); 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

  • 입력 검증 결과가 false이고 displaymessage="true"로 설정된 경우,

    • 함수 내부에 정의된 메시지가 표시됩니다.

    • invalidMessage="검증 실패 안내 메시지"까지 설정된 경우, invalidMessage 속성으로 설정한 "검증 실패 안내 메시지"가 표시됩니다.

• 검증을 수행하고 결과를 표시할 함수를 구현한 뒤, 해당 함수를 invalidMessageFunc 속성으로 설정할 경우, 해당 함수를 통해 검증을 수행하고 메시지를 표시할 수 있습니다.

이벤트

oneditfull

oneditfull 이벤트는 maxByteLength 속성으로 지정한 길이 만큼의 값이 입력될 경우 발생합니다.

InputCalendar

날짜값 종류(calendarValueType) 별로 날짜 표시방식(displayFormat) 속성을 설정하는 대신 아래와 같이 config.xml 파일에서 일괄 설정할 수 있습니다.

$r_title(config.xml 설정)
<displayFormat valueType="yearMonth" defaultValue="yyyy::MM"/>
<displayFormat valueType="yearMonthDate" defaultValue="yyyy/MM/dd"/>
<displayFormat valueType="yearMonthDateTime" defaultValue="yyyy/MM/dd HH:mm"/>
<displayFormat valueType="yearMonthDateTimeSec" defaultValue="yyyy/MM/dd HH:mm:SS"/>

특정 날짜 활성화/비활성화

특정 날짜를 기준으로 이전/이후 날짜를 비활성화하여 사용자 선택을 막을 수 있습니다.

disableBeforeDate() & disableAfterDate()

disableBeforeDate() 및 disableAfterDate() 함수를 사용하여 지정한 날짜 이전/이후의 날짜들을 비활성화하여 달력에서 선택할 수 없도록 설정할 수 있습니다.

$r_title(사용 예)
// “yyyyMMdd”
inputCal1.disableBeforeDate(“20210131”);

// ioFormat=“ddMMyyyy”, 
inputCal1.disableAfterDate(“31012021”);

disableDate()

disableDate() 함수를 사용하면 공휴일을 포함한 날짜(들)을 비활성화하여 달력에서 선택할 수 없도록 설정할 수 있습니다.

날짜 입출력 형식

날짜 입력 형식 (ioFormat)

날짜 입력순서를 제어할 수 있습니다.

• 한국

  20141225 => ioFormat="yyyyMMdd"

• 미국

  12242014 => ioFormat="MMddyyyy"

입력 상자의 날짜 출력 형식 (displayFormat)

달력의 날짜 출력형식 (calendarDisplayFormat)

날짜 입출력 형식 동적 설정 (setIoFormat())

아래와 같이 setIoFormat(options); 함수를 이용하여 (1) 날짜 입력 형식 (2) 입력란의 날짜 출력 형식 (3) 달력의 날짜 출력 형식을 지정할 수 있습니다.

$r_title(사용 예)
inputCalendar1.setIoFormat(
    {
      ioFormat:"ddMMyyyy", // 날짜 입력 순서
      displayFormat:"dd-MM-yyyy", // 입력란에 표시되는 날짜 순서 
      useMonthYearFormat: true, 
      calendarDisplayFormat:"dd-MM-yyyy" // 달력에 표시되는 날짜 순서
    }
);

현재 날짜 표시

사용자의 날짜 선택과 별도로 달력 아이콘 클릭시 표시되는 날짜를 현재 날짜를 사용할 수 있습니다. fixedDate 및 keepFixedDate 두 개의 속성을 사용하여 아래의 방법으로 현재 날짜를 표시하십시오.

setValue()

날짜 설정

setValue("날짜") 함수를 사용하여 날짜를 설정할 수 있습니다. 단, 날짜는 ioFormat 속성으로 지정한 형식을 사용하여 지정해야 합니다. 아래 예제와 같이 구분자를 포함하거나 포함하지 않은 ioFormat 형식을 모두 사용할 수 있습니다.

$r_title(ioFormat="yyyy-MM-dd HH:mm:SS"인 경우 setValue()를 이용한 날짜 설정)
inputCalendar1.setValue(20201130121212);
// or 혹은
inputCalendar1.setValue("2020-11-30 12:12:12");

현재 시각 및 날짜 설정

getCurrentServerDate() 함수를 통해 현재 시각 및 날짜를 확인한 후 setValue() 함수를 통해 설정할 수 있습니다.

기본 날짜 (defaultDate) 설정

달력 아이콘을 클릭할 때 표시되는 기본 날짜를 defaultDate 속성 및 setDefaultDate() 함수를 사용하고 설정할 수 있습니다. 또한 현재 설정된 기본 날짜는 getDefaultDate() 함수를 사용하여 확인할 수 있습니다.

입력 날짜 검증

validate()

• 검증 항목으로 설정한 속성에 대해 validate(); 함수는

  • 검증을 수행하여 결과를 true/false로 반환합니다.

  • displaymessage="true"로 설정되고 입력 검증 결과가 false일 때, 엔진 내부에 정의된 메시지가 표시됩니다.

  • invalidMessageFunc="함수"가 설정되고 입력 검증 결과가 false일 때, 해당 함수가 반환한 메시지가 표시됩니다.

dateValidCheck="true" 설정을 추가할 경우, 입력된 날짜의 유효성을 검증할 수 있습니다. 날짜가 유효하지 않을 경우, invalidMessageFunc 속성으로 정의된 함수가 호출됩니다.

dateValidSetCustom & setValueCancel()

dateValidSetCustom="true" 속성을 설정할 경우, invalidMessageFunc 함수를 실행하여 유효하지 않은 날짜값 입력에 대한 오류 메시지를 표시하고 이후 setValueCancel() 함수를 실행하여 이전 유효한 값을 유지할 수 있습니다.

invalidMessageFunc 속성으로 지정된 함수에서 PopUp을 띄우고 해당 PopUp이 닫힐 경우 onpageunload 이벤트에서 setValueCancel() 함수를 호출할 수 있습니다. 즉, 유효하지 않은 날짜를 입력할 경우, 별도의 PopUp 창을 표시(dateValidSetCustom="true")하여 오류 메시지를 출력하고, 해당 PopUp 창이 닫힐 경우 이전 값으로 복원하는 동작이 가능합니다.

$r_title(invalidMessageFunc 함수가 호출한 팝업 창에서의 사용 예)
scwin.onpageload = function() {
    scwin.callerId = $p.getParameter("callerId");
};

scwin.onpageunload = function() {
    var comp = $p.getComponentById(scwin.callerId);
    if (comp && typeof comp.setValueCancel === "function") {
        comp.setValueCancel();
    }
};

Today 버튼 숨기기/표시하기

달력 아이콘을 클릭하여 달력을 표시할 경우, 달력 상에 Today 버튼이 함께 표시됩니다. Today 버튼을 클릭하면 현재 날짜를 선택할 수 있습니다. 이 Today 버튼은 showToday="false" 설정을 통해 화면에 표시하지 않을 수 있습니다.

연도 및 월 선택

연도 및 월 선택 방식 설정 (pickerType)

pickerType 속성을 통해 달력에서 연도 및 월을 선택하는 방식을 설정할 수 있습니다.

연도 및 월 표시 순서 설정 (dynamicHeaderOrder)

pickerType="dynamic"인 경우 달력 헤더 부분의 연도 및 월 표시 순서를 dynamicHeaderOrder 속성을 통해 설정할 수 있습니다.

dynamicHeaderOrder:

pickerType="dynamic"인 경우 헤더 부분의 label 순서를 결정.

"month" (기본 값) : 월 – 연도 순서로 출력.

"year" : 연도 – 월 순서로 출력.

일 선택 유지 (dayMoveFixed)

dayMoveFixed="true" 속성 설정을 적용하면, 특정 일(Day)를 선택한 후, 달력 상단의 화살표를 사용하여 월이나 연도를 이동해도 현재 선택한 일을 유지할 수 있습니다.

표시할 주(Week)의 수 설정

visibleWeekNum 속성을 통해 달력에 표시할 주(Week)의 수를 설정할 수 있습니다.

요일을 텍스트 혹은 이미지로 표시 (displayDayType)

displayDayType 속성을 사용하여 달력의 요일 부분을 텍스트 혹은 이미지 형태로 표시할지 선택 선택할 수 있습니다.

displayDayType="text"인 경우, 요일이 텍스트로 표시되어, 복사가 가능합니다.

휴일 지정 및 취소

직접 지정 (setHoliday())

setHoliday() 함수를 사용하여 아래와 같이 특정 날짜를 휴일로 지정할 수 있습니다.

setHoliday(dateStr , toRemove)

dateStr : 휴일로 지정할 날짜.

toRemove : 기존 휴일 설정을 취소할지 여부. ("true" : 취소. "false" (기본 값) : 취소하지 않음.)

$r_title(사용 예)
inputCalendar1.setHoliday("20220207 20220208", true);

DataList와의 바인딩을 통한 지정 (setHolidayRef())

setHolidayRef() 함수를 사용하여 DataList의 특정 컬럼을 참조하여 해당 값을 휴일로 지정할 수 있습니다. 단, DataList의 컬럼 ID 앞에 "data:"를 붙여아 합니다.

$r_title(사용 예)
inputCalendar1.setHolidayRef("data:dataList1.col1");

휴일 지정 취소 (removeHoliday())

removeHoliday() 함수를 사용하여 setHoliday() 및 setHolidayRef() 함수를 사용하여 지정한 휴일 설정을 모두 취소할 수 있습니다.

$r_title(사용 예)
inputCalendar1.removeHoliday();

(날짜 선택) 취소 버튼 숨기기/표시하기

숨기기 (cancelButtonHide)

calendarValueType이 "yearMonthDate"를 제외한 아래와 같은 나머지 값을 갖는 경우, 기본 상태에서는 날짜 선택 취소 버튼이 표시됩니다.

• "yearMonth"

• "year"

• "yearMonthDateHour"

• "yearMonthDateTime"

• "yearMonthDateTimeSec"

cancelButtonHide="true" 속성 설정을 적용하면 아래와 같이 취소 버튼을 표시하지 않을 수 있습니다.

표시하기 (cancelButtonShow)

calendarValueType="yearMonthDate" 속성 설정을 사용할 경우, 기본 상태에서는 날짜 선택 취소 버튼이 표시되지 않습니다.

cancelButtonShow="true" 속성 설정을 적용하면 아래와 같이 취소 버튼을 표시할 수 있습니다.

날짜 선택 초기화 버튼

resetButtonShow="true" 속성 설정을 적용하면 날짜 선택을 초기화하는 버튼을 표시할 수 있습니다.

MultiSelect

DataList와 바인딩하여 선택 항목 설정

텍스트 정렬

textAlign 속성을 사용하면 선택 항목 목록의 텍스트 정렬 방향을 설정할 수 있습니다.

• "center" (기본 값) : 가운데 정렬.

• "left" : 왼쪽 정렬.

• "right" : 오른쪽 정렬.

이벤트

onrowclick

onrowclick 이벤트는 선택 목록에서 항목을 선택할 때 발생합니다.

MultiUpload

주요 속성

filter: 업로드 가능한 파일 확장자를 지정. (형식: [파일 형식 이름] : [확장자 명], 사용 예: AutoCad:*.dxf;*.dws)

maxcount: 업로드 가능한 최대 파일 갯수

maxsize: 업로드 가능한 최대 파일 크기 (단위: Kb)

최대 업로드 용량 제한

MultiUpload 컴포넌트를 통해 업로드하는 파일 용량은 크게 두가지 방법으로 제한할 수 있습니다.

1. maxSize 속성을 지정.

2. subSize속성을 지정하여 config.xml 및 websquare.xml 파일에 클라이언트 및 서버 쪽에서 제한할 용량을 각각 지정.

$r_title(MultiUpload 컴포넌트 subSize 속성 설정 예)
<w2:multiupload ...
	... subSize="subSize1">    
</w2:multiupload>

$r_title(config.xml 설정 예)
<multiUpload>
	<subSize1 value="10"/>
	<subSize2 value="100000"/>
</multiUpload>

$r_title(websquare.xml 설정 예)
<maxUploadSize value="3145728">
	<subSize1 value="10"/>
	<subSize2 value="100000000"/>
</maxUploadSize>

업로드 파일 별 파라미터 설정

여러 파일을 업로드 할 때 setParamJSON() 함수를 사용하여 각 파일 별로 서로 다른 파라미터를 설정할 수 있습니다. 아래의 예시를 참고하십시오.

1. getFileNames() 혹은 geFileInfos()를 사용하여 파일의 이름을 반환합니다.

2. 파일 이름을 사용하여 각 파일 별 파라미터 정보를 JSON 형태 생성합니다.

3. setParamJSON()을 호출하여 파라미터 정보를 전달합니다.

$r_title(getFileInfos()와 setParamJSON()을 활용한 파라미터 설정 예)
var fileInfos = multi1.getFileInfos();
var paramJSON = {};
for (var i = 0; i < fileInfos.length; i++) {
    var fileName = fileInfos[i].name;
    var fileSize = fileInfos[i].size;
    paramJSON[fileName] = {
        "index": i,
        "name": fileName,
        "value": fileSize
    }
}
multi1.setParamJSON(paramJSON);
alert(JSON.stringify(paramJSON));

$r_title(setParam() 사용 예)
 // 첫번째 파일에 대해 파라미터 설정
multiupload1.setParam( 0 , "param1" , "aaaa" );
multiupload1.setParam( 0 , "param2" , "bbbb" );
 
// 두번째 파일에 대해 파라미터 설정
multiupload1.setParam( 1 , "param1" , "cccc" );
multiupload1.setParam( 1 , "param2" , "dddd" );

최대 업로드 파일 수 설정 (maxcount)

여러 파일을 업로드 할 때 maxcount 속성을 사용하여 최대 업로드 가능한 파일 수를 설정할 수 있습니다.

업로드 대상 파일 수 반환

getFileCount() 함수를 사용하여 업로드할 파일의 개수를 확인할 수 있습니다.

$r_title(사용 예)
var count = multi1.getFileCount();
alert("Total " + count + " files to be uploaded.");

Radio

선택 항목 설정

Radio 컴포넌트를 더블 클릭하여 선택 항목을 직접 입력하거나 DataList 혹은 LinkedDataList와 바인딩할 수 있습니다.

직접 입력

선택 항목을 직접 입력한 후, cols 및 rows 속성을 사용하여 선택 항목을 표시할 열의 수 혹은 행의 수를 설정할 수 있습니다.

DataList와 바인딩

Radio의 선택 항목을 DataList 혹은 LinkedDataList와 바인딩하여 설정한 후, cols 및 rows 속성을 사용하여 선택 항목을 표시할 열의 수 혹은 행의 수를 설정할 수 있습니다.

선택 항목 표시

Radio의 cols 및 rows 속성을 사용하여 선택 항목을 표시할 열의 수 혹은 행의 수를 설정할 수 있습니다.

일부 선택 항목 숨기기

DataList와 바인딩하여 선택 항목을 표시할 경우, 바인딩된 DataList의 특정 컬럼 값을 기준으로 일부 선택 항목을 숨길 수 있습니다.

일부 선택 항목 비활성화하기

속성을 통한 설정 (enableColumn & enableColumnFalseValue)

enableColum 및 enableColumnFalseValue 속성을 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

• enableColumn : 비활성화 여부를 위해 참고할 DataList의 컬럼.

• enableColumnFalseValue : 비활성화하기 위한 조건. (비활성화를 위해 참고하는 컬럼의 데이터 값.)

아래 예제는 세 개의 항목이 비활성화되어 표시된 경우입니다.

함수를 통한 동적 설정 (setEnableColumn())

setEnableColumn() 함수를 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

$r_title(사용 예)
radio1.setEnableColumn("Type", "Overseas");
// "Type" 컬럼의 값이 "Overseas"인 항목을 선택 항목 목록에서 비활성화

입력 검증 및 검증 실패 메시지 표시

• 검증 항목으로 설정한 속성에 대해 validate(); 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

  • 입력 검증 결과가 false이고 displaymessage="true"로 설정된 경우,

    • 함수 내부에 정의된 메시지가 표시됩니다.

    • invalidMessage="검증 실패 안내 메시지"까지 설정된 경우, invalidMessage 속성으로 설정한 "검증 실패 안내 메시지"가 표시됩니다.

• 검증을 수행하고 결과를 표시할 함수를 구현한 뒤, 해당 함수를 invalidMessageFunc 속성으로 설정할 경우, 해당 함수를 통해 검증을 수행하고 메시지를 표시할 수 있습니다.

툴팁

CheckBox의 각 선택 항목에 label 값 혹은 사용자 지정 값을 툴팁으로 표시할 수 있습니다.

$r_title(툴팁을 표시 – 항상)
tooltipDisplay=“true” tooltipShowAlways=“true”

$r_title(툴팁을 표시 – 텍스트가 잘린 경우에만)
tooltipDisplay="true" tooltipShowAlways="false"

$r_title("사용자 정의 내용"을 툴팁을 표시)
tooltipDisplay="true" tooltipItemLabel="사용자 정의 내용"

$r_title(tooltipFormatter로 지정한 함수가 반환하는 값을 툴팁으로 표시)
tooltipDisplay=“true” tooltipShowAlways=“true” tooltipFormatter=“scwin.tooltip” 

/////

scwin.tooltip = function(){ 
    . . . 
    }

이벤트

onbeforeselect

onbeforeselect 이벤트는 사용자가 항목을 선택한 후 바로 발생하며, 이때 이벤트 핸들러가 함수가 true를 반환하면 새로 선택한 항목을 사용하고 false를 반환하면 이전 항목을 유지합니다.

$r_title(사용 예)
scwin.radio_onbeforeselect = function(selectedIndex, index) {
    if (selectedIndex < index) {
        return true;
    } else {
        return false;
    }
};

onviwechange

onviewchange 이벤트는 사용자가 키보드나 마우스 조작을 통해 선택 항목을 변경할 때 발생합니다.

ScheduleCalendar

스케줄 추가

DataList와 바인딩

1. DataList를 생성합니다.

2. DataList에 아래와 같이 네 개의 컬럼을 지정하십시오. (단, 컬럼 이름은 변경 가능합니다.

   1. titleColumn: 스케줄 제목을 저장할 컬럼.

   2. idColumn: 스케줄 ID를 저장할 컬럼.

   3. startColumn: 스케줄 시작 일시를 저장할 컬럼.

   4. endColumn: 스케줄 종료 일시를 저장할 컬럼.

3. ScheduleCalendar의 각 속성을 아래와 같이 지정하십시오.

addSchedule()

addSchedule() 함수를 이용하여 동적으로 스케줄을 추가할 수 있습니다.

$r_title(사용 예)
scheduleCalendar1.addSchedule({
    "title": "ADDED",
    "start": "20201029",
    "end": "20201030",
    "id": "added01"
});

스케줄 날짜 변경 (editable)

editable="true" 설정을 적용할 경우, 달력에서 마우스 드래그-앤-드롭을 통해 일정의 시작일 및 종료일을 변경할 수 있습니다.

스케줄 항목 입력

프롬프트 창을 통한 입력 (selectable)

selectable="true" 설정을 적용할 경우, 달력에서 특정 날짜를 클릭하거나 여러 날짜를 드래깅하면 프롬프트 창이 표시됩니다. 표시된 프롬프트 창에 선택한 날짜에 대한 스케줄 항목을 입력할 수 있습니다.

프롬프트 창이 아닌 다른 수단을 통한 입력 (noUsePrompt)

noUsePrompt="true" 설정을 적용하면 경우, 달력에서 특정 날짜를 클릭해도 프롬프트 창이 표시되지 않습니다. 이 경우, ScheduleCalendar에 onclick 이벤트를 추가하는 것과 같은 다른 방법으로 스케줄 항목 입력 동작을 구현할 수 있습니다.

스케줄의 마지막 날짜 표시 기준

스케줄이 끝나는 시간을 기준으로 스케줄의 마지막 날짜를 캘린더에 표시할지 여부를 설정할 수 있습니다. 관련 속성은 nextDayThreshold입니다.

nextDayThreshold="09:00:00"

(1) 스케줄의 끝나는 시간이 (09시 이후인) 10시일 경우에는, 마지막 날짜에 스케줄이 표시됨.

(2) 스케줄의 끝나는 시간이 (09시 이전인) 07시일 경우에는, 마지막 날짜에 스케줄이 표시되지 않음.

시간 표시 형식 설정 (timeFormat)

timeFormat 속성을 이용하여 시간 표시 형식을 설정할 수 있습니다.

헤더

헤더 툴바 표시/숨김 (useHeaderToolbar)

useHeaderToolbar="true" 속성 설정을 적용하면 ScheduleCalendar의 달력 위에 툴바를 아래와 같이 표시할 수 있습니다. 반대로 useHeaderToolbar="false" 속성 설정을 적용할 경우, 툴바는 표시되지 않습니다.

헤더 아이콘 지정 (viewIcon)

viewIcon 속성을 이용하여 스케줄 칼렌다의 우측 상단에 표시할 헤더 아이콘 종류를 지정할 수 있습니다.

$r_title(사용 예)
// month,basicWeek,basicDay를 사용할 경우
viewIcon="month,basicWeek,basicDay"

// month,agendaWeek,agendaDay를 사용할 경우
viewIcon="month,agendaWeek,agendaDay"

// basicDay,month를 사용할 경우
viewIcon="basicDay,month"

헤더 버튼

headerLeftBtn 및 headerRightBtn 속성 이용

headerLeftBtn 및 headerRightBtn 속성을 이용하여 ScheculeCalendar 헤더의 좌측 및 우측에 표시되는 버튼 표시 여부를 지정할 수 있습니다.

setHeaderBtn() 함수 이용

setHeaderBtn() 함수를 이용하여 ScheculeCalendar 헤더에 표시할 버튼을 동적으로 선택할 수 있습니다.

$r_title(사용 예)
schedule1.setHeaderBtn({
    "headerRightBtn": false,
    "headerLeftBtn": false,
    "headerTitle": true
});

푸터

useFooterToolbar 속성을 사용하여 ScheduleCalendar 하단에 푸터를 표시할 수 있습니다. 또한 푸터를 표시할 경우 customButtonText 및 customButtonClickFunction 속성을 사용하여 푸터에 버튼을 추가할 수 있습니다. 버튼에 표시할 텍스트를 customBottomText 속성으로 설정하고 , 각 버튼을 클릭할 경우 실행할 함수의 이름을 customButtonClickFunction 속성으로 설정하십시오. 마지막으로 customButtonClickFunction 속성으로 지정한 함수는 직접 구현해야 합니다.

$r_title(속성 설정 예시)
useFooterToolbar="true"  
customButtonText="button1,button2"
customButtonClickFunction="scwin.customButton1_onclick,scwin.custom
Button2_onclick"

$r_title(customButtonClickFunction 함수 구현 (예시))
scwin.customButton1_onclick = function(e) {
    alert("custom1 clicked");
};
scwin.customButton2_onclick = function(e) {
    alert("custom2 clicked");
};

언어 설정 (lang)

lang 속성을 이용하여 ScheduleCalendar의 언어를 지정할 수 있습니다.

title 변환 (titleFormatter)

스케줄 항목의 title을 변환하기 위해서는 titleFormatter 속성으로 title을 변환하는 함수의 이름을 정의하고 해당 함수를 직접 구현하십시오.

스타일

특정 요일 컬럼에 스타일 적용

setDayNameStyle() 함수를 사용하여 특정 요일 컬럼에 적용할 스타일을 지정할 수 있습니다. 아래 예제는 일요일(sun) 컬럼의 헤더와 바디의 배경색 및 날짜에 적용할 스타일을 정의하고 있습니다.

$r_title(사용 예)
var options = {
    "sun": {
        "header": {
            "color": "ornange"
        },
        "body": {
            "background": {
                "background-color": "green"
            },
            "num": {
                "color": "yellow",
                "font-size": "20px"
            }
        }
    }
};
schedule1.setDayNameStyle(options);

이벤트

onaddschedule & onmoveschedule

addSchedule() 함수를 사용하여 스케줄을 생성(onaddschedule)하거나 혹은 사용자가 마우스 드래깅으로 스케줄을 이동(onmoveschedule)할 경우 이벤트를 추가할 수 있습니다.

1. Design 뷰에서 ScheduleCalendar를 우클릭합니다.

2. Event – onaddschedule 혹은 onmoveschedule을 선택합니다.

3. Script 탭에서 해당 이벤트 추가할 동작을 정의합니다.

SearchBox

DataMap과 동적으로 바인딩

setRef() 함수를 사용하여 SearchBox와 DataMap을 동적으로 바인딩할 수 있습니다.

$r_title(사용 예)
setRef("data:dataMap2.key1");

placeholder 설정

placeholder 속성 및 setPlaceholder() 함수를 사용하여 placeholder 텍스트를 정적 혹은 동적으로 설정할 수 있습니다.

$r_title(placeholder 속성 설정 예)
placeholder=“Placeholder Text”

$r_title(setPlaceholder() 함수 사용 예)
search1.setPlaceholder("New Placeholder Text");

또한 showPlaceHolderReadOnly 속성을 "true"로 설정하면 읽기 전용 모드(readOnly="true" 또는 disabled="true")에서도 placeholder 속성으로 지정된 값을 표시할 수 있습니다.

관련 API

placeholder

setPlaceholder()

showPlaceHolderReadOnly

Secret

입력 검증 및 검증 실패 메시지 표시

• 검증 항목으로 설정한 속성에 대해 validate(); 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

  • 입력 검증 결과가 false이고 displaymessage="true"로 설정된 경우,

    • 함수 내부에 정의된 메시지가 표시됩니다.

    • invalidMessage="검증 실패 안내 메시지"까지 설정된 경우, invalidMessage 속성으로 설정한 "검증 실패 안내 메시지"가 표시됩니다.

• 검증을 수행하고 결과를 표시할 함수를 구현한 뒤, 해당 함수를 invalidMessageFunc 속성으로 설정할 경우, 해당 함수를 통해 검증을 수행하고 메시지를 표시할 수 있습니다.

SelectBox

선택 항목 설정

SelectBox 컴포넌트를 더블 클릭하여 선택 항목을 직접 입력하거나 DataList 혹은 LinkedDataList와 바인딩할 수 있습니다.

직접 입력

DataList와 바인딩

계층 구조의 선택 항목 표시하기

데이터 설정

SelectBox와 바인딩된 데이터가 아래와 같이 "col3"에 계층 정보를 포함할 경우 depthColumn="col3" 속성 설정을 통해 선택 항목들을 계층 구조로 표시할 수 있습니다.

$r_title(SelectBox가 dataList1과 바인딩된 경우의 데이터 설정 예시)
dataList1.setJSON([{
"col1" : "Asia",
"col2" : "Asia",
"col3" : "1"
}, {
"col1" : "Korea",
"col2" : "Korea",
"col3" : "2"
}, {
"col1" : "Seoul",
"col2" : "Seoul",
"col3" : "3"
}, {
"col1" : "Busan",
"col2" : "Busan",
"col3" : "3"
}
]);

선택 목록의 높이 및 너비 설정

depthColumnHeight 및 depthColumnWidth 속성 설정을 통해 계층 구조의 선택 항목들을 표시할 높이 및 너비를 설정할 수 있습니다.

상위 항목 표시

depthColumn 속성을 사용할 경우, 계층 구조의 선택 항목을 SelectBox에 표시할 수 있습니다. 이 때, depthColumnShowPath="true" 속성 설정을 사용하면 선택된 항목의 부모 목록을 모두 표시할 수 있습니다. 부모가 여러 개인 경우, depthColumnPathDelimiter 속성을 사용하여 구분자를 지정할 수 있습니다.

일부 선택 항목 숨기기

DataList와 바인딩하여 선택 항목을 표시할 경우, 바인딩된 DataList의 특정 컬럼 값을 기준으로 일부 선택 항목을 숨길 수 있습니다.

일부 선택 항목 비활성화하기

속성을 통한 설정 (enableColumn & enableColumnFalseValue)

enableColum 및 enableColumnFalseValue 속성을 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

• enableColumn : 비활성화 여부를 위해 참고할 DataList의 컬럼.

• enableColumnFalseValue : 비활성화하기 위한 조건. (비활성화를 위해 참고하는 컬럼의 데이터 값.)

아래 예제는 두 항목이 비활성화되어 표시된 경우입니다.

함수를 통한 동적 설정 (setEnableColumn())

setEnableColumn() 함수를 사용하여 선택 목록의 특정 항목을 비활성화할 수 있습니다.

$r_title(사용 예)
select1.setEnableColumn("Country", "China,Canada");
// "Country" 컬럼의 값이 "China" 혹은 "Canada"인 항목을 선택 항목 목록에서 비활성화

선택 항목 목록의 행 개수 설정

visibleRowNum 속성 및 setVisibleRowNum() 함수를 사용하여 선택 항목 목록에 표시할 행의 개수를 정적 혹은 동적으로 설정할 수 있습니다.

$r_title(정적 설정)
visibleRowNum="7"

$r_title(동적 설정)
select1.setVisibleRowNum(3);

label 및 value 표시

속성을 통한 설정

함수를 통한 동적 설정

setDisplayMode() 및 setDelimiter() 함수를 사용하면 displayMode 및 delimiter 속성을 동적으로 변경할 수 있습니다.

setDisplayMode()

$r_title(사용 예)
// displayMode 속성값을 "value delim label"로 지정. 

selectbox1.setDisplayMode("value delim label");

setDelimiter()

$r_title(사용 예)
// delimiter 속성값을 " || "로 지정. 

selectbox1.setDelimiter(" || ");

마우스 휠 스크롤링 제어

선택 목록 및 브라우저 상에서의 마우스 휠 스크롤링을 제어할 수 있습니다.

입력 검증 및 검증 실패 메시지 표시

• 검증 항목으로 설정한 속성에 대해 validate(); 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

  • 입력 검증 결과가 false이고 displaymessage="true"로 설정된 경우,

    • 함수 내부에 정의된 메시지가 표시됩니다.

    • invalidMessage="검증 실패 안내 메시지"까지 설정된 경우, invalidMessage 속성으로 설정한 "검증 실패 안내 메시지"가 표시됩니다.

• 검증을 수행하고 결과를 표시할 함수를 구현한 뒤, 해당 함수를 invalidMessageFunc 속성으로 설정할 경우, 해당 함수를 통해 검증을 수행하고 메시지를 표시할 수 있습니다.

너비 자동 조절

labelWidthAuto="true" 설정을 사용할 경우, 선택 항목 중 가장 긴 label 값에 따라 SelectBox의 너비를 자동으로 조정할 수 있습니다.

특정 키 동작 방지

keycode와 콤마(,)를 사용하여 특정 키의 동작을 막을 수 있습니다. 동작을 막으려는 키(들)의 keycode를 preventKeyList 속성값으로 정의하십시오. 사용 예는 아래와 같습니다.

$r_title(사용 예)
preventKeyList="37,38,39,40"
// 상하좌우 화살표(37=left, 38=up, 39=right, 40=down) 키의 동작을 방지.

$r_title(사용 예)
preventKeyList="13"
// 엔터(13=enter) 키의 동작을 방지.

$r_title(사용 예)
preventKeyList="all"
// 모든 키의 동작을 방지.

툴팁

선택된 항목에 대한 툴팁 표시 (tooltipDisplay)

tooltipDisplay 속성을 "true"로 설정할 경우 SelectBox에서 선택된 항목에 대한 툴팁을 표시할 수 있습니다.

선택 항목 목록 상에서 툴팁 표시 (itemTooltipDisplay)

itemTooltipDisplay 속성을 "true"로 설정할 경우, SelectBox에서 선택 항목 목록 상에서 각 선택 항목에 대한 툴팁을 표시할 수 있습니다.

선택 항목 목록 상에서 표시할 툴팁을 변환 (itemTooltipFormatter)

itemTooltipFormatter 속성값으로 툴팁을 변환할 함수 이름을 지정한 후, 해당 함수를 직접 구현하여 툴팁 텍스트를 변환할 수 있습니다. 아래는 itemTooltipFormatter="scwin.selectBoxTooltip"인 경우 해당 함수를 직접 구현한 예시입니다. 사용자 지정함수는 선택 항목의 label과 index를 파라미터로 받습니다.

$r_title(itemTooltipFormatter="scwin.selectBoxTooltip")
scwin.selectBoxTooltip = function(label, index) {
  var row = index + 1;
  return row + " row to be formatted.";
};

목록에 없는 값의 처리

setValue() 함수로 설정하는 값이 선택 항목 목록에 없는 경우, valueNotInList 및 emptyItem 속성을 사용하여 해당 값을 처리하는 방법을 설정할 수 있습니다.

(1) valueNotInList="default" emptyItem="true"

빈값을 표시.

(2) valueNotInList="default" emptyItem="false"

선택 항목 목록에 없는 값은 무시.

(3) valueNotInList="keepValue"

선택 항목 목록에 없는 값을 유지.

getValue() 함수를 통해 해당 값을 확인할 수 있으며, 새로 설정된 값의 인덱스는 "-1"임.

이벤트

onbeforeselect

onbeforeselect 이벤트는 사용자가 항목을 선택한 후 바로 발생하며, 이때 이벤트 핸들러가 함수가 true를 반환하면 새로 선택한 항목을 사용하고 false를 반환하면 이전 항목을 유지합니다.

$r_title(사용 예)
scwin.select_onbeforeselect = function(selectedIndex, index) {
    if (selectedIndex < index) {
        return true;
    } else {
        return false;
    }
};

onselected

onselected 이벤트는 마우스 클릭 혹은 Enter 키를 통해 항목을 선택할 경우 발생합니다.

AutoComplete vs. SelectBox

AutoComplete와 SelectBox는 기본적으로 동일한 기능을 제공합니다. 선택 항목을 콤보 박스에 표시하며 사용자는 한 개의 항목만 선택할 수 있습니다. 단, AutoComplete의 경우, 검색 기능을 제공합니다. 즉, 사용자가 키워드를 입력하면, 입력된 키워드를 기반으로 선택 항목을 검색하여 목록에 표시합니다.

Slider

Span

Spinner

자동 포커스 이동

autoFocus="true" 설정을 적용할 경우, 사용자가 날짜 입력 후 자동으로 포커스를 이동할 수 있습니다. dateType="date"인 경우, dateIncrementType 설정에 따라 정해진 길이만큼의 날짜값이 입력되면 nextTabID로 지정된 컴포넌트로 포커스가 이동됩니다.

관련 속성

dateType="date"

dateIncrementType

autoFocus="true"

nextTabID

날짜 및 시간 증가 단위 설정

dateType="date" 혹은 dateType="time"인 경우, Spinner는 날짜 혹은 시간을 표시합니다. 이 때 dateIncrementType 속성 설정을 통해 Spinner 상의 날짜 혹은 시간이 증가하는 단위를 설정할 수 있습니다.

dataIncrementType 속성(값 증가 단위)의 옵션 값은 아래와 같습니다.

날짜 증가 단위

• dataType="date"인 경우:

  • dataIncrementType="minute" ("분" 단위 증가)

  • dataIncrementType="hour" ("시간" 단위 증가)

  • dataIncrementType="day" ("일" 단위 증가)

  • dataIncrementType="month" ("월" 단위 증가)

  • dataIncrementType="year" ("연" 단위 증가)

시간 증가 단위

• dataType="time"인 경우:

  • dataIncrementType="second" ("초" 단위 증가)

  • dataIncrementType="minute" ("분" 단위 증가)

  • dataIncrementType="hour" ("시간" 단위 증가)

초기값 지정

initValue 속성을 사용하여 Spinner 컴포넌트의 초기값을 지정할 수 있습니다.

$r_title(사용 예)
initValue="100"

잘못된 날짜를 입력할 경우 경고창 출력 (useAlert)

dataType="date"인 경우 useAlert="true" 설정을 추가하면, 잘못된 날짜를 입력할 경우 경고창을 출력할 수 있습니다.

HTML의 <title> 태그 지원

title 속성을 이용하여 HTML의 <title> 태그 값을 정의할 수 있습니다.

TextArea

placerholder 항상 표시

showPlaceHolderOnReadOnly="true" 속성 설정을 추가하면, 읽기 전용 모드(readOnly="true") 혹은 비활성화 상태(disabled="true")에서도 placerholder 속성으로 지정된 텍스트를 표시할 수 있습니다.

TextBox

HTML 태그 지원

TextBox 컴포넌트는 tagname 속성을 "h1" "h3" "address" "code" 등과 같은 HTML 태그로 지정해서 사용할 수 있습니다.

툴팁 표시

tooltipDisplay="true" 설정을 사용하여 툴팁을 표시할 수 있습니다. tooltipShowAlways="true" 설정을 추가할 경우 데이터 길이에 상관 없이 (즉, 데이터가 화면에 모두 표시되는 경우에도) 항상 툴팁을 표시할 수 있습니다.

Trigger

Upload

파일 업로드 위치 설정

WebSquare의 서버 모듈에서 참고하는 설정(${WEBSQUARE_HOME}/config/websquare.xml)에 정의된 uploading tag를 참조하여 업로드 합니다.

최대 업로드 용량 제한

Upload 컴포넌트를 통해 업로드할 수 있는 파일 크기는 subSize속성을 지정하여 websquare.xml 파일에 서버 쪽에 업로드할 용량을 제한할 수 있습니다.

$r_title(subSize 설정 예)
<w2:upload ......
     ..... subSize="subSize1" >
</w2:upload>

$r_title(websquare.xml 설정 예)
<maxUploadSize value="10737418240">
	<subSize1 value="10"/>
</maxUploadSize>

최대 업로드 사이즈를 초과하여 서버 쪽에서 에러를 리턴할 경우websquare.xml 파일에 있는 해당 노드의 값을 반환합니다.

$r_title(파일 업로드 후 반환되는 XML 응답 (예) - ondone 이벤트가 반환)
<ret>
	<key>/Users/songmingu/Documents/w2test/upload//</key>
	<storedFileList></storedFileList>
	<localfileList></localfileList>
	<fileSizeList></fileSizeList>
	<maxUploadSize>10737418240</maxUploadSize>
	<subSize>10</subSize>
	<deniedList>WebSquare_Custom_Upload_Download.docx</deniedList>
	<deniedCodeList>102</deniedCodeList>
</ret>

파일 탐색창 열기

Upload 컴포넌트의 화살표를 클릭하면, 파일 탐색창이 열리고 업로드할 파일을 선택할 수 있습니다.

속성으로 설정하기 (clickOpenFileDialog)

clickOPenFileDialog="true" 속성 설정을 적용하면, Upload 컴포넌트의 화살표 뿐만 아니라 파일 입력 부분을 클릭해도 파일 탐색창이 표시됩니다.

함수로 열기 (clickOpenFileDialog)

openFileDialog() 함수를 이용하여 직접 파일 탐색창을 열 수도 있습니다.

$r_title(사용 예)
upload1.openFileDialog();