JavaFX UI නිර්මාණය: Buttons, Labels, TextFields භාවිතයෙන් අපේම App එකක් හදමු! SC Guide

ආයුබෝවන් යාළුවනේ, කොහොමද ඉතින්? අද අපි කතා කරන්න යන්නේ Java programming ලෝකයේ තවත් නියම ටෙක්නොලොජි එකක් ගැන – ඒ තමයි JavaFX! ගොඩක් දෙනෙක් තාමත් Desktop Applications හදනකොට Swing, AWT වගේ පරණ frameworks පාවිච්චි කරනවා. ඒත් JavaFX කියන්නේ දැන් Desktop UI හදන්න තියෙන ට්‍රෙන්ඩිම සහ බලවත්ම ටූල් එකක්. ඇයි දන්නවද? මොකද ඒක හරිම ලස්සනට UI හදන්න පුළුවන්, අනික Animations, Media වගේ දේවලුත් පහසුවෙන් කරන්න පුළුවන්.

අද මේ ලිපියෙන් අපි බලමු JavaFX පාවිච්චි කරලා ලස්සන, User-Friendly Interfaces හදාගන්නේ කොහොමද කියලා. විශේෂයෙන්ම අපි බලමු Button, Label, TextField වගේ නිතරම පාවිච්චි වෙන UI Controls ටිකක් කොහොමද අපේ Project එකකට එකතු කරගෙන වැඩ කරන්නේ කියලා. ඉතින්, තව දුරටත් වෙලා නාස්ති නොකර, අපි වැඩේට බහිමු නේද?

මොකක්ද මේ JavaFX Controls කියන්නේ?

හරි, මුලින්ම බලමු මේ JavaFX Controls කියන්නේ මොනවාද කියලා. හිතන්නකෝ ඔයාලා මොබයිල් ඇප් එකක් හරි, වෙබ්සයිට් එකක් හරි පාවිච්චි කරනකොට, ඔයාලට පේන හැම දෙයක්ම වගේ Controls තමයි. උදාහරණයක් විදියට, ඔබන Button එකක්, තොරතුරු ටයිප් කරන TextField එකක්, මොනවා හරි පෙන්නන Label එකක්, ලිස්ට් එකක් පෙන්නන ComboBox එකක් – මේ ඔක්කොම UI Controls.

JavaFX වලදීත් මේ දේවල් හඳුන්වන්නේ Controls විදියට. මේවා තමයි අපේ Application එක User එක්ක Interact කරන්න දෙන ප්‍රධානම ටූල්ස්. JavaFX මේ Controls ටික හදලා තියෙන්නේ ගොඩක් Customizable විදියට. ඒ කියන්නේ අපිට ඕන විදියට ඒවයේ පෙනුම, සයිස් එක, පාට වෙනස් කරන්න පුළුවන්. ඒ වගේම ඒවට සිදුවීම් (Events) එකතු කරන්නත් පුළුවන්. උදාහරණයක් විදියට, Button එකක් Click කරපුවාම මොකද වෙන්න ඕනේ කියලා අපිට Code කරන්න පුළුවන්. මේක තමයි Application එකක ජීවය.

JavaFX Library එකේ මේ වගේ Controls ගොඩක් තියෙනවා. අපි මේ පාඩමේදී මූලික ඒවා ටිකක් ගැන අවධානය යොමු කරමු.

මූලික Controls ටිකක් වැඩට ගමු!

දැන් අපි බලමු මේ ප්‍රධාන Controls ටිකක් කොහොමද අපේ Project එකකට දාලා වැඩ කරන්නේ කියලා. මේක කරන්න අපිට JavaFX Application එකක මූලික Structure එක ඕනේ වෙනවා. පොඩි Starter Code එකක් මෙතනින් ගන්න පුළුවන්.

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox; // Vertically arranges nodes

public class BasicJavaFXApp extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Create a Button
        Button clickMeButton = new Button("Click Me!");

        // Create a Label
        Label statusLabel = new Label("Welcome to JavaFX!");

        // Create a TextField
        TextField nameTextField = new TextField();
        nameTextField.setPromptText("ඔබේ නම ඇතුලත් කරන්න..."); // Placeholder text

        // Event Handling for Button
        clickMeButton.setOnAction(event -> {
            String name = nameTextField.getText(); // Get text from TextField
            if (name.isEmpty()) {
                statusLabel.setText("කරුණාකර ඔබේ නම ඇතුලත් කරන්න.");
            } else {
                statusLabel.setText("ආයුබෝවන්, " + name + "!");
            }
        });

        // Layout Container - VBox arranges elements vertically
        VBox root = new VBox(10); // 10 pixels spacing between children
        root.getChildren().addAll(statusLabel, nameTextField, clickMeButton); // Add controls

        // Create a Scene and set it on the Stage
        Scene scene = new Scene(root, 400, 250); // width, height
        primaryStage.setTitle("මගේ පළමු JavaFX App එක"); // Title of the window
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

මේ Code එක ගැන අපි ටිකක් විස්තරාත්මකව බලමු.

Button (බොත්තම)

Button එකක් කියන්නේ User කෙනෙක්ට Click කරන්න පුළුවන් Control එකක්. මේක අපේ Application එකේ Events trigger කරන්න පාවිච්චි කරනවා. උදාහරණයක් විදියට, Save කරන්න, Submit කරන්න, Next Page එකට යන්න වගේ දේවල් වලට.

Button clickMeButton = new Button("Click Me!");

මෙතනදි අපි "Click Me!" කියලා Text එකක් තියෙන Button එකක් හැදුවා. ඒ වගේම, මේ Button එක Click කරපුවාම මොකද වෙන්න ඕනේ කියලා අපි setOnAction() Method එකෙන් කිව්වා.

clickMeButton.setOnAction(event -> {
    // Button එක Click කරාම මෙතන Code එක execute වෙනවා
    System.out.println("Button එක Click කලා!");
});

අපේ උදාහරණයේදී අපි TextField එකේ තියෙන Text එක අරගෙන Label එක Update කරනවා.

Label (ලේබලය)

Label එකක් කියන්නේ සාමාන්‍යයෙන් Text එකක් පෙන්නන්න පාවිච්චි කරන Control එකක්. මේක User කෙනෙක්ට Edit කරන්න බැහැ, බලන්න විතරයි පුළුවන්. Instructions දෙන්න, Output එකක් පෙන්නන්න, Titles වගේ දේවල් වලට මේක සුදුසුයි.

Label statusLabel = new Label("Welcome to JavaFX!");

මේකෙන් අපි "Welcome to JavaFX!" කියලා Text එකක් තියෙන Label එකක් හැදුවා. පස්සේ Button එක Click කරපුවාම මේකේ Text එක වෙනස් කරන හැටිත් අපි උදාහරණයේදී දැක්කා: statusLabel.setText("අලුත් Text එක");

TextField (ටෙක්ස්ට් ෆීල්ඩ්)

TextField එකක් කියන්නේ User කෙනෙක්ට ටෙක්ස්ට් (Text) ඇතුලත් කරන්න පුළුවන් Control එකක්. නම, ඊමේල්, වයස වගේ දේවල් Inputs විදියට ගන්න මේක පාවිච්චි කරනවා.

TextField nameTextField = new TextField();
nameTextField.setPromptText("ඔබේ නම ඇතුලත් කරන්න...");

setPromptText() කියන Method එකෙන් අපිට පුළුවන් TextField එක හිස්ව තියෙනකොට User ට පේන "Placeholder Text" එකක් දාන්න. User ටයිප් කරන්න පටන් ගත්තම මේ Text එක අතුරුදහන් වෙනවා.

TextField එකෙන් Text එක ගන්න අපි getText() Method එක පාවිච්චි කරනවා.

String name = nameTextField.getText(); // TextField එකේ තියෙන Text එක ගන්නවා

Layouts එක්ක වැඩ කරමු

ඔයාලා දැක්කා නේද උඩ Code එකේ අපි VBox කියලා එකක් පාවිච්චි කරා? Layout Containers කියන්නේ අපේ Controls ටික Screen එකේ කොහොමද පිහිටුවන්නේ කියලා තීරණය කරන දේවල්. Buttons, Labels, TextFields වගේ Controls නිකම්ම Screen එකට දාන්න බැහැ. ඒවා යම්කිසි Layout එකක් ඇතුලේ තියෙන්න ඕනේ.

JavaFX වල ගොඩක් Layout Containers තියෙනවා:

• VBox: Controls එකක් යටින් එකක් Vertically පිහිටුවනවා.
• HBox: Controls එකක් අයිනෙන් එකක් Horizontally පිහිටුවනවා.
• BorderPane: Top, Bottom, Left, Right, Center කියන Position වලට Controls දාන්න පුළුවන්.
• GridPane: Controls ටික Grid එකකට (row, column) දාන්න පුළුවන්. Forms හදන්න මේක නියමයි.
• FlowPane: Controls ටික Flow එකකට දානවා. Space නැති වුණොත් අලුත් Line එකකට යනවා (වෙබ් බ්‍රව්සර් එකක Text දානවා වගේ).
• StackPane: Controls එකක් උඩින් එකක් Stack කරනවා.

අපේ උදාහරණයේදී අපි VBox එකක් පාවිච්චි කලා.

VBox root = new VBox(10); // 10 pixels spacing
root.getChildren().addAll(statusLabel, nameTextField, clickMeButton);

VBox(10) කියන්නේ Controls අතරේ 10 pixels ක Spacing එකක් තියෙනවා කියන එක. getChildren().addAll() කියන්නේ මේ VBox එකට අපේ Controls ටික එකතු කරනවා කියන එක. මේ Layouts තමයි අපේ UI එක පිරිසිදුවටයි, පිළිවෙලටයි තියාගන්න උදව් කරන්නේ.

සෙටින්ග්ස් දාමු - CSS සහ Properties

