Day 15 CSS (Part 3)

ပြီးခဲ့တဲ့ အခေါက်က CSS ကို သုံးပြီး Layout သတ်မှတ်ပုံ အကြောင်းအား ဖော်ပြခဲ့ပါသည်။ Layout Component များ၊ Controls Component များ ၏ အကျယ်၊ အမြင့်၊ Padding နှင့် Spacing များအား CSS ဖြင့် မည်သို့ သတ်မှတ်ရမည်ဆိုသည်ကို လေ့လာခဲ့ပါသည်။ ယခု တခေါက်တွင်လည်း အရောင်နှင့် Effectများ အား CSS ဖြင့် မည်သို့သတ်မှတ်ရမည် ဆိုသည်ကို ဆက်လက် ဖေါ်ပြသွားပါဦးမည်။

Background Color

Container Component များ၏ Background Color အားသတ်မှတ်ရာတွင် -fx-background-color Attribute အား အသုံးပြုရပါသည်။ ယခင် အသုံးပြုခဲ့သော နမူနာ၏ Sign Up Form ၏  heading နှင့် body class တို့၏ background color များအား ပြောင်းကြည့်ပါမည်။

Color နှင့် ပတ်သက်သော သတ်မှတ်ချက်များကို ယခင်အသုံးပြုခဲ့သော layout.css တွင် ဖြည့်စွက် ရေးသား အသုံးပြုနိုင်ပါသည်။ သို့ရာတွင် ယခုနမူနာ၌ အရောင်အတွက် css အား color.css ဟု file အသစ်တစ်ခု အား ရေးသား ၍ အသုံးပြုပါမည်။ ဤကဲ့သို့ color နှင့် layout အား သီးခြားစီ ရေးသားအသုံးပြုခြင်းအားဖြင့် Theme များအား လိုအပ်သလို ပြောင်းလဲအသုံးပြုနိုင်မည် ဖြစ်ပါသည်။

ယခင်နမူနာတွင် ဖေါ်ပြခဲ့သကဲ့သို့ပင် color.css file အသစ်တစ်ခုအား Singup.fxml တည်ရှိသည့် Package အောက်တွင် တည်ဆောက်ပါမည်။ ပြီးပါက Root Element ဖြစ်သော VBox အား Click လုပ် ရွေးချယ်၍ layout.css ၏ ဘေးရှိ အပေါင်လက္ခဏာ (+) အား Click လုပ်၍ ဖြည့်စွက် အသုံးပြုမည့် color.css အား အောက်ပါအတိုင်းရွေးချယ်ပါမည်။

ပြီးပါက ၎င်း ဖိုင်လ် အတွင်းတွင် အောက်ပါအတိုင်း ကုဒ်များအား ဖြည့်စွက်ပါမည်။

.heading {
 -fx-background-color: #8e44ad; 
}

.body {
 -fx-background-color: #3498db;
}

SceneBuilder အားပြန်ကြည့်သော အခါ အောက်ပါအတိုင်းပြောင်းလဲသွားသည်ကို တွေ့ရပါမည်။

ပြီးပါကအောက်ပါကုဒ်များ အားဖြည့်စွက်၍ Button နှင့် Input များ၏ နောက်ခံအရောင်များ အား ပြောင်းလဲပါမည်။

.form-group TextField, .form-group PasswordField {
 -fx-background-color: #2980b9;
}

.btn-group Button {
 -fx-background-color: #9b59b6;
}

HTML တွင် အသုံးပြုသော CSS ကဲ့သို့ပင် Form Group ၏ အောက်ရှိ TextField နှင့် PasswordField များ၏ Theme အား ပြောင်လဲလိုပါက .form-group TextField, .form-group PasswordField ဟု ရေးသားရပါသည်။

Text Color

တဖန် Lable နှင် Text တို့၏ အရောင်အား ပြောင်းလဲရန် အောက်ပါ ကုဒ်များအား color.css အတွင်း ဖြည့်စွက်ပါမည်။

.btn-group Button {
 -fx-background-color: #9b59b6;
 -fx-text-fill: #ecf0f1;
}

.heading Text, .body Text, .heading Label, .body Label {
 -fx-fill: #ecf0f1;
 -fx-text-fill: #ecf0f1;
}

JavaFX တွင် Text Component နှင့် အခြားသော Component များ၏ ရေးသားပုံခြင်းမတူညီပါ။ Text များအတွက်ဆိုပါက -fx-fill အား အသုံးပြု၍ အခြားသော Component များအား -fx-text-fill ဟု သတ်မှတ်ရေးသားရပါသည်။

Psudo Class Hover

Button များအား Mouse Over လုပ်သောအခါမျိုးတွင် နောက်ခံအရောင်များအား ပြောင်လဲလိုပါက Psudo Class ဖြစ်သော :hover အား အသုံးပြု ရေးသားရပါသည်။ အောက်ပါကုဒ်များအား color.css အတွင်း ဖြည့်စွက် ရေးသားပါမည်။

.btn-group Button:hover {
 -fx-background-color: #2c3e50;
 -fx-text-fill: #ecf0f1;
}

SceneBuilder ၏ preview menu ဖြင့် SingUp Form အား ဖွင်ကြည့်သော အခါ အောက်ပါအတိုင်း Button အပေါ Mouse Over လုပ်ကြည့်သော အခါ Style ပြောင်းလဲပေးနိုင်သည်ကို တွေ့ရပါသည်။

Adding Effect

Java FX တွင် CSS နှင် Effect အား ရေသားနိုင်သည်မှာ drop shadow နှင့် inner shadow တို့ဖြစ်ကြပါသည်။  -fx-effect Attribute နှင့် Component များ၏ Effect များအား သတ်မှတ်နိုင်ပါသည်။
ဦးစွာ အောက်ပါကုဒ်များအား color.css တွင်ဖြည့်စွက်ပြီး Heading Text ၏ effect အား ပြုပြင် ရေးသား ကြည့်ပါမည်။

.heading Label {
 -fx-effect: dropshadow( three-pass-box , #2c3e50 , 2,2,2,1 );
}

SceneBuilder ဖြင့်ကြည်သောအခါ အောက်ပါအတိုင်းတွေ့မြင်ရမည် ဖြစ်ပါသည်။

Drop Shadow Effect အား ရေးသားရာတွင် ပါရာမီတာအဖြစ် ၆ခု ရေးသားအသုံးပြုရမည် ဖြစ်သည်။

1. blur type
   Blur Type အနေနှင့် one-pass-box, two-pass-box, three-pass-box နှင့် gaussian တို့ ဖြစ်ကြသည်။ 
2. shadow color
   Shadow ၏ အရောင်အား သတ်မှတ်ရေးသားရပါမည်။
3. width
   Shasow ၏ width အားသတ်မှတ်ရေးသားရပါမည်။
4. height
   Shadow ၏ height အားသတ်မှတ်ရေးသားရပါမည်။
5. radius
   Shadow ၏ radius အား သတ်မှတ်ရေးသားရပါမည်။
6. spread
   Shadow ၏ spread အား သတ်မှတ်ရေးသားရပါမည်။

ယခုတစ်ခေါက်တွင် CSS အား အသုံးပြု၍ GUI Application များ၏​ အရောင်နှင့် Effect တို့အား အလွယ်တကူ ပြောင်းလဲပြုပြင်နိုင်ကြောင် အား ဖေါ်ပြခဲ့ ပါသည်။ နောက် အခန်းဖြင့် JavaFX ၏ Animation အကြောင်းအား ရေးသားဖေါ်ပြသွားပါဦးမည်။

လေးစားစွာဖြင့်

မင်းလွင်