នៅក្នុងមេរៀនមុន យើងបានសិក្សារួចមកនិងបានយល់អំពី Server Side Application នៅក្នុង Vaadin រួច មកហើយដែលបានបង្ហាញអំពីរបៀបភ្ជាប់ (config) និងដំនើរការរបស់ Server ជាមួយនឹង Project នៃ Vaadin ។ ថ្ងៃនេះ TechFree សូមបង្ហាញអំពីការបង្កើតផ្ទាំង UI (User Interface) នៅក្នុង Vaadin វិញម្ដង ។UI គឺជាផ្ទាំងមួយដែលត្រូវបានធ្វើការរចនាសំរាប់ផ្ទុកពត៌មានទៅតាមលំដាប់លំដោយនៃធាតុដែលអាច ឲ្យអ្នកប្រើប្រាស់អាចមើលយល់ នូវអ្វីដែលបានបង្ហាញ ។
១) ការបង្កើត UI
១.១) ការបញ្ចូលធាតុ
នៅក្នុង Vaadin UI មានធាតុជាច្រើនដូចជា Label, Textbox, ComboBox, Button, Radio Button, Image ។ល។ ហើយដើម្បីប្រើប្រាស់នូវធាតុទាំងអស់នេះបាន គឺនៅក្នុង IDE នីមួយៗត្រូវហៅ រឺបញ្ចូលដូចខាងក្រោម ៖
រូបខាងលើនេះគ្រាន់តែបង្ហាញអំពីការបញ្ចូលធាតុមួយចំនួននៃ Vaadin UI ប៉ុណ្ណោះ ។
១.២) ការសរសេរកូដ
បន្ទាប់ពីការបញ្ចូលធាតុខាងលើរួចមក យើងត្រូវធ្វើការសរសេរកូដដូចខាងក្រោម ៖
- បន្ទាត់ទី ២៧ គឺជាការប្រើប្រាស់នៃ VerticalLayout ដែលយើងបានបញ្ចូល
- បន្ទាត់ទី ២៨ គឺជាការប្រើប្រាស់នៃ Label ដែលយើងបានបញ្ចូល
- បន្ទាត់ទី ២៩ គឺជាការប្រើប្រាស់នៃ TextBox ដែលយើងបានបញ្ចូល
- បន្ទាត់ទី ៣០ គឺជាការប្រើប្រាស់នៃ Button ដែលយើងបានបញ្ចូល
ដើម្បីបង្ហាញនូវអ្វីដែលយើងបានសរសេរនោះគឺយើងត្រូវប្រើប្រាស់ Method មួយឈ្មោះ setContent(layout);
២) លទ្ធផលនៃកូដ
ក្រោយពេល យើងធ្វើការបញ្ចូល និងសរសេរកូដខាងលើរួចមកនោះ យើងនឹងទទួលបានលទ្ធផលដូចខាង ក្រោម ៖
