How to make QR Code Generator using JavaFX & Fxml
How to make QR Code Generator using JavaFX & Fxml

How to make QR Code Generator using JavaFX & Fxml v1.0

Posted on

The given code is a JavaFX application that generates QR code. Here is a brief explanation of the code:

  1. The package name is declared as qrcodegenerater.
  2. The necessary imports are added for JavaFX and IOException.
  3. The class QRCodegenerater extends the Application class.
  4. The start method is overridden which loads the FXML file (named “myqr.fxml”) that defines the user interface of the application. The loaded FXML file is set as the root node for a new scene. The scene is then set to the primary stage and the primary stage is displayed.
  5. The main method is defined which launches the application.
  6. Overall, the code defines a simple JavaFX application that generates QR code using the FXML file and shows it on the screen.

QR Code Java Main Class Code


package qrcodegenerater;

import java.io.IOException;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class QRCodegenerater extends Application {
    
    @Override
    public void start(Stage primaryStage) throws IOException {
        Parent root = FXMLLoader.load(getClass().getResource("myqr.fxml"));
        Scene scene = new Scene(root);
        
        primaryStage.setTitle("Developer QR Code");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
    
}

The given code is the controller class for the JavaFX application that generates QR code. Here is a brief explanation of the code:

  1. The necessary imports are added for JavaFX, QR code generation, and input/output operations.
  2. The class MyqrController implements the Initializable interface.
  3. Three fields are defined using the @FXML annotation to access the user interface elements defined in the FXML file: a TextArea for user input, a Button to generate the QR code, and an ImageView to display the generated QR code image.
  4. The initialize method is overridden which is called after the FXML file is loaded. Currently, this method is empty.
  5. Learn More : How do I make an HTTP request in Javascript?
  6. The generateBtn method is defined which is called when the Button is clicked. This method retrieves the user input from the TextArea, generates the QR code image using the QRCode class from the net.glxn.qrgen package, converts the generated QR code image to an Image object using JavaFX, and displays the generated QR code image in the ImageView. The TextArea and the Button are then hidden to show the QR code image clearly.
  7. Overall, the code defines a controller class for the JavaFX application that generates QR code using the user input from the TextArea and displays the generated QR code image in the ImageView.

QR Code controllerClass Code

package qrcodegenerater;

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import net.glxn.qrgen.QRCode;
import net.glxn.qrgen.image.ImageType;

public class MyqrController implements Initializable {

    @FXML
    TextArea textArea;
    @FXML
    Button gBtn;
    @FXML
    ImageView showQRImg;

    @Override
    public void initialize(URL url, ResourceBundle rb) {

    }

    public void generateBtn(ActionEvent event) throws FileNotFoundException, IOException, InterruptedException {
       
        String getUserData = textArea.getText().toString().trim();
        ByteArrayOutputStream out = QRCode.from(getUserData).to(ImageType.PNG).stream();
        InputStream in = new ByteArrayInputStream(out.toByteArray());
        Image image = new Image(in);
        showQRImg.setImage(image);
        textArea.setVisible(false);
        gBtn.setVisible(false);
    }

}

The given code is an FXML file that defines the user interface for the JavaFX application that generates QR code. Here is a brief explanation of the code:

  1. The XML declaration is included at the top of the file.
  2. The <AnchorPane> element is the root element of the FXML file and defines the layout container for the UI elements.
  3. The id, prefHeight, prefWidth, and styleClass attributes are set for the <AnchorPane> element.
  4. The <stylesheets> element is used to import an external CSS file, which will be used to style the UI elements.
  5. The <children> element contains the UI elements of the application.
  6. The <TextArea> element defines a text area where the user can input text or a link. The fx:id, layoutX, layoutY, prefHeight, prefWidth, and promptText attributes are set for this element. The fx:id attribute is used to associate the UI element with a variable in the controller class. The promptText attribute sets the placeholder text to display when the TextArea is empty.
  7. The <Button> element defines a button that the user can click to generate the QR code. The fx:id, layoutX, layoutY, onAction, prefHeight, prefWidth, and text attributes are set for this element. The fx:id attribute is used to associate the UI element with a method in the controller class. The onAction attribute specifies the method to call when the button is clicked.
  8. The <ImageView> element defines an area to display the generated QR code image. The fx:id, fitHeight, fitWidth, layoutX, layoutY, pickOnBounds, and preserveRatio attributes are set for this element. The fx:id attribute is used to associate the UI element with a variable in the controller class. The fitHeight and fitWidth attributes set the size of the image to fit inside the ImageView. The pickOnBounds and preserveRatio attributes are set to true.
  9. Overall, the FXML file defines the user interface for the JavaFX application that generates QR code using a TextArea to input user data and a Button to generate the QR code image. The generated QR code image is displayed using an ImageView.

FXML Code for QR Code

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

<?import java.net.URL?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="375.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="qrcodegenerater.MyqrController">
    <stylesheets>
        <URL value="@myqr.css" />
    </stylesheets>
   <children>
      <TextArea fx:id="textArea" layoutX="24.0" layoutY="43.0" prefHeight="275.0" prefWidth="324.0" promptText="Enter your text or link">
         <font>
            <Font size="18.0" />
         </font></TextArea>
      <Button fx:id="gBtn" layoutX="24.0" layoutY="333.0" mnemonicParsing="false" onAction="#generateBtn" prefHeight="39.0" prefWidth="324.0" text="Generate">
         <font>
            <Font name="System Bold" size="18.0" />
         </font></Button>
      <ImageView fx:id="showQRImg" fitHeight="218.0" fitWidth="296.0" layoutX="38.0" layoutY="65.0" pickOnBounds="true" preserveRatio="true" />
   </children>
</AnchorPane>

Leave a Reply

Your email address will not be published. Required fields are marked *