JavaFX App වලට අලුත් පෙනුමක්: CSS Styling ගැන SC Guide

අද කාලේ App එකක් කිව්වම, ලස්සනට පේන්නත් ඕනෙ නේද? ලෝකේ මොන App එක හැදුවත්, User-Friendly සහ ඇහැට ප්‍රිය වගේම, හැමෝටම පාවිච්චි කරන්න ලේසි වෙන්නත් ඕනෙ. ඒකනේ අපි JavaFX වගේ Frameworks පාවිච්චි කරන්නේ Graphics හොඳට හසුරවන්න පුළුවන් නිසා.

ඉතින් අපි අද කතා කරන්නේ JavaFX Application එකක් හදද්දි, ඒකේ පෙනුම අපිට ඕන විදිහට customize කරගන්නේ කොහොමද කියන එක ගැන. හරියටම කිව්වොත්, JavaFX වලට CSS (Cascading Style Sheets) පාවිච්චි කරලා ලස්සනට Design එකක් දෙන්නේ කොහොමද කියලා අපි මේ Blog Post එකෙන් ඉගෙන ගමු. මේක ඔයාලට ඔයාලගේ JavaFX Projects වලට අලුත් පෙනුමක් දෙන්න ගොඩක් උදව් වෙයි. ඒ වගේම, මේක ඔයාලගේ Programming Skills වලටත් හොඳ boost එකක් වෙයි, මොකද හොඳ UI එකක් නැති App එකක් කවුරුත් පාවිච්චි කරන්නේ නැහැනේ!

JavaFX වලට CSS ඇයි?

හරි, දැන් ඔයාලා හිතයි "JavaFX වලට CSS මොකටද? අපි Code එකෙන්ම Styles දාන්න පුළුවන්නේ." ඒක ඇත්ත, නමුත් CSS පාවිච්චි කරන එකට ගොඩක් හේතු තියෙනවා. අපි ඒවා එකින් එක බලමු.

1. UI සහ Logic වෙන් කිරීම (Separation of Concerns)

Software Engineering වලදි අපි හැමවෙලේම උත්සාහ කරන්නේ Application එකේ විවිධ කොටස් වෙන් කරලා තියන්න. මේකෙන් Code එක Maintain කරන්න, Update කරන්න, සහ Debug කරන්න ලේසි වෙනවා. UI (User Interface) එකේ පෙනුම (Styles) සහ Application එකේ Logic (ක්‍රියාකාරීත්වය) වෙන් කරලා තියන්න CSS උදව් වෙනවා. ඒ කියන්නේ, Styles වෙනස් කරන්න අවශ්‍ය වුණොත්, අපිට Java Code එකට අත නොතියාම CSS File එක විතරක් Edit කරන්න පුළුවන්. මේකෙන් Developers ලට ගොඩක් වෙලාව ඉතුරු වෙනවා.

2. පහසු Customization සහ Themeing (Easy Customization and Themeing)

ඔයාලට Application එකේ Theme එක වෙනස් කරන්න ඕනෙ නම්? උදාහරණයක් විදිහට Light Theme එකක් සහ Dark Theme එකක් හදන්න ඕනෙ නම්? CSS පාවිච්චි කරනවා නම්, මේක හරිම ලේසියි. වෙන වෙනම CSS Files දෙකක් හදලා අවශ්‍ය වෙලාවට Load කරන එක විතරයි කරන්න තියෙන්නේ. මේකෙන් Application එකේ පෙනුම Users ලට ඕන විදිහට වෙනස් කරගන්න අවස්ථාවකුත් ලැබෙනවා.

3. Consistency පවත්වා ගැනීම (Maintaining Consistency)

