Pair<String, Runnable> in a game menu - javafx

I'm trying to create a game Menu using javafx. I have now the front page that works. I have a couple of items that should lead me to the next scenes.
I use :
private List<Pair<String, Runnable>> menuData = Arrays.asList(
new Pair<String, Runnable>("Un Joueur", OptionMenu::),
new Pair<String, Runnable>("Multijoueuer", () -> {}),
new Pair<String, Runnable>("Options du jeu", () -> {}),
new Pair<String, Runnable>("Quitter",Platform::exit)
);
to create my items and Platform::exit to quite everything.
The question is: How can I create a Runnable like my OptionMenu::something that leads me to my next page that extends Application. I would like it to be close to that :
public abstract static class OptionMenu extends Application implements Runnable{
///////// définition de la taille du menu ///////////
private static final int WIDTH = 1324;
private static final int HEIGHT = 604;
/////////////////////////////////////////////////////
//////// création des differents clicables //////////
private List<Pair<String, Runnable>> menuData = Arrays.asList(
new Pair<String, Runnable>("Un Joueur", () -> {}),
new Pair<String, Runnable>("Multijoueuer", () -> {}),
new Pair<String, Runnable>("Options du jeu", () -> {}),
new Pair<String, Runnable>("Quitter",Platform::exit)
);
//////////////////////////////////////////////////////
private Pane root = new Pane();
private VBox menuBox = new VBox(-5);
private void addBackground(){
ImageView imageView = new ImageView(new Image(getClass().getResource("MenuImages/bkground.jpg").toExternalForm()));
imageView.setFitWidth(WIDTH);
imageView.setFitHeight(HEIGHT);
root.getChildren().add(imageView);
}
private void addTitle() {
BomberBallTitle title = new BomberBallTitle("Options du jeu");
title.setTranslateX(WIDTH / 2 - title.getTitleWidth() / 2);
title.setTranslateY(HEIGHT / 3);
root.getChildren().add(title);
}
private void addMenu(double x, double y) {
menuBox.setTranslateX(x);
menuBox.setTranslateY(y);
menuData.forEach(data -> {
BomberBallMenuItem item = new BomberBallMenuItem(data.getKey());
item.setOnAction(data.getValue());
item.setTranslateX(-300);
Rectangle clip = new Rectangle(300, 30);
clip.translateXProperty().bind(item.translateXProperty().negate());
item.setClip(clip);
menuBox.getChildren().addAll(item);
});
root.getChildren().add(menuBox);
}
private Parent createContent() {
addBackground();
addTitle();
double lineX = WIDTH / 2 - 100;
double lineY = HEIGHT / 3 + 50;
addMenu(lineX + 5, lineY + 5);
return root;
}
public void run() {
launch();
}
#Override
public void start(Stage primaryStage) throws Exception{
Scene scene = new Scene(createContent());
primaryStage.setTitle("BomberBall Menu");
primaryStage.setScene(scene);
primaryStage.show();
}

Related

Moving Co-Ordinates of JavaFX text label recursively

My program takes a user value and passes the value through a method before returning a message on the GUI. I am wondering how I could be able to recursively move this message (called displayResult) value down along the Y axis in order to make room for new messages when the user calls the method again.
public class GuessingGameController extends Tab {
Scene sceneOne;
Scene sceneTwo;
int choice;
int generatedNumber;
//private GuessingGame resetGuessingGame;
public int generateRandomNumber() {
Random randomNumber = new Random();
int number = randomNumber.nextInt(50) + 1;
return number;
}
GuessingGameController(Stage primaryStage) {
GuessingGame guess = new GuessingGame();
generatedNumber = generateRandomNumber();
Label labelOne = new Label("WELCOME TO THE GUESSING GAME");
setText("GuessingGame");
Pane paneLayoutOne = new StackPane();
Pane paneLayoutTwo = new StackPane();
Button playButton = new Button("Click to Play!");
Button quitButton = new Button("Quit");
paneLayoutOne.getChildren().addAll(labelOne, playButton, quitButton);
labelOne.setTranslateX(0);
labelOne.setTranslateY(-100);
playButton.setTranslateX(0);
playButton.setTranslateY(0);
quitButton.setTranslateX(0);
quitButton.setTranslateY(50);
setContent(paneLayoutOne);
sceneOne = new Scene(paneLayoutOne, 400, 400);
quitButton.setOnAction(e -> System.exit(0));
playButton.setOnAction(e -> primaryStage.setScene(sceneTwo));
Label userMessage = new Label("Please enter your guess here");
TextField userInput = new TextField();
Button guessButton = new Button("Guess");
Button resetButton = new Button("Reset Game");
Button backButton = new Button("Back");
userMessage.setTranslateX(0);
userMessage.setTranslateY(-160);
userInput.setTranslateX(0);
userInput.setTranslateY(-120);
guessButton.setTranslateX(0);
guessButton.setTranslateY(-80);
resetButton.setTranslateX(0);
resetButton.setTranslateY(-40);
backButton.setTranslateX(0);
backButton.setTranslateY(0);
guessButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
int choice = Integer.parseInt(userInput.getText());
guess.startGuessingGame(choice, generatedNumber);
String endResult;
endResult = guess.startGuessingGame(choice, generatedNumber);
Label displayResult = new Label(endResult);
displayResult.setTranslateX(0);
displayResult.setTranslateY(150);
paneLayoutTwo.getChildren().add(0, displayResult);
}
});
//resetButton.setOnAction(e -> resetGuessingGame.resetForm(this));
backButton.setOnAction(e -> primaryStage.setScene(sceneOne));
paneLayoutTwo.getChildren().addAll(userMessage, userInput, guessButton, resetButton, backButton);
sceneTwo = new Scene(paneLayoutTwo, 400, 400);
}
}

I'm trying to implemenet GUI on some kind of Doubly Linked list

I've so far done this, it's adding labels on the stage but removing thing is working but not as intended...
How can I store data of labels in an array or something so I can compare the remove.getText(); with that and delete that typed value if previous added as a label on stage.
public class Main extends Application {
Group root;
Label label1,label;
int count=1,count1=1;
public static void main(String[] args) {launch(args);}
public void start(Stage stage) throws Exception {
stage.setTitle("LinkedList GUI");
stage.setResizable(false);
root = new Group();
LinkedList<Integer> Linked =new LinkedList<Integer>();
Button Addfirst = new Button("AddFirst");
Addfirst.setTranslateX(40);
Addfirst.setTranslateY(350);
TextField first=new TextField();
first.setPrefWidth(60);
first.setTranslateX(120);
first.setTranslateY(350);
Addfirst.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
int a = Integer.parseInt(first.getText());
Linked.addFirst(a);
label1=new Label(" "+first.getText());
label1.setFont(Font.font("Buxton Sketch",FontWeight.BOLD,FontPosture.ITALIC,12));
label1.setPrefWidth(25);
label1.setPrefHeight(25);
label1.setTranslateY(60);
label1.setTextFill(Color.GREEN );
label1.setStyle("-fx-border-color: Blue;");
root.getChildren().addAll(label1);
label1.setTranslateX(250-(20*count++));
count++;
}
});
Button Addlast = new Button("AddLast");
Addlast.setTranslateX(200);
Addlast.setTranslateY(350);
TextField last=new TextField();
last.setPrefWidth(60);
last.setTranslateX(270);
last.setTranslateY(350);
Addlast.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
int b= Integer.parseInt(last.getText());
Linked.addLast(b);
label=new Label(" "+last.getText());
label.setFont(Font.font("Buxton Sketch",FontWeight.BOLD,FontPosture.ITALIC,12));
label.setPrefWidth(25);
label.setPrefHeight(25);
label.setTranslateY(60);
label.setTextFill(Color.GREEN );
label.setStyle("-fx-border-color: Blue;");
root.getChildren().add(label);
label.setTranslateX(250+(20*count1++));
count1++;
}
});
Button delete = new Button("Delete");
delete.setTranslateX(350);
delete.setTranslateY(350);
TextField remove=new TextField();
remove.setPrefWidth(60);
remove.setTranslateX(420);
remove.setTranslateY(350);
delete.setOnAction(new EventHandler<ActionEvent>() {
#Override public void handle(ActionEvent e) {
if(remove.getText().equals(first.getText())) {
Linked.remove(first.getText());
root.getChildren().remove(label1);
}
else if(remove.getText().equals(last.getText())) {
Linked.remove(last.getText());
root.getChildren().remove(label);
}
else {
Alert alert = new Alert(AlertType.ERROR);
alert.setTitle("Error");
alert.setContentText("Not in List");
alert.showAndWait();
}
}
});
Text text =new Text("Doubly LinkedList GUI");
text.setStyle("-fx-border-color: Blak;");
text.setFont(Font.font("Buxton Sketch",FontWeight.BOLD,FontPosture.ITALIC,16));
text.setTranslateX(150);
text.setTranslateY(30);
root.getChildren().addAll(text,Addfirst,first,Addlast,last,delete,remove);
Scene scene = new Scene(root,500,400);
stage.setScene(scene);
stage.show();
}
}
I recommend using a layout that positions the children for you instead of positioning them yourself. E.g. using a HBox as parent for the labels allows you to simply add/remove the child at the same index as the one added/removed in the list:
#Override
public void start(Stage stage) throws Exception {
HBox container = new HBox(20);
container.setPrefHeight(40);
Button addFirst = new Button("add head");
Button addLast = new Button("add tail");
Button remove = new Button("remove");
TextField textField = new TextField();
HBox buttonContainer = new HBox(10, textField, addFirst, addLast, remove);
final LinkedList<Integer> list = new LinkedList<>();
addFirst.setOnAction(evt -> {
String text = textField.getText();
Integer value = Integer.parseInt(text);
list.addFirst(value);
container.getChildren().add(0, new Label(text));
});
addLast.setOnAction(evt -> {
String text = textField.getText();
Integer value = Integer.parseInt(text);
list.addLast(value);
container.getChildren().add(new Label(text));
});
remove.setOnAction(evt -> {
String text = textField.getText();
int value = Integer.parseInt(text);
ListIterator<Integer> iterator = list.listIterator();
while (iterator.hasNext()) {
Integer element = iterator.next();
if (element == value) {
container.getChildren().remove(iterator.nextIndex() - 1);
iterator.remove();
break;
}
}
});
VBox root = new VBox(container, buttonContainer);
Scene scene = new Scene(root, 500, 400);
stage.setScene(scene);
stage.show();
}

