# Introduction to Java Swing
এতদিন পর্যন্ত আমরা যেই প্রোগ্রাম গুলো রান করতাম, তার output কোথায় দেখা যেত? console এ, তাই না? কিন্তু আজ আমরা প্রথমবারের মত এমন কোড লিখবো, যেটা কিনা আমাদের real world apps এর মত হবে, output গুলো দেখা যাবে graphical user interface (gui) এ। অর্থাৎ তুমি যেমন ফোনের calculator এ কিছু button চেপে চেপে যোগ বিয়োগ করো, ওরকম আমরাও আজ একটা ক্যালকুলেটর বানাবো, যেখানে ইনপুট দেয়া যাবে বাটন চেপে চেপে। আগের মত console এ input টাইপ করবো, আর output ও console এই দেখাবে এমন না।
তাহলে চলো শুরু করা যাক।
-----
### What is Swing in Java?
**Swing** is a built-in Java library that gives us a huge set of pre-built components—like building blocks—to create our own GUIs. অর্থাৎ এখানে আগে থেকেই কিছু জিনিস বানানো আছে, যেমন frame, button, panel, text field ইত্যাদি। কি কি আছে তার একটা ছোট্ট list দেখি চলো।
* **Rich Set of Components:** Swing gives you everything you need right out of the box:
* **`JFrame`**: The main window for your application.
* **`JPanel`**: A container to help you organize other components.
* **`JButton`**: A clickable button.
* **`JLabel`**: A simple text label.
* **`JTextField`**: A box for the user to type in a single line of text.
* ...and many more, like checkboxes, radio buttons, scroll bars, and tables\!
আমরা এগুলো ব্যবহার করে আমাদের software/application গুলো বানাবো ইনশা আল্লাহ।
-----
### 💻 Let's See Some Code\!
চলো, swing দিয়ে hello world টাইপের কিছু একটা বানাই। এখানকার সব কোড না বুঝলেও চিন্তা করতে হবে না। প্রয়োজনের ভিত্তিতে আমরা শিখে নিব ইনশা আল্লাহ।
তোমাদের apache netbeans IDE তে যাও, মানে যেখানে তোমরা জাভা কোড করো আর কি। একটা নতুন project create করো। নাম দিবে, HellowSwing. প্রজেক্ট তৈরি হয়ে গেলে দেখবে HelloSwing.java ফাইলের মধ্যে অনেক গুলো কোড আগে থেকেই দেওয়া আছে। এখন তুমি ctrl+A চেপে সব কোড select করে, backspace দিয়ে সব কোড কেটে দাও। এবার নিচের কোডটি HelloSwing.java ফাইলের মধ্যে copy paste করে দাও। তারপর রান করে দেখো তো কি দেখায়?
```java
package com.mycompany.helloswing;
import javax.swing.*; // This line imports the entire Swing library
public class HelloSwing {
public static void main(String[] args) {
// 1. Create the main window (the "frame")
JFrame frame = new JFrame("Our First GUI");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); // Tell the program to exit when the window is closed
frame.setSize(300, 200); // Set the window's size in pixels (width, height)
// 2. Create a component (a "label")
JLabel label = new JLabel("Hello, BAUSTians!");
label.setHorizontalAlignment(SwingConstants.CENTER); // Center the text
// 3. Add the label to the window's content area
frame.getContentPane().add(label);
// 4. Make the window visible!
frame.setVisible(true);
}
}
```
**Run করলে কি দেখা যায়?**
You'll see a small window pop up on your screen with the text "Hello, BAUSTians\!" right in the middle. You can drag it around, resize it, and close it (which will also stop the program).
-----
### চলো এবার কোডটি একটু বুঝার চেষ্টা করি।
### 1\. The "Import"
```java
import javax.swing.*;
```
* **What it does:** This line is like telling Java, "I need to use the Swing 'building blocks' (the GUI components)." It imports the entire Swing library so we can use classes like `JFrame` and `JLabel`.
-----
### 2\. Setting Up the Main Window
```java
JFrame frame = new JFrame("Our First GUI");
```
* **What it does:** This creates our main window. `JFrame` is the class for a window (the frame, title bar, minimize/maximize/close buttons). We give it a title, "Our First GUI", which appears in the title bar.
<!-- end list -->
```java
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
```
* **What it does:** This is crucial\! It tells the program: "When the user clicks the 'X' button on the window, **stop the entire application**." Without this, the window would close, but your program would keep running in the background.
<!-- end list -->
```java
frame.setSize(300, 200);
```
* **What it does:** This sets the window's size. It's 300 pixels wide and 200 pixels tall.
-----
### 3\. Creating the Content
```java
JLabel label = new JLabel("Hello, BAUSTians!");
```
* **What it does:** This creates a new "label" component. A `JLabel` is the simplest component—it just shows text (or an image). We tell it to display the text "Hello, BAUSTians\!".
<!-- end list -->
```java
label.setHorizontalAlignment(SwingConstants.CENTER);
```
* **What it does:** By default, the label's text would be on the left. This line tells the label to position its text in the **center** horizontally.
-----
### 4\. Putting It All Together
```java
frame.getContentPane().add(label);
```
* **What it does:** This is how we put our label *inside* the window. We get the window's "content area" (the part *inside* the frame) and `add` our `label` to it.
<!-- end list -->
```java
frame.setVisible(true);
```
* **What it does:** This is the final and most important step\! All the work we did was in the background. This line tells Java, "Okay, I'm done setting everything up. **Show the window on the screen now\!**"
And that's it\! You've created a window, created a piece of text, put the text in the window, and then made the whole thing visible.
## এবার আমরা একটা ছোট্ট calculator app বানাবো
#### step 1:
- প্রথমে Apache NetBeans software এ যাব।
- এরপর বামে উপরের দিকে (Top Left corner) create project icon এ click করবো। নিচের ছবিতে লাল বক্স দিয়ে দেখানো হয়েছে। যে window আসবে, সেখান থেকে `Java with Ant` select করবো, ডান দিকে `java application` select করে `Next` button এ click করবো। ছবিতে লাল বক্স দিয়ে তিনটিই দেখানো হয়েছে।
#### step 2:
- এবার প্রজেক্টের একটি নাম দিব `Calculator`.
- **`create main class` এর চেকবক্স থেকে টিক চিহ্নটি তুলে দিব। নিচের ছবিতে লাল বক্স করে দেখানো হয়েছে।**
- এবার `Finish` click করে প্রজেক্টটি তৈরি করি।
#### step 3:
- এবার বাম দিকের project list থেকে আমাদের সদ্য তৈরি করা `Calculator` project এর উপরে mouse এর right click করলে নিচের ছবির মত options দেখাবে। সেখান থেকে `New` -->`Jframe Form` এ click করবো। ছবিতে নীল রং দিয়ে দেখানো হয়েছে।
- এবার নিচের ছবির মত screen আসবে। সেখানে `Class Name` এবং `Package Name` হিসাবে Calculator লিখবো। ছবিতে লাল বক্স দিয়ে দেখানো হয়েছে। এরপর `Finish` button এ click করবো।
- `Finish` এ click করলে নিচের ছবির মতো একটি `JFrame` তৈরি হয়ে যাবে।
#### Step 4:
- `JFrame` এর উপরে mouse দিয়ে right click করলে নিচের ছবির মত options আসবে। সেখান থেকে `Set Layout` --> `Absolute Layout` select করবো।
- এবার mouse ব্যবহার করে আমি যেই সাইজের calculator বানাতে চাই, সেই অনুযায়ী নিজের পছন্দ মত height, width set করে নিব।
- ডান দিকের `Palette` options থেকে `Text Field` এ click করে আমাদের `JFrame` এর মধ্যে paste করে দিব। `Text Field` এর উপরে mouse এর left click করলেই একটি `jTextField` component copy হয়ে যাবে। আবার `JFrame` এর ভিতরে যেখানে paste করতে চাই, সেখানে mouse এর left click করলেই paste হয়ে যাবে। এরপর পছন্দ মত mouse দিয়ে `Text Field` এর সাইজ ঠিক করে নিব। এটিই হবে আমাদের Calculator এর screen.
- Calculator এর button হিসাবে `Palette` থেকে `Button` select করি। মোট 20টি `JButton` আমাদের `JFrame` এর ভিতরে নিব। পছন্দ মতো সাইজ দিব Button গুলোকে।
#### Step 5:
আমাদের basic layout design complete হয়ে গেছে। এখন কিছু formatting এর কাজ করবো আমরা।
- `JTextField` বক্সে mouse এর left click করলে ডান দিকে একটা `Properties` panel দেখা যাবে। সেখান থেকে
- `text` box থেকে jTextField1 লিখাটি কেটে দিব।
- `horizontal alignment` RIGHT select করবো।
- `font` এর একদম ডানে তিনটি ডট চিহ্ন আছে (...), সেখানে click করে font bold করে দিব, font size 24 করে দিব। তোমরা চাইলে পছন্দ অনুযায়ী font size নিতে পারো।
তোমাদের সুবিধার্থে নিচে একটি স্ক্রিনশট যুক্ত করা হলো।
- এবার button গুলোর মধ্যের text গুলোকে একই ভাবে delete করে দিব। যে কোনো একটি button এ mouse এর left click করলে ডানে `properties` panel open হবে। সেখান থেকে `text` field এর মাঝে লেখা `jButton` অংশটি কেটে দিব। সব গুলো button এর ক্ষেত্রেই এই একই কাজ করবো। তুমি চাইলে সব গুলো button কে একসাথে select করে তারপর `jButton` text টি delete করতে পারো, তাহলে একসাথে সব গুলো button এর text clear হয়ে যাবে।
**NB: যদি ভুল করে button গুলোতে double click হয়ে যায়, সেক্ষেত্রে কোডের মধ্যে চলে যাবে। এক্ষেত্রে উপরে design অংশ select করে নিলেই আবার design অংশে ফেরত আসবে।**
#### Step 6:
- এবার আমরা প্রতিটি button এ উপযুক্ত text add করবো। প্রতিটি button এ mouse এর left click করলে আগের মতই ডান দিকে properties panel দেখা যাবে। সেখান থেকে text field এ button অনযায়ী text add করবো। font bold & size 24 করে দিব। এই ধাপ শেষে calculatorটি নিচের ছবির মত দেখানো উচিত। তোমাদের সুবিধার্থে এখানে ← এবং ± character দুইটি দিয়ে দেওয়া হলো।
- এবার পালা প্রতিটি `button` এবং `text field` এর `variable name` change করার। কিভাবে করবো? `text field` বা `button` গুলোতে right click করলে নিচের ছবির মত options আসবে। সেখান থেকে `Change Variable Name` এ click করে variable name গুলো change করতে হবে। কোন variable এর কি নাম দিব, সেটার একটা list নিচে দেওয়া হলো।
Text Feild: jtxtResult
← (Back Space): jbtnBS
CE: jbtnCE
C: jbtnC
±: jbtnPM
0: jbtnDigit0
1: jbtnDigit1
2: jbtnDigit2
3: jbtnDigit3
4: jbtnDigit4
5: jbtnDigit5
6: jbtnDigit6
7: jbtnDigit7
8: jbtnDigit8
9: jbtnDigit9
+: jbtnPlus
-: jbtnMinus
*: jbtnMultiplication
/: jbtnDivision
.: jbtPoint
=: jbtnEqual
#### Step 7:
এবার চলো source এ click করে কিছু কোডিং করি।
- কোডিং এ গেলে দেখবে, `@SupressWarnings` লিখা আছে। বাম পাশে দেখো, লাইন নাম্বারিং কেমন। অনেক গুলো কোড minimize করা আছে। ওগুলো ওভাবেই থাকুক। আমরা ওর নিচে একটা method লিখে ফেলি চলো।
```java
private void EnterNumbers(String q){
String Nums = jtxtResult.getText()+q;
jtxtResult.setText(Nums);
}
```
- আবার design এ ফিরে যাই চলো। এবার 0 to 9 প্রতিটি button এ যেয়ে right click করলে যে options গুলো আসবে সেখান থেকে `Events -> Action -> actionPerformed` এ click করি।
এটি করা মাত্র তুমি automatically code এ চলে যাবে এবং সেখানে নিচের method এর মতো একটি method তৈরি হয়ে যাবে।
```java
private void jbtnDigit7ActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
}
```
*লক্ষ্যণীয়ঃ এখানে আমি যে বাটনে ক্লিক করবো, সেই বাটনের নাম অনুসারেই কিন্তু মেথডের নাম তৈরি হবে। যেমন উদাহরণের বাটনের কোডটি button 7 থেকে এসেছে।*
- এবার আমরা 0 - 9 পর্যন্ত প্রতিটি বাটনের জন্য তৈরি হওয়া মেথডের মধ্যে `EnterNumbers("0"),EnterNumbers("1"), EnterNumbers("2")` ইত্যাদি call করে দিব। নিচের কোডটি button0 এর জন্য। অনুরুপভাবে বাকি digit button গুলোর মেথড গুলোও edit করে ফেলি।
```java
private void jbtnDigit0ActionPerformed(java.awt.event.ActionEvent evt) {
EnterNumbers("0");
}
```
- 0 to 9 পর্যন্ত সব গুলো বাটনের জন্য এই কাজ হয়ে গেলে আমরা কোডটিকে রান করে দেখি চলো। রান করলে নিচের ছবির মতো একটি calculator show করবে। এবং সেখানে 0 to 9 বাটন গুলো press করলে text field এর ভিতরে সেই digit গুলো show করবে। অন্য button গুলো এখনো কাজ করবে না। ওগুলোর কাজ আমরা ধাপে ধাপে সব ঠিক করবো ইনশা আল্লাহ।
#### Step 8:
এবার আমরা চলে যাব বাকি button গুলোর functionality add করতে।
তার আগে আমরা যেহেতু simple যোগ, বিয়োগ, গুণ, ভাগ করবো, সেজন্য আমরা কিছু variables declare করে নিব।
একটি variable হবে প্রথম number টি store করার জন্য, একটি variable হবে দ্বিতীয় number টি store করার জন্য,
একটি variable হবে অপারেশন শেষে result store করার জন্য, একটি variable হবে operator sign (+,-, \*, /) store করার জন্য। আমরা আমাদের কোডে, calculator constructor এর উপরে এই চারটি variable declare করে নিই।
- শুরু করি + button দিয়ে। আগের মতই এবারও button এ right click করে `Events -> Action ->actionPerformed` এ যাই। সেখানে নিচের কোডটি লিখি।
```java
private void jbtnPlusActionPerformed(java.awt.event.ActionEvent evt) {
number1 = Double.parseDouble(jtxtResult.getText());
jtxtResult.setText("");
op = "+";
}
```
- এই একই কাজ বিয়োগ, গুণ, ভাগের জন্যও করি। শুধু মাত্র `op` এর value বাটন অনুযায়ী change হবে।
#### Step 9:
এবার আমরা এক এক করে বাকি button গুলোর কোড করে ফেলি।
**CE (Clear Entry):**
এই বাটনের ক্ষেত্রে `Events -> Actions ->actionPerformed` click করলে আমরা একটি method পাবো। method এ নিচের কোডটি add করে দিই।
```java=
private void jbtnCEActionPerformed(java.awt.event.ActionEvent evt) {
jtxtResult.setText("");
String firstNum, secondNum;
firstNum = String.valueOf(number1);
secondNum = String.valueOf(number2);
firstNum = "";
secondNum = "";
}
```
*উল্লেখ্য, তোমাদের জন্য automatically method prototype ready হয়ে আছে। তোমরা শুধু লাইন ২ থেকে ৭ পর্যন্ত কোডটুকু করবে।*
নিচে বাকি button গুলোর কোডও দেওয়া হলো।
**± (Plus Minus):**
plus minus বাটনের event listner হিসাবে নিচের কোডটুকু লিখে দাও।
```java=
private void jbtnPMActionPerformed(java.awt.event.ActionEvent evt) {
double numbers = Double.parseDouble(String.valueOf(jtxtResult.getText()));
numbers = numbers*(-1);
jtxtResult.setText(String.valueOf(numbers));
}
```
**← (BackSpace):**
backspace button এর event listner হিসাবে নিচের কোডটুকু যুক্ত করে দিই।
```java=
private void jbtnBSActionPerformed(java.awt.event.ActionEvent evt) {
String backSp = null;
if(jtxtResult.getText().length() > 0){
StringBuilder sb = new StringBuilder(jtxtResult.getText());
sb.deleteCharAt(jtxtResult.getText().length() -1);
backSp = sb.toString();
jtxtResult.setText(backSp);
}
}
```
**C (Clear All):**
C button এর জন্য নিচের কোডটি event listner হিসাবে যুক্ত করে দিই।
```java=
private void jbtnCActionPerformed(java.awt.event.ActionEvent evt) {
jtxtResult.setText("");
number1 = 0.0;
number2 = 0.0;
op = "";
}
```
**. (Point):**
Point button এর জন্য নিচের কোডটি event listner হিসাবে যুক্ত করে দিই।
```java=
private void jbtnPointActionPerformed(java.awt.event.ActionEvent evt) {
if(!jtxtResult.getText().contains(".")){
jtxtResult.setText(jtxtResult.getText()+jbtnPoint.getText());
}
}
```
**= (Equal):**
Equal button এর জন্য নিচের কোডটি event listner হিসাবে যুক্ত করে দিই।
```java=
private void jbtnEqualActionPerformed(java.awt.event.ActionEvent evt) {
number2 = Double.parseDouble(jtxtResult.getText());
if(op == "+") {
result = number1 + number2;
jtxtResult.setText(String.valueOf(result));
}
else if(op == "-") {
result = number1 - number2;
jtxtResult.setText(String.valueOf(result));
}
else if(op == "*") {
result = number1 * number2;
jtxtResult.setText(String.valueOf(result));
}
else if(op == "/") {
result = number1 / number2;
jtxtResult.setText(String.valueOf(result));
}
}
```
এবার কোডটি রান করলে একটি functional simple calculator পেয়ে যাব আমরা।
Sign in with Wallet
Connect another wallet