Day 14 CSS (Part 2)

ဒီအခန်းဆက်ကို မရေးဖြစ်သည်မှာ ကြာပြီဖြစ်ပါသည်။ အလုပ်ရှုပ်နေသည်ကတကြောင်း ကွန်ပျူတာပြောင်းပြီ ကတည်းက ဂျပန်လက်ကွက်ဖြစ်တဲ့အတွက် မြန်မာလို မှန်အောင်ရိုက်လို့မရသည်က တကြောင်း၊ တော်ရုံနှင့် စာမရေးဖြစ်ခဲ့ပါ။ အခုတော့ ကီဘုတ် အသေးလေးတစ်ခုဝယ်ပြီး မြန်မာလို မှန်အောင်ရိုက်နိုင်လာပြီ ဖြစ်တဲ့ အတွက် အချိန်လုကာ စာရေးပါဦးမည်။

ဒီတစ်ခေါက်မှာတော့ CSS ကိုအသုံးပြုပြီး GUI Application တစ်ခု၏ အမြင်ပိုင်းဆိုင်ရာ ပြုပြင်မှု့အကြောင်ကို ရေးသားသွားပါမည်။ အရင်ဦးဆုံး ဘယ်လိုအခါမျိုးမှာ Style ကိုပြောင်းရန်လိုအပ်သနည်း ဆိုသည့် အချက်ကို စဥ်းစားကြည့်ပါမည်။ အခြေခံအားဖြင့် အသုံးပြုမည့် Component များအား Default အတိုင်းအသုံးမပြုလိုသည့် အခါ၊ ဒါမှမဟုတ် Application တစ်ခုလုံအတွင်းရှိ Component များအား ညီတူညာတူတန်ဖိုးသတ်မှတ်၍အသုံပြုလိုသည့် အခါမျိုးတွင် Style များ ပြောင်လဲရန် လိုအပ်တတ်ပါသည်။

နောက်တဆင့် အနေနဲ့ Component တွေရဲ့ ဘယ်လို Style တွေကို ပြောင်းလဲနိုင်သလဲဆိုတဲ့ အချက်ကို စဥ်းစားကြည့်ပါဦးမည်။

• Component တစ်ခု၏ အရွယ်အစား အကြီအသေး အားပြောင်လဲနိုင်ပါမည်
• Component ၏ Attributes တန်ဖိုးများအားပြောင်လဲသတ်မှတ်နိုင်မည်
• Component ၏ အရောင်များအာ ပြောင်းလဲသတ်မှတ်နိုင်ပါမည်
• Container Component များဆိုပါက ၎င်းအတွင်းရှိ Child Component များအား မည်ကဲမ့သို့ထားမည်၊ Space များ၊ Padding များ၊ Margin များအား မည်သို့ထားမည် ဆိုသည်တို့ကို သတ်မှတ်နိုင်ပါမည်

Customizing Layout

GUI Application တစ်ခု၏ Layout အားသတ်မှတ်ရာတွင် Component တို့၏ အရွယ်အစား၊ နေရာ အထားအသိုတို့ဖြင့် သတ်မှတ်ရပါမည်။ ထိုအပြင် Application တစ်ခုလုံးတွင်ရှိသော အမျိုးအစား တူညီသည့် Component များသည် အခြေခံအားဖြင့် တူညီမှု့ရှိရန် လိုအပ်ပါသည်။ ဟိုနေရာ တမျိုး ဒီနေရာ တမျိူး ရေးနေရင်ဖြင့် အစဥ်ပြေမည်မဟုတ်။

ဥပမာအားဖြင့် Login Form, Sign Up Form, Base Panel, Message Dialog များအား မည်သို့ ဖေါ်ပြမည် ဆိုသည့် ပေါ်လစီအား ကြိုတင် သတ်မှတ်ထားရပါမည်။ အခြေခံအားဖြင့် GUI Application များတွင် Window Full Size ဖြင့် အသုံးပြုလိုသည်ကများပါမည်။ တဖန် Sub Window နှင့် Login Form နှင့် Message Dialog များ အနေနှင့် အသုံပြုလိသည့် Size များ ရှိကြပါမည်။

ထို့ကြောင့် layout.css အားရေးသား၍ Layout နှင့် ပတ်သက်သည်များကို ထို File အတွင်းတွင် သတ်မှတ် ရေးသားသွားပါမည်။

.panel-1 {
 -fx-pref-width: 1280px;
 -fx-pref-height: 780px;
}
.panel-2 {
 -fx-pref-width: 980px;
 -fx-pref-height: 680px;
}
.panel-3 {
 -fx-pref-width: 480px;
}

