JavaFX Tutorial Sinhala | Desktop App සංවර්ධනය | GUI Programming Sri Lanka

කොහොමද යාලුවනේ! ඉතින් කොහොමද වැඩ? මේ දවස්වල Programming ලෝකේ හරිම වේගෙන් වෙනස් වෙනවා නේද? Web Development, Mobile Development වගේ දේවල් වලට තියෙන Demand එකත් එක්ක Desktop Applications වලට කලින් තිබ්බ තැන නැතිවෙලා වගේ පෙනුනට, තාමත් Desktop Applications වලට ලොකු තැනක් තියෙනවා. විශේෂයෙන්ම Business Applications, Scientific Tools, Gaming වගේ දේවල් වලට Desktop Applications නැතුවම බැහැ. අද අපි කතා කරන්න යන්නේ මේ වගේ Desktop Applications හදන්න පුළුවන් පට්ටම Framework එකක් ගැන – ඒ තමයි JavaFX.

දැන් අපි බලමු ඇයි JavaFX මෙච්චර වැදගත් වෙන්නේ කියලා. කාලයක් තිස්සේ Java වලට GUI Development වලට තිබ්බ ප්‍රධාන Frameworks වුණේ Swing සහ AWT. මේවා හොඳ Frameworks වුණත්, ඒවා Design කරලා තියෙන්නේ අද වගේ Modern UI/UX Experience එකක් දෙන්න නෙවෙයි. ඒ වගේම Performance, Customizability, Scalability වගේ දේවල් වලදීත් යම් යම් සීමාවන් තිබ්බා. JavaFX එන්නේ මේ හැම ගැටලුවකටම විසඳුමක් විදියට. JavaFX කියන්නේ සම්පූර්ණයෙන්ම Graphics Hardware Acceleration Support එකත් එක්ක එන, CSS Styling වලට Support කරන, FXML වලින් Declarative UI හදන්න පුළුවන්, ගොඩක් දේවල් Modular විදියට හදන්න පුළුවන්, Java Platform එකේ අලුත් Features එක්ක හොඳින් Integrate වෙන Framework එකක්.

JavaFX කියන්නේ මොකද්ද? Modern Desktop App හදමු SC Guide

සරලවම කිව්වොත් JavaFX කියන්නේ Java වලින් Graphical User Interface (GUI) තියෙන Applications හදන්න පුලුවන් Platform එකක්. Java 8 release එකත් එක්ක තමයි මේක ගොඩක් ජනප්‍රිය වුණේ. Swing සහ AWT වලට වඩා ගොඩක් Modern සහ Powerful Platform එකක් තමයි මේක.

JavaFX වල විශේෂතා සහ වාසි:

• නවීන පෙනුමක් සහ හැඟීමක් (Modern Look & Feel): JavaFX වලින් හදන Applications වලට ගොඩක් Professional, Smooth animations එක්ක එන UI එකක් දෙන්න පුළුවන්. Mobile Applications වලට සමාන User Experience (UX) එකක් දෙන්න පුළුවන් වීමත් මෙහි විශේෂත්වයක්. Retina Displays, High-DPI screens වලටත් හොඳට Support කරනවා.
• FXML: UI එක Code එකෙන් Design කරනවට වඩා, XML වගේ Markup Language එකක් වන FXML වලින් UI Design කරන්න පුළුවන්. මේකෙන් UI එක සහ Application Logic එක වෙන් කරලා වැඩ කරන්න පුළුවන් නිසා Maintainability එක වැඩි වෙනවා. Developers ලා කිහිප දෙනෙක්ට එකම Project එකක වැඩ කරනකොට මේක ලොකු වාසියක්.
• CSS Styling: Web Development වලදී CSS පාවිච්චි කරනවා වගේම, JavaFX Applications වලටත් CSS වලින් Styles apply කරන්න පුළුවන්. මේකෙන් UI එකේ Look & Feel එක Customize කරන එක ගොඩක් පහසු වෙනවා. Standard CSS Syntax එක පාවිච්චි කරන නිසා Web Developers ලාට මේක ඉක්මනට හුරු වෙන්න පුළුවන්.
• Scene Builder: FXML වලින් UI Design කරන එකට Visual Editor එකක් විදියට Scene Builder කියන Tool එක පාවිච්චි කරන්න පුළුවන්. Drag & Drop කරලා UI Controls, Layouts වගේ දේවල් Add කරන්න පුළුවන්. ඒ වගේම Properties, CSS Styles වගේ දේවල් Visual විදියට Edit කරන්න පුළුවන්. මේකෙන් UI Design කරන එක ගොඩක්ම ලේසි වෙනවා. JetBrains IntelliJ IDEA වගේ IDE වලට Scene Builder Integrate කරලා තියෙනවා.
• Built-in UI Controls: Buttons, TextFields, Tables, Charts, DatePickers වගේ ගොඩක් Standard UI Controls JavaFX වල Built-in තියෙනවා. මේවා පාවිච්චි කරලා ඉක්මනට Applications හදන්න පුළුවන්.
• Multimedia Support: Audio සහ Video Playback වලට Built-in Support එකක් තියෙනවා. Web Components පවා JavaFX Application එකක් ඇතුළේ Show කරන්න පුළුවන්.
• Platform Independent: Java වලින් හදන නිසා, Windows, macOS, Linux වගේ ඕනෑම Operating System එකක JavaFX Application එකක් Run කරන්න පුළුවන්. ඒ වගේම Self-contained Executables විදියට Export කරන්නත් පුළුවන්.
• Modularity: Java 9 Module System එකත් එක්ක JavaFX Libraries දැන් Modular විදියට එනවා. මේකෙන් Application එකට අවශ්‍ය Modules ටික විතරක් Add කරලා, Size එක අඩු කරගන්න පුළුවන්.