දැන් අපි අපේ App එක වැඩ කරනවා නේද? ඒත් ලස්සන නැහැ නේද? ඊළඟට අපි බලමු මේ Controls වලට Style එකක් දෙන්නේ කොහොමද කියලා. JavaFX වලට තියෙන ලොකුම වාසියක් තමයි ඒකට CSS (Cascading Style Sheets) පාවිච්චි කරන්න පුළුවන් වීම.

CSS (Cascading Style Sheets)

අපි Web Applications වලට CSS පාවිච්චි කරනවා වගේම JavaFX වලටත් පුළුවන්. මේකෙන් අපිට Button වල පාට, Font size එක, background, border වගේ දේවල් ලස්සනට හදාගන්න පුළුවන්. හිතන්නකෝ, අපේ Button එකට කොළ පාටක් දීලා, Text එක සුදු පාට කරන්න ඕනේ නම්?

/* style.css file */
.button {
    -fx-background-color: #4CAF50; /* Green */
    -fx-text-fill: white;
    -fx-font-size: 14px;
    -fx-padding: 10px 20px;
    -fx-background-radius: 5px; /* Rounded corners */
}

.label {
    -fx-text-fill: #333333;
    -fx-font-size: 16px;
    -fx-font-weight: bold;
}

.text-field {
    -fx-background-color: #f0f0f0;
    -fx-border-color: #cccccc;
    -fx-border-width: 1px;
    -fx-border-radius: 5px;
    -fx-padding: 8px;
}

මේ CSS File එක අපේ Application එකට Load කරන්නේ මෙහෙමයි:

Scene scene = new Scene(root, 400, 250);
scene.getStylesheets().add("style.css"); // style.css file එක project root folder එකේ තිබිය යුතුයි
primaryStage.setScene(scene);

මේකෙන් පස්සේ ඔයාලගේ UI එකට නියම Look & Feel එකක් ලැබෙනවා. මේක තවත් Customize කරන්න පුළුවන්. JavaFX CSS Reference එක බලන්න පුළුවන් වැඩි විස්තර දැනගන්න.

Properties (ගුණාංග)

සමහර වෙලාවට අපිට CSS පාවිච්චි නොකර Code එකෙන්ම Properties වෙනස් කරන්න පුළුවන්. උදාහරණයක් විදියට Button එකක Text එක වෙනස් කරන්න අපි setText() පාවිච්චි කලා වගේම, Button එකක Width එක වෙනස් කරන්න setPrefWidth() වගේ Methods පාවිච්චි කරන්න පුළුවන්.

clickMeButton.setPrefWidth(150); // Button එකේ පළල 150 pixels කරනවා
statusLabel.setTextFill(javafx.scene.paint.Color.BLUE); // Label එකේ පාට නිල් කරනවා
nameTextField.setMaxWidth(200); // TextField එකේ උපරිම පළල 200 pixels කරනවා

මේ වගේ direct property changes වලට වඩා CSS පාවිච්චි කරන එක හොඳ Design Practice එකක්. මොකද UI Design එක Code එකෙන් වෙන් කරලා තියාගන්න පුළුවන් නිසා.

නිගමනය සහ ඊලඟ පියවර

හරි, යාළුවනේ, ඔයාලා දැක්කා නේද JavaFX පාවිච්චි කරලා කොච්චර ලේසියෙන් Buttons, Labels, TextFields වගේ මූලික UI Controls හදාගන්න පුළුවන්ද කියලා? ඒ වගේම Layouts පාවිච්චි කරලා ඒවා පිළිවෙලට Screen එකේ දාගන්නත්, CSS පාවිච්චි කරලා ලස්සන Look & Feel එකක් දෙන්නත් අපිට පුළුවන්.

මේක JavaFX ලෝකයේ පොඩි පටන්ගැන්මක් විතරයි. මේකෙන් පස්සේ ඔයාලට පුළුවන් මේ Controls එක්ක තවත් අත්හදා බලන්න. Buttons වලට වෙනස් Actions දාලා බලන්න, TextFields වලින් තවත් Inputs අරගෙන ඒවට Calculations කරලා Label එකකින් Output එකක් පෙන්නන්න වගේ දේවල් කරන්න පුළුවන්. ඒ වගේම DatePicker, ComboBox, TableView වගේ වෙනත් Controls ගැනත් හොයලා බලන්න. ඒවටත් මේ මූලික සංකල්පම තමයි.

ගොඩක් වැදගත් දේ තමයි practice කරන එක. ඔයාලගේම පොඩි App එකක් හදලා බලන්න, ඒකේ UI එක ලස්සනට හදන්න උත්සාහ කරන්න. එතකොට තමයි මේ Concepts ඔලුවට යන්නේ.

ඉතින්, මේ ලිපිය ඔයාලට ප්‍රයෝජනවත් වුණා කියලා හිතනවා. මොනවා හරි ප්‍රශ්න තියෙනවා නම් හරි, ඔයාලගේ අදහස් තියෙනවා නම් හරි, පහලින් Comment Section එකේ දාන්න. අපි කතා කරමු! තවත් මේ වගේ ලිපියකින් හමුවෙමු, හැමෝටම ජය!