ලොකු Application එකක් හදද්දි, එකම Style එකක් හැම තැනම පාවිච්චි කරන එක ගොඩක් වැදගත්. Button වලට, Labels වලට, Text Fields වලට එකම Font එක, එකම Color Scheme එක පාවිච්චි කරන එක User Experience එකට ගොඩක් බලපානවා. CSS Stylesheets එකක් පාවිච්චි කරනකොට, අපිට Global Styles define කරන්න පුළුවන්. ඒ කියන්නේ, එක තැනකින් Style එකක් වෙනස් කළොත්, ඒක Application එකේ හැම තැනටම බලපානවා. මේකෙන් Design Consistency එක නියමෙට පවත්වා ගන්න පුළුවන්.

CSS Stylesheet එකක් Load කරන්නේ කොහොමද?

හරි, දැන් අපි බලමු CSS File එකක් JavaFX Application එකකට Load කරන්නේ කොහොමද කියලා. මේක කරන්න ප්‍රධාන විදි දෙකක් තියෙනවා: Scene එකටම Load කරන එක සහ Specific Node එකකට Load කරන එක.

1. Scene එකටම Load කිරීම

මේක තමයි සාමාන්‍යයෙන් කරන විදිහ. මේකෙන් Stylesheets එකේ තියෙන Styles Application එකේ හැම UI Element එකකටම බලපානවා. ඔයාලගේ CSS File එක Project එකේ resources Folder එකේ තියාගන්න එක හොඳ පුරුද්දක්. අපි හිතමු ඔයාලගේ CSS File එකේ නම style.css කියලා.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class BasicStylingApp extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button button = new Button("Click Me!");
        button.setId("myButton"); // ID එකක් සෙට් කරනවා

        VBox root = new VBox(button);
        root.setStyle("-fx-padding: 20px;"); // Inline Style එකක්

        Scene scene = new Scene(root, 300, 200);

        // CSS Stylesheet එක Scene එකට Load කරනවා
        // මේකෙන් resources Folder එකේ තියෙන CSS File එක Load වෙනවා
        scene.getStylesheets().add(getClass().getResource("/style.css").toExternalForm());

        primaryStage.setTitle("JavaFX CSS Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

උඩ තියෙන Code එකට අදාළව, ඔයාලගේ style.css File එක මෙහෙම වෙන්න පුළුවන්:

/* style.css */
.root {
    -fx-background-color: #f0f0f0;
}

Button {
    -fx-background-color: #4CAF50; /* Green */
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px;
}

#myButton {
    -fx-background-color: #f44336; /* Red */
}

මෙහිදී, .root කියන්නේ Scene එකේ Root Node එකට අදාළ Style එක. Button කියන්නේ හැම Button එකකටම අදාළ Style එක. #myButton කියන්නේ myButton කියන ID එක තියෙන Button එකට අදාළ Style එක. ID Selector එකේ Style එක Type Selector එකේ Style එක Override කරන බව මතක තියාගන්න.

2. Specific Node එකකට Load කිරීම

සමහර වෙලාවට ඔයාලට අවශ්‍ය වෙන්නේ Application එකේ තියෙන එකම Element එකකට විතරක් Style එකක් දෙන්න. ඒ වගේ වෙලාවට අපිට CSS Stylesheet එකක් හෝ Inline Styles පාවිච්චි කරන්න පුළුවන්.

// Specific Node එකකට Class Style එකක් Add කරනවා
button.getStyleClass().add("my-custom-button");

// Inline Style එකක් සෙට් කරනවා (මේක CSS File එකක තියෙන Styles Override කරනවා)
button.setStyle("-fx-background-color: blue; -fx-text-fill: yellow;");

ඔයාලට my-custom-button කියන Class එකට style.css File එකේ Styles define කරන්න පුළුවන්:

.my-custom-button {
    -fx-background-color: darkblue;
    -fx-font-weight: bold;
}

Common JavaFX CSS Selectors (සාමාන්‍යයෙන් භාවිතා වෙන CSS Selectors)

CSS Selector කියන්නේ අපිට Style කරන්න ඕනෙ UI Element එක තෝරාගන්න පාවිච්චි කරන ක්‍රමයක්. JavaFX වලදිත් මේSelectors ගොඩක් වැදගත්. අපි ඒවා ටිකක් පැහැදිලි කරමු.

