- 短版本:
上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:
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>