Lesson 6: emit GUI element
| Use the layout mechanism in Javafx SDK, you can easily arrange and align components without having to specify absolute coordinates for each UI object. Although absolute coordinates can provide a certain degree of flexibility, sometimes you find that the layout mechanism is more convenient. The sample code provided in this tutorial uses data binding and declarative grammatical grammar in the Javafx Script programming language. For more details about these concepts, seeLearn javafx script programming language。 |
| – | Create application window |
| – | Create graphics scene |
| – | Define the single -selection button |
| – | Create round |
| – | Create vertical layout |
| – | Application level layout |
Consider creating three rounds and one single -selection button switching set. Each single -selection button can control the color in the corresponding circle. After selecting this single button, this color will be applied, otherwise, the circle is gray. This solution simulates traffic signal lights, which is an example of the layout mechanism in this tutorial.
To evaluate and test your application, please create an extension name.fxfiles, such aslayout.fx。
You can use the following command to compile your code at any time:
javafxc layout.fx |
You can use the following command to run the compiled code:
javafx layout |
Use
ClassStageCreate a window:
javafx.stage.StageClass Addimportstatement.StageThe face value of the object is added to the code.- Specify the title, width and height of the window.
Display UI objects in the graphic scene
In, you have learned that UI components, shapes, texts, and graphics are regarded as the layered structure of the object in the graphic scene. Now you can create a scene.
SceneandColorClass Addimportstatement.SceneObject word surface value adds toStagesceneIn example variables.- Use
Scenefillvariable definition of the color of the scene.
|
Create a set of single -choice buttons, you can only choose one of the buttons at the given time. This is calledSwitching group. Please execute the following steps:
- Use
SwingToggleGroupClass definition switching group.
Note: In the example code of this lesson, you will define a variable name for each UI element so that you can easily understand how the layout mechanism works. You also have to bind the UI element application by reference variable name.
- Use
Class
SwingRadioButtonCreate three single -choice buttons that can be used to select specific traffic signal lights. - Use
toggleGroupinstance variables add each single button to the group. - Use
fontinstance variables to change the title style of the single -selection button. - will be corresponding
importstatement is added to the code.
The following code fragments are used to define a switching group, and then create a single -selection button and add them to the group.
import javafx.ext.swing.SwingToggleGroup; |
Drawing the circle of the traffic signal light:
Circle、RadialGradientandStopClass Addimportstatement.- The
lightStopvariable defines the circle that represents the red light. - Apply radial gradient fill to enhance the visual effect of this example.
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
var lightStop = Circle {
centerX: 12
centerY: 12
radius: 12
stroke: Color.BLACK
fill: bind RadialGradient {
centerX: 8, centerY: 8, radius: 12, proportional: false
stops: [
Stop {offset: 0.0 color: Color.WHITE},
Stop {offset: 1.0 color: if (choice1.selected)
then Color.RED
else Color.GREY
}//Stop
]//stops
}//RadialGradient
};//Circle
The code sample above uses the data binding mechanism to change the color. ifchoice1variableselectedExample variable value istrue, thencolorinstance variable will becomeColor.RED, otherwise, it will beColor.GREY. For more information about shape and visual effects, please refer toCreate graphic objects。 - Create two reasons
lightReadyandlightGodefinition of the circle, and then bind these two circles to the corresponding radio button.
After creating all components, you can useHBoxand
TheVBoxclass is discharged in the scene.VBoxClass for vertical arrangement components,
TheHBoxclass is used for horizontal arrangement components. In this example, you need to use oneVBoxObject to discharge the single -selection button, use oneHBoxObject to discharge the circle, and use oneHBoxto arrange these two frames.
Create vertical layout for the single -selection button:
- Add the corresponding import statement to the code.
VBoxandHBoxAll are located injavafx.scene.layoutSoftware package. - Use the following code to arrange these radical buttons in the vertical box:
VBox{content:[choice1, choice2, choice3]} - Use
spacinginstance variable definitionThe interval between the elements of the
VBoxobject (in pixels).
The following code fragments can complete these tasks.
After
import javafx.stage.Stage; |
compile and run, the code after this modification will generate the following window.
Perform the following steps to layout of the application level of traffic signal light circles:
- Use the following code line to add these circles to
HBoxObject content.HBox{spacing: 15 content:[lightStop, lightReady, lightGo]} translateYinstance variable settings to25Specify vertical offset for the horizontal box.- Use another
HBoxObject to emit vertical boxes with a single -selection button and a round horizontal frame. - Please see the complete code of this example, as shown below.
After compiling and running, this code will generate the following window.
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.ext.swing.SwingToggleGroup;
import javafx.ext.swing.SwingRadioButton;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
var group = SwingToggleGroup{};
var choice1 = SwingRadioButton{
text: "STOP"
foreground: Color.GRAY
font: Font{name:"Tahoma" size: 15}
toggleGroup: group};
var choice2 = SwingRadioButton{
text: "READY"
foreground: Color.GRAY
font: Font{name:"Tahoma" size: 15}
toggleGroup: group};
var choice3 = SwingRadioButton{
text: "GO"
foreground: Color.GRAY
font: Font{name:"Tahoma" size: 15}
toggleGroup: group};
var lightStop = Circle {
centerX: 12
centerY: 12
radius: 12
stroke: Color.GRAY
fill: bind RadialGradient {
centerX: 8,
centerY: 8,
radius: 12,
proportional: false
stops: [
Stop {offset: 0.0 color: Color.WHITE},
Stop {offset: 1.0 color: if (choice1.selected)
then Color.RED
else Color.GREY
}
]
}
};
var lightReady = Circle {
centerX: 12
centerY: 12
radius: 12
stroke: Color.GRAY
fill: bind RadialGradient {
centerX: 8,
centerY: 8,
radius: 12,
proportional: false
stops: [
Stop {offset: 0.0 color: Color.WHITE},
Stop {offset: 1.0 color: if (choice2.selected)
then Color.GOLD
else Color.GRAY
}
]
}
};
var lightGo = Circle {
centerX: 12
centerY: 12
radius: 12
stroke: Color.GRAY
fill: bind RadialGradient {
centerX: 8,
centerY: 8,
radius: 12,
proportional: false
stops: [
Stop {offset: 0.0 color: Color.WHITE},
Stop {offset: 1.0 color: if (choice3.selected)
then Color.GREEN
else Color.GREY
}
]
}
};
Stage {
title: "Lights"
width: 220
height: 130
visible: true
scene:
Scene{
fill: Color.HONEYDEW
content:
HBox{
spacing: 10
content:[
VBox{spacing: 10 content:[choice1, choice2, choice3]},
HBox{spacing: 15 content:[lightStop, lightReady, lightGo] translateY: 25}
]
}//HBox
} //Scene
}//StageFigure 4: The vertical box with a single button and a round horizontal frame
In this lesson, you learn how to discharge UI components in the scene. You can use the combination of layout mechanism, absolute coordinates or these methods for your current task.