2015-10-26 175 views
0
  • 短版本:

上CodePen我的HTML/CSS生成一個簡單的按鈕,旋轉和生長在懸停。我希望它集成到我的JavaFX GUI中,該GUI使用與FXML文件交互的SceneBuilder。圖形用戶界面的編號爲1-4的按鈕與我在CodePen上的按鈕類似。我不確定如何將HTML/CSS放入適當的位置。整合HTML/CSS到JavaFX的FXML和CSS

  • 詳情:

我的JavaFX GUI它由3個文件。 Main.java,sample.fxml和Controller.java。我一直在使用SceneBuilder來創建如下所示的GUI。因此SceneBuilder已將代碼寫入sample.fxml文件。 CodePen代碼是純CSS和HTML,所以我不確定如何將這些集成到我的JavaFX文件中。這CodePen按鈕具有簡單的代碼found here.

我請教了JavaFX文檔這給了我這樣的代碼

Rectangle rect = new Rectangle (100, 40, 100, 100); 
      rect.setArcHeight(100); 
      rect.setArcWidth(100); 
      rect.setFill(Color.BLUE); 

      RotateTransition rt = new RotateTransition(Duration.millis(400), rect); 
      rt.setByAngle(360); 
      rt.setAutoReverse(true); 

我把它改成了一圈,但是這個代碼是在我的Main.java文件,並沒有按似乎根本沒有解決FXML問題。我已經看到了JavaFX的CSS這樣寫

-fx-background-color: #7cafc2; 
-fx-text-fill: #FFFFFF; 
-fx-background-radius: 4; 

但這似乎並沒有工作,變換,尺度,等我如何CSS和HTML到FXML整合,使其與SceneBuilder一致?我只需要4個CodePen按鈕來替換當前GUI上的按鈕1-4。

這裏有更多的信息,非常感謝你們/加侖

GUI:

GUI

Main.java

import ... 

public class Main extends Application { 
    public static void main(String[] args) { 
     launch(args); 
    } 

    @Override 
    public void start(Stage primaryStage) throws Exception{ 

     Parent root = FXMLLoader.load(getClass().getResource("sample.fxml")); 
     primaryStage.setTitle("Form Demo"); 
     primaryStage.setScene(new Scene(root, 420, 475)); 
     primaryStage.show(); 
    } 

} 

sample.fxml

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

<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller"> 

<BorderPane VBox.vgrow="ALWAYS" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1"> 
    <top> 
     <VBox> 
     <children> 
      <HBox spacing="10.0" VBox.vgrow="ALWAYS"> 
       <children> 
        <Label fx:id="fileLabel1" prefHeight="33.0" prefWidth="100.0" text="NAS Form:" textOverrun="WORD_ELLIPSIS"> 
         <font> 
          <Font name="System Bold" size="17.0" /> 
         </font> 
         <padding> 
          <Insets top="7.0" /> 
         </padding> 
        </Label> 
        <Label fx:id="fileLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="33.0" prefWidth="209.0" text="No file selected" HBox.hgrow="ALWAYS"> 
         <padding> 
          <Insets top="7.0" /> 
         </padding> 
         <font> 
          <Font size="17.0" /> 
         </font></Label> 
        <Region nodeOrientation="RIGHT_TO_LEFT" prefHeight="31.0" prefWidth="10.0" HBox.hgrow="ALWAYS" /> 
        <Button mnemonicParsing="false" onAction="#Browse" prefHeight="31.0" prefWidth="90.0" text="Browse " HBox.hgrow="ALWAYS" /> 
       </children> 
       <VBox.margin> 
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> 
       </VBox.margin> 
      </HBox> 
       <Separator prefWidth="200.0" /> 
      <Region prefHeight="30.0" prefWidth="200.0" /> 
      <HBox VBox.vgrow="ALWAYS"> 
       <children> 
        <Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" /> 
        <Button mnemonicParsing="false" onAction="#FieldData" text="Field Data" HBox.hgrow="ALWAYS" /> 
        <Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" /> 
        <Button mnemonicParsing="false" onAction="#CompData" text="Comp Data" HBox.hgrow="ALWAYS" /> 
        <Region prefHeight="200.0" prefWidth="100.0" /> 
       </children> 
      </HBox> 
      <HBox VBox.vgrow="ALWAYS"> 
       <children> 
        <Region prefHeight="200.0" prefWidth="19.0" HBox.hgrow="ALWAYS" /> 
        <Button mnemonicParsing="false" onAction="#Photos" text="Photos" HBox.hgrow="ALWAYS" /> 
        <Region prefHeight="200.0" prefWidth="35.0" HBox.hgrow="ALWAYS" /> 
        <Button mnemonicParsing="false" onAction="#Sketch" text="Sketch" HBox.hgrow="ALWAYS"> 
        <HBox.margin> 
         <Insets /> 
        </HBox.margin> 
        </Button> 
        <Region prefHeight="200.0" prefWidth="125.0" /> 
       </children> 
      </HBox> 
     </children> 
     </VBox> 
    </top> 
</BorderPane> 
</VBox> 

回答

0

Theres沒有辦法將HTML/CSS集成到JavaFX中。

你可以做什麼創建hove效果是在你的代碼中創建動畫。

創建一個新的類伸長按鈕:

public class HoverButton extends Button { 

private ScaleTransition scale; 
private RotateTransition rotate; 
private ParallelTransition transition; 

public HoverButton() { 
    super(); 

    createAnimations(); 
    addEvents(); 
} 

private void createAnimations() { 
    scale = new ScaleTransition(Duration.seconds(0.2), this); 
    rotate = new RotateTransition(Duration.seconds(0.2), this); 

    transition = new ParallelTransition(scale, rotate); 
} 

private void addEvents() { 
    setOnMouseEntered((e) -> { 
     transition.stop(); 
     scale.setToX(1.195); 
     scale.setToY(1.195); 
     rotate.setToAngle(360); 
     transition.play(); 
    }); 
    setOnMouseExited((e) -> { 
     transition.stop(); 
     scale.setToX(1); 
     scale.setToY(1); 
     rotate.setToAngle(0); 
     transition.play(); 
    }); 

} 

} 

在你FXML補充一點:

<?import your.package.HoverButton?> 

與HoverButton替換所有按鈕。

如果你想通過CSS控制效果看看這個。 https://wiki.openjdk.java.net/display/OpenJFX/CSS+API+to+support+custom+UI+Controls