Previously described and the use of the base form of FXML controller, the encoding process FXML be open mode. Program interface usually remains fixed size, but sometimes allows the user to drag the window size, do not drag it does not matter, it is possible to drag a bad thing. Like the previous login window, no drag when the interface is shown below.
Now slowly prolonged window, onto the half stop, this time login interface is shown below.
At first glance the past, the size of each control on the interface remains the same, and always centered, did not find any problems. But continued prolonged window, a sudden large universe diversion of these controls, the user name field to the top of the first row, along the top of the login button to the second line, interface effects after the change as shown in FIG.
Control problems typesetting confusion has arisen because the interface uses streaming root pane FlowPane. The so-called streaming, referring from left to right, if not filled row, just behind the current line; only filled a row, will continue on a separate line row. Just drag the window when dragged on too long, leading to accommodate the width of the window can log in with a user name two types of regions, two regions will result pushed the same line. Obviously this is not the desired interface layout, controls at least honest to stay in their position, not overstepped.
To avoid the problem of erratic flow pane layout, you can replace the use of vertical panes streaming box VBox, vertical box specified for each of its immediate subordinates occupies a row, will not produce immediate subordinates squeeze two in the same row phenomenon . Thus fxml modify the original document, the root node FlowPane into the VBox, corresponding xml tag becomes the following format:
<VBox fx: the Controller = "com.javafx.fxml.LoginController" xmlns: fx = "http://javafx.com/fxml" Alignment = "Center"> ! <- This is the xml comment tags. Omitting the middle of each control label login window -> </ the VBox>
fxml file modification, re-run the test program, the pop-up login window as shown below.
Anyway elongated window now, all regions to stay in the current line, never run around. However, very coordinated using VBox interface, VBox reason that does not support hgap vgap property and therefore did not automatically separated between the controls, almost all stuck together, for example:
1, log type, the user name, password three left block region directly to the top edge of the window;
2, the user name input box, the password input box, since three login button down tightly close, without leaving a trace of the gap;
like this interface too tight, it feels quite stiff, or leave a suitable interval better. Although not supported by VBox and hgap vgap properties, but it additionally provides padding property groups, allowing each to specify the pitch of the lower, left, and right directions. nodes hanging under the padding which VBox or HBox, it automatically indicates which box blank inside, padding xml tag specifically corresponding to the following wording:
<padding>
<Insets top="10.0" bottom="10.0" left="10.0" right="10.0"/>
</padding>
Examples of the above-described padding node, defines the upper, lower, left, and right direction of the pixels 10 leaving white space. Considering the VBox and HBox below may hang several child controls, in order to better separate these child controls with padding area, fxml gave VBox and HBox introduces children child node, all lower-level controls put all children under the node, special place in four directions padding node distance. Thus, a complete form VBox node structure becomes less so:
<VBox fx: the Controller = "com.javafx.fxml.LoginController" xmlns: fx = "http://javafx.com/fxml" Alignment = "Center">
<Children>
<- this is the xml comment tag!. Omitting the middle of the lower control list VBox ->
</ Children>
<padding>
<Insets Top = "10.0" bottom = "10.0" left = "10.0" = right "10.0" />
</ padding>
</ VBox>
Xml can be seen from the examples above, VBox improved after the label has become structured, clear structure, greatly enhancing its readability.
In addition, FXML also provides capabilities for automatic extension HBox and VBox, that is, with the increase of the window size, the width and height of the HBox and VBox will also increase. Wherein the horizontal width of the adaptive, controlled by the attribute HBox.hgrow, which indicates the current width of the box follows the changes is superior ALWAYS; vertical direction by the width attribute adaptive control VBox.vgrow which indicates if the current value ALWAYS the changes follow the superior height of the box. Especially to be noted that, in addition to these two boxes HBox and VBox autostretch outside support, only a few support autostretch control input box, and wherein TextField PasswordField support AUTOMATIC extending in the horizontal direction, and horizontal and vertical support TextArea two autostretch directions.
Take advantage of several new nodes and new properties fxml transformation of the original login screen, on the one hand, the entire login screen around the edges of the window are blank, also leaving a gap between the rows; on the other hand, so that the user name and password input box input box support extending horizontally, so that the user name and password region vertically extending support region. Examples fxml file after some renovation so as follows:
<VBox fx:controller="com.javafx.fxml.LoginController" xmlns:fx="http://javafx.com/fxml" alignment="center">
<children>
<HBox fx:id="hbType" prefWidth="400" prefHeight="40">
<children>
<Label fx:id="labelType" prefWidth="120" prefHeight="40" text="登录类型：" />
<fx:define>
<ToggleGroup fx:id="tgType" />
</fx:define>
<RadioButton fx:id="rbPassword" prefWidth="140" prefHeight="40" toggleGroup="$tgType"
text="密码登录" selected="true" />
<RadioButton fx:id="rbVerifycode" prefWidth="140" prefHeight="40" toggleGroup="$tgType"
text="验证码登录" />
</children>
<padding>
<Insets top="0.0" bottom="10.0" left="0.0" right="0.0"/>
</padding>
</HBox>
<HBox fx:id="hbUser" prefWidth="400" prefHeight="40" VBox.vgrow="ALWAYS">
<children>
<Label fx:id="labelUser" prefWidth="120" prefHeight="40" text="用户名：" />
<TextField fx:id="fieldUser" prefWidth="280" prefHeight="40" HBox.hgrow="ALWAYS" />
</children>
<padding>
<Insets top="0.0" bottom="10.0" left="0.0" right="0.0"/>
</padding>
</HBox>
<HBox fx:id="hbPassword" prefWidth="400" prefHeight="40" VBox.vgrow="ALWAYS">
<children>
<Label fx:id="labelPassword" prefWidth="120" prefHeight="40" text="密 码：" />
<PasswordField fx:id="fieldPassword" prefWidth="280" prefHeight="40" HBox.hgrow="ALWAYS" />
</children>
<padding>
<Insets top="0.0" bottom="10.0" left="0.0" right="0.0"/>
</padding>
</HBox>
<Button fx:id="btnLogin" prefWidth="400" prefHeight="40" text="登 录" />
<Label fx:id="labelLoginResult" prefWidth="400" prefHeight="40" text="这里显示登录结果" />
</children>
<padding>
<Insets top="10.0" bottom="10.0" left="10.0" right="10.0"/>
</padding>
</VBox>
Re-run the test program, the pop-up login window as shown below, and she controls with neighboring levels are separated by a short distance.
Next horizontally elongated window, the window after the interface following elongation as shown on the left. Back to the initial size, window pulled in the vertical direction, as shown in the following right after high.
FIG seen from the above two effects, several boxes and the width and height of the input box does follow the changes in window size is changed.
See more Java technology articles " Java Development Notes (order) List of chapters "