1. Type Selectors

මේවා Control එකේ Type එකෙන් අඳුනගන්නවා. උදාහරණයක් විදිහට, හැම Button එකකටම, හැම Label එකකටම Style කරන්න මේවා පාවිච්චි කරනවා.

Button {
    -fx-font-size: 14px;
    -fx-text-fill: navy;
}

Label {
    -fx-text-fill: green;
    -fx-font-weight: bold;
}

2. ID Selectors

අපිට Control එකකට Unique ID එකක් දෙන්න පුළුවන් setId() Method එක පාවිච්චි කරලා. ඊට පස්සේ CSS වලදි # එක පාවිච්චි කරලා ඒ ID එකෙන් ඒ Control එකට විතරක් Style එකක් දෙන්න පුළුවන්. මේක හරිම Specific.

// Java Code
Button loginButton = new Button("Login");
loginButton.setId("loginBtn");

#loginBtn {
    -fx-background-color: #2196F3; /* Blue */
    -fx-text-fill: white;
    -fx-font-size: 16px;
    -fx-padding: 8px 15px;
    -fx-background-radius: 20px;
}

3. Class Selectors

Class Selectors කියන්නේ එකම Style එකක් තියෙන Elements ගොඩකට එකම Style එක apply කරන්න පාවිච්චි කරන ක්‍රමයක්. මේවා . එකෙන් පටන් ගන්නවා. ඔයාලට එකම Element එකකට Class Styles ගොඩක් add කරන්නත් පුළුවන්.

// Java Code
Button saveButton = new Button("Save");
saveButton.getStyleClass().add("primary-button");

Button cancelButton = new Button("Cancel");
cancelButton.getStyleClass().add("secondary-button");
cancelButton.getStyleClass().add("rounded-corners"); // Class ගොඩක් දාන්න පුළුවන්

.primary-button {
    -fx-background-color: #00BCD4; /* Cyan */
    -fx-text-fill: white;
}

.secondary-button {
    -fx-background-color: #FFC107; /* Amber */
    -fx-text-fill: #333;
}

.rounded-corners {
    -fx-background-radius: 10px;
}

4. Pseudo-classes

මේවා Element එකක තත්ත්වය (state) අනුව Style එක වෙනස් කරන්න පාවිච්චි කරනවා. උදාහරණයක් විදිහට, Button එකක් උඩ Mouse එක තියද්දි (hover), ඒක press කරද්දි (pressed), disable කරද්දි (disabled) වගේ අවස්ථාවලට වෙනස් Styles දෙන්න පුළුවන්.

Button:hover {
    -fx-background-color: #5cb85c; /* Darker Green on hover */
}

Button:pressed {
    -fx-background-color: #3e8e41; /* Even Darker Green on pressed */
    -fx-padding: 12px 22px 8px 18px; /* Little animation */
}

TextField:focused {
    -fx-border-color: #2196F3;
    -fx-border-width: 2px;
}

Custom Properties සහ Themeing

CSS වල Custom Properties (CSS Variables) කියන්නේ Style එකකදී අපිට නැවත නැවත භාවිතා කරන්න පුළුවන් Values Save කරලා තියාගන්න පුළුවන් ක්‍රමයක්. JavaFX CSS වලදි මේවා -fx- වලින් පටන් ගන්න Variables විදිහට පාවිච්චි කරන්න පුළුවන්. මේක Themeing වලට ගොඩක් වැදගත්.

අපි හිතමු ඔයාලගේ App එකට Primary Color එකක්, Secondary Color එකක් සහ Font Size එකක් තියෙනවා කියලා. මේවා CSS Variables විදිහට define කරලා Application එක පුරාම පාවිච්චි කරන්න පුළුවන්. පස්සේ මේ Variables වල Value වෙනස් කළොත්, ඒක හැම තැනටම බලපානවා.

