JavaFXで 'ブートストラップ'スタイルアラートを作成するには

Question

古典的なブートストラップアラート（here）のようなスタイルのユーザーにアラートを表示するペインを作成したいとします。

これまでのところ、グリッドパネルを使用してみましたが、それほど悪くはありません。特にテキストを追加すると、結果には満足していません。

<GridPane minHeight="40" maxHeight = "40"> 
    <VBox fx:id="MessageVbox" alignment="BASELINE_LEFT" GridPane.columnIndex="0" GridPane.rowIndex="0"> 
     <Label fx:id="Message" text="Alert Message" /> 
     <padding> 
      <Insets bottom="5.0" left="10.0" right="10.0" top="10.0" /> 
     </padding> 
    </VBox> 
    <Button fx:id="Dismiss" alignment="TOP_RIGHT" onAction="#handleDismiss" text="X" GridPane.columnIndex="1" GridPane.rowIndex="0" /> 

    <columnConstraints> 
     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" 
      percentWidth="90.0" prefWidth="100.0" /> 
     <ColumnConstraints halignment="RIGHT" hgrow="SOMETIMES" 
      minWidth="10.0" percentWidth="10.0" prefWidth="100.0" /> 
    </columnConstraints> 
</GridPane> 

Answer 1

私はHBoxに埋め込まれText子どもとTextFlowを使用します。もちろん、あなたのボタンでは、X文字ではなくグラフィックがほしいと思うでしょう。

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

<?import javafx.geometry.Insets?> 
<?import javafx.scene.control.Button?> 
<?import javafx.scene.layout.AnchorPane?> 
<?import javafx.scene.layout.HBox?> 
<?import javafx.scene.layout.VBox?> 
<?import javafx.scene.text.Font?> 
<?import javafx.scene.text.Text?> 
<?import javafx.scene.text.TextFlow?> 


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="120.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1"> 
    <children> 
     <HBox prefHeight="400.0" prefWidth="600.0" style="-fx-border-color: red; -fx-background-color: pink; -fx-border-radius: 6;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"> 
     <children> 
      <TextFlow prefHeight="200.0" prefWidth="200.0" HBox.hgrow="ALWAYS"> 
       <children> 
        <Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-fill: red;" text="Alert messages will appear here..."> 
        <font> 
         <Font name="Microsoft YaHei UI" size="14.0" /> 
        </font> 
        </Text> 
       </children> 
       <padding> 
        <Insets bottom="12.0" left="12.0" right="12.0" top="12.0" /> 
       </padding> 
      </TextFlow> 
      <VBox> 
       <children> 
        <Button mnemonicParsing="false" style="-fx-background-color: transparent;" text="X" /> 
       </children> 
      </VBox> 
     </children> 
     <padding> 
      <Insets bottom="12.0" left="12.0" right="12.0" top="12.0" /> 
     </padding> 
     </HBox> 
    </children> 
</AnchorPane>