How to make an pane stay over line connecting draggablenode in javafx

I am designing a UI of a graph structure with draggable nodes. In the graph I have a component called relation(it is a pane) which shows the link between two nodes.
I want relation to stay and move along with line at mid of line.
Current UI design is as shown below
And the expected one is like:
You need to refresh the position of the node when the line's end coordinates are modified. To avoid triggering the calculation multiple times per layout pass, I recommend doing this from the layoutChildren method of the parent, but you could also do this from a listener to the startX, endY, ... properties. This will lead to some unnecessary computations though.
As for calcualting the position of the node: The center of the node needs to align with the midpoint of the line, so you need to solve the following equation for markTopLeft:
markTopLeft + (markWidth, markHeight) / 2 = (lineStart + lineEnd) / 2
markTopLeft = (lineStart + lineEnd - (markWidth, markHeight)) / 2
Example
Pane allowing for custom layout calculations
public class PostProcessPane extends Pane {
private final Set<Node> modifiedChildren = new HashSet<>();
private final Set<Node> modifiedChildrenUnmodifiable = Collections.unmodifiableSet(modifiedChildren);
private final List<Consumer<Set<Node>>> postProcessors = new ArrayList<>();
public List<Consumer<Set<Node>>> getPostProcessors() {
return postProcessors;
}
private final ChangeListener listener = (o, oldValue, newValue) -> modifiedChildren.add((Node) ((ReadOnlyProperty) o).getBean());
private void initListener() {
getChildren().addListener((ListChangeListener.Change<? extends Node> c) -> {
while (c.next()) {
if (c.wasRemoved()) {
for (Node n : c.getRemoved()) {
n.boundsInParentProperty().removeListener(listener);
}
}
if (c.wasAdded()) {
for (Node n : c.getAddedSubList()) {
n.boundsInParentProperty().addListener(listener);
}
}
}
});
}
public PostProcessPane() {
initListener();
}
public PostProcessPane(Node... children) {
super(children);
initListener();
for (Node n : children) {
n.boundsInParentProperty().addListener(listener);
}
}
#Override
protected void layoutChildren() {
super.layoutChildren();
if (!modifiedChildren.isEmpty()) {
for (Consumer<Set<Node>> processor : postProcessors) {
processor.accept(modifiedChildrenUnmodifiable);
}
modifiedChildren.clear();
}
}
}
Usage
#Override
public void start(Stage primaryStage) throws Exception {
Rectangle r1 = new Rectangle(200, 50, Color.BLUE);
Rectangle r2 = new Rectangle(200, 50, Color.RED);
Rectangle mark = new Rectangle(200, 50, Color.YELLOW);
Line line = new Line();
r1.setX(20);
r2.setX(380);
r2.setY(450);
PostProcessPane root = new PostProcessPane(line, r1, r2, mark);
root.getPostProcessors().add(changedNodes -> {
if (changedNodes.contains(r1) || changedNodes.contains(r2) || changedNodes.contains(mark)) {
Bounds bounds1 = r1.getBoundsInParent();
Bounds bounds2 = r2.getBoundsInParent();
// refresh line ends
line.setStartX(bounds1.getMinX() + bounds1.getWidth() / 2);
line.setStartY(bounds1.getMaxY());
line.setEndX(bounds2.getMinX() + bounds2.getWidth() / 2);
line.setEndY(bounds2.getMinY());
// recalculate mark position
mark.setX((line.getStartX() + line.getEndX() - mark.getWidth()) / 2);
mark.setY((line.getStartY() + line.getEndY() - mark.getHeight()) / 2);
}
});
// add some movement for the nodes
Timeline timeline = new Timeline(
new KeyFrame(Duration.ZERO,
new KeyValue(r1.xProperty(), r1.getX()),
new KeyValue(r1.yProperty(), r1.getY()),
new KeyValue(r2.xProperty(), r2.getX())),
new KeyFrame(Duration.seconds(1),
new KeyValue(r2.xProperty(), r1.getX())),
new KeyFrame(Duration.seconds(2),
new KeyValue(r1.xProperty(), r2.getX()),
new KeyValue(r1.yProperty(), r2.getY() / 2))
);
timeline.setAutoReverse(true);
timeline.setCycleCount(Animation.INDEFINITE);
timeline.play();
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}

JavaFX WhatApp-Like ConversationView

I'm trying to make a WhatsApp-Like Conversation-View in JavaFX.
In order to make the sent messages appear on the right and the received messages appear on the left then I cannot use TextArea. How can I do it? I tried GridPane without TextArea but it didn't make things easier.
Moreover, is it a good practice to make controls static?
Extra: if you can also help me do the chat bubble behind the text, it would be great.
Here is my code:
public class ConversationView implements WhatAppView {
private static Label nameLabel, statusLabel;
private static TextField messageTextField;
static TextArea messagesTextArea;
private static GridPane conversationSection;
private static Label changeViewLink;
private static Button sendMsgButton;
// private static int rowIndex = 1;
public void showView() {
AppMain.stage.setResizable(false);
AppMain.stage.setWidth(350);
AppMain.stage.setHeight(550);
BorderPane rootPane = new BorderPane();
rootPane.setPadding(new Insets(5, 5, 5, 5));
final int sectionHeight = 55;
StackPane contactSection = new StackPane();
nameLabel = new Label("RW");
statusLabel = new Label("Online");
changeViewLink = new Label("Go Back");
changeViewLink.setStyle("-fx-text-fill: blue;");
changeViewLink.styleProperty().bind(
Bindings.when(changeViewLink.hoverProperty())
.then(new SimpleStringProperty("-fx-underline: true; -fx-text-fill: blue;"))
.otherwise(new SimpleStringProperty("-fx-underline: false; -fx-text-fill: blue;")));
changeViewLink.setOnMouseClicked(new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
AppMain.changeView(new ChatsView());
}
});
contactSection.getChildren().addAll(nameLabel, statusLabel, changeViewLink);
StackPane.setAlignment(changeViewLink, Pos.TOP_RIGHT);
StackPane.setAlignment(statusLabel, Pos.BOTTOM_CENTER);
contactSection.setPrefHeight(sectionHeight);
conversationSection = new GridPane();
conversationSection.setStyle("-fx-background-image: url('whatsapp-wallpaper.jpg')");
messagesTextArea = new TextArea();
messagesTextArea.setEditable(false);
// conversationSection.getColumnConstraints().addAll(new
// ColumnConstraints(AppMain.stage.getWidth()/2 - 10), new
// ColumnConstraints(AppMain.stage.getWidth()/2 - 10));
conversationSection.add(messagesTextArea, 0, 0);
conversationSection.setPrefSize(AppMain.stage.getWidth(), AppMain.stage.getHeight());
// conversationSection.getStylesheets().add("conversation.css");
ScrollPane scroll = new ScrollPane();
scroll.setPrefSize(conversationSection.getWidth(), conversationSection.getHeight());
scroll.setContent(conversationSection);
FlowPane messageSection = new FlowPane();
sendMsgButton = new Button("_Send");
sendMsgButton.setDisable(true);
sendMsgButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
sendMsg();
}
});
sendMsgButton.setPrefHeight(sectionHeight);
Tooltip sendMsgToolTip = new Tooltip("Send Message");
Tooltip.install(sendMsgButton, sendMsgToolTip);
FlowPane.setMargin(sendMsgButton, new Insets(0, 0, 0, 5));
messageTextField = new TextField();
messageTextField.setPromptText("Type your message here...");
Platform.runLater(new Runnable() { // 100% focus
public void run() {
messageTextField.requestFocus();
}
});
messageTextField.setPrefWidth(AppMain.stage.getWidth() - AppMain.stage.getWidth() / 5);
messageTextField.setPrefHeight(sectionHeight);
messageTextField.setAlignment(Pos.TOP_LEFT);
messageTextField.setOnKeyTyped(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent event) {
if (messageTextField.getText() != null && !messageTextField.getText().isEmpty()) {
sendMsgButton.setDisable(false);
} else {
sendMsgButton.setDisable(true);
}
}
});
messageTextField.setOnKeyPressed(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent event) {
if (event.getCode().equals(KeyCode.ENTER) && messageTextField.getText() != null
&& !messageTextField.getText().isEmpty()) {
sendMsg();
}
}
});
messageSection.getChildren().add(messageTextField);
messageSection.getChildren().add(sendMsgButton);
messageSection.setPrefHeight(sectionHeight);
rootPane.setTop(contactSection);
rootPane.setCenter(conversationSection);
rootPane.setBottom(messageSection);
Scene scene = new Scene(rootPane);
AppMain.stage.setScene(scene);
AppMain.stage.setTitle("WhatsApp");
}
}
public class AppMain extends Application {
static Stage stage;
#Override
public void start(Stage primaryStage) throws Exception {
stage = primaryStage;
AppMain.stage.show();
changeView(new ConversationView());
}
public static void changeView(WhatAppView view) {
view.showView();
}
}
public interface WhatAppView {
public void showView();
}
You can create a custom control to determine message alignment and aesthetics such as the bubble like appearance. As a fan of HBox and VBox, I would recommend their usage in combination with an SVGPath to decorate the message.
SVGPath's let you draw custom shapes by providing information on the lines, arcs etc. These aren't unique to java so there are a few resources available to see some basic/advanced examples. My recommendation would be to read here: SVGPath and use the TryitEditor to experiment
Here are two quick examples:
When it comes to laying out the messages a VBox would suffice. You can bind the viewable children to an ObservableList of messages you would be able to iterate later. The added benefit of this is that adding to the list will update the UI automatically, and you'll also be able to iterate these later in the event you implement additional features such as delete, forward etc
I'd recommend reading up on the Bindings api, particularly bindContentBidirectional for more information on this
Using my above recommendations i've written a small example below you can reference. It's not visually impressive, but hopefully you can get some ideas from it, particularly this:
Extra: if you can also help me do the chat bubble behind the text, it
would be great.
The messages/speech bubbles:
enum SpeechDirection{
LEFT, RIGHT
}
public class SpeechBox extends HBox{
private Color DEFAULT_SENDER_COLOR = Color.GOLD;
private Color DEFAULT_RECEIVER_COLOR = Color.LIMEGREEN;
private Background DEFAULT_SENDER_BACKGROUND, DEFAULT_RECEIVER_BACKGROUND;
private String message;
private SpeechDirection direction;
private Label displayedText;
private SVGPath directionIndicator;
public SpeechBox(String message, SpeechDirection direction){
this.message = message;
this.direction = direction;
initialiseDefaults();
setupElements();
}
private void initialiseDefaults(){
DEFAULT_SENDER_BACKGROUND = new Background(
new BackgroundFill(DEFAULT_SENDER_COLOR, new CornerRadii(5,0,5,5,false), Insets.EMPTY));
DEFAULT_RECEIVER_BACKGROUND = new Background(
new BackgroundFill(DEFAULT_RECEIVER_COLOR, new CornerRadii(0,5,5,5,false), Insets.EMPTY));
}
private void setupElements(){
displayedText = new Label(message);
displayedText.setPadding(new Insets(5));
displayedText.setWrapText(true);
directionIndicator = new SVGPath();
if(direction == SpeechDirection.LEFT){
configureForReceiver();
}
else{
configureForSender();
}
}
private void configureForSender(){
displayedText.setBackground(DEFAULT_SENDER_BACKGROUND);
displayedText.setAlignment(Pos.CENTER_RIGHT);
directionIndicator.setContent("M10 0 L0 10 L0 0 Z");
directionIndicator.setFill(DEFAULT_SENDER_COLOR);
HBox container = new HBox(displayedText, directionIndicator);
//Use at most 75% of the width provided to the SpeechBox for displaying the message
container.maxWidthProperty().bind(widthProperty().multiply(0.75));
getChildren().setAll(container);
setAlignment(Pos.CENTER_RIGHT);
}
private void configureForReceiver(){
displayedText.setBackground(DEFAULT_RECEIVER_BACKGROUND);
displayedText.setAlignment(Pos.CENTER_LEFT);
directionIndicator.setContent("M0 0 L10 0 L10 10 Z");
directionIndicator.setFill(DEFAULT_RECEIVER_COLOR);
HBox container = new HBox(directionIndicator, displayedText);
//Use at most 75% of the width provided to the SpeechBox for displaying the message
container.maxWidthProperty().bind(widthProperty().multiply(0.75));
getChildren().setAll(container);
setAlignment(Pos.CENTER_LEFT);
}
}
Conversation window:
public class ConversationView extends VBox{
private String conversationPartner;
private ObservableList<Node> speechBubbles = FXCollections.observableArrayList();
private Label contactHeader;
private ScrollPane messageScroller;
private VBox messageContainer;
private HBox inputContainer;
public ConversationView(String conversationPartner){
super(5);
this.conversationPartner = conversationPartner;
setupElements();
}
private void setupElements(){
setupContactHeader();
setupMessageDisplay();
setupInputDisplay();
getChildren().setAll(contactHeader, messageScroller, inputContainer);
setPadding(new Insets(5));
}
private void setupContactHeader(){
contactHeader = new Label(conversationPartner);
contactHeader.setAlignment(Pos.CENTER);
contactHeader.setFont(Font.font("Comic Sans MS", 14));
}
private void setupMessageDisplay(){
messageContainer = new VBox(5);
Bindings.bindContentBidirectional(speechBubbles, messageContainer.getChildren());
messageScroller = new ScrollPane(messageContainer);
messageScroller.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);
messageScroller.setHbarPolicy(ScrollBarPolicy.NEVER);
messageScroller.setPrefHeight(300);
messageScroller.prefWidthProperty().bind(messageContainer.prefWidthProperty().subtract(5));
messageScroller.setFitToWidth(true);
//Make the scroller scroll to the bottom when a new message is added
speechBubbles.addListener((ListChangeListener<Node>) change -> {
while (change.next()) {
if(change.wasAdded()){
messageScroller.setVvalue(messageScroller.getVmax());
}
}
});
}
private void setupInputDisplay(){
inputContainer = new HBox(5);
TextField userInput = new TextField();
userInput.setPromptText("Enter message");
Button sendMessageButton = new Button("Send");
sendMessageButton.disableProperty().bind(userInput.lengthProperty().isEqualTo(0));
sendMessageButton.setOnAction(event-> {
sendMessage(userInput.getText());
userInput.setText("");
});
//For testing purposes
Button receiveMessageButton = new Button("Receive");
receiveMessageButton.disableProperty().bind(userInput.lengthProperty().isEqualTo(0));
receiveMessageButton.setOnAction(event-> {
receiveMessage(userInput.getText());
userInput.setText("");
});
inputContainer.getChildren().setAll(userInput, sendMessageButton, receiveMessageButton);
}
public void sendMessage(String message){
speechBubbles.add(new SpeechBox(message, SpeechDirection.RIGHT));
}
public void receiveMessage(String message){
speechBubbles.add(new SpeechBox(message, SpeechDirection.LEFT));
}
}
Output:

Show gif animation popup while processing in JAVAFX

I have a method inside of one of my controllers that requires some seconds to process. I would like to have a gif animation popup while this occurs but I only get a static image. This is my code:
#FXML
public void search(ActionEvent e) {
final Stage dialog = new Stage();
Group popup = new Group();
Image image = new Image("file:resources/images/bender.gif");
ImageView view = new ImageView(image);
popup.getChildren().add(view);
Scene dialogScene = new Scene(popup);
dialog.setScene(dialogScene);
dialog.show();
Platform.runLater(new Runnable() {
#Override
public void run() {
Match msg = stablishSearchConditions();
TreeItem<String> root = new TreeItem<>("ROOT");
int indexName = 1;
String mensaje = "Mensaje ";
treeLabelResults.setText("");
arbol.setRoot(root);
for (Match message : msg.each()) {
TreeItem<String> nodo = new TreeItem<String>(mensaje + indexName);
root.getChildren().add(nodo);
root.setExpanded(true);
String mens = message.getMessage();
TreeItem<String> nodo2 = new TreeItem<String>(mens);
nodo.getChildren().add(nodo2);
indexName++;
}
dialog.close();
}
});
}
You are blocking the fx application thread by running the expensive operation on this thread. This prevents your UI from updating, including animating the GIF.
Move the expensive operations to a non-application thread instead and only use Platform.runLater() to "commit" the ui updates:
Runnable expensiveTask = () -> {
// expensive operations that should not run on the application thread
Match msg = stablishSearchConditions();
TreeItem<String> root = new TreeItem<>("ROOT");
int indexName = 1;
String mensaje = "Mensaje ";
for (Match message : msg.each()) {
TreeItem<String> nodo = new TreeItem<String>(mensaje + indexName);
root.getChildren().add(nodo);
root.setExpanded(true);
String mens = message.getMessage();
TreeItem<String> nodo2 = new TreeItem<String>(mens);
nodo.getChildren().add(nodo2);
indexName++;
}
// update ui -> application thread
Platform.runLater(() -> {
treeLabelResults.setText("");
arbol.setRoot(root);
dialog.close();
});
};
// start new thread for expensiveTask
new Thread(expensiveTask).start();

Resources