JavaFX Sinhala Tutorial

මෙම නිබන්ධනයෙන්, අපි Java සහ JavaFX ලෝකයට පිවිසෙමින්, සරල නමුත් ප්‍රායෝගික **ශරීර ස්කන්ධ දර්ශක (Body Mass Index - BMI) කැල්කියුලේටරයක්** මුල සිටම නිර්මාණය කරමු. මෙම පාඩම අවසානයේදී, ඔබට JavaFX ව්‍යාපෘතියක් ආරම්භ කර, දෘශ්‍යමය වශයෙන් (visually) අතුරුමුහුණතක් නිර්මාණය කර, පරිශීලක ක්‍රියාකාරකම් වලට (button clicks) ප්‍රතිචාර දක්වන කේතයක් ලිවීමට හැකි වනු ඇත.

1 වන කොටස: සංවර්ධන පරිසරය සකසා ගැනීම (Setting Up the Environment) 🛠️

JavaFX සමඟ වැඩ කිරීම, Python හෝ PHP වලට වඩා මදක් සංකීර්ණ සකස් කිරීමක් අවශ්‍ය කරයි. නමුත්, නිවැරදි මෙවලම් සමඟ මෙය ඉතා පහසු කරගත හැක.

1.1 JDK (Java Development Kit) ස්ථාපනය කිරීම

Java කේත ලිවීමට සහ ක්‍රියාත්මක කිරීමට අපට JDK එකක් අවශ්‍ය වේ. JavaFX සමඟ වැඩ කිරීම පහසු කිරීම සඳහා, අපි JavaFX දැනටමත් ඇතුළත් කර ඇති විශේෂ JDK බෙදාහැරීමක් භාවිතා කරමු.

1. ඔබගේ වෙබ් බ්‍රව්සරයෙන් BellSoft Liberica JDK වෙබ් අඩවියට පිවිසෙන්න.
2. "Java Version" එකක් ලෙස (උදා: 17 LTS), "Operating System" එක ලෙස ඔබගේ OS එක (උදා: Windows), සහ "Package Type" එක ලෙස **"Full JDK"** (JavaFX ඇතුළත්) තෝරන්න.
3. බාගත කරගත් ගොනුව ක්‍රියාත්මක කර, සාමාන්‍ය මෘදුකාංගයක් මෙන් ස්ථාපනය කරගන්න.

1.2 IDE (Integrated Development Environment) එකක් ස්ථාපනය කිරීම

Java කේත ලිවීම, දෝෂ නිරාකරණය (debug), සහ ව්‍යාපෘති කළමනාකරණය සඳහා IDE එකක් අත්‍යවශ්‍ය වේ. අපි මේ සඳහා ලොව ජනප්‍රියම Java IDE එක වන **IntelliJ IDEA** හි නොමිලේ ලබා දෙන Community Edition එක භාවිතා කරමු.

1. JetBrains IntelliJ IDEA වෙබ් අඩවියට ගොස්, Community Edition එක බාගත කර ස්ථාපනය කරගන්න.

1.3 ඔබගේ පළමු JavaFX ව්‍යාපෘතිය නිර්මාණය කිරීම

1. IntelliJ IDEA විවෘත කර, `New Project` ක්ලික් කරන්න.
2. වම් පස ඇති ලැයිස්තුවෙන් `JavaFX` තෝරන්න.
3. Project එක සඳහා නමක් ලබා දෙන්න (උදා: `BMICalculator`).
4. `JDK` යටතේ ඇති drop-down මෙනුවෙන්, ඔබ මීට පෙර ස්ථාපනය කළ Liberica JDK (හෝ JavaFX සහිත වෙනත් JDK) එක තෝරාගෙන ඇති බවට වග බලා ගන්න.
5. `Create` බොත්තම ක්ලික් කරන්න.

IntelliJ IDEA මගින්, JavaFX යෙදුමකට අවශ්‍ය මූලික ගොනු ව්‍යුහය (`src` ෆෝල්ඩරය, `HelloApplication.java`, සහ `hello-view.fxml` වැනි) ස්වයංක්‍රීයව නිර්මාණය කර දෙනු ඇත.

2 වන කොටස: අතුරුමුහුණත නිර්මාණය - FXML සහ Scene Builder 🎨

JavaFX හිදී, යෙදුමේ පෙනුම (UI), එහි තර්කනයෙන් (Logic) වෙන් කර තැබීමේ හැකියාව ඇත. පෙනුම නිර්මාණය කිරීමට අපි **FXML** නම් XML-පාදක භාෂාවක් භාවිතා කරන අතර, තර්කනය ලිවීමට Java භාවිතා කරමු.

2.1 Scene Builder - දෘශ්‍ය නිර්මාණ මෙවලම

FXML කේතය අතින් ලිවීම වෙනුවට, අපට **Scene Builder** නම් දෘශ්‍යමය, drag-and-drop මෙවලම භාවිතා කළ හැක. IntelliJ IDEA හි නවතම සංස්කරණ වල Scene Builder අන්තර්ගතව ඇත.

2.2 BMI කැල්කියුලේටරයේ අතුරුමුහුණත ගොඩනැගීම