Java FX တွင် StyleSheet အား အသုံးပြုလိုသည့် အခါတွင် Java Program အတွင်း Scene Object ၏ Property တွင်ဖြည့် စွက်၍သော်၎င်း၊ FXML File အတွင်းတွင် တိုက်ရိုက်ရေးသား၍သော်၎င်း အသုံးပြုနိုင်ပါသည်။ သို့ရာတွင် FXML File အတွင်းရေးသားခြင်းမှာ CSS File အတွင်း ပြုပြင်ခြင်း အား SceneBuilder အတွင်းမှ တိုက်ရိုက် သိမြင်နိုင်ခြင်းကြောင့် အလွန်အစဥ်ပြေလှပါသည်။

နမူနာ အနေဖြင့် Panel တစ်ခုအားရေးသားကြည့်ပါမည်။
e(fx)clipse Plugin Install လုပ်ပြီးဖြစ်သော Eclipse IDE အားဖွင့်၍၊ CTL + n အားနှိပ်ကာ New Wizard Window အားဖွင့်ပါမည်။

ပြီးပါက Text Box အတွင်းတွင် fxmlဟု ရိုက်ထည့်၍ New FXML Document အားရွေးကာ Next ခလုပ်အား နှိပ်ပါမည်။ ထိုနောက် SignUp ဟု ဖြည့်ကာ Finish အားနှိပ်ကာ SignUp.fxml ဖိုင်လ်အား တည်ဆောက်ပါမည်။

အထက်ဖော်ပြပါအတိုင်း SignUp.fxml အား Right Click ထောက်၍ SceneBuilder ဖြင့် ဖွင့်ပါမည်။ ပြီပါက Root Element အား Select လုပ်၍ အသုံပြုလိုသည့် Style Sheet အား ရွေးချယ် ရပါမည်။ FXML တစ်ခုတွင် Style Sheet တစ်ခုထက်မက ဖြည့်စွက်ရေးသားနိုင်ပါသည်။ အောက်နမူနာတွင် layout.css အား ဖြည့်စွက်ထားပါသည်။

ပြီးပါက Style Class အတွင်း နှစ်သက်ရာ class name အား ဖြည့်စွက် ရေးသားပါက Style Sheet အတွင်း သတ်မှတ် ရေးသားထားသည့် အတိုင်း ပြောင်းလဲဖော်ပြနိုင်သည်ကို တွေ့ရပါမည်။ အောက်ပါ နမူနာတွင် panel-3 အား ဖြည့်စွက်ရေးသားထားပါသည်။

နမူနာမှာ Sign Up Panel ဖြစ်ပါသဖြင် ၎င်းတွင် Heading နှင် Body အပိုင်းတို့ပါဝင်ပါမည်။ Heading အပိုင်းအား HBox အား အသုံးပြုပြီ၊ Body နေရာအား VBox အား အသုံးပြုမည် ဖြစ်ပါသဖြင့်HBox နှင့် VBox တို့အား အသီးသီး Drug And Drop လုပ်၍ Root Element ဖြစ်သော VBox အတွင်သို့ ဖြည့်စွက်ပါမည်။ ပြီးပါက layout.css တွင် .heading နှင့် .body class တို့၏သတ်မှတ်ချက်တို့အား အောက်ပါအတိုင်း ဖြည့်စွက်ရေးသားပါမည်။

.heading {
 -fx-alignment: center-left;
 -fx-padding: 15;
 -fx-spacing: 15;
}

.body {
 -fx-alignment: center-left;
 -fx-padding: 15 15 30 15;
 -fx-spacing: 15;
}

တဖန် အောက်ပါအတိုင်း Lable Component တစ်ခုအား HBox အတွင်းသို့ Drug And Drop လုပ်ကာ Value အား Sign Up Form ဟု ပြောင်လဲရေးသားပါမည်။

ပြီးပါက layout.css တွင် Heading Text နှင့် Form Group Element များအတွက် အောက်ပါ အတိုင်း Style Class များအား ဖြည့်စွက် ရေးသားပါမည်။

.h1 {
 -fx-font-size: 48px;
 -fx-font-weight: bold;
 -fx-font-family: "Chaparral Pro";
}

.h2 {
 -fx-font-size: 36px;
 -fx-font-weight: bold;
 -fx-font-family: "Chaparral Pro";
}

.h3 {
 -fx-font-size: 24px;
 -fx-font-weight: bold;
 -fx-font-family: "Chaparral Pro";
 -fx-font-style: italic;
}

.form-group {
 -fx-pref-width: 1280px; 
 -fx-spacing: 10;
 -fx-padding: 0 20 0 60;
}

