Notification Center Guide

Overview

GemsFX provides a robust yet user-friendly notification management system.

Key Components

• InfoCenterPane: This is the primary container used in GemsFX for displaying notifications. It can serve as the root node of an application, allowing it to not only host regular views but also integrate a specialized component, InfoCenterView, for managing notifications.
• InfoCenterView: This component is responsible for the management of notification groups within the InfoCenterPane. It organizes how notification groups are displayed and interacted with, providing a streamlined interface for notification handling.
• NotificationGroup: This class is used to manage collections of notifications. It allows for notifications within the same group to be handled collectively, supporting functionalities such as custom view factories for individualized notification appearances and sorting capabilities to control the order of notification presentation.
• NotificationView: This represents the visual representation of a notification. It is where the design and layout of a notification are defined, making it crucial for the visual consistency and appeal of notifications.
• Notification: At the core of the system, this class acts as the data model for a notification. It defines essential attributes of a notification such as its title, summary, and the time of occurrence, providing the foundational information needed for display in a NotificationView.

Getting Started

This guide will demonstrate how you can leverage this system to create a notification center panel with weather notifications.

Tips

• GemsFX Version: 2.11.0
• Java Version: 17
• Images: Icons used in this guide are sourced from https://www.iconarchive.com. License: free for non-commercial use.

Step 1: Create an Application

Start by creating a basic JavaFX application structure and initialize the InfoCenterPane.

public class SimpleNotificationsApp extends Application {
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        
        // 1. Create an instance of InfoCenterPane
        InfoCenterPane infoCenterPane = new InfoCenterPane();
        infoCenterPane.setStyle("-fx-background-color: white;");
        
        // 2. Since our primary focus is on demonstrating the creation and display of notifications,
        //     we can omit setting content nodes for the InfoCenterPane.
        BorderPane content = new BorderPane();
        content.setCenter(new Label("This is the main content area"));
        infoCenterPane.setContent(content);
        
        // 3. Set the InfoCenterPane as the root node of the scene
        Scene scene = new Scene(infoCenterPane, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

Step 2. Incorporating Weather Notifications

Add weather-related data models and image resources.

public class SimpleNotificationsApp extends Application {

    // 1. Image for Weather
    private final Image weatherImage = new Image("https://icons.iconarchive.com/icons/wineass/ios7-redesign/256/Weather-icon.png", true);

    // 2. Weather Data Model
    public record Weather(ZonedDateTime time, String forecast, String tips, String details) {}

    // 3. Weather Notification Data Model
    public static class WeatherNotification extends Notification<Weather> {
        public WeatherNotification(Weather weather) {
            super(weather.forecast(), weather.details, weather.time());
            // 3-1. Optional: set user object to store additional data. 
            //       If we need to get some data from the notification, we can use this.
            setUserObject(weather);
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        InfoCenterPane infoCenterPane = new InfoCenterPane();
        infoCenterPane.setStyle("-fx-background-color: white;");

        Scene scene = new Scene(infoCenterPane, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

Step 3. Creating and Adding Weather Notification Groups

Define a weather notification group and add it to the InfoCenterView.

public class SimpleNotificationsApp extends Application {
    
    private final Image weatherImage = new Image("https://icons.iconarchive.com/icons/wineass/ios7-redesign/256/Weather-icon.png", true);

    public record Weather(ZonedDateTime time, String forecast, String tips, String details) {}

    public static class WeatherNotification extends Notification<Weather> {
        public WeatherNotification(Weather weather) {
            super(weather.forecast(), weather.details(), weather.time());
            setUserObject(weather);
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        InfoCenterPane infoCenterPane = new InfoCenterPane();
        infoCenterPane.setStyle("-fx-background-color: white;");

        // 1. Create a Weather Notification Group
        NotificationGroup<Weather, WeatherNotification> weatherGroup = new NotificationGroup<>("Weather");
        
        // 2. Set View Factory for Weather Group. Convert Notification Data model to View
        weatherGroup.setViewFactory(notification -> {
            // 2-1. Create a NotificationView for Weather
            NotificationView<Weather, WeatherNotification> view = new NotificationView<>(notification);
            
            // 2-2. Optional: set custom graphic for the notification. if not set, default graphic will be used.
            ImageView graphic = new ImageView(weatherImage);
            graphic.setPreserveRatio(true);
            graphic.setFitWidth(48);
            view.setGraphic(graphic);
            
            // 2-3. Optional: Set content of the notification view. Here, we are displaying weather tips.
            //     You can customize the content as needed.
            Weather weather = notification.getUserObject();
            view.setContent(new Label(weather.tips()));
            
            return view;
        });

        // 3. Add Weather Group to InfoCenterPane
        infoCenterPane.getInfoCenterView().getGroups().add(weatherGroup);
        
        Scene scene = new Scene(infoCenterPane, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Step 4. Adding Weather Notifications

Create and add weather notifications to the weather group, illustrating how the Notification system dynamically updates.

import com.dlsc.gemsfx.infocenter.InfoCenterPane;
import com.dlsc.gemsfx.infocenter.Notification;
import com.dlsc.gemsfx.infocenter.NotificationGroup;
import com.dlsc.gemsfx.infocenter.NotificationView;
import javafx.animation.PauseTransition;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
import javafx.util.Duration;

public class SimpleNotificationsApp extends Application {
    
    private final Image weatherImage = new Image("https://icons.iconarchive.com/icons/wineass/ios7-redesign/256/Weather-icon.png", true);

    public record Weather(ZonedDateTime time, String forecast, String tips, String details) {}

    public static class WeatherNotification extends Notification<Weather> {
        public WeatherNotification(Weather weather) {
            super(weather.forecast(), weather.details(), weather.time());
            setUserObject(weather);
        }
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        InfoCenterPane infoCenterPane = new InfoCenterPane();
        infoCenterPane.setStyle("-fx-background-color: white;");
        NotificationGroup<Weather, WeatherNotification> weatherGroup = new NotificationGroup<>("Weather");
        weatherGroup.setViewFactory(notification -> {
            NotificationView<Weather, WeatherNotification> view = new NotificationView<>(notification);
            ImageView graphic = new ImageView(weatherImage);
            graphic.setPreserveRatio(true);
            graphic.setFitWidth(48);
            view.setGraphic(graphic);
            Weather weather = notification.getUserObject();
            view.setContent(new Label(weather.tips()));
            return view;
        });

        infoCenterPane.getInfoCenterView().getGroups().add(weatherGroup);
        Scene scene = new Scene(infoCenterPane, 800, 600);
        primaryStage.setScene(scene);
        primaryStage.show();

        // 1. Simulate Weather Notification, after 1 seconds delay create a new weather notification. 
        PauseTransition pt = new PauseTransition(Duration.seconds(1));
        pt.setOnFinished(e -> {
            Weather zurichWeather = new Weather(
                ZonedDateTime.now(),
                "Sunny",
                "Ideal for outdoor photography.",
                "Zurich, 15~20°C, light breeze."
            );
            WeatherNotification weatherNotification = new WeatherNotification(zurichWeather);
            weatherGroup.getNotifications().add(weatherNotification);
        });
        pt.play();
    }

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