CODEWITHSUNDEEP
javafx-2
Artur G Vieira
Artur G Vieira

Reputation: 363

How to center a JavaFX 2.0 application on a browser's window

I am building a application in JavaFx 2.0 and would like to, when the application is deployed, to have it show up on the center of the window of a browser. I have looked for this topic in google and yahoo and found nothing. Any help is greatly appreciated.

Upvotes: 0

Views: 1729

Answers (4)

Torsten Straßer
Torsten Straßer

Reputation: 104

Try to use a StackPane as container. It will center all nodes it includes. Torsten

Upvotes: 0

Korki Korkig
Korki Korkig

Reputation: 2814

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.

Upvotes: 1

Beniton Fernando
Beniton Fernando

Reputation: 11

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

Upvotes: 1

jewelsea
jewelsea

Reputation: 159566

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.

Upvotes: 2

Related Questions