JavaFX Project එකක් පටන් ගමු!

දැන් අපි බලමු JavaFX Project එකක් කොහොමද පටන් ගන්නේ කියලා. ගොඩක් වෙලාවට අපි Build Tools (Maven, Gradle) එක්ක තමයි වැඩ කරන්නේ. මේකෙන් Dependencies Manage කරන එක සහ Project එක Build කරන එක ගොඩක් පහසු වෙනවා. මෙතනදී අපි සරල Maven Project එකක් හදාගමු.

අවශ්‍ය දේවල්:

• JDK (Java Development Kit) 11 හෝ ඊට ඉහළ (JavaFX දැන් JDK එකත් එක්ක Bundle වෙලා එන්නේ නැහැ, OpenJFX Project එකෙන් Module එකක් විදියට Add කරන්න ඕනේ).
• IDE (Integrated Development Environment) එකක් – IntelliJ IDEA Community Edition, Eclipse, NetBeans වගේ එකක්. මේවාට JavaFX Plugins සහ Scene Builder Integrations තියෙනවා.

Maven Project එකක් Setup කරගන්න හැටි:

ඔයා Maven පාවිච්චි කරනවා නම්, pom.xml එකට පහත Dependencies සහ Plugins එකතු කරන්න ඕනේ. මේකෙන් JavaFX Modules ටික Project එකට Add වෙනවා වගේම, Application එක Run කරන්න අවශ්‍ය Plugin එකත් Setup වෙනවා.

<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.yourcompany</groupId>
    <artifactId>myjavafxapp</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>17</maven.compiler.source>
        <maven.compiler.target>17</maven.compiler.target>
        <javafx.version>17</javafx.version> <!-- හෝ ඔබ භාවිතා කරන JavaFX version එක -->
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-controls</artifactId>
            <version>${javafx.version}</version>
        </dependency>
        <dependency>
            <groupId>org.openjfx</groupId>
            <artifactId>javafx-fxml</artifactId>
            <version>${javafx.version}</version>
        </dependency>
        <!-- තව Modules අවශ්‍ය නම් මෙතනට එකතු කරන්න -->
        <!-- Ex: javafx-graphics, javafx-web, javafx-media -->
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.8.1</version>
                <configuration>
                    <source>${maven.compiler.source}</source>
                    <target>${maven.compiler.target}</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.openjfx</groupId>
                <artifactId>javafx-maven-plugin</artifactId>
                <version>0.0.8</version> <!-- නවතම Version එකක් භාවිතා කරන්න -->
                <configuration>
                    <mainClass>com.yourcompany.myjavafxapp.HelloApplication</mainClass>
                </configuration>
                <executions>
                    <execution>
                        <id>default-cli</id>
                        <goals>
                            <goal>run</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>

