Vaadin-combo-box: ๋ฐ์ดํ„ฐ ์ œ๊ณต์ž ์ง€์› / ์ง€์—ฐ ๋กœ๋”ฉ

์— ๋งŒ๋“  2018๋…„ 05์›” 17์ผ  ยท  14์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vaadin/vaadin-combo-box

Vaadin ์›น ์‚ฌ์ดํŠธ์˜ ๊ตฌ์„ฑ ์š”์†Œ ํŽ˜์ด์ง€ ๋Š” ์ฒซ ๋ฒˆ์งธ vaadin-combo-box ๊ธฐ๋Šฅ์œผ๋กœ ์ง€์—ฐ ๋กœ๋”ฉ(๋ฐ ์›๊ฒฉ ํ•„ํ„ฐ๋ง) ์ง€์›์„ ์–ธ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.

screen shot 2018-05-17 at 17 11 42

๊ทธ๋Ÿฌ๋‚˜ ์ ์ ˆํ•œ ๊ธฐ๋Šฅ ์ด์ƒ์€ ํ•„ํ„ฐ๋ฅผ ๋…ธ์ถœํ•˜์—ฌ ํ•ญ๋ชฉ์„ ๋Œ€์ฒดํ•  ๋‹ค๋ฅธ ํ•ญ๋ชฉ์„ ํ—ˆ์šฉํ•˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค. ๋ฌดํ•œ ์Šคํฌ๋กค์— ๋Œ€ํ•œ ํŽ˜์ด์ง€ ๋งค๊น€ ์ง€์›( vaadin-grid ์—์„œ์™€ ๊ฐ™์ด )์ด ์žˆ๋Š” ์ ์ ˆํ•œ ๋ฐ์ดํ„ฐ ๊ณต๊ธ‰์ž๊ฐ€ ์„ ํ˜ธ๋ฉ๋‹ˆ๋‹ค.

๋…ธํŠธ

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์€ ์˜ค๋ž˜๋œ Vaadin ์‚ฌ์šฉ์ž๊ฐ€ ๊ฑฐ๊ธฐ์— ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋Š” ์ผ์ข…์˜ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ์˜ ์ฝค๋ณด ์ƒ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋‚˜ ๋„คํŠธ์›Œํฌ๋ฅผ ์งˆ์‹์‹œํ‚ค์ง€ ์•Š๊ณ  ๋งŽ์€ ์˜ต์…˜์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ธฐ ์ „์— Vaadin 10์ด ์ค€๋น„๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด ์ž‘์—…์„ ์™„๋ฃŒํ•˜์‹ญ์‹œ์˜ค!

๋ชจ๋“  14 ๋Œ“๊ธ€

์ด์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ์›น ๊ตฌ์„ฑ ์š”์†Œ ์ž์ฒด์— ๋Œ€ํ•œ ๋†’์€ ์šฐ์„  ์ˆœ์œ„๋Š” ์•„๋‹ˆ์ง€๋งŒ FW8์—์„œ Flow๋กœ ์•ฑ์„ ์ด์‹ํ•˜๋ ค๋Š” Java ๊ฐœ๋ฐœ์ž์˜ ๊ด€์ ์—์„œ ๋ณผ ๋•Œ ComboBox ๋’ค์— ์—„์ฒญ๋‚œ ํ•ญ๋ชฉ ํ’€์ด ์žˆ๊ณ  ๊ฒŒ์œผ๋ฅธ ๋ฐ์ดํ„ฐ ๊ณต๊ธ‰์ž์˜ ์‚ฌ์šฉ์€ ํ•„์ˆ˜์ž…๋‹ˆ๋‹ค.

