javaFX UI组件

标签 Label

JavaFX API 为Label提供了三个构造方法

Label labe1=new Label();
Label labe2=new Label("hellp");
Image image =new Image(getClass().getResourceAsStream("1.jpg"));
Label label3=new Label("1",new ImageView(image));

• setText(String text) 指定文本内容
• setGraphic(Node graphic) //指定图标
• setTextFill() 指定填充颜色
• setTextAlignment() 改变对齐方向
• setGraphicTextGap() 设置文本图片距离
• setContentDIsplay(COntentDisplay value) 设置图形和文本相对位置

折叠换行文字

• setWrapText(true) 换行
• setTextOverrun(OverrunStyle value) 呈现不能完全出来的文本

添加视觉效果

• setRotate(int rotate) 旋转
• setScaleX/Y 缩放效果

按钮 Button

Button 和label一样集成Labeled类，它可以显示文本，图像或者两者一起。
类似也有三种构造方法。

添加Action

button2.setOnAction((ActionEvent e)->{
label.setText("111");
})

视觉特效

因为Button类集成字Node类，所有你可以为Button添加javafx.scene.effect 包下的任何特效来增强诗句效果。

DropShadow shadow=new DropShadow();
button.addEventHandler(MouseEvent.MOUSE_ENTERED,(MouseEvent e)->{
button.setEffect(shadow);
});

为Button设置样式
可以在一个单独的CSS样式文件中定义样式，然后通过getStyleClass方法在应用程序中使用它。该方法继承自Node类，并且在所有的UI空间中都可用。

.button1{
-fx-font:22 arial;
-fx-base:#b6e7c9;
}
button.getStyleClass().add("button1");

单选按钮 RadioButton

RadioButton 是ToggleButton的一个特殊实现。
继承了labeled，所以也可以指定文字和图像，使用setGraphic指定。

添加到Group

RadioButton 通常用于呈现一个组中几个相互排斥的选项。ToggleGroup 对象提供与之关联的引用并管理他们。

final ToggleGrop group =new ToggleGroup();
RadioButton rb1=new RadioButton("home");
rb1.setToggleGroup(group);

RadioButton rb2=new RadioButton("calendar");
rb2.setToggleGroup(group);
rb2.setSelected(true); //设置选中
rb2.requestFoces(); //设置焦点

处理事件

根据选中更换图标

ImageView image=new ImageView();
rb1.setUserData("Home");
rb2.setUserData("Calendar");

group.selectedToggleProperty().addListener((ObservableValue ov,Toggle old_Toggle, Toggle new_Toggle)->{
if(group.getSelectedToggle()!=nll){
final Image image=new Image(getClass().getResourceAsStream(group.getSelectedToggle().getUserData().toString()+".jpg"));
icon.setImage(image);
}});

开关按钮 ToggleButton

两个或以上的ToggleButton可以组合在一个Group中，同时只有一个ToggleButton可以被选中，或者都无需选中。
继承Labeled类的扩展，所以你可以指定文本、一个图像或者同时指定二者。

ToggleButton tb1=new ToggleButton();
ToggleButton tb2=new ToggleButton("press me");
Image image=new Image(getClass().getResourceAsStream("icon.png"));
ToggleButton tb3=new ToggleButton("press me",new ImageView(image));

添加到Group

和RadioButton比较相似，可以参考，不同是再次点击可以取消选中。

复选框 CheckBox

和RadioButton相似，但不能组合到ToggleGroup来选中多个。

CheckBox cb1=new CheckBox();
CheckBox cb2=new CheckBox("second");
cb1.setText("First");
cb1.setSelected(true);

有三种状态选中、非选中、不可用。默认选中、非选中切换，可以设置成三种状态循环切换。

设置行为

选中对应图标呈现在工具栏中

final String[] name=new String[]{"Security","Project","Chart"};
final Image[] images=new Image[names.length];
final ImageView[] icons=new ImageVIew[names.length];
final CheckBox[] cbs=new CheckBox[names.length];
for(int i=0;i ov, Boolean old_val,Boolean new_val)->{
icon.setImage(new_val?image:null);})
}

选择框 ChioceBox

支持从一些选项中快速选择

ChoiceBox cb=new ChoiceBox(FXCollections.observableArrayList("First","second","Third"));
//也可以使用不带参数的构造方法，通过setItems方法设置选项列表
ChoiceBox cb=new ChoiceBox();
cb.setItems(FXCollections.observableArrayList("New DOcumnet"));

不仅可以包括文件也可以是图像，使用Separator组件分割选项。

设置行为

选择语言实例

final String[] greetings=new String[]{"Hello"，"你好"}；
final ChoiceBox cb=new ChoiceBox(FXCollections.observableArrayList(
"English","简体中文"))；
cb.getSelectionModel().selectedIndexProperty().addListener((ObservableValue ov,Number old_val,Number new_val)->{
label.setText(greetings[new_val.intValue()]);
});

提示信息 Tooltip

