2013-06-07 1 views
13

Ich habe folgendes Fragment von fxml:Confgure Spielraum für einzelnes Element über Java fx CSS

<VBox fx:id="paneLeft"> 
     <TextField promptText="Password"/> 
     <Button fx:id="btnLogin" text="Login" maxWidth="10000"/> 
     <Hyperlink text="Registration"/> 
    </VBox> 

Ich brauche einen Abstand von 10px zwischen Knopf und Hyperlink hinzuzufügen. Ich möchte auch CSS für diese Aufgabe verwenden.

+1

[-fx-spacing] (http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#vbox) zur ersten VBox in Uluks Lösung, nicht perfekt, aber zumindest können Sie die Speicherplatzmenge über css und nicht in fxml angeben. – jewelsea

+0

Siehe Update. –

Antwort

16

Es scheint, dass Sie nicht können. JavaFX unterstützt momentan nur eingeschränkt CSS.

Die CSS-Padding- und Margeneigenschaften werden jedoch auf einigen JavaFX-Szenengraphobjekten unterstützt.

sagt das offizielle CSS-Referenzhandbuch. So könnte Abhilfe sein Extra anderes Layout zu verwenden, einen andere VBox zum Beispiel:

<VBox fx:id="paneLeft" spacing="10"> 
    <VBox fx:id="innerPaneLeft"> 
     <TextField promptText="Password"/> 
     <Button fx:id="btnLogin" text="Login" maxWidth="10000"/> 
    </VBox> 
    <Hyperlink text="Registration"/> 
</VBox> 

Update:
Gefunden ein bisschen perfekte Art und Weise, es zu tun, aber noch nicht von CSS.

<?import javafx.geometry.Insets?> 

<VBox fx:id="paneLeft"> 
     <TextField promptText="Password"/> 
     <Button fx:id="btnLogin" text="Login" maxWidth="10000"> 
      <VBox.margin> 
       <Insets> 
        <bottom>10</bottom> 
       </Insets> 
      </VBox.margin> 
     </Button> 
     <Hyperlink text="Registration"/> 
</VBox> 

Dies vermeidet die Definition eines unnötigen zusätzlichen Layouts.

26

Wahrscheinlich wirklich spät zur Party, aber ich benutze einen anderen Ansatz, der auch für andere hilfreich sein könnte.

Theres keine -fx-margin: 5px CSS-Eigenschaft für javafx Schaltflächen, aber Sie können das Verhalten mit einer Kombination aus Padding, Rand-Einsätze und Hintergrund-Intarsien umgehen.

Zum Beispiel eine Schaltfläche mit einem 5px Rand.

Alternativ können Sie auch eine höhere Auffüllung definieren und niedrigere Einfügungswerte für den Fall, dass Sie eine Auffüllung und einen Rand wünschen.