JavaFX Application එකක මූලික ව්‍යුහය

ඕනෑම JavaFX Application එකක් Application Class එක Extend කරලා තියෙන්න ඕනේ. ඒ වගේම start() Method එක Override කරන්න ඕනේ. මේ start() Method එක තමයි Application එක ආරම්භ වෙනකොට Call වෙන්නේ. JavaFX Application එකක Life Cycle එක Manage වෙන්නේ මේ Class එක හරහා.

මූලිකවම JavaFX Application එකක් කියන්නේ Stage, Scene, සහ Node කියන Components තුනකින් හැදිච්ච එකක්. මේ Concept එක තේරුම් ගන්න එක JavaFX Programming වලට අත්‍යවශ්‍යයි.

• Stage: මේක තමයි Application එකේ Main Window එක. OS එකේ Window එකක් වගේ හිතන්න පුළුවන්. මේකේ Title එක, Resize වෙනවද නැද්ද, Full Screen වෙනවද නැද්ද වගේ දේවල් Set කරන්න පුළුවන්. Multiple Stages (windows) වුණත් එක Application එකක තියන්න පුළුවන්.
• Scene: Stage එක ඇතුලේ තියෙන Content එක තමයි Scene එක. මේක තමයි UI Elements (Nodes) තියෙන Container එක. හැම Stage එකකටම එක Scene එකක් තියෙන්න ඕනේ. Scene එකක් ඇතුලේ Layout Panes (VBox, HBox, BorderPane, GridPane) වගේ දේවල් පාවිච්චි කරලා Nodes Organize කරන්න පුළුවන්.
• Node: Scene එක ඇතුලේ තියෙන හැම UI Element එකක්ම Node එකක් විදියට හඳුන්වනවා. Buttons, TextFields, Labels, Images, Shapes වගේ හැම දෙයක්ම Nodes. මේ Nodes වලට Event Handling, Styling, Transformations වගේ දේවල් Apply කරන්න පුළුවන්. Nodes වලට Parent-Child Hierarchy එකක් තියෙනවා.

සරල "Hello JavaFX!" Application එකක් හදමු:

අපි දැන් සරලම JavaFX Application එකක් හදලා බලමු. මේකෙන් JavaFX Application එකක් කොහොමද initialize වෙන්නේ කියලා ඔයාලට පැහැදිලි වෙයි.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class HelloApplication extends Application {

    @Override
    public void start(Stage primaryStage) {
        // Create a Label Node
        Label helloLabel = new Label("ආයුබෝවන් JavaFX ලෝකයට!");

        // Create a Layout Pane (StackPane centers content by default)
        StackPane root = new StackPane();
        root.getChildren().add(helloLabel); // Add the label to the pane

        // Create a Scene with the root pane, specifying width and height
        Scene scene = new Scene(root, 300, 200);

        // Set the Scene to the Stage
        primaryStage.setScene(scene);

        // Set the title of the Stage (window)
        primaryStage.setTitle("මගේ පළමු JavaFX App එක");

        // Show the Stage (make the window visible)
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args); // This is the entry point for JavaFX applications
    }
}

මේ Code එකෙන් වෙන්නේ "ආයුබෝවන් JavaFX ලෝකයට!" කියලා පෙන්නන පොඩි Window එකක් Open වෙන එක. launch(args) කියන Method එක තමයි JavaFX Runtime එක initialize කරලා start() Method එක Call කරන්නේ. මේක තමයි ඔයාගේ Application එකේ Entry Point එක. ඔයාගේ IDE එකෙන් මේ Project එක Run කරලා බලන්න පුළුවන්.

UI Design කරමු: FXML සහ Scene Builder

සාමාන්‍යයෙන් UI එක Java Code එකෙන් ලියන එක ගොඩක් වෙලාවට අපහසුයි. විශේෂයෙන්ම Complex UIs හදනකොට Code එක අවුල් වෙන්න පුළුවන් වගේම, UI Design වෙනස් කරන එකත් ලොකු අමාරුවක් වෙන්න පුළුවන්. මේකට හොඳම විසඳුම තමයි FXML සහ Scene Builder පාවිච්චි කරන එක.

FXML කියන්නේ මොකද්ද?

