Developing a Stunning JavaFX Lottery Number Generator

In this post, I’ll walk you through the development of a modernized JavaFX application that generates lottery numbers with a sleek user interface and captivating animations. The goal was to take a basic lottery number generator and transform it into an engaging experience while preserving its core functionality: generating six unique random numbers between 1 and 45. Let’s dive into the journey of building this application, from design decisions to technical implementation.

Project Overview

The original application was a simple JavaFX program with a basic FXML layout, a button to generate lottery numbers, and a label to display the results with a rudimentary scaling animation. The challenge was to elevate the user experience by introducing a polished UI and a dynamic animation where numbers appear one by one, mimicking the excitement of a real lottery draw. The result is a visually appealing application with circular number displays, a gradient background, hover effects, and smooth animations.

Design Goals

To make the application stand out, I focused on the following enhancements:

Modern UI: Replace the plain layout with a gradient background, circular number displays, and a shadowed container for a professional look.
Engaging Animations: Implement a sequential animation where each number appears with a fade-in and scale-up effect, creating a sense of anticipation.
Preserve Functionality: Ensure the core logic of generating six unique random numbers remains intact.
User-Friendly: Maintain simplicity with a single button to trigger the number generation and clear visual feedback.

Technical Implementation

The application is built using JavaFX, with the UI defined in FXML, styled with CSS, and logic handled in a Java controller. Below, I’ll break down the key components and improvements.

1. FXML Layout (`hello-view.fxml`)

The FXML file defines the structure of the UI. The updated layout includes:

A VBox with a gradient background (linear-gradient(to bottom right, #e0f7fa, #80deea)) for a vibrant look.
A styled Button with rounded corners, white text, and a teal background.
An HBox containing six StackPane elements, each holding a Circle and a Label to display a number. The circles have a white fill and teal border, giving a clean, modern appearance.
A reference to an external CSS file (styles.css) for additional styling.

Each StackPane is assigned an fx:id (e.g., stackPane1, label1) to allow the controller to manipulate them dynamically. The labels start with zero opacity to enable fade-in animations.

2. CSS Styling (`styles.css`)

The CSS file enhances the visual appeal with:

A hover effect on the button that darkens its background (#004d40) for interactivity.
Styling for the number labels (.lotto-number) with a bold font, dark teal text, and a subtle drop shadow for depth.
A styled container (.lotto-box) for the numbers with a white background, rounded corners, and a drop shadow to make it pop against the gradient background.

These styles ensure the UI feels cohesive and professional.

3. Controller Logic (`HelloController.java`)

The controller handles the logic for generating numbers and animating their display. Key improvements include:

Number Generation: The original logic uses a TreeSet to generate six unique random numbers between 1 and 45. This is preserved but converted to a List for easier indexing during animation.
Animation: Instead of a single scaling animation on a label, each number now appears sequentially with a combination of:
- A ScaleTransition to grow the StackPane from 10% to 100% of its size over 300ms.
- A FadeTransition to fade in the label’s text from 0 to 1 opacity over 300ms.
- A Timeline to stagger the animations, with each number appearing 0.5 seconds after the previous one, creating a dramatic effect.
Reset Mechanism: Before generating new numbers, all labels are cleared and set to zero opacity, ensuring a clean slate for each draw.

The controller uses @FXML-annotated fields to reference the six Label and StackPane elements, allowing precise control over each number’s animation.

4. Main Application (`HelloApplication.java`)

The main class remains unchanged, as it simply loads the FXML file, sets up the Scene, and displays the Stage. The application window is titled “로또 번호 생성기” (Lottery Number Generator) and sized at 400×300 pixels.

Challenges and Solutions

One challenge was ensuring the animations felt smooth and natural. Initially, animating all numbers simultaneously was considered, but this lacked the suspense of a lottery draw. By using a Timeline to stagger the animations, I achieved a sequential reveal that enhances user engagement.

Another challenge was maintaining compatibility with JavaFX’s FXML and CSS systems. I carefully tested the fx:id bindings and CSS selectors to ensure the controller could manipulate the UI elements correctly. The use of StackPane for layering circles and labels simplified the animation logic, as both elements could be scaled together.

Setup Instructions

To run the application, follow these steps:

Project Structure:
- Place hello-view.fxml and styles.css in src/main/resources/com/hajunho/intellijavafx/.
- Place HelloController.java and HelloApplication.java in src/main/java/com/hajunho/intellijavafx/.
Dependencies:
- Ensure your project includes JavaFX dependencies (e.g., via Maven/Gradle or a JavaFX SDK).
- For Java 9+ with modules, include a module-info.java with requires javafx.controls; requires javafx.fxml;.
Run the Application:
- Compile and run HelloApplication.java.
- If using an IDE, add VM arguments like --module-path /path/to/javafx-sdk/lib --add-modules javafx.controls,javafx.fxml.
Interact:
- Click the “🎯 로또 번호 생성하기” button to generate and animate six unique lottery numbers.

Future Improvements

While the current version is polished, there’s always room for enhancement:

Sound Effects: Add subtle audio cues for each number reveal to heighten the excitement.
Customizable Themes: Allow users to switch between different color schemes or backgrounds.
History Log: Display a history of previously generated numbers in a scrollable pane.

Conclusion

This project transformed a basic lottery number generator into a visually stunning JavaFX application with smooth animations and a modern UI. By leveraging FXML for layout, CSS for styling, and JavaFX animations for dynamic effects, the application delivers an engaging user experience while maintaining its core functionality. Whether you’re a JavaFX beginner or an experienced developer, I hope this project inspires you to experiment with UI design and animations in your own applications.

Feel free to clone the code, tweak the styles, or add your own flair. Happy coding, and good luck with your lottery numbers!