Tooltip 类提供了一个预定义的提示信息，它可以通过setTooltop方法很方便的应用的应用到ChoiceBox之上。

cb.setTooltip(new Tooltip("select th language"));

如果应用程序逻辑需要UI动态设置文本，可以使用不带参的构造方法先创建一个Tooltip，然后通过setText方法为其设置文本。

文本框 TextField

TextField 类实现了一个接收和显示文本输入的UI组件。它提供了从用户结束文本输入的功能。这个类和另一个文本输入组件PasswordFiled一样，都继承自TextInput类。

Label label1=new Labe("Name:");
TextField textField =new TextFiled();
HBox hb=new HBox();
hb.getChildren().addAll(label1,textField);
hb.setSpacing(10);

可以使用setPrefColumnCount方法来设置TextField的大小，指的最大字符数。

**能用在TextField上的方法

• copy() 将当前选中范围内的文本复制到剪切板，并保留选中的内容。
• clear() 清理文本内容
• cut() 将当前选中范围内的文本赋值到剪切板，并移除内容
• selectAll() 选中输入内容
• paste() 将剪切板内容粘贴到输入框

密码框 passwordField

输入内容显示成回显字符串隐藏

PasswordField passwordField =new PasswordField();
passwordField.setPromptText("your password");

提示内容没有被显示，而是被回显字符隐藏了。输入内容可以通过getText()获取。

验证密码

从安全方面考虑，验证完成后清理PasswordField 内容。

final Label message=new Label("");
VBox vb=new VBox();
vb.setPadding(new Insets(10,0,0,10));
vb.setSpacing(10);
HBox hb=new HBox();
hb.setSpacing(10);
hb.setAlignment(pos.CENTER_LEFT);
Label label =new Label("password");
final PasswordField pb=new PasswordField();
pb.setOnAction((ActionEvent e)->{
if(!pb.getText().equals("dd")){
message.setText("your password is incorrect!");
message.setTextFill(Color.rgb(210,39,30));
}else{
message.setText("your password has been confirmed");
message.setTextFill(Color.rgb(21,117,84));
}
pb.clear();
});
hb.getChildren().addAll(label,pb);
vb.getChildren().addAll(hb,message);

滚动条 ScrollBar

ScrollBar 类可以让你在应用程序汇总创建可滚动的面板和视图。

ScrollBar sc=new ScrollBar();
sc.setMin(0);
sc.setMax(100);
sc.setValue(50);

可以通过setOrientation方法来设置垂直方向。

滚动面板 ScrollPane

滚动面板为UI元素提供一个可滚动的视图。

Image roses=new Image(getClass().getResourceAsStream("roses.jpg"));
ScrollPane sp=new ScrollPane();
sp.setContent(new ImageView(roses));
sp.setHbarPolicy(ScrollBarPolicy.NEVER); //横向不显示
sp.setVbarPolicy(ScrollBarPolicy.ALWAYS); 

可以通过setFitToWidth 和setFitToHeight方法是的内容适应滚动面板。
跟踪滚动条的纵向坐标值的变化

sp.vvalueProperty().addListener((ObservableValue ov, Number old_val,Number new_val) -> {
fileName.setText(imageNames[(new_val.intValue()-1)/100])
});

在你的程序中，可以通过改变纵向和横向滚动条的最大和最小值来动态地更新用户界面。

列表视图 ListView

用于展示一个可滚动的列表。可以通过setItems方法来填充列表内容，也可以通过setCellFactory方法来为列表中的选项创建一个视图。

ListView list =new ListView<>();
ObservableList items=FXCollections.observableArrayList)("Single","Double");
list.setItems(items);
//宽高
list.setPrefWidth(100);
list.setPrefHeight(70);
//横排竖排
list.setOrientation(Orientation.HORIZONTAL);

组合方法	说明
getSelectionModel().getSelectedIndex()	返回在单选模式下当前被选中的列表项索引号
getSelectionModel().getSelectedItem()	返回当前被选中的列表项
getFocusModel().getFocusedIndex()	返回当前获得焦点的类别项索引号
getFoucesModel().getFocusedItem()	返回当前获得焦点的列表项

可以通过设置多选

listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);

使用数据来填充ListView

可以通过ListCell类的特定扩展来向列表中添加各种类型的数据，例如CheckBoxListCell，ChoiceBoxListCell，ComboBoxListCell和TextFieldListCell。

names.addAll("1","2");
listView.setCellFactory(ComboBoxListCell.forListView(names));

• 自定义ListView内容

使用CellFactory来产生列表项。

list.setCellFactory((ListView I)->new ColorRectCell());
static class ColorRectCell extends ListCell{
@Override
public void updateItem(String item,boolen empty){
super.updateItem(item,empty);
Rectangle rect =new Rectangle(100,20);
if(item!=null){
rect.setFill(Color.web(item));
setGraphic(rect);
}
}
}

• 处理队列表项的选中事件

list.getSelectionModel().selectedItemProperty().addListener((ObservableValue ov,String old_val,String new_val)->{
label.setText(new_val);
});