์‚ฌ์‹ค, ์ฝค๋ณด ์ƒ์ž์—๋Š” ํ˜„์žฌ ์ ์ ˆํ•œ ์ง€์—ฐ ๋กœ๋”ฉ API๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๊ฐœ์„ ์„ ์œ„ํ•œ ์ข‹์€ ํ›„๋ณด์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๋“œ์˜ dataProvider API์™€ ์ •๋ ฌ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์˜ค๋ž˜๋œ Vaadin ์‚ฌ์šฉ์ž๊ฐ€ ๊ฑฐ๊ธฐ์— ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๋Š” ์ผ์ข…์˜ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ์˜ ์ฝค๋ณด ์ƒ์ž๊ฐ€ ๋ธŒ๋ผ์šฐ์ €๋‚˜ ๋„คํŠธ์›Œํฌ๋ฅผ ์งˆ์‹์‹œํ‚ค์ง€ ์•Š๊ณ  ๋งŽ์€ ์˜ต์…˜์„ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๊ธฐ ์ „์— Vaadin 10์ด ์ค€๋น„๋˜์—ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ด ์ž‘์—…์„ ์™„๋ฃŒํ•˜์‹ญ์‹œ์˜ค!

์•ˆ๋…•,
@mstahv ์— ์ „์ ์œผ๋กœ ๋™์˜ํ•ฉ๋‹ˆ๋‹ค. V8๋กœ 3๊ฐœ์˜ ํ”„๋กœ๋•์…˜ ์•ฑ์„ ๋งŒ๋“  ํ›„ 2๊ฐœ์›” ์ „์— ์ƒˆ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜์—ฌ V10์„ ์‚ฌ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๊ทœ๋ชจ ๋ฐ์ดํ„ฐ ์„ธํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์€ Vaadin์„ ์‚ฌ์šฉํ•˜๊ณ  ๊ตฌ๋…๋ฃŒ๋ฅผ ์ง€๋ถˆํ•œ ์ฃผ์š” ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์˜€์Šต๋‹ˆ๋‹ค. ์†”์งํžˆ ์ด ๊ธฐ๋Šฅ์ด ์—†๋Š” ์ค„๋„ ๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. ์ด์ œ ์ž๋™ ์ œ์•ˆ์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•˜๊ธฐ ์œ„ํ•ด ์•„๋ž˜์— Grid๊ฐ€ ์žˆ๋Š” TextField๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ •๋ง ์ด์ƒํ•ด ๋ณด์ž…๋‹ˆ๋‹ค.

์ด ๊ธฐ๋Šฅ๊ณผ #88 ๋ชจ๋‘ ๊ฐ€์žฅ ๋งŽ์ด ์š”์ฒญ๋œ ๊ธฐ๋Šฅ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํŒ€๊ณผ์˜ ๋‹ค์–‘ํ•œ ํ† ๋ก ์„ ํ†ตํ•ด ์ƒˆ ๊ธฐ๋Šฅ์„ ๋„์ž…ํ•˜๊ธฐ ์ „์— ๊ตฌ์„ฑ ์š”์†Œ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜๋ ค๋Š” ์˜ํ–ฅ์ด ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ๋™๋ฃŒ ๊ธฐ์—ฌ์ž๋“ค์„ ๋†€๋ผ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ชจํ˜ธํ•œ ๋ผ์ธ์ด ์žˆ์Šต๋‹ˆ๋‹ค ๐Ÿ˜ƒ

ํŒ€์ด ์ด ๊ตฌ์„ฑ ์š”์†Œ์˜ ํ–ฅํ›„ ๋ฐœ์ „์— ๋Œ€ํ•ด ๋ฐํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ํ˜„์žฌ ์ฝ”๋“œ ๋ฒ ์ด์Šค์— ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๊นŒ, ์•„๋‹ˆ๋ฉด ๊ทธ ์ด์ „์— ๊ฐœ์„ ์ด ์ด๋ฃจ์–ด์ง€๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

@tomivirkki ,