1. VS Code හි Explorer පැනලයෙන්, `src/main/resources/com/example/bmicalculator/hello-view.fxml` (ඔබගේ පැකේජ නම අනුව මෙය වෙනස් විය හැක) ගොනුව මත දකුණු-ක්ලික් කර, `Open in Scene Builder` තෝරන්න.
2. Scene Builder හි වම්පස `Controls` පැනලයෙන්, පහත උපාංග (components) එකින් එක මැද ඇති ප්‍රධාන අවකාශයට ඇදගෙන එන්න (drag and drop):
   • මාතෘකාවක් සඳහා `Label` එකක්. එහි `Text` property එක "BMI Calculator" ලෙස වෙනස් කරන්න.
   • බර ඇතුළත් කිරීමට `Label` එකක් ("Weight (kg):") සහ ඊට ඉදිරියෙන් `TextField` එකක්.
   • උස ඇතුළත් කිරීමට `Label` එකක් ("Height (cm):") සහ ඊට ඉදිරියෙන් `TextField` එකක්.
   • ගණනය කිරීමට `Button` එකක්. එහි `Text` property එක "Calculate BMI" ලෙස වෙනස් කරන්න.
   • ප්‍රතිඵලය පෙන්වීමට තවත් `Label` එකක්. මුලදී එහි `Text` property එක හිස්ව තබන්න.
3. මෙම සියලුම උපාංග පිළිවෙලට තැබීමට, ඒවා සියල්ලම තෝරා, `VBox` වැනි layout container එකක් තුළට දමන්න. VBox මගින් උපාංග සිරස් අතට (vertically) පිළිවෙලට සකස් කරයි.

2.3 UI එක කේතය සමඟ සම්බන්ධ කිරීම (`fx:id`)

අපගේ Java කේතයට මෙම UI උපාංග පාලනය කිරීමට නම්, අප ඒවාට අනන්‍ය නම් (IDs) ලබා දිය යුතුය.

1. Scene Builder හි, බර ඇතුළත් කරන `TextField` එක තෝරන්න.
2. දකුණු පස ඇති `Code` පැනලයට ගොස්, `fx:id` කොටුවේ `weightField` ලෙස ටයිප් කර Enter ඔබන්න.
3. ඒ ආකාරයටම, උස ඇතුළත් කරන `TextField` එකට `heightField`, `Button` එකට `calculateButton`, සහ ප්‍රතිඵලය පෙන්වන `Label` එකට `resultLabel` ලෙස `fx:id` ලබා දෙන්න.
4. ප්‍රධාන VBox container එක තෝරා, එහි `Controller` class එක ලෙස, IntelliJ මගින් සාදන ලද controller පන්තිය (උදා: `com.example.bmicalculator.HelloController`) ලබා දෙන්න.
5. ගොනුව Save කරන්න (Ctrl+S).

3 වන කොටස: තර්කනය ලිවීම - The Java Controller 🧠

දැන් අපි පරිශීලකයා බර සහ උස ඇතුළත් කර බොත්තම එබූ විට, BMI අගය ගණනය කර පෙන්වන Java කේතය ලියමු.

3.1 FXML උපාංග Controller එකට සම්බන්ධ කිරීම

ඔබගේ IntelliJ IDEA ව්‍යාපෘතියේ, `HelloController.java` ගොනුව විවෘත කරන්න. FXML හි අප ලබා දුන් `fx:id` වලට අදාළව, Controller පන්තිය තුළ ක්ෂේත්‍ර (fields) නිර්මාණය කළ යුතුය.

package com.example.bmicalculator;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.Button;

public class HelloController {
    @FXML
    private TextField weightField;

    @FXML
    private TextField heightField;

    @FXML
    private Button calculateButton;

    @FXML
    private Label resultLabel;
}

මෙහි `@FXML` annotation එක මගින්, මෙම Java ක්ෂේත්‍රය, FXML ගොනුවේ ඇති අදාළ `fx:id` එක සමඟ සම්බන්ධ වන බව JavaFX හට දන්වයි.

3.2 බොත්තම එබූ විට ක්‍රියාත්මක වන Method එක සෑදීම

Scene Builder වෙත නැවත ගොස්, `Button` එක තෝරන්න. `Code` පැනලයේ, `On Action` කොටුවේ, method එකක් සඳහා නමක් (උදා: `calculateBMI`) ටයිප් කර Enter ඔබන්න. ඉන්පසු, `HelloController.java` ගොනුවේ, එම නමින් method එකක් නිර්මාණය කරමු.

public class HelloController {
    // ... আগের fields ...

    @FXML
    protected void calculateBMI() {
        // ගණනය කිරීමේ තර්කනය මෙතනට එයි
    }
}

3.3 BMI ගණනය කිරීමේ තර්කනය

දැන් අපි `calculateBMI` method එක සම්පූර්ණ කරමු.

