[email protected]
Interview Questions, Answers and Tutorials

Creating a basic calculator application using JavaFX

Creating a basic calculator application using JavaFX

6.2 Building a Simple GUI Applicationtestinganswers.com

Hello young developers! Today, we’re going to embark on an exciting journey to create a basic calculator application using JavaFX. Don’t worry if you’re new to programming – we’ll take it step by step, and by the end, you’ll have your very own calculator!

What You Need:

  1. Java Development Kit (JDK): Make sure you have Java installed on your computer. You can download the latest version from Oracle’s website.
  2. Integrated Development Environment (IDE): We’ll use an IDE to write and run our Java code. Eclipse, IntelliJ IDEA, or NetBeans are popular choices.

Now, let’s get started!

Step 1: Set Up Your Project

Open your IDE and create a new JavaFX project. Give it a cool name like “AwesomeCalculator.”

Step 2: Design the User Interface

In JavaFX, the user interface is created using FXML (a markup language) and a Controller class (Java code). But don’t worry, we’ll keep it simple!

Create the FXML File:

  1. Create a new FXML file (let’s call it Calculator.fxml).
  2. Open the file and add the following code:
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.text.Text?>

<GridPane alignment="CENTER" hgap="10" vgap="10" xmlns:fx="http://javafx.com/fxml/1"
         xmlns="http://javafx.com/javafx/17" fx:controller="your.package.name.CalculatorController">

    <Text fx:id="display" GridPane.columnSpan="4" GridPane.rowIndex="0"/>

    <!-- Buttons for numbers -->
    <Button text="1" onAction="#handleNumberClick"/>
    <Button text="2" onAction="#handleNumberClick"/>
    <Button text="3" onAction="#handleNumberClick"/>

    <!-- Add more buttons for other numbers -->

    <!-- Buttons for operations -->
    <Button text="+" onAction="#handleOperationClick"/>
    <Button text="-" onAction="#handleOperationClick"/>
    <Button text="*" onAction="#handleOperationClick"/>
    <Button text="/" onAction="#handleOperationClick"/>

    <!-- Add more buttons for other operations -->

    <!-- Equals and Clear buttons -->
    <Button text="=" onAction="#handleEqualsClick" GridPane.columnSpan="2"/>
    <Button text="C" onAction="#handleClearClick"/>
</GridPane>

Create the Controller Class:

  1. Create a new Java class (let’s call it CalculatorController.java).
  2. Open the file and add the following code:
package your.package.name;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.text.Text;

public class CalculatorController {

    @FXML
    private Text display;

    private String currentInput = "";
    private String currentOperation = "";
    private double result = 0;

    @FXML
    private void handleNumberClick(ActionEvent event) {
        Button clickedButton = (Button) event.getSource();
        currentInput += clickedButton.getText();
        updateDisplay();
    }

    @FXML
    private void handleOperationClick(ActionEvent event) {
        Button clickedButton = (Button) event.getSource();
        currentOperation = clickedButton.getText();
        result = Double.parseDouble(currentInput);
        currentInput = "";
    }

    @FXML
    private void handleEqualsClick() {
        if (!currentInput.isEmpty()) {
            double operand = Double.parseDouble(currentInput);
            switch (currentOperation) {
                case "+":
                    result += operand;
                    break;
                case "-":
                    result -= operand;
                    break;
                case "*":
                    result *= operand;
                    break;
                case "/":
                    if (operand != 0) {
                        result /= operand;
                    } else {
                        display.setText("Error");
                        return;
                    }
                    break;
            }
            currentInput = "";
            updateDisplay();
        }
    }

    @FXML
    private void handleClearClick() {
        currentInput = "";
        currentOperation = "";
        result = 0;
        updateDisplay();
    }

    private void updateDisplay() {
        display.setText(currentInput.isEmpty() ? String.valueOf(result) : currentInput);
    }
}

Step 3: Run Your App

Now, run your application, and you should see a beautiful calculator! Click the buttons, perform calculations, and be amazed at what you’ve created.

That’s it! You’ve just built a basic calculator using JavaFX. Keep exploring and have fun with programming! If you have any questions, feel free to ask. Happy coding!