Java Swing UI Development: The Beginner's SC Guide

කොහොමද යාලුවනේ? අද අපි කතා කරන්න යන්නේ Java programming වල ගොඩක් දෙනෙක්ට වැදගත් වෙන, ඒ වගේම desktop applications හදන්න කැමති අයට නැතුවම බැරි දෙයක් ගැන – ඒ තමයි Java Swing.

දැන් ඔයාල හිතනවා ඇති desktop applications හැදීම මොකටද කියලා. වෙබ්, mobile apps තියෙද්දි ඇයි තවමත් මේ වගේ දේවල් ඉගෙන ගන්න ඕන? ඇත්ත, තාක්ෂණය ගොඩක් ඉදිරියට ගිහින්. හැබැයි තවමත් ගොඩක් office applications, utilities, special purpose software වගේ දේවල් වලට desktop apps තමයි භාවිත වෙන්නේ. විශේෂයෙන්ම, වෙබ් වලට වඩා වේගවත්, අඩු සම්පත් ප්‍රමාණයක් භාවිතා කරන, අන්තර්ජාල සම්බන්ධතාවය නැතුවත් වැඩ කරන්න පුළුවන් applications ඕන වෙන තැන් වලට Swing වගේ UI frameworks ගොඩක් ප්‍රයෝජනවත් වෙනවා.

අද මේ article එකෙන් අපි බලමු Swing කියන්නේ මොකක්ද, ඒකෙන් මොනවද කරන්න පුළුවන්, සහ ඒක පාවිච්චි කරලා කොහොමද සරල UI එකක් හදාගන්නේ කියලා. බය වෙන්න එපා, ගොඩක් complex දේවල් නෙමෙයි, පටන් ගන්න අයට හරියටම ගැලපෙන basics ටිකක් තමයි කියලා දෙන්නේ. එහෙනම්, අපි පටන් ගමුද?

Swing කියන්නේ මොකක්ද? (Swing 101)

සරලවම කිව්වොත්, Java Swing කියන්නේ Java programming language එක ඇතුලෙම තියෙන UI toolkit එකක්. ඒකෙන් පුළුවන් අපිට graphics වලින් ලස්සන desktop applications හදන්න. මීට කලින් Java වලට AWT (Abstract Window Toolkit) කියලා එකක් තිබ්බා. ඒකෙන් පුළුවන් වුණේ OS එකේ native UI components (buttons, text fields වගේ) පාවිච්චි කරලා UIs හදන්න. හැබැයි AWT වල පොඩි අවුලක් තිබ්බා. ඒක එක OS එකකදී එක විදිහකටයි පෙනුනේ. ඒ කියන්නේ Windows වල හදන App එකක් MacOS වලට දාපුවහම වෙනස් විදිහකට පෙනෙන්න ගත්තා.

ඔන්න ඔය ප්‍රශ්නයට විසඳුමක් විදිහට තමයි Swing ආවේ. Swing components "lightweight" කියලයි හඳුන්වන්නේ. මොකද ඒවා OS එකේ native components මත රඳා පවතින්නේ නැහැ. Swing තමන්ටම ආවේණික විදිහට components (buttons, text fields, tables, etc.) draw කරනවා. මේ නිසා Swing applications ඕනම OS එකක එකම විදිහට පෙනෙනවා. ඒකට තමයි "Look and Feel" කියන්නේ. Swing වලට අවශ්‍ය නම් OS එකේ Look and Feel එකට ගැලපෙන්නත් පුළුවන්.

Swing වල තව වාසියක් තමයි ඒක "platform independent" වීම. ඒ කියන්නේ ඔයා Windows එකේ හදන Swing app එකක් Linux වලට හරි MacOS වලට හරි කිසිම වෙනසක් නැතුව run කරන්න පුළුවන්. ඒ වගේම Swing වල ගොඩක් advanced components (tables, trees, lists, tabbed panes) සහ customization options තියෙන නිසා ඕනෑම complex UI එකක් හදන්න පහසුකම් සලසනවා.

Swing Components: මූලිකම දේවල් ටිකක්