/* root එකේ variables define කරනවා */
.root {
    -fx-primary-color: #2196F3; /* Blue */
    -fx-secondary-color: #FFC107; /* Amber */
    -fx-default-font-size: 14px;
    -fx-background-light: #f0f0f0;
    -fx-text-color-dark: #333333;
}

Button {
    -fx-background-color: -fx-primary-color;
    -fx-text-fill: white;
    -fx-font-size: -fx-default-font-size;
    -fx-background-radius: 5px;
}

Label {
    -fx-text-fill: -fx-text-color-dark;
    -fx-font-size: -fx-default-font-size;
}

.secondary-button {
    -fx-background-color: -fx-secondary-color;
    -fx-text-fill: -fx-text-color-dark;
}

මේකෙන් වෙන්නේ ඔයාලට Application එකේ සම්පූර්ණ Theme එකම එක තැනකින් Control කරන්න පුළුවන් වෙන එක. උදාහරණයක් විදිහට, Dark Theme එකක් හදන්න ඕනෙ නම්, ඔයාලට .root Style එකේ තියෙන Variables විතරක් වෙනස් කරන්න පුළුවන්. ඒක පට්ට ගැම්මක් නේද?

Scene Builder සහ CSS

Scene Builder කියන්නේ JavaFX Application වල UI එක drag-and-drop කරලා හදන්න පුළුවන් Graphical Tool එකක්. මේක CSS එක්ක වැඩ කරනකොටත් ගොඩක් ප්‍රයෝජනවත්. Scene Builder එකේ Internal CSS Editor එකක් තියෙනවා. ඒකෙන් ඔයාලට UI Element වලට Styles දාන්න, Classes, IDs add කරන්න, Pseudo-classes වල Styles බලන්න පුළුවන්.

Scene Builder එකේ "Properties" Panel එකේ "Styles" Section එකට ගිහින් Element එකකට ID එකක් හෝ Style Class එකක් add කරන්න පුළුවන්. ඒ වගේම "CSS" Panel එකෙන් ඔයාලට CSS Rules directly Type කරන්නත් පුළුවන්. මේකෙන් ඔයාලා කරන Changes Real-time බලාගන්න පුළුවන් නිසා Design Process එක ගොඩක් වේගවත් වෙනවා. ඔයාලා අනිවාර්යයෙන්ම Scene Builder පාවිච්චි කරලා මේ Stylesheets අප්ලයි කරන එක Try කරලා බලන්න. ඒකෙන් වැඩේ ලේසි වෙනවා.

නිගමනය

හරි, ඔයාලා දැක්කා නේද JavaFX Application එකක් ලස්සනට හදන්න CSS කොච්චර වැදගත්ද කියලා? UI එක Logic එකෙන් වෙන් කරන එක, පහසුවෙන් Customization කරන්න පුළුවන් වීම, Consistency එක පවත්වා ගන්න පුළුවන් වීම වගේ ගොඩක් වාසි CSS පාවිච්චි කරන එකෙන් ලැබෙනවා.

අද අපි කතා කළා CSS Files Load කරන විදි, විවිධ Selectors (Type, ID, Class, Pseudo-classes), Custom Properties පාවිච්චි කරලා Themeing කරන විදි සහ Scene Builder එක CSS එක්ක වැඩ කරන විදිහ ගැන. මේ Concepts හරියට තේරුම් අරන් ප්‍රැක්ටිකල්ව පාවිච්චි කරනවා නම්, ඔයාලට ලෝකේ තියෙන ඕනම ලස්සන UI එකක් වගේම, User-Friendly JavaFX Application එකක් හදන්න පුළුවන් වේවි.

දැන් ඉතින් පරක්කු නොවී ඔයාලගේ JavaFX Project එකක් අරගෙන අලුත් CSS Stylesheets ටිකක් දාලා බලන්න! ඔයාලගේ අදහස්, ප්‍රශ්න comment section එකේ දාගෙන යන්න. අපි උදව් කරන්න ලෑස්තියි. මීළඟ Blog Post එකෙන් හමුවෙමු, ඔයාලට සුභ දවසක්!