선택용 컴포넌트

관련 컴포넌트

단일 선택 vs. 다중 선택

컴포넌트에 따라 한 개 혹은 여러 개의 항목을 선택할 수 있습니다.

단일 선택 vs. 다중 선택

단일 선택

다중 선택

  • AutoComplete

  • CheckBox

  • Radio

  • CheckComboBox

  • SelectBox

  • MultiSelect

  • Spinner


YouTube 동영상 (https://youtu.be/U--QTIHu6SQ)

선택 목록 설정

직접 입력 (ItemSet)

아래는 SelectBox의 예입니다.

  1. Palette 뷰를 클릭합니다.

  2. SelectBox 컴포넌트를 검색하여 Design 탭에 그립니다.

  3. SelectBox 컴포넌트를 더블 클릭합니다.

  4. 대화창이 나타나면 행을 추가합니다.

  5. Name과 Value를 수동으로 입력합니다. (Name이 실제 화면에 출력됩니다.)

  6. Span 속성을 통해 데이터를 표시할 열의 개수를 입력합니다.

  7. chooseOption과 chooseOptionLabel 속성을 통해 "선택하세요" 같은 선택 안내 메시지를 정의합니다.

  8. [OK] 버튼을 클릭합니다.

AutoComplete & SelectBox

YouTube 동영상 (https://youtu.be/x40RQUFAS3c)

CheckBox

YouTube 동영상 (https://youtu.be/oWlUmnfkBeA)

CheckComboBox

YouTube 동영상 (https://youtu.be/gDMHA9y-JOg)

Radio

직접 입력

YouTube 동영상 (https://youtu.be/BKklquqXTEU)

DataCollection과 바인딩 (BindItemSet)

Submission을 통해 서버로부터 수신한 데이터를 선택 대상 항목으로 표시할 수 있습니다. 아래 방법으로 동적으로 변경되는 데이터를 설정하십시오.

AutoComplete

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/BindItemSet_allOption_chooseOption_chooseOptionLabel_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/ErLyI5k1OGs)

CheckBox

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckBox/BindItemSet_CheckBox/)

YouTube 동영상 (https://youtu.be/NFAR0O2QvRI)

CheckComboBox

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/BindItemSet_allOption_chooseOption_chooseOptionLabel_CheckComboBox/)

YouTube 동영상 (https://youtu.be/-ES98SoWXIg)

MultiSelect

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/MultiSelect/BindItemSet_MultiSelect/)

YouTube 동영상 (https://youtu.be/mpAilOETc0U)

Radio

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/Radio/BindItemSet_SpanDirection_SpanCount_cols_rows_Radio.xml)

YouTube 동영상 (https://youtu.be/VzIe7dhYnCs)

SelectBox

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/BindItemSet_SelectBox.xml)

YouTube 동영상 (https://youtu.be/GlYQxaAXA2k)

아래는 SelectBox의 예입니다.

  1. 좌측 상단의 DataCollection 뷰를 클릭합니다.

  2. [Add]를 클릭합니다.

  3. [DataList 추가하기]를 선택합니다.

  4. Column Info 상자의 우측상단에 있는 버튼을 클릭하여 Column을 한 개만 정의합니다.

  5. 데이터 통신 없이 브라우저에 기본값을 표시할 경우 use data를 선택합니다.

  6. 위의 제 3단계에서 입력한 Column 정보에 따라 데이터를 입력합니다.

  7. Palette 뷰를 클릭합니다.

  8. SelectBox를 선택하여 Design 탭에 그립니다.

  9. SelectBox를 더블 클릭합니다.

  10. 하단의 ItemSet을 선택합니다.

DataCollection과 바인딩

  1. Nodeset 항목에서 위의 1 ~ 6 단계에서 만든 DataList를 선택합니다.

  2. [OK]를 클릭합니다.

그리드 형식 (GridItemSet)

AutoComplete 및 SelectBox의 경우 GridViewItemSet을 선택 대상 항목으로 설정할 수 있습니다. 선택 대상 항목은 GridView 형태로 표시됩니다.

SelectBox (예제)

  1. SelectBox를 그립니다.

  2. 바인딩할 DataCollection을 생성합니다.

  3. SelectBox를 더블 클릭합니다.

  4. 대화창이 나타나면 GridItemSet 항목을 선택합니다.

  5. DataList를 Nodeset으로 선택하고, Label(이름)과 Value(실제값)를 입력합니다. (DataCollection에 바인딩된 데이터를 사용하십시오)

  6. [Add Row]와 [Delete Row]를 사용하여 GridView 정보를 입력합니다.

  7. [OK] 버튼을 클릭합니다.

GridItemSet

표 형태의 선택 대상 항목 출력

상태 및 번호 컬럼 추가

<w2:gridViewItemset> 노드에 rowStatusVisible 및 rowNumVisible 속성을 수동으로 설정하면 행 상태 및 행 번호를 추가할 수 있습니다.

$r_title(사용 예)
<w2:gridViewItemset autoFit="allColumn" rowStatusVisible="true" rowNumVisible="true" selectedRowColor="" height="10%" visibleRowNum="" rowMouseOver="" width="80%"
nodeset="data:dataList1" value="col3" rowMouseOverColor="" label="col2" hideHeader="false">
	<w2:item ref="col1" style="" hidden="" headerStyle="" header=""></w2:item>
	<w2:item ref="col2" style="" hidden="" headerStyle="" header=""></w2:item>
	<w2:item ref="col3" style="" hidden="" headerStyle="" header=""></w2:item>
</w2:gridViewItemset>

행 상태 및 행 번호 컬럼 표시 (rowStatusVisible="true" rowNumVisible="true" 설정 사용)

선택 항목 표시 방법 설정

아래의 경우 displayMode 속성을 사용하여 선택 항목 표시 방법을 설정할 수 있습니다.

displayMode="value"

설명

inputType="select" 혹은 inputType="autocomplete" 컬럼의 선택 목록에 value 값도 표시.

옵션 값

displayMode의 옵션 값

  • label (기본 값): "label"

  • value delilm label: "value + 구분자 + label"

  • label delim value: "label + 구분자 + value"

  • value: "value"

비고

구분자는 delimiter 속성에 지정한 값을 사용.

AutoComplete

속성을 통한 설정 (displayMode & delimiter)

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/displayMode_delimiter_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/lM0VvDGoYHI)

함수를 통한 동적 설정

setDisplayMode()

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

autoComplete1.setDisplayMode("value delim label");

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/setDisplayMode_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/S0G_wQvhRNI)

setDelimiter()

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

autoComplete1.setDelimiter(" || ");

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/setDelimiter_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/BT4_i12AfvQ)

CheckComboBox

속성을 통한 설정 (displayMode & delimiter)

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/displayMode_delimiter_CheckComboBox.xml)

YouTube 동영상 (https://youtu.be/6ft57Ht88Ok)

함수를 통한 동적 설정

setDisplayMode()

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

checkcombobox1.setDisplayMode("value delim label");

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/setDisplayMode_CheckComboBox.xml)

YouTube 동영상 (https://youtu.be/0ZQBY4xtgB8)

setDelimiter()

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

checkcombobox1.setDelimiter(" || ");

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/setDelimiter_CheckComboBox.xml)

YouTube 동영상 (https://youtu.be/OX2SjjkP-2s)

SelectBox

속성을 통한 설정 (displayMode & delimiter)

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/displayMode_delimiter_SelectBox.xml)

YouTube 동영상 (https://youtu.be/o8HblbrCE7Q)

함수를 통한 동적 설정

setDisplayMode()

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

selectbox1.setDisplayMode("value delim label");

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/setDisplayMode_SelectBox.xml)

YouTube 동영상 (https://youtu.be/5pOQlObZNfU)

setDelimiter()

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

selectbox1.setDelimiter(" || ");

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/setDelimiter_SelectBox.xml)

YouTube 동영상 (https://youtu.be/SlqpP7L47ig)

일부 선택 항목 숨기기

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

일부 선택 항목 숨기기

항목

설명

관련 속성

  • visibleColumn

  • visibleColumnFalseValue

관련 함수

  • setVisibleColumn();

AutoComplete

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/visibleColumn_visibleColumnFalseValue_setVisibleColumn_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/tw5OYIVIRHQ)