Swing වලින් UI එකක් හදනකොට අපි පාවිච්චි කරන්නේ පුංචි පුංචි කොටස් ගොඩක් එකතු කරලා. මේ කොටස් වලට තමයි components කියන්නේ. අපි දැන් බලමු වැඩිපුරම පාවිච්චි වෙන components කීපයක් ගැන:

• JFrame: මේක තමයි අපේ application එකේ ප්‍රධාන window එක. ඔයාල Windows, Mac වල දකින program එකක ප්‍රධාන frame එක වගේ දෙයක්. සියලුම අනෙකුත් components දාන්නේ මේ JFrame එක ඇතුළට.
• JPanel: මේක container component එකක්. ඒ කියන්නේ මේක ඇතුළට තව components දාන්න පුළුවන්. එක JFrame එකක් ඇතුළේ panels කීපයක් දාලා UI එක කොටස් වලට බෙදාගන්න පුළුවන්. මේකෙන් UI එක සංවිධානය කරගන්න ලේසි වෙනවා.
• JButton: ඔයාල දන්නවා button එකක් කියන්නේ මොකක්ද කියලා. Click කරපුවහම යම්කිසි ක්‍රියාවක් කරන component එකක්.
• JLabel: මේක text display කරන්න පාවිච්චි කරනවා. User ට පණිවිඩයක් දෙන්න, field එකකට නමක් දාන්න මේක හොඳයි.
• JTextField: user කෙනෙක්ට text input කරන්න ඕන නම් මේක පාවිච්චි කරනවා.
• JTextArea: Text Field එක වගේමයි, හැබැයි මේකෙන් පුළුවන් බහු පේළි text input කරන්න.
• JCheckBox: option එකක් select කරන්න/deselect කරන්න.
• JRadioButton: options කීපයක් අතරින් එකක් තෝරන්න.

මේවා තමයි basics. මේ හැම component එකක්ම `JComponent` කියන abstract class එකෙන් extend වෙනවා. ඒ නිසා හැම එකටම common methods ගොඩක් තියෙනවා.

අපිම පොඩි Swing App එකක් හදමු! (Hello Swing!)

හරි, දැන් අපි කතා කරපු දේවල් තවදුරටත් තේරුම් ගන්න, අපිම පුංචි Swing application එකක් හදමු. මේකෙන් අපි සරල window එකක් හදලා, ඒකට button එකක් දාලා, ඒ button එක click කරපුවහම text එකක් වෙනස් වෙන විදිහට හදමු.

මේකට ඔයාලට Java Development Kit (JDK) එක install කරලා තියෙන්න ඕන. ඒ වගේම IntelliJ IDEA, Eclipse, NetBeans වගේ IDE එකක් පාවිච්චි කරනවා නම් වැඩේ තවත් පහසුයි.

පළමු පියවර: JFrame එකක් හදාගමු

මුලින්ම අපි අපේ application එකට ප්‍රධාන window එකක් හදාගමු. මේක තමයි `JFrame` එක.

import javax.swing.*; // Swing library එක import කරගන්න ඕනේ

public class SimpleSwingApp {

    public static void main(String[] args) {
        // 1. JFrame එකක් හදමු
        JFrame frame = new JFrame("මගේ පළමු Swing App එක"); // Window Title එක දෙනවා

        // 2. Window එක වහනකොට මොකක්ද වෙන්න ඕනේ කියලා කියනවා
        // EXIT_ON_CLOSE කියන්නේ program එකම terminate වෙනවා
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        // 3. Window එකේ size එක සෙට් කරමු
        frame.setSize(400, 300); // පළල 400px, උස 300px

        // 4. Window එක screen එකේ මැද පෙනෙන්න සලස්වමු (optional, but good practice)
        frame.setLocationRelativeTo(null);

        // 5. Window එක visible කරමු (මේක නැත්නම් window එක පේන්නේ නෑ)
        frame.setVisible(true);

        System.out.println("Swing App එක සාර්ථකව දියත් වුණා!");
    }
}

මේ code එක run කරාම, `මගේ පළමු Swing App එක` කියලා title එකක් තියෙන හිස් window එකක් ඔයාලට පෙනේවි. සිරාවටම කිව්වොත්, UI development වල පළමු පියවර තමයි මේ!

