JavaFX Scene Builder tool learning

The last chapter talked about the configuration of the visualization tool JavaFX Scene Builder 2.0 and the creation of the first JavaFX project, link: Idea from configuration to creating the first JavaFX project
Before writing the interface, let’s get to know this tool

Open JavaFX Scene Builder

1. There are three files by default in the Sample package under our newly created JavaFX project. Open the file with the extension .fxml (the code inside is automatically generated)
   (Note: If you want to create a new fxml file, you can right-click The target package-New-FXML File)
   as shown in the figure:
2. Right-click in the right interface-
   the tool interface opened by Open In SceneBuilder is shown in the figure:
   

Use JavaFX Scene Builder tool

》》Select the target container or control in the right window and drag it to the middle target area

It is worth noting that
the layout of the Java interface is the same whether it is AWT or Swing or JavaFX. You must first place the first-level container, and then place the sub-containers or controls on the first-level container! ! ! !
It is the same as placing layers in PS. The first-level container can be understood as a canvas. You must have a layer of canvas before you can place other layers or controls on the canvas. In the same way, the upper layers or controls will be covered. The bottom stuff~

Common operations:
1. Save operation and synchronize to the FXML file in the project: File——Save
2. Preview effect: Preview—— Show Preview in Window

Know commonly used containers and controls

This is the tools menu

Commonly used containers

Accordion

Name: List layout, with a separate panel below a list
Effect:

AnchorPane

Name: Anchor layout, you can set the position of the child nodes, basically the same as Pane (inherited Pane)
effect:

BorderPane

Name: Border layout, divided into five areas
: upper, middle, lower, left and right

FlowPane

Name: Flow layout, controls can only be filled sequentially, and cannot be placed in a certain position.
Effects:

GridPane

Name: Grid layout, divide the entire panel into multiple grids
Effect:

HBox

Name: Horizontal layout, the components are arranged in order in the horizontal direction
Effect:

Pane

Name: Basic layout class, which is the parent class of AnchorPane, BorderPane, FlowPane, GridPane, HBox, StackPane, TilePane, VBox

TabPane

Name: Tab panel, switch Pane
effect by switching tabs :

ToolBar

Name: Tool Panel
Effect:

VBox

Name: Vertical layout, the components are arranged in order in the vertical direction, and other attributes are about the same as HBox.
Effect:

-------------Dividing line-----------

Common controls

Button

Name: Button
Function: Click the button to trigger the event. The
effect is shown in the figure:

If you want to click the button to perform an operation, you need to set the trigger event for him:
Select the button and fill in the event method in the On Action in the Code panel on the far right Name, you can click the button to execute the event method

CheckBox

Name: Checkbox
Function: Provide to the user, get the value in the background.
Supplement: Determine whether a checkbox is selected: Checkbox id.isSelected(); the
effect is shown in the figure:

ChoiceBox

Name: Drop-down list box
Function: Provided to the user, get the value in the background The
effect is shown in the figure:

ColorPicker

Name: Color selection box
Function: Provide to the user, get the value in the background The
effect is shown in the figure:

ComboBox

Name: drop-down list check box
Function: provide to users, get the value in the background

DatePicker

Name: Date selection box
Function: Provided to the user, get the value in the background The
effect is shown in the figure:

ImageView

Name: Picture display box
Function: Load the picture and display the
effect as shown in the figure:

Label

Name: Label
Function: Prompt text The
effect is shown in the figure:

MenuBar

Name: Tab
Function: Execute the event method by clicking the drop-down menu of the tab

The drop-down contains three
Menus by default: File, Edit, Help, and File. By default, a MenuItem is included under File, as shown in the figure. Menu and MenuItem are under the Tools menu of Menu. Menu can only be created in MenuBar, and MenuItem can only be created in Menu! ! !

The effect is as follows:

ProgressBar

Name: Progress bar
Function: Display progress The
effect is shown in the figure:

ProgressIndicator

Name: Progress circle
Function: Display progress The
effect is shown in the figure:

RadioButton

Name: Radio button
Function: Obtain the radio value by giving the user. The
effect is shown in the figure:

Note: Multiple radio buttons must be set to the same group, because only one radio button in the same group can be selected. Single selection

PasswordField

Name: Password box
Function: Used to receive the password, the characters entered will be in cipher text mode.
Supplement: Get the password: Password box id.getText(); the
effect is as shown in the figure:

TableView

Name: Table field
Function: Used to display the table The
effect is shown in the figure:

TextArea

Name: Text field
Function: Used to enter text with uncertain number of words (more words)
Supplement: Get text: text box id.getText(); the
effect is shown in the figure:

TextFiled

Name: text box
Function: used to enter text
with less words Supplement: Get text: text box id.getText(); the
effect is shown in the figure: