Création d'un éditeur de texte en forme de bulle dans JavaFX

Question

Dans mon projet, j'ai besoin d'afficher la pièce de code correspondante sous la forme d'une bulle, lorsqu'un utilisateur clique sur un diagramme de classes UML. La forme bulle, qui contient le code source, doit être modifiable pour que l'utilisateur puisse apporter des modifications au code source et lorsque l'utilisateur a fini de modifier le code, je vais mettre à jour le diagramme de classes UML afin de synchroniser le code et le diagramme. Vous pouvez vérifier la maquette ci-dessous pour comprendre le scénario:

Cependant, je n'ai pas une connaissance approfondie dans JavaFX et FXML. Par conséquent, je ne sais pas comment créer ces bulles et quels éléments ou formes pourraient correspondre à mes besoins. Dois-je montrer le code source en utilisant l'élément ?

Answer 1

J'ai attrapé un tas de code de différents endroits et je ne l'ai pas nettoyé. Ceci est une implémentation bâclée/rapide, mais c'est un début. C'est cliquable et modifiable.

BubbleShape.java

import java.io.*; 
import javafx.event.*; 
import javafx.scene.control.Alert.AlertType; 
import javafx.scene.control.*; 
import javafx.scene.image.*; 
import javafx.scene.input.*; 
import javafx.scene.layout.*; 

/** 
* 
* @author Sedrick 
*/ 
public class BubbleShape extends StackPane { 

    TextArea textArea = new TextArea(); 
    ImageView bubbleShape; 

    BubbleShape(String text) 
    { 
     textArea.setText(text); 
     textArea.setPrefSize(200, 200); 
     textArea.setMaxSize(200, 200); 
     textArea.setEditable(false); 
     textArea.setWrapText(true); 

     File file = new File("bubble_shape.png"); 
     if (file.exists()) 
     { 
      bubbleShape = new ImageView(new Image(file.toURI().toString())); 
      bubbleShape.setOnMouseClicked(new EventHandler<MouseEvent>() { 
       @Override 
       public void handle(MouseEvent event) 
       { 
        Alert alert = new Alert(AlertType.ERROR); 
        alert.setTitle("Exception Dialog"); 
        alert.setHeaderText("Look, an Exception Dialog"); 
        alert.setContentText("Could not find file blabla.txt!"); 

        Label label = new Label("The exception stacktrace was:"); 

        TextArea tempTextArea = new TextArea(); 
        tempTextArea.setEditable(true); 
        tempTextArea.setWrapText(true); 

        tempTextArea.setMaxWidth(Double.MAX_VALUE); 
        tempTextArea.setMaxHeight(Double.MAX_VALUE); 
        GridPane.setVgrow(tempTextArea, Priority.ALWAYS); 
        GridPane.setHgrow(tempTextArea, Priority.ALWAYS); 

        GridPane expContent = new GridPane(); 
        expContent.setMaxWidth(Double.MAX_VALUE); 
        expContent.add(label, 0, 0); 
        expContent.add(tempTextArea, 0, 1); 

        alert.getDialogPane().setExpandableContent(expContent); 

        alert.showAndWait(); 
        textArea.setText(tempTextArea.getText()); 
       } 
      }); 

      textArea.setOnMouseClicked(new EventHandler<MouseEvent>() { 
       @Override 
       public void handle(MouseEvent event) 
       { 
        Alert alert = new Alert(AlertType.ERROR); 
        alert.setTitle("Exception Dialog"); 
        alert.setHeaderText("Look, an Exception Dialog"); 
        alert.setContentText("Could not find file blabla.txt!"); 

        Label label = new Label("The exception stacktrace was:"); 

        TextArea tempTextArea = new TextArea(); 
        tempTextArea.setEditable(true); 
        tempTextArea.setWrapText(true); 

        tempTextArea.setMaxWidth(Double.MAX_VALUE); 
        tempTextArea.setMaxHeight(Double.MAX_VALUE); 
        GridPane.setVgrow(tempTextArea, Priority.ALWAYS); 
        GridPane.setHgrow(tempTextArea, Priority.ALWAYS); 

        GridPane expContent = new GridPane(); 
        expContent.setMaxWidth(Double.MAX_VALUE); 
        expContent.add(label, 0, 0); 
        expContent.add(tempTextArea, 0, 1); 

        // Set expandable Exception into the dialog pane. 
        alert.getDialogPane().setExpandableContent(expContent); 

        alert.showAndWait(); 
        textArea.setText(tempTextArea.getText()); 
       } 
      }); 
     } 
     else 
     { 
      System.out.println("File does not exits1"); 
     } 

     this.getChildren().addAll(textArea, bubbleShape); 
    } 
} 

Main.java

import javafx.application.*; 
import javafx.fxml.*; 
import javafx.scene.*; 
import javafx.stage.*; 

/** 
* 
* @author Sedrick 
*/ 
public class JavaFXApplication14 extends Application { 

    @Override 
    public void start(Stage stage) throws Exception 
    { 
     Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml")); 

     Scene scene = new Scene(root); 

     stage.setScene(scene); 
     stage.show(); 
    } 

    /** 
    * @param args the command line arguments 
    */ 
    public static void main(String[] args) 
    { 
     launch(args); 
    } 
} 

contrôleur

import java.net.*; 
import java.util.*; 
import javafx.fxml.*; 
import javafx.scene.layout.*; 

/** 
* 
* @author Sedrick 
*/ 
public class FXMLDocumentController implements Initializable { 

    @FXML 
    AnchorPane apMain; 

    @Override 
    public void initialize(URL url, ResourceBundle rb) 
    { 
     BubbleShape bs = new BubbleShape("Hello world!"); 
     bs.setLayoutX(50.0); 
     bs.setLayoutY(50.0); 

     BubbleShape bs2 = new BubbleShape("Bye world!"); 
     bs2.setLayoutX(400); 
     bs2.setLayoutY(400); 
     apMain.getChildren().addAll(bs, bs2); 
    } 
} 

FXML

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

<?import javafx.scene.layout.AnchorPane?> 


<AnchorPane id="AnchorPane" fx:id="apMain" prefHeight="749.0" prefWidth="973.0" stylesheets="@makeTextAreaTransparent.css" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication14.FXMLDocumentController"> 

</AnchorPane> 

CSS: makeTextAreaTransparent.css

.text-area { 
    -fx-background-color: rgba(53,89,119,0.4); 
} 

.text-area .scroll-pane { 
    -fx-background-color: transparent; 
} 

.text-area .scroll-pane .viewport{ 
    -fx-background-color: transparent; 
} 


.text-area .scroll-pane .content{ 
    -fx-background-color: transparent; 
}