CheckBox

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckBox/visibleColumn_visibleColumnFalseValue_setVisibleColumn_CheckBox.xml)

YouTube 동영상 (https://youtu.be/hhX3_IvDYow)

CheckComboBox

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/visibleColumn_visibleColumnFalseValue_setVisibleColumn_CheckComboBox.xml)

YouTube 동영상 (https://youtu.be/ldOW5p20Bn8)

Radio

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/Radio/visibleColumn_visibleColumnFalseValue_setVisibleColumn_Radio.xml)

YouTube 가이드 (https://youtu.be/Vir5iv1uFX8)

SelectBox

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/visibleColumn_visibleColumnFalseValue_setVisibleColumn_SelectBox.xml)

YouTube 동영상 (https://youtu.be/by4_ET5kX0A)

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

AutoComplete

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/enableColumn_enableColumnFalseValue_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/7jwLEOi3GY4)

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/AutoComplete/setEnableColumn_AutoComplete.xml)

YouTube 동영상 (https://youtu.be/XjwoYsUlGLs)

CheckBox

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckBox/enableColumn_enableColumnFalseValue_CheckBox.xml)

YouTube 동영상 (https://youtu.be/5d-Jtl7wl_4)

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckBox/setEnableColumn_CheckBox.xml)

YouTube 동영상 (https://youtu.be/ydxGwxMrdzw)

CheckComboBox

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/enableColumn_enableColumnFalseValue_CheckComboBox.xml)

YouTube 동영상 (https://youtu.be/WGoQwiYj9ZM)

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/CheckComboBox/setEnableColumn_CheckComboBox.xml)

YouTube 동영상 (https://youtu.be/1WYG-PFPrWA)

Radio

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/Radio/enableColumn_enableColumnFalseValue_Radio.xml)

YouTube 동영상 (https://youtu.be/zslrkyb_-gk)

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/Radio/setEnableColumn_Radio.xml)

YouTube 동영상 (https://youtu.be/LQhmpFKq9tA)

SelectBox

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/enableColumn_enableColumnFalseValue_SelectBox.xml)

YouTube 동영상 (https://youtu.be/zZMB4xD6anc)

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

예제 파일


인터넷에서 다운로드 혹은

WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기

(/SelectBox/setEnableColumn_SelectBox.xml)

YouTube 동영상 (https://youtu.be/xkCOJdnZXVo)

스크롤링 제어

아래 컴포넌트의 경우 스크롤링 제어가 가능합니다. 즉, 사용자가 선택 목록 상에서 마우스 휠을 움직일 때의 동작을 지정할 수 있습니다.

관련 속성은 아래와 같습니다.

wheelStop (GridViewItemSet 옵션)

설명

선택 목록으로 바인딩된 GridViewItemSet의 최상단 혹은 최하단으로 휠 스크롤링 후, 사용자가 계속 마우스를 올리거나 내려도 화면이 움직이지 않는 기능.

값

  • true: 최상단/최하단으로 이동하면, 마우스 휠이 더 이상 작동하지 않음.

  • false (기본 값): 최상단/최하단으로 이동 후, 화면 상단/하단으로 계속 이동.

wheelStop 옵션은 Studio에서 UI로 제공되지 않습니다. 아래와 같이 직접 스크립트에 지정하십시오.

$r_title(wheelStop 옵션 설정 예)
<w2:autoComplete  ... >
	<w2:choices>
		<w2:gridViewItemset .... wheelStop="true" ... >
			<w2:item ... ></w2:item>
		</w2:gridViewItemset>
	</w2:choices>
</w2:autoComplete>
preventWheelEvent

값

  • true: 선택 목록 상에서 휠 스크롤을 방지. (선택 목록 상에서 마우스 휠을 움직여도 선택 목록이 변경되지 않음.)

  • false (기본 값): 선택 목록 상에서 휠 스크롤을 방지하지 않고 허용. (선택 목록 상에서 마우스 휠을 움직일 경우 선택을 변경할 수 있음 변경됨.)

YouTube 동영상 (https://youtu.be/Fk_COS9_dOk)

YouTube 동영상 (https://youtu.be/KXhjWiPzx-k)