ការប្រើប្រាស់ CSS stylesheet នៅក្នុង Vaadin

នៅក្នុងការបង្កើតគេហទំព័រមួយ ការរចនាគឺដើរតួរយ៉ាងសំខាន់ដើម្បីឲ្យគេហទំព័រ រឺ 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 ។

៣) លទ្ធផល

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