Как центрировать приложение JavaFX 2.0 в окне браузера - PullRequest
0 голосов
/ 18 февраля 2012

Я создаю приложение в JavaFx 2.0 и хотел бы, чтобы при развертывании приложения оно отображалось в центре окна браузера.Я искал эту тему в Google и Yahoo и ничего не нашел.Любая помощь с благодарностью.

Ответы [ 4 ]

2 голосов
/ 18 февраля 2012

Посмотрите на исходный код для примера JavaFX Ensemble .Приложение Ensemble настроено на выполнение для заполнения окна браузера независимо от его размера.Это делается путем настройки в JavaScript, который запускает приложение, а также с помощью CSS-стиля для div, в который встроено приложение.

Вот выдержка из соответствующих частей 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-кода развертывания , то вам, возможно, придется изменить HTML-код развертывания вручную или с помощью сценария ant для последующей обработки, как это видно в build.xml для примера Ensemble.применение.

1 голос
/ 06 марта 2013

Вы можете использовать комбинацию панелей HBox и VBox в вашем FXML.Вот мой проверенный код:

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

«Панель1» растянется в области браузера.Так что HBox и VBox тоже будут.Поскольку у них есть атрибуты 'center' для их детей, 'panel2' будет центрирован.

1 голос
/ 24 апреля 2012

Используйте этот 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>

Может решить вашу проблему

0 голосов
/ 26 июня 2013

Попробуйте использовать StackPane в качестве контейнера.Он будет центрировать все включенные в него узлы.Торстен

...