FXML කියන්නේ JavaFX UI එක Declarative විදියට Define කරන්න පාවිච්චි කරන XML-based Markup Language එකක්. මේකෙන් UI එකේ Structure එක සහ එහි Components (Nodes) තියෙන විදිය Define කරන්න පුළුවන්. මේකෙන් UI එක සහ Application Logic (Java Code) එක වෙන් කරලා තියන්න පුළුවන්. මේකට MVC (Model-View-Controller) Design Pattern එකට ගොඩක් ගැලපෙනවා. UI Designers ලාට Code එක ගැන වැඩි අවබෝධයක් නැතුව FXML Files එක්ක වැඩ කරන්න පුළුවන් වීමත් මෙහි වාසියක්.

උදාහරණයක් විදියට, Button එකක් FXML වලින් මේ වගේ ලියන්න පුළුවන්:

<Button text="Click Me!" onAction="#handleClick"/>

මෙතනදී onAction="#handleClick" කියන එකෙන් කියවෙන්නේ මේ Button එක Click කරහම Controller Class එකේ තියෙන handleClick කියන Method එක Call කරන්න කියලා. fx:id වගේ Attributes වලින් FXML එකේ Elements වලට Unique Identifiers දීලා Java Code එකෙන් ඒවා Access කරන්නත් පුළුවන්.

Scene Builder පාවිච්චි කරමු

Scene Builder කියන්නේ FXML Files Edit කරන්න පුළුවන් Visual Editor එකක්. මේකෙන් Drag and Drop කරලා UI Controls, Layouts, Shapes, Images වගේ දේවල් Add කරන්න පුළුවන්. ඒ වගේම Properties, CSS Styles වගේ දේවල් Visual විදියට Edit කරන්න පුළුවන්. මේකෙන් UI Design කරන එක ගොඩක්ම ලේසි වෙනවා. JetBrains IntelliJ IDEA වගේ IDE වලට Scene Builder Integrate කරලා තියෙනවා. මේක භාවිතා කරන එකෙන් Application එකක් හදන වේගය ගොඩක් වැඩි කරගන්න පුළුවන්.

පොඩි Program එකක් හදමු: Button Click Event එකක්

දැන් අපි පොඩි Application එකක් හදමු. Button එකක් Click කරහම Label එකක Text එක වෙනස් වෙන විදියට. අපි මේකට FXML සහ Controller එකක් පාවිච්චි කරමු. මේකෙන් FXML සහ Java Code අතර Interaction එක තේරුම් ගන්න පුළුවන්.

1. FXML File එක හදමු (hello-view.fxml):

මේ File එක ඔයාගේ Project එකේ src/main/resources/com/yourcompany/myjavafxapp/ Folder එක ඇතුලේ හදන්න.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<GridPane fx:controller="com.yourcompany.myjavafxapp.HelloController" <!-- Controller Class එක මෙතනට දාන්න -->
          xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
    <padding><Insets top="25" right="25" bottom="10" left="25"/></padding>

    <Label fx:id="welcomeText" text="Welcome to JavaFX!" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
    <Button text="Say Hello!" onAction="#onHelloButtonClick" GridPane.columnIndex="1" GridPane.rowIndex="0"/>
</GridPane>

මේ FXML එකේ GridPane එකක් තියෙනවා. ඒක ඇතුලේ Label එකක් සහ Button එකක් තියෙනවා. welcomeText කියන්නේ Label එකට දීපු fx:id එක. මේක Controller එකෙන් Access කරන්න පාවිච්චි කරනවා. onHelloButtonClick කියන්නේ Button එක Click කරාම Call වෙන Method එක. GridPane.columnIndex සහ GridPane.rowIndex වලින් UI Controls Grid එකේ කොතනද තියෙන්න ඕනේ කියලා තීරණය කරනවා.

2. Controller Class එක හදමු (HelloController.java):

මේ File එක ඔයාගේ Project එකේ src/main/java/com/yourcompany/myjavafxapp/ Folder එක ඇතුලේ හදන්න.

package com.yourcompany.myjavafxapp;

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

public class HelloController {
    @FXML
    private Label welcomeText; // Corresponds to fx:id="welcomeText" in FXML

    @FXML
    protected void onHelloButtonClick() {
        welcomeText.setText("ආයුබෝවන් යාලුවනේ, JavaFX නියමයි නේද!");
    }
}