දෙවන පියවර: Component එකක් එකතු කරමු

දැන් අපි මේ window එකට `JLabel` එකකුයි `JButton` එකකුයි එකතු කරමු. `JLabel` එකක් text display කරන්න, `JButton` එකක් click කරන්න.

Swing වල components වලට ස්ථාන දෙන්න Layout Managers කියලා දෙයක් තියෙනවා. මේ ගැන විස්තරාත්මකව පස්සේ කතා කරමු. දැනට අපි සරලම Layout Manager එකක් වන `FlowLayout` එක පාවිච්චි කරමු. මේකෙන් components එකින් එකට line එකේ දකුණට යනවා. Default Layout එක `BorderLayout` නිසා අපිට `FlowLayout` එක සෙට් කරගන්න ඕනේ.

import javax.swing.*;
import java.awt.FlowLayout; // FlowLayout එකට මේක ඕනේ

public class SimpleSwingApp {

    public static void main(String[] args) {
        JFrame frame = new JFrame("මගේ පළමු Swing App එක");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(400, 300);
        frame.setLocationRelativeTo(null);

        // 1. JPanel එකක් හදමු. මේකට තමයි අපි components දාන්නේ
        JPanel panel = new JPanel();
        panel.setLayout(new FlowLayout()); // FlowLayout එක සෙට් කරනවා

        // 2. JLabel එකක් හදමු
        JLabel label = new JLabel("ආයුබෝවන් Swing ලෝකයට!");

        // 3. JButton එකක් හදමු
        JButton button = new JButton("Click කරන්න!");

        // 4. Components ටික panel එකට එකතු කරමු
        panel.add(label);
        panel.add(button);

        // 5. Panel එක frame එකට එකතු කරමු
        frame.add(panel);

        frame.setVisible(true);

        System.out.println("Swing App එක සාර්ථකව දියත් වුණා!");
    }
}

දැන් code එක run කරලා බලන්න. Window එක ඇතුළේ "ආයුබෝවන් Swing ලෝකයට!" කියලා text එකකුයි "Click කරන්න!" කියලා button එකකුයි පෙනේවි.

Event Handling: සිදුවීම් වලට ප්‍රතිචාර දක්වන හැටි

දැන් අපේ app එකේ button එකක් තියෙනවා, හැබැයි click කරපුවහම මුකුත්ම වෙන්නේ නෑ. මොකද, අපි තවම ඒ button එකට click කරද්දී මොකක්ද වෙන්න ඕන කියලා කියලා දීලා නෑ. ඔන්න ඕකට තමයි Event Handling කියන්නේ. යම්කිසි "සිදුවීමක්" (event) වුණාම (උදා: button එක click කිරීම, key එකක් press කිරීම) program එක ඒකට ප්‍රතිචාර දක්වන විදිහ තමයි මේකෙන් කියන්නේ.

Swing වල button click එකක් වගේ දේවල් handle කරන්න අපි `ActionListener` කියන interface එක පාවිච්චි කරනවා. මේකෙ `actionPerformed()` කියලා method එකක් තියෙනවා. ඒ method එක ඇතුළේ තමයි button එක click කරපුවහම වෙන්න ඕන දේවල් ලියන්නේ.

අපි දැන් අපේ `button` එකට `ActionListener` එකක් එකතු කරමු, ඒක click කරපුවහම `JLabel` එකේ text එක වෙනස් වෙන්න.

import javax.swing.*;
import java.awt.FlowLayout;
import java.awt.event.ActionEvent; // Event handling වලට මේක ඕනේ
import java.awt.event.ActionListener; // Event handling වලට මේක ඕනේ

public class SimpleSwingApp {

