当前位置：文江博客话题详情

如何将 JavaFX 2.0 应用程序置于浏览器窗口的中心

发布于 2025-01-06 22:07:33 字数 89 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我是男神闪亮亮 2025-01-13 22:07:33

查看源代码的 JavaFX Ensemble 示例。 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 中为此创建了一个功能请求 - 您可以创建那里有一个帐户来查看请求。如果您使用这些工具来生成部署 html，那么您可能会手动或通过后处理 ant 脚本修改部署 html，如 Ensemble 示例应用程序的 build.xml 中所示。

Look at the source code for the JavaFX Ensemble example. The Ensemble application is configured to run to fill a browser window, no matter the size of the window. The way it is done is by configuration in the JavaScript which launches the app as well as via css styling of the div the application is embedded in.

Here is an extract of the relevant parts of the 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>

If you need something other than 100% coverage, you can the 100% tags to, say 75%, and adjust the css styling to get centering in the page with the margins you want.

The current Java packaging tools (e.g. the javafxpackager utility), do not allow specification of percentange widths. I've created a feature request for this in the javafx jira - you can create an account there to view the request. If you use those tools to generate your deployment html, then you might have to modify the deployment html by hand or by a post-processing ant script, as can be seen in the build.xml for the Ensemble sample application.

回复收藏 0 原文

淤浪 2025-01-13 22:07:33

您可以在 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 也会。因为它们的子级具有“center”属性，所以“panel2”将居中。

You can use combination of HBox and VBox panels in your FXML. Hier is my tested code:

<?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>

The 'panel1' will stretch in the browser area. So the HBox and VBox will also. Because they have 'center' attributes for their childeren, the 'panel2' will be centered.

回复收藏 0 原文

吃→可爱长大的 2025-01-13 22:07:33

使用这个 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>

可能会解决你的问题

Use this 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>

Might solve your problem

回复收藏 0 原文