ការបង្កើត UI ជាមួយនឹង Vaadin framework

នៅក្នុងមេរៀនមុន យើងបានសិក្សារួចមកនិងបានយល់អំពី 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 នីមួយៗត្រូវហៅ រឺបញ្ចូលដូចខាងក្រោម ៖

vaadinui

រូបខាងលើនេះគ្រាន់តែបង្ហាញអំពីការបញ្ចូលធាតុមួយចំនួននៃ Vaadin UI ប៉ុណ្ណោះ ។

១.២) ការសរសេរកូដ

បន្ទាប់ពីការបញ្ចូលធាតុខាងលើរួចមក យើងត្រូវធ្វើការសរសេរកូដដូចខាងក្រោម ៖

vaadincodeui

  • បន្ទាត់ទី ២៧ គឺជាការប្រើប្រាស់នៃ VerticalLayout ដែលយើងបានបញ្ចូល
  • បន្ទាត់ទី ២៨ គឺជាការប្រើប្រាស់នៃ Label ដែលយើងបានបញ្ចូល
  • បន្ទាត់ទី ២៩ គឺជាការប្រើប្រាស់នៃ TextBox ដែលយើងបានបញ្ចូល
  • បន្ទាត់ទី ៣០ គឺជាការប្រើប្រាស់នៃ Button ដែលយើងបានបញ្ចូល

ដើម្បីបង្ហាញនូវអ្វីដែលយើងបានសរសេរនោះគឺយើងត្រូវប្រើប្រាស់ Method មួយឈ្មោះ  setContent(layout);

២) លទ្ធផលនៃកូដ

ក្រោយពេល យើងធ្វើការបញ្ចូល និងសរសេរកូដខាងលើរួចមកនោះ យើងនឹងទទួលបានលទ្ធផលដូចខាង ក្រោម ៖

vaadinui2