ការបង្កើត Responsive Layout ជាមួយនឹង Vaadin
នៅក្នុងមេរៀនមុន យើងបានសិក្សារួចមកហើយនូវការប្រើប្រាស់ Cascading Style Sheet (CSS)ដែលត្រូវ បានប្រើសំរាប់រចនាគេហទំព័រ រួមជាមួយនឹង Vaadin ។ ចំនែកឯនៅក្នុងមេរៀននេះ TechFree នឹងលើកយក នូវការប្រើប្រាស់ CSS ក្នុងការបង្កើត Layout ដដែល ប៉ុន្តែ យើងបង្កើតវាឲ្យមានទម្រង់ទៅតាមរូបរាងនៃ ឧបករណ៏ រឺហៅថា Responsive Layout ។
១) ការសរសេរកូដ
– MyUI.java
MyUI.java គឺជាកន្លែងដែលយើងត្រូវបង្ហាញនូវអ្វីដែល យើងបានសរសេរ ។ សូមមើលកូដខាងក្រោម ៖
- នៅត្រង់បន្ទាត់ទី ១៨ គឺជាឈ្មោះ Theme ដែលយើងប្រើគឺ “mytheme”
– mytheme.scss
នៅក្នុង mytheme.scss គឺជាកន្លែងដែល យើងត្រូវសរសេរ style ដើម្បីបង្ហាញនូវ style ដែលយើងចង់បាន នៅលើ MyUI.java ។ សូមមើលកូដខាងក្រោម៖
២) លទ្ធផល
បន្ទាប់ពីសរសេរកូដខាងលើរួចរាល់ហើយមក យើងនឹងទទួលបាននូវលទ្ធផលដូចខាងក្រោម ៖
– Full or Big Screen
– Small Screen
