2015-10-26 178 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