@FXML
protected void calculateBMI() {
    try {
        // 1. TextField වලින් string අගයන් ලබා ගැනීම
        String weightStr = weightField.getText();
        String heightStr = heightField.getText();

        // 2. String අගයන් double (දශම සංඛ්‍යා) බවට පරිවර්තනය කිරීම
        double weight = Double.parseDouble(weightStr);
        double heightInCm = Double.parseDouble(heightStr);

        // 3. උස cm සිට m වලට හැරවීම
        double heightInM = heightInCm / 100.0;
        
        // 4. BMI අගය ගණනය කිරීම (Formula: weight / (height * height))
        double bmi = weight / (heightInM * heightInM);
        
        // 5. ප්‍රතිඵලය දශමස්ථාන දෙකකට සීමා කිරීම
        String formattedBmi = String.format("%.2f", bmi);
        
        // 6. ප්‍රතිඵලය සහ වර්ගීකරණය resultLabel එකේ පෙන්වීම
        String category = getBmiCategory(bmi);
        resultLabel.setText("Your BMI is: " + formattedBmi + "\nCategory: " + category);

    } catch (NumberFormatException e) {
        // පරිශීලකයා සංඛ්‍යා නොවන දෙයක් ඇතුළත් කළහොත්...
        resultLabel.setText("Please enter valid numbers for weight and height.");
    }
}

// BMI වර්ගීකරණය ලබා දෙන සහායක method එකක්
private String getBmiCategory(double bmi) {
    if (bmi < 18.5) {
        return "Underweight";
    } else if (bmi < 24.9) {
        return "Normal weight";
    } else if (bmi < 29.9) {
        return "Overweight";
    } else {
        return "Obesity";
    }
}

මෙහිදී `try-catch` block එකක් භාවිතා කර ඇත්තේ, පරිශීලකයා අකුරු වැනි සංඛ්‍යා නොවන දෙයක් ඇතුළත් කළහොත්, වැඩසටහන බිඳ නොවැටී (crash), දෝෂ පණිවිඩයක් පෙන්වීමටය. මෙය ශක්තිමත් (robust) යෙදුම් නිර්මාණය කිරීමේදී ඉතා වැදගත් වේ.

4 වන කොටස: යෙදුම ක්‍රියාත්මක කිරීම (Running the Application) ▶️

දැන් සියල්ල සූදානම්! IntelliJ IDEA හි ඉහළ දකුණු කෙළවරේ ඇති කොළ පැහැති "Run" බොත්තම (▶) ක්ලික් කරන්න. ඔබගේ BMI Calculator යෙදුම නව කවුළුවකින් විවෘත වනු ඇත. විවිධ බර සහ උස අගයන් ඇතුළත් කර, "Calculate BMI" බොත්තම ඔබා එය නිවැරදිව ක්‍රියා කරන්නේදැයි පරීක්ෂා කරන්න.

සාරාංශය සහ මීළඟ පියවර ✨

සුබ පැතුම්! ඔබ Java සහ JavaFX භාවිතා කර, ඔබගේ පළමු, සම්පූර්ණ, cross-platform desktop යෙදුම සාර්ථකව නිර්මාණය කළා. මෙම ක්‍රියාවලියේදී, ඔබ ඉතා වැදගත් සංකල්ප රැසක් ප්‍රායෝගිකව අත්විඳා ඇත.

• JDK සහ IntelliJ IDEA වැනි Java සංවර්ධන පරිසරයක් සකසා ගන්නා ආකාරය.
• FXML සහ Scene Builder භාවිතා කර, යෙදුමේ තර්කනයෙන් වෙන්ව, දෘශ්‍යමය වශයෙන් අතුරුමුහුණතක් නිර්මාණය කරන ආකාරය.
• `@FXML` annotation එක භාවිතා කර, UI උපාංග Java Controller පන්තියකට සම්බන්ධ කරන ආකාරය.
• බොත්තමක් එබීම වැනි පරිශීලක ක්‍රියාකාරකමකට (event) ප්‍රතිචාර දක්වන කේතයක් ලියන ආකාරය.
• පරිශීලක ආදානයන් ලබාගෙන, ගණනය කිරීම් සිදු කර, ප්‍රතිඵලය නැවත UI එකේ පෙන්වන ආකාරය.

මෙය desktop යෙදුම් නිර්මාණ ලෝකයේ ඔබ තැබූ පළමු පියවරයි. ඔබට මෙම යෙදුම තවදුරටත් දියුණු කළ හැක: CSS භාවිතයෙන් යෙදුම අලංකාර කිරීම, විවිධ මිනුම් ඒකක (pounds, inches) සඳහා සහාය එක් කිරීම, හෝ ප්‍රතිඵල ඉතිහාසයක් (history) සටහන් කර තබා ගැනීම වැනි දේ අත්හදා බලන්න.

ඊළඟට කුමක්ද? Desktop යෙදුම් වලින් නැවත වෙබ් ලෝකයට පිවිසෙමින්, අපගේ මීළඟ නිබන්ධනයෙන්, PHP භාෂාව සහ MySQL දත්ත සමුදාය භාවිතා කර, දත්ත සමුදායක දත්ත ඇතුළත් කරන, වෙනස් කරන, සහ මකා දමන (CRUD) සරල වෙබ් යෙදුමක් ගොඩනගන ආකාරය ඉගෙන ගනිමු!