Question

我正在使用JavaFx 2.0构建应用程序，并希望在部署应用程序时将其显示在浏览器窗口的中心。我在谷歌和雅虎寻找这个话题，一无所获。非常感谢任何帮助。

Answer 1

查看source code的JavaFX Ensemble example。 Ensemble应用程序配置为运行以填充浏览器窗口，无论窗口大小如何。它的完成方式是通过JavaScript中的配置来启动应用程序以及通过嵌入应用程序的div的css样式。

以下是html相关部分的摘录。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JavaFX 2.0 - Ensemble</title>
    <SCRIPT src="http://java.com/js/dtjava.js"></SCRIPT>

    <script>
      function javafxEmbed_ensemble() {
        dtjava.embed(
          {
            id : 'ensemble',
            url : 'Ensemble.jnlp',
            placeholder : 'javafx-app-placeholder',
            width : '100%',
            height : '100%',
            jnlp_content : '...'
          },
          {
            javafx : '2.0+'
          },
          {}
        );
      }
      dtjava.addOnloadCallback(javafxEmbed_ensemble);
    </script>

    <style>
      html, body, #javafx-app-placeholder, #ensemble-app {  
        margin: 0;  
        overflow: hidden;  
        padding: 0; 
        width: 100%;
        height: 100%; 
      }
    </style>
  </head>
  <body><div id='javafx-app-placeholder'></div></body>
</html>

如果您需要100％覆盖范围之外的其他内容，您可以将100％代码添加到75％，并调整css样式以使页面居中，并带有您想要的边距。

当前的Java打包工具（例如javafxpackager实用程序）不允许指定百分比宽度。我已在javafx jira中为此创建了一项功能请求 - 您可以在那里创建一个帐户来查看请求。如果您使用这些工具generate your deployment html，则可能需要手动或通过后处理ant脚本修改部署html，如Ensemble示例应用程序的build.xml中所示。

Answer 2

使用此FXML

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <HBox id="HBox" alignment="CENTER" spacing="5.0" AnchorPane.bottomAnchor="213.0" AnchorPane.leftAnchor="168.0" AnchorPane.rightAnchor="168.0" AnchorPane.topAnchor="214.0">
      <children>
        <GridPane id="gridPane1" alignment="CENTER" hgap="2.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" vgap="2.0">
          <children>
            <Label id="label1" alignment="CENTER_RIGHT" contentDisplay="RIGHT" text="Username" GridPane.columnIndex="0" GridPane.rowIndex="0" />
            <Label id="label2" alignment="CENTER_RIGHT" text="Password" GridPane.columnIndex="0" GridPane.rowIndex="1" />
            <TextField id="textField1" fx:id="userid" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="0" />
            <PasswordField id="passwordField1" fx:id="password" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
            <Button id="button1" alignment="CENTER_RIGHT" text="Signin" GridPane.columnIndex="1" GridPane.halignment="RIGHT" GridPane.rowIndex="2" />
          </children>
          <columnConstraints>
            <ColumnConstraints halignment="CENTER" hgrow="NEVER" maxWidth="-Infinity" minWidth="-Infinity" percentWidth="0.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
          </columnConstraints>
          <padding>
            <Insets bottom="2.0" left="4.0" right="4.0" top="2.0" />
          </padding>
          <rowConstraints>
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          </rowConstraints>
        </GridPane>
      </children>
    </HBox>
  </children>
</AnchorPane>

可以解决您的问题

Answer 3

您可以在FXML中使用HBox和VBox面板的组合。 Hier是我测试过的代码：

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane fx:id="panel1" xmlns:fx="http://javafx.com/fxml" fx:controller="app.MainController">
    <HBox alignment="CENTER" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <VBox alignment="CENTER">
           <Pane fx:id="panel2"></Pane> <!-- YOUR CENTERED CONTENT HERE! -->
        </VBox>
    </HBox>
</AnchorPane>

'panel1'将在浏览器区域中拉伸。所以HBox和VBox也会。因为他们的孩子有'中心'属性，'panel2'将居中。

Answer 4

尝试使用StackPane作为容器。它将使其包含的所有节点居中。托

如何在浏览器窗口中居中JavaFX 2.0应用程序

4 个答案: