នៅក្នុងការបង្កើតគេហទំព័រមួយ ការរចនាគឺដើរតួរយ៉ាងសំខាន់ដើម្បីឲ្យគេហទំព័រ រឺ System មួយកាន់តែមានភាពទាក់ទាញ ក្នុងការប្រើប្រាស់ ។ នៅក្នុងមេរៀននេះ TechFree សូមបង្ហាញអំពីការប្រើប្រាស់ Cascading StyleSheet (CSS) ជាមួយនឹង Vaadin Framework ដែលកាលកន្លងមកយើងបានសិក្សាតែលើ Vaadin Components , Server Side Application ។ល។
នៅក្នុង Vaadin យើងអាចរចនា layout បាន ២ របៀប គឺប្រើប្រាស់ Class ដែលជារបស់ Vaadin ផ្ទាល់ និង ការប្រើប្រាស់ Custom Layout រឺ ការបង្កើត layout ដោយខ្លួនយើងផ្ទាល់ ។
១) ការរៀបចំ Folder និង File
នៅពេលបង្កើត Project យើងនឹងឃើញ folder ដែលជាកន្លែងដាក់នូវ Themes សំរាប់យើងធើ្វការប្រើប្រាស់ និង កែប្រែ Style ។
សូមមើល រូបភាពខាងក្រោម ៖
នៅត្រង់ Folder layouts គឺជាកន្លែងដេលយើងបង្កើត Layout ផ្ទាល់ខ្លួន រឺ សំរាប់ Customize Layout ។ ចំនែកឯ ត្រង់ mytheme.scss គឺជាកន្លែងដែលយើងប្រើប្រាស់ការកែប្រែ Style ជាមួយនឹង ដែលមាននៅក្នុង ផ្ទាល់តែម្ដង ។
២) ការសរសេរកូដ
២.១) MyUI.java
នៅក្នុង MyUI.java យើងនឹងឃើញ @Theme(“mytheme”) ដែលបញ្ជាក់ថា យើងប្រើប្រាស់ Theme ដែលមានឈ្មោះថា mytheme ។
- នៅត្រង់បន្ទាត់ទី ៦០ គឺជាកន្លែងដែល យើងប្រើប្រាស់ Layout ដែលយកពី layouttest.html ។
២.២) layouttest.html
នៅក្នុង File មួយនេះគឺជា File មួយដែលយើងធ្វើការបង្កើត layout ដោយខ្លួនឯង ។ សូមមើលកូដខាងក្រោម ៖
២.៣) style.scss
នៅក្នុង file នេះគឺជាកន្លែងដែល យើងត្រូវធើ្វការរចនាដោយប្រើ CSS ដើម្បីរចនានៅលើ Layout ដែលយើងបានបង្កើត ។ សូមមើលកូដខាងក្រោម ៖
២.៤) mytheme.scss
នៅក្នុង file នេះគឺកន្លែងដែល យើងធ្វើការដាក់ CSS ទៅលើ Vaadin Layout រឺ ជាកន្លែងដែល យើង Customize CSS ទៅលើ Vaadin Layout ។ សូមមើលកូដខាងក្រោម ៖
**** ចំនាំ ៖ រាល់ Class ដែលធើ្វការ Customize ខាងលើគឺបានពីការ Inspect នៅលើ Browser ។
៣) លទ្ធផល
ក្រោយពីការបញ្ចប់ការសរសេរកូដខាងលើនេះមក យើងនឹងទទួលបានលទ្ធផលដូចខាងក្រោម ៖