මේ Controller එකේ @FXML Annotation එක පාවිච්චි කරලා welcomeText කියන Label එක FXML එකත් එක්ක Connect කරලා තියෙනවා. ඒ වගේම onHelloButtonClick() Method එකත් @FXML කරලා තියෙන්නේ FXML එකෙන් මේක Call කරන්න පුළුවන් වෙන්න. Button එක Click කරාම welcomeText එකේ Text එක වෙනස් වෙනවා.

3. Main Application Class එක Update කරමු (HelloApplication.java):

දැන් අපි කලින් හදපු Main Application Class එක FXML Load කරන්න විදියට වෙනස් කරමු. මේකත් src/main/java/com/yourcompany/myjavafxapp/ Folder එක ඇතුලේ තියෙනවා.

package com.yourcompany.myjavafxapp;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

import java.io.IOException;

public class HelloApplication extends Application {
    @Override
    public void start(Stage stage) throws IOException {
        // Load the FXML file using FXMLLoader
        FXMLLoader fxmlLoader = new FXMLLoader(HelloApplication.class.getResource("hello-view.fxml"));
        
        // Create a Scene from the loaded FXML, specifying dimensions
        Scene scene = new Scene(fxmlLoader.load(), 320, 240);
        
        // Set the title of the stage (window)
        stage.setTitle("JavaFX Click Me App");
        
        // Set the scene to the stage
        stage.setScene(scene);
        
        // Display the stage
        stage.show();
    }

    public static void main(String[] args) {
        launch(); // The JavaFX application entry point
    }
}

මේ Code එකේ FXMLLoader එක පාවිච්චි කරලා hello-view.fxml file එක Load කරනවා. මේකෙන් FXML එකේ Define කරලා තියෙන UI එක Load වෙලා Scene එකක් විදියට Show වෙනවා. දැන් ඔයාලට මේ Project එක Run කරලා Button එක Click කරලා බලන්න පුළුවන්.

අවසාන වශයෙන්...

ඉතින් යාලුවනේ, JavaFX කියන්නේ Desktop Application Development වලට තියෙන පට්ටම Tool එකක්. විශේෂයෙන්ම Java Development වලට කැමති අයට හෝ දැනටමත් Java Back-End එකේ වැඩ කරන අයට Front-End එකටත් JavaFX පාවිච්චි කරන එක ලොකු වාසියක්. Modern UI එකක්, FXML වලින් Declarative Design, CSS Styling, සහ Platform Independence වගේ ගොඩක් දේවල් නිසා JavaFX ගොඩක් Powerful වෙනවා.

අද අපි JavaFX වල මූලිකම දේවල් ගැන කතා කළා. Project එකක් Setup කරන විදිය, Application එකක Basic Structure එක, FXML සහ Controller Concepts, සහ පොඩි Application එකක් හදන විදිය ගැන ඔයාලට අදහසක් එන්න ඇති කියලා හිතනවා. මේක ඔයාලට JavaFX ගැන මූලික අවබෝධයක් ලබාගන්න ලොකු Support එකක් වෙයි.

මේක ආරම්භයක් විතරයි! JavaFX වල ගොඩක් දේවල් තියෙනවා ඉගෙන ගන්න. Data Binding, Concurrency (Service, Task), Custom Controls, Graphs, Charts, Animations, Effects වගේ දේවල් ගැන තව දුරටත් ඉගෙන ගන්න පුළුවන්. Official Oracle JavaFX Documentation සහ OpenJFX Project Website එක වගේ Resources වලින් ඔයාලට තවදුරටත් ඉගෙන ගන්න පුළුවන්.

ඔයාලත් මේක Try කරලා බලන්න. ඔයාලගේ අදහස්, මේ Article එක ගැන ප්‍රශ්න, නැත්නම් JavaFX ගැන තව මොනවා ගැනද ඔයාලට දැනගන්න ඕනේ කියලා පහළින් Comment කරන්න. ඔයාලගේ Comments අපිට ගොඩක් වටිනවා. එහෙනම් තවත් අලුත් Tech Article එකකින්, විශේෂයෙන්ම GUI Development ගැන තවදුරටත් කතා කරන්න බලාපොරොත්තුවෙන් හමුවෙමු! Happy Coding!