    public static void main(String[] args) {
        JFrame frame = new JFrame("මගේ පළමු Swing App එක");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(400, 300);
        frame.setLocationRelativeTo(null);

        JPanel panel = new JPanel();
        panel.setLayout(new FlowLayout());

        JLabel label = new JLabel("ආයුබෝවන් Swing ලෝකයට!");
        JButton button = new JButton("Click කරන්න!");

        // 1. Button එකට ActionListener එකක් එකතු කරමු
        button.addActionListener(new ActionListener() {
            @Override
            public void actionPerformed(ActionEvent e) {
                // Button එක click කරපුවහම මේක ඇතුළේ තියෙන code එක execute වෙනවා
                label.setText("ඔබ Button එක Click කළා!"); // JLabel එකේ text එක වෙනස් කරනවා
                JOptionPane.showMessageDialog(frame, "ඔබ button එක click කළා!"); // පොඩි popup එකක් පෙන්නනවා
            }
        });

        panel.add(label);
        panel.add(button);

        frame.add(panel);

        frame.setVisible(true);

        System.out.println("Swing App එක සාර්ථකව දියත් වුණා!");
    }
}

දැන් run කරලා බලන්න. Button එක click කරපුවහම `JLabel` එකේ text එක වෙනස් වෙලා, "ඔබ button එක click කළා!" කියලා පොඩි message box එකකුත් එනවා. මේක තමයි Event Handling කියන්නේ. ඕනම interactive UI එකකට මේක අත්‍යවශ්‍යයි.

Layout Managers: පෙනුම පිළිවෙලට තියාගමු!

අපේ UI එකේ components හරියට තියාගන්න layout managers කියන ඒවා ගොඩක් වැදගත්. අපි කලින් `FlowLayout` එක පාවිච්චි කළා. ඒක components එකින් එකට දකුණට දානවා. Swing වල තව layout managers ගොඩක් තියෙනවා:

• BorderLayout: මේක default layout එක. Window එක උඩ, යට, වම්, දකුණු, මැද කියලා කොටස් 5කට බෙදනවා.
• GridLayout: මේකෙන් components table එකක් වගේ rows සහ columns විදිහට සකස් කරනවා.
• GridBagLayout: මේක ගොඩක් flexible, ඒ වගේම ටිකක් සංකීර්ණ layout manager එකක්. Components වලට grid එකක් ඇතුළේ වෙනස් ප්‍රමාණයේ ඉඩක් දෙන්න පුළුවන්.
• BoxLayout: components එක පෙළට (horizontally or vertically) තියාගන්න පුළුවන්.

ඔයාගේ app එකේ UI එකේ සංකීර්ණත්වය අනුව ගැලපෙන layout manager එකක් තෝරගන්න එක ගොඩක් වැදගත්. UI එක ලස්සනට පිළිවෙලට තියාගන්න මේවා අත්‍යවශ්‍යයි.

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

අද අපි Java Swing ගැන සරල හැඳින්වීමක් කළා. Swing කියන්නේ desktop applications හදන්න පුළුවන්, platform independent, lightweight UI toolkit එකක් කියලා අපි ඉගෙන ගත්තා. ඒ වගේම `JFrame`, `JPanel`, `JButton`, `JLabel` වගේ මූලික components ගැන දැනගත්තා. පොඩි example එකක් කරලා button click එකක් handle කරන විදිහත් අපි බැලුවා. Layout Managers වල වැදගත්කමත් මතක් කළා.

මේක Swing ලෝකයේ පොඩි පියවරක් විතරයි. මේකෙන් ඔයාලට මූලික අදහසක් ලැබෙන්න ඇති කියලා මම හිතනවා. ඉදිරියේදී තවත් දේවල් ඉගෙන ගන්න මේක පදනමක් කරගන්න පුළුවන්. තව components, advanced event handling, database connectivity, threading වගේ දේවල් ගැනත් ඔයාලට ඉගෙන ගන්න පුළුවන්.

මතක තියාගන්න, coding කියන්නේ practice කරන තරමට දියුණු වෙන දෙයක්. අද අපි හදපු පොඩි application එකට තව components එකතු කරලා, ඒවට events දාලා පොඩි පොඩි experiments කරලා බලන්න. එතකොට තමයි ඔයාලට මේ concepts හොඳට තේරෙන්නේ.

මේ article එක ගැන ඔයාලගේ අදහස්, ප්‍රශ්න පහලින් comment එකකින් කියන්න අමතක කරන්න එපා. තව මොන වගේ topics ගැනද දැනගන්න කැමති කියලත් කියන්න. එහෙනම්, තවත් අලුත් දෙයක් එක්ක හමුවෙමු! Happy Coding!