.form-group class ၏ -fx-pref-width ကိုကြည့်ပါ။ တန်ဖိုးအား 1280px ဟု သတ်မှတ်ထားပါသည်။ သင့်တော်သော width အား အမြင့်ဆုံတန်ဖိုးဖြင့်သတ်မှတ်ထားပါသည်။ ထိုကဲ့သို့ရေးသားထားခြင်းဖြင့် Parent Element ၏ ဖြည့်စွက်နိုင်သော width ရှိသမျှ အဆိုပါ Element၏ width အားသတ်မှတ်ပေးမည် ဖြစ်ပါသည်။ Window ၏ ပမာဏအား ပြောင်းလဲလိုက်တိုင်း Element များ၏ ပမာဏအား Dynamically ပြောင်းစေလိုသည့် အခါမျိုးတွင် ထိုကဲ့သို့ ရေးသားနိုင်ပါသည်။ Dynamic Component Sizing အကြောင်းအား နောက်အခန်းဆက်များတွင်အသေးစိတ်ဖော်ပြသွားပါဦးမည်။

ထိုနောက် Label ၏ Style Class နေရာတွင် h2 ဟု ဖြည့်စွက်လိုက်ပါက အထက်ပါအတိုင်း ပြောင်းလဲ သွားသည်ကို တွေ့ရပါမည်။

ထို့နောက်တွင် VBox.body အတွင်းသို့ VBox တစ်ခုအား Drug And Drop လုပ်၍ Style Class အား form-group ဟု ဖြည့်စွက် ပါမည်။ ပြီးပါက ၎င်း၏ Prefer Width နှင့် Prefer Height တို့အား USE_COMPUTED_SIZE ဟု ပြောင်းထားပါမည်။ တဖန် ၎င်းအတွင်းသို့ Label တစ်ခုအား Drug And Drop လုပ်၍ တန်ဖိုးအား Name ဟု ပြောင်းပါမည်။ ပြီးပါက TextField တစ်ခုအား အလားတူ Label ၏ အောက်သို့ ဖြည့်စွက်ပါမည်။

အလားတူပင် Login ID နှင့် Password တို့အား အထက်ပါနည်း အတိုင်း ရေးသားပါမည်။ Password အတွက်မှာမူ TextField မဟုတ်ပဲ PasswordField အားအသုံးပြုသင့်ပါသည်။

နောက်ဆုံးတွင် Button များအတွက် HBox တစ်ခုအား VBox.body ၏ နောက်ဆုံသို့ Drug and Drop လုပ်၍ Style Class အား form-group ဟု ဖြည့်စွက်ထားပါမည်။ အထက်တွင်ဖော်ပြခဲ့သလိုပင် ၎င်း၏ Prefer Width နှင့် Prefer Height Properties တို့အား USE_COMPUTED_SIZE ဟု ပြောင်းထားပါမည်။ ထို့နောက် Button နှစ်ခုအား ၎င်းအတွင်းသို့ Drug And Drop လုပ်ကာ Value အား အသီးသီး CANCEL နှင့် SIGN UP ဟု ပြောင်း ထားပါမည်။

အထက်ပါ အတိုင်း Sign Up Form တစ်ခုအား CSS နှင့် SceneBuilder တို့အား အသုံးပြု၍ အလွယ် တကူ ရေးသားနိုင်သည်ကို တွေ့ရပါသည်။ တဖန် အလားတူ Login Form များအား ရေးသားရာတွင်လည်း ရေးသားပြီးဖြစ်သော layout.css ဖိုင်လ်အား အသုံးပြု၍ အလွယ်တကူ ရေးသားနိုင်မည် ဖြစ်ပါသည်။

ထို့ကြောင့် CSS အား အသုံးပြုပါက

• View Style အား အလွယ်တကူ ပြောင်းလဲရေးသားနိုင်ခြင်း
• ရေးသားထားသော CSS များအား ပြန်လည် အသုံးပြုနိုင်ခြင်း
• Application တစ်ခုလုံး၏ Style အား ညီညာမှု့ရှိစေရန် တစ်နေရာထဲမှနေ၍ ထိမ်းချူပ်နိုင်ခြင်း
• View Style နှင့် ပတ်သက်သော ကုဒ်များအား Program အတွင်းရေးသား ရန်မလိုအပ်သောကြောင့် Business Logic များအား အာရုံစိုက်၍ အမှားအယွင်းနည်းအောင် ရေးသားနိုင်ခြင်း
• View နှင့် Logic Code များအား တနေရာစီကွဲအောင် ရေးသားနိုင်ခြင်းကြောင့် Maintenance ပြုလုပ်ရာတွင် လွယ်ကူစေခြင်း 

အစရှိသည့် အကျိုးများကို ရရှိစေနိုင်ပါသည်။ နောက်အခန်းဆက်များဖြင့် Color နှင့် Effect တို့အား CSS ဖြင့် သတ်မှတ် ရေးသားခြင်း အကြောင်းကို ဆက်လက် ရေးသားသွားပါဦးမည်။

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

မင်းလွင်