API์—๋Š” ๋งŽ์€ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์—†์„ ๊ฒƒ์ด๋ฏ€๋กœ ๊ทธ๋Ÿฌํ•œ ๊ด€์ ์—์„œ ํ•ฉ๋ฆฌ์ ์ด๋ผ๋ฉด ๋จผ์ € ๋งŽ์€ ์š”์ฒญ์„ ๋ฐ›์€ ๊ธฐ๋Šฅ์„ ์ถœ์‹œํ•œ ๋‹ค์Œ ์žฌ์ž‘์„ฑ ์ž‘์—…์„ ์‹œ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ํ˜„์žฌ ์†Œ์Šค ์ฝ”๋“œ์— ์ด ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์–ผ๋งˆ๋‚˜ ์‰ฌ์šด ์ผ์ธ์ง€์— ๋Œ€ํ•œ ์—ฐ๊ตฌ๋ฅผ ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ์ƒ์˜ ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ๋Š” ๊ธฐ์กด ์†Œ์Šค์— ๋Œ€ํ•œ ๋” ํฐ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•˜์ง€ ์•Š์ง€๋งŒ ๋Œ€๋ถ€๋ถ„์€ ๋ฏน์Šค์ธ์œผ๋กœ ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค( vaadin-grid์˜ ๊ฒฝ์šฐ ์™€ ๊ฐ™์ด).

@heruan ๋ฐ @mstahv ๋ฅผ ํ™•์ธํ•˜๊ธฐ ์œ„ํ•ด <vaadin-combo-box> ์˜ filteredItems API๋ฅผ ์•Œ๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ? ๊ธฐ๋ณธ ์ œ๊ณต ํ•„ํ„ฐ๋ง์„ ๋ฌด์‹œํ•˜๋ฉด์„œ ์ฝค๋ณด ์ƒ์ž ๋“œ๋กญ๋‹ค์šด์— ์‚ฌ์šฉ์ž ์ง€์ • ์˜ต์…˜์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Google์˜ ๊ฒ€์ƒ‰ ํ•„๋“œ์™€ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‹น์‹ ์€ ๊ทธ๊ฒƒ์— ๋ญ”๊ฐ€๋ฅผ ์ž…๋ ฅํ•˜๊ณ  ํ•„๋“œ ์•„๋ž˜์— ๊ด€๋ จ ์ œ์•ˆ ๋ชฉ๋ก์„ ์–ป์„. <vaadin-combo-box> ๊ฒฝ์šฐ ํ›จ์”ฌ ๋” ๋งŽ์€ ์˜ต์…˜์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค( filteredItems ๋ฐฐ์—ด).

์ „์šฉ ์ง€์—ฐ ๋ฐ์ดํ„ฐ ๊ณต๊ธ‰์ž API๊ฐ€ ํ•„์š”ํ•˜๊ณ  filteredItems API๋กœ ๋‹ค๋ฃฐ ์ˆ˜ ์—†๋Š” ๊ด€๋ จ ์‚ฌ์šฉ ์‚ฌ๋ก€๊ฐ€ ์žˆ์Šต๋‹ˆ๊นŒ?

์ €๋Š” Flow ํŒ€์ด ์›น ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•ด ๋จผ์ € ํ•„์š”ํ•˜๋‹ค๊ณ  ๋งํ–ˆ์„ ๋•Œ๋งŒ ์—ฌ๊ธฐ์— ์™”์Šต๋‹ˆ๋‹ค. ;-) ํฐ ์ง‘ํ•ฉ์—์„œ ์‚ฌ๋žŒ์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ์˜ˆ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋„ˆ๋ฌด ์ปค์„œ ํ•œ ๋ฒˆ์— ๋ชจ๋‘ ๋ธŒ๋ผ์šฐ์ €๋กœ ๋ณด๋‚ด๋Š” ๊ฒƒ์€ ์˜๋ฏธ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

