Kotlin编写JavaFX的顺滑之数据控件（一）列表视图ListView
效果先行
一个列表视图控件，可以实现展示一系列项，每一个项对应ListView界面中的一行。这个控件很简单，但是也很好用。当采用Kotlin编写的时候，就更好用了。
- 增加项
- 清除项
- 选择项
- 原位编辑
再给代码
data class Kid(
var firstname: String = "",
var middleName: String = "",
var lastname: String = "",
var age: Int = 0
)
class DefaultFocusInScope {
private val _ff = SimpleBooleanProperty(false)
/**
* Set n be the focused node in the scope, when focused, call func
* @param n Node
* @param func Function0<Unit>
*/
fun focusNode(n: Node, func: () -> Unit) {
_ff.addListener { _, _, _ ->
Platform.runLater {
n.requestFocus()
func()
}
}
}
/**
* set focus to the default focused node in this scope.
*/
fun focus() {
_ff.value = !(_ff.value)
}
}
fun randString(len: Int = 10, from: Int = 97, until: Int = 122) = (1..len).map {
Random.nextInt(from, until).toChar()
}.toTypedArray().joinToString(separator = "") { "$it" }
fun listViewDemo(): Parent {
val names = SimpleObjectProperty(FXCollections.observableArrayList<Kid>())
return BorderPane().apply {
padding = Insets(5.0)
center = ListView<Kid>().apply {
isEditable = true
itemsProperty().bindBidirectional(names)
setCellFactory {
object : ListCell<Kid>() {
val thisKid = SimpleObjectProperty(Kid())
override fun updateItem(item: Kid?, empty: Boolean) {
super.updateItem(item, empty)
if (!empty && item != null) {
graphic = HBox().apply {
thisKid.value = item
children.add(Label(item.firstname).apply {
HBox.setHgrow(this, Priority.ALWAYS)
maxWidth = Double.MAX_VALUE
})
children.add(Separator(Orientation.VERTICAL))
children.add(Label(item.middleName).apply { prefWidth = 32.0 })
children.add(Separator(Orientation.VERTICAL))
children.add(Label(item.lastname).apply { prefWidth = 56.0 })
children.add(Separator(Orientation.VERTICAL))
children.add(Label("${item.age}"))
}
} else {
text = null
graphic = null
}
}
override fun startEdit() {
val af = DefaultFocusInScope()
super.startEdit()
graphic = HBox().apply {
with(thisKid.value) {
children.add(TextField(firstname).apply {
HBox.setHgrow(this, Priority.ALWAYS)
maxWidth = Double.MAX_VALUE
textProperty().addListener { _ ->
firstname = text
}
af.focusNode(this) { end() }
})
children.add(TextField(middleName).apply {
prefWidth = 48.0
textProperty().addListener { _ ->
middleName = text
}
})
children.add(TextField(lastname).apply {
textProperty().addListener { _ ->
lastname = text
}
prefWidth = 60.0
})
children.add(TextField("${age}").apply {
prefWidth = 48.0
textProperty().addListener { _ ->
text.toIntOrNull()?.let { age = it }
}
})
children.add(Button("↵").apply {
setOnAction { commitEdit(thisKid.value) }
isDefaultButton = true
})
}
}
af.focus()
}
}
}
}
bottom = HBox().apply {
alignment = Pos.CENTER
children.addAll(
Button("Add item").apply {
setOnAction {
names.value.add(
Kid(
randString(12),
randString(2),
randString(5),
Random.nextInt(1, 10)
)
)
}
},
Button("Clear").apply {
setOnAction {
names.value.clear()
}
}
)
}
}
}
class ListViewTutorialApplication : Application() {
override fun start(stage: Stage) {
val scene = Scene(listViewDemo(), 800.0, 600.0)
stage.title = "ListView"
stage.scene = scene
stage.show()
}
}
fun main() {
Application.launch(ListViewTutorialApplication::class.java)
}
代码解释
程序入口
这个部分不用解释，直接引导我们去看listViewDemo()函数。
class ListViewTutorialApplication : Application() {
override fun start(stage: Stage) {
val scene = Scene(listViewDemo(), 800.0, 600.0)
stage.title = "ListView"
stage.scene = scene
stage.show()
}
}
fun main() {
Application.launch(ListViewTutorialApplication::class.java)
}
根节点
一眼看过去，简单，根节点是一个BorderPane() 。这个函数还声明一个对象属性，对象属性里面是一个可观察的列表。数据项是Kid。
fun listViewDemo(): Parent {
val names = SimpleObjectProperty(FXCollections.observableArrayList<Kid>())
return BorderPane()
}
既然是BorderPane，下面就看五个葫芦娃
centertopleftrightbottom
一看，就center和bottom。
bottom节点
下方一个横向的布局，里面两个按钮，一个增加一个项，一个清除一个项。直接通过setOnAction函数来实现，清爽。
bottom = HBox().apply {
alignment = Pos.CENTER
children.addAll(
Button("Add item").apply {
setOnAction {
names.value.add(
Kid(
randString(12),
randString(2),
randString(5),
Random.nextInt(1, 10)
)
)
}
},
Button("Clear").apply {
setOnAction {
names.value.clear()
}
}
)
}
这就能猜到，界面必然就是bind到names，更改数据就能更新界面。
核心列表的实现
center = ListView<Kid>().apply {
isEditable = true
itemsProperty().bindBidirectional(names)
// ......
}
首先，ListView是一个模板类，有一个项的类型参数，这里的参数是胡乱定义的一个data class，因为我在送小孩上兴趣班……因此就叫Kid。
这里设置列表可以编辑，也就是双击一个项就会进入编辑模式。接下来，把项与前面定义的SimpleObjectProperty(FXCollections.observableArrayList<Kid>())双向绑定，这个定义形式在数据控件中很常用，记住就行。
要实现这么fancy的效果，就调用一个函数：
public final void setCellFactory(Callback<ListView<T>, ListCell<T>> value)
其中那个Callback是一个接口，函数输入ListView<T>,输出ListCell<T>。
public interface Callback<P,R> {
public R call(P param);
}
这样的东西在Kotlin里面就变得极为简单，采用lambda函数来实现call函数就行。
setCellFactory { it:ListView<Kid> ->
object : ListCell<Kid>() {//...}
}
这里知识点好几个：
- 接口脱皮直接变函数；
- 函数参数写到括号外；
- 匿名函数
- 对象的匿名子类单例对象
这里的大括号内部是单例对象的声明（定义）部分，里面的this是ListCell<Kid>子类的定义部分，所以能够重载ListCell<Kid>的函数。
为了显示自定义的项，需要重载：override fun updateItem(item: Kid?, empty: Boolean)，为了能够原位编辑，需要重载override fun startEdit()。
显示项
这个函数非常简单，首先调用父类，然后对象不为空并且标志不为空，设置text和/或graphic，记得，设置成null要两个都要设。不然会有奇怪的显示。
override fun updateItem(item: Kid?, empty: Boolean) {
super.updateItem(item, empty)
if (!empty && item != null) {
graphic = HBox().apply {
thisKid.value = item
children.add(Label(item.firstname).apply {
HBox.setHgrow(this, Priority.ALWAYS)
maxWidth = Double.MAX_VALUE
})
children.add(Separator(Orientation.VERTICAL))
children.add(Label(item.middleName).apply { prefWidth = 32.0 })
children.add(Separator(Orientation.VERTICAL))
children.add(Label(item.lastname).apply { prefWidth = 56.0 })
children.add(Separator(Orientation.VERTICAL))
children.add(Label("${item.age}"))
}
} else {
text = null
graphic = null
}
}
编辑项
这里唯一需要注意的是，把graphic设成可以编辑的控件，最后设定一个事件来调用commitEdit函数，完成项编辑。
override fun startEdit() {
val af = DefaultFocusInScope()
super.startEdit()
graphic = HBox().apply {
with(thisKid.value) {
children.add(TextField(firstname).apply {
HBox.setHgrow(this, Priority.ALWAYS)
maxWidth = Double.MAX_VALUE
textProperty().addListener { _ ->
firstname = text
}
af.focusNode(this) { end() }
})
children.add(TextField(middleName).apply {
prefWidth = 48.0
textProperty().addListener { _ ->
middleName = text
}
})
children.add(TextField(lastname).apply {
textProperty().addListener { _ ->
lastname = text
}
prefWidth = 60.0
})
children.add(TextField("${age}").apply {
prefWidth = 48.0
textProperty().addListener { _ ->
text.toIntOrNull()?.let { age = it }
}
})
children.add(Button("↵").apply {
setOnAction { commitEdit(thisKid.value) }
isDefaultButton = true
})
}
}
af.focus()
}
其他无聊的部分
这个部分是设置焦点的问题，设置一个节点的某个子节点为默认的焦点，又不喜欢保存子节点的实例，所以编写一个类来干这个事情。
逻辑非常简单，一个简单的属性，这个属性变更时，把节点请求焦点的事件加到JavaFX事件队列中，还能调用一个自定义的函数，这用来实现清空选择并把光标放在文本框的末尾。
class DefaultFocusInScope {
private val _ff = SimpleBooleanProperty(false)
/**
* Set n be the focused node in the scope, when focused, call func
* @param n Node
* @param func Function0<Unit>
*/
fun focusNode(n: Node, func: () -> Unit) {
_ff.addListener { _, _, _ ->
Platform.runLater {
n.requestFocus()
func()
}
}
}
/**
* set focus to the default focused node in this scope.
*/
fun focus() {
_ff.value = !(_ff.value)
}
}
随机字符串，比较无聊。
fun randString(len: Int = 10, from: Int = 97, until: Int = 122) = (1..len).map {
Random.nextInt(from, until).toChar()
}.toTypedArray().joinToString(separator = "") { "$it" }
结论
一句话，Kotlin就是滑……很滑很滑……