@tomivirkki , Matti๊ฐ€ ์„ค๋ช…ํ•˜๋Š” ์‚ฌ์šฉ ์‚ฌ๋ก€๋Š” ๊ตฌํ˜„ํ•˜๊ธฐ ์–ด๋ ค์šธ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์„ ํƒํ•œ ํ•ญ๋ชฉ์˜ ID/์ธ๋ฑ์Šค๋ฅผ ์–ด๋”˜๊ฐ€์— ์œ ์ง€ํ•ด์•ผ ํ•˜๋ฉฐ ์‚ฌ์šฉ์ž๊ฐ€ ์ฝค๋ณด ์ƒ์ž ์—ด๊ธฐ๋ฅผ ํด๋ฆญํ•  ๋•Œ ์˜ฌ๋ฐ”๋ฅธ ํ•ญ๋ชฉ ํŽ˜์ด์ง€(์„ ํƒํ•œ ํ•ญ๋ชฉ ํฌํ•จ)๋ฅผ ๊ฐ€์ ธ์™€์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋•Œ ์ฝค๋ณด ์ƒ์ž ๋“œ๋กญ๋‹ค์šด์— ์Šคํฌ๋กค ์œ„์น˜๊ฐ€ ํ‘œ์‹œ๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋ฅด๊ฒŒ.

๋ถ„๋ช…ํžˆ ํ•˜์ž๋ฉด ์ฝค๋ณด ์ƒ์ž๋Š” ์ž๋™ ์™„์„ฑ๊ณผ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

@tomivirkki ๋กœ๋“œ๋œ ํ•ญ๋ชฉ ์ˆ˜๋ฅผ ์ œํ•œํ•  ์ˆ˜ ์žˆ๋Š” ํ•„ํ„ฐ๋ง ๊ธฐ๋Šฅ์„ ์•Œ๊ณ  ์žˆ์ง€๋งŒ ํ•„ํ„ฐ๊ฐ€ ๋งŽ์€ ํ•ญ๋ชฉ์„ ๋ฐ˜ํ™˜ํ•˜๋ฏ€๋กœ ๋ฐ์ดํ„ฐ ์ „์†ก์ด ์—ฌ์ „ํžˆ ๋ฌธ์ œ์ธ ๊ฒฝ์šฐ์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋“œ๋กญ๋‹ค์šด์„ ์Šคํฌ๋กคํ•˜๋ฉด <iron-list> ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ํ•ญ๋ชฉ์˜ ํŽ˜์ด์ง€๊ฐ€ ๋งค๊ฒจ์ง‘๋‹ˆ๋‹ค.

๋‚ด ๊ฒฝํ—˜์— ๋”ฐ๋ฅด๋ฉด ์ผ๋ถ€ ์‚ฌ์šฉ์ž๋Š” ์ฝค๋ณด ์ƒ์ž๋ฅผ ์Šคํฌ๋กคํ•˜์—ฌ ์•„๋ฌด ๊ฒƒ๋„ ์ž…๋ ฅํ•˜์ง€ ์•Š๊ณ  ์›ํ•˜๋Š” ํ•ญ๋ชฉ์„ ์ฐพ์„ ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๋‹ค.

์•ˆ๋…•,
V11 Java์—์„œ ์ด ๊ธฐ๋Šฅ์„ ํ…Œ์ŠคํŠธํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๋˜๋Š” V11 Java์—์„œ ์–ธ์ œ bi๋ฅผ ๊ธฐ๋Œ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

@maticpetek Java ๋ฒ„์ „์˜ ์ง„ํ–‰ ์ƒํ™ฉ์€ vaadin/vaadin-combo-box-flow#131์—์„œ ์ถ”์ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

11์›” ์ดˆ์— ๋ฒ ํƒ€ ๋‹จ๊ณ„์— ๋“ค์–ด๊ฐˆ V12์— ํฌํ•จ๋  ์ˆ˜ ์žˆ๋„๋ก ๋ช‡ ์ฃผ ์•ˆ์— 4.2.0 ์•ˆ์ • ๋ฒ„์ „์„ ์ถœ์‹œํ•  ์ˆ˜ ์žˆ๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