how to insert a button or any other kind of component in javafx tableview cell using tornadofx ?
I am in a situation where i have a column header "Action". I need to render several action buttons in the table view .
Use the cellFormat function and assign a container with the buttons to the graphic property of the cell:
column("Name", SomeObject::someproperty).cellFormat {
graphic = hbox(spacing = 5) {
button("Action 1").action { doSomething() }
button("Action 2").action { doSomethingElse() }
}
}
Related
I have two css classes on a tornadofx label bound to a SimpleBooleanProperty. One which has a background image and a blue border and one which has no background image and a yellow border.
Snippet from View containing label:
val switch: SimpleBooleanProperty = SimpleBooleanProperty(false)
label("my label"){
toggleClass(UIAppStyle.style1, switch.not())
toggleClass(UIAppStyle.style2, switch)
}
Snippet from UIAppStyle:
s(style1){
textFill = Color.YELLOW
maxWidth = infinity
maxHeight = infinity
alignment = Pos.CENTER
backgroundImage += this::class.java.classLoader.getResource("img.png")!!.toURI()
backgroundPosition += BackgroundPosition.CENTER
backgroundRepeat += Pair(BackgroundRepeat.NO_REPEAT, BackgroundRepeat.NO_REPEAT)
borderColor += box(Color.BLUE)
}
s(style2){
textFill = Color.YELLOW
maxWidth = infinity
maxHeight = infinity
alignment = Pos.CENTER
borderColor += box(Color.YELLOW)
}
When switch = false, there is a background image and a blue border. When switch = true, there is the same background image and a yellow border. I'm not finding out how to get the background image to remove. Interestingly enough, if I add a different background image to style2, it changes correctly.
Edit: To remove two toggleClasses and introduce new strange problem:
class MyView : View(){
...
init{
...
row{
repeat(myviewmodel.numSwitches){
val switch = myviewmodel.switches[it]
val notSwitch = switch.not()
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, notSwitch)
}
}
}
}
This code snippet does not work for me. However, if I add private var throwsArray = mutableListOf<ObservableValue<Boolean>>() as a field of MyView and add notSwitch to the array, then the same exact code works. It's almost as if notSwitch is going out of scope and becoming invalidated unless I add it to a local array in the class?
I don’t understand why you want to have two different toggleClass for the same control. As you pointed out, the problem in your case is that when the backgroundImage is set, you need to set a new one in order to change it. But in your case, you only have to add the style without backgroundImage first and them set toggleClass with the style with backgroundImage. Like this:
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, switch)
}
button {
action {
switch.value = !switch.value;
}
}
Edit: This ilustrate what I'm talking about in comments:
class Example : View("Example") {
override val root = vbox {
val switch = SimpleBooleanProperty(false)
val notSwitch = switch.not()
label("my label"){
addClass(UIAppStyle.style2)
toggleClass(UIAppStyle.style1, notSwitch)
}
button("One") {
action {
switch.value = !switch.value;
}
}
button("Two") {
action {
notSwitch.get()
}
}
}
}
You can put the notSwitch.get() in any action and without trigger that action it does the work. Check how I put it in the action of button Two, but without clicking that button even once, it works.
This is actually some kind of hack, in order to achieve what you want. But I don’t see the reason why my initial solution with true as default value for property shouldn’t work.
Edited to do inverse of status
Here is simple example of a working toggle class using your styling:
class TestView : View() {
override val root = vbox {
val status = SimpleBooleanProperty(false)
label("This is a label") {
addClass(UIAppStyle.base_cell)
val notStatus = SimpleBooleanProperty(!status.value)
status.onChange { notStatus.value = !it } // More consistent than a not() binding for some reason
toggleClass(UIAppStyle.smiling_cell, notStatus)
}
button("Toggle").action { status.value = !status.value }
}
init {
importStylesheet<UIAppStyle>()
}
}
As you can see, the base class is added as the default, while styling with the image is in the toggle class (no not() binding). Like mentioned in other comments, the toggleClass is picky, additive in nature, and quiet in failure so it can sometimes be confusing.
FYI I got to this only by going through your github code and I can say with confidence that the not() binding is what screwed you in regards to the toggleClass behaviour. Everything else causing an error is related to other problems with the code. Feel free to ask in the comments or post another question.
In the following TornadoFX/Kotlin code
import javafx.scene.control.TreeItem
import javafx.scene.control.TreeView
import tornadofx.*
class MyObj {
var type : Int = 0
constructor(type : Int) {
this.type = type
}
}
class MainView: View("Minimal TV demo") {
var treeRoot : TreeItem<MyObj> = TreeItem()
var objectsTreeView : TreeView<MyObj>? = null
override val root = vbox {
objectsTreeView = treeview(treeRoot) {
showRootProperty().value = false
cellFormat {
if(it.type == 0) {
text = "Test"
graphic = null
}
else {
text = null
graphic = vbox {
label("Label 1")
button("123")
textarea {
prefWidth = 100.0
prefHeight = 125.0
}
}
}
}
}
}
init {
with (root) {
for(i in 1..10) {
val x = TreeItem(MyObj(0))
treeRoot.children.add(x)
x.children.add(TreeItem(MyObj(1)))
}
}
}
}
when opening a few of the tree items and scrolling the tree view, the tree view contents and slider seems to act rather "jumpy", i.e. when I move the slider down, the mouse moves but the slider and content stay where it is, until the mouse gets so far down, then the content jumps. It just doesn't feel or look good.
I believe I could get around this by adding separate TreeItem's for each UI element row, but is there a way to achieve a smooth scroll without doing this? I tried suing a fixed cell height, which seems to work, but of course this doesn't look right at all given that some rows a shorter than others.
Don't use cellFormat for complex tree UIs, since the elements will be recreated very rapidly and most probably cause flicker. Your best bet is to create a subclass of TreeCellFragment and configured it using the cellFragment call.
Now you can create the UI only once per Tree cell, and reuse it when the data it represents changes. This is much more performant.
I need to make cells color in my tableview be changed by right mouse click. My code:
cellFormat { _ ->
graphicProperty().addListener { _ ->
setOnMouseClicked {
if (it.button == MouseButton.SECONDARY)
style {
backgroundColor += c("darkred")
}
}
}
}
second variant:
cellFormat { _ ->
style {
setOnMouseClicked { button ->
if (button.button == MouseButton.SECONDARY) {
backgroundColor += c("darkred")
}
}
} }
I understand that I need to make cell format listener, however I tried different ways and have no result. Can anyone give me a tip?
This sounds like you are marking selections for a later operation. Have you considered a multi-select list with a CSS style applied to selected items?
A checkbox could also be used to mark off records if you have need for a parallel selection mechanism.
I am writing a small chat application in Kotlin with TornadoFX that works so far.
I am currently trying to make it more visually appealing when receiving new messages.
The messages are in a TableView (sender - message) but scrolling to new messages isn't smooth like I would like.
The snippet where I need help is relatively short:
addEventHandler(ScrollToEvent.ANY) {
it.consume()
timeline {
val keyValue = KeyValue(/* property to change */, /* target value */, Interpolator.EASE_OUT)
keyframe(0.25.seconds) {
this.plusAssign(keyValue)
}
}
}
In general I need help figuring out which property to change and what the target should be in this line:
KeyValue(/* property to change */, /* target value */, Interpolator.EASE_OUT)
Ok, I found the solution.
One needs to lookup the ScrollBar the TableView provides, once enough rows are present (and when scrolling actually does anything).
From TornadoFX JavaFX Sync Scroll across tableviews, I adapted the lookup and came up with this, working, code:
addEventHandler(ScrollToEvent.ANY) {
it.consume()
timeline {
val scrollBar = lookupAll(".scroll-bar").first() as ScrollBar
val keyValue = KeyValue(scrollBar.valueProperty(), scrollBar.max, Interpolator.EASE_OUT)
keyframe(0.5.seconds) {
this.plusAssign(keyValue)
}
}
}
I currently am using a custom cell factory in Javafx to style cells/rows of my table view with css. This is working successfully and exactly how I need it to. I was wondering if there was another way to style the rows of a table view.
I want to style the entire row with css dynamically instead of cell by cell. Some of the rows will be different colors, etc. Font fill, background color, font size, etc.. nothing fancy.
You can use a rowFactory on the table which generates rows and manipulates either the style class of the row or a pseudoclass attached to the row. Then use an external style sheet to apply the styles.
e.g.
PseudoClass foo = PseudoClass.getPseudoClass("foo");
table.setRowFactory(tv -> {
TableRow<MyDataType> row = new TableRow<>();
row.itemProperty().addListener((obs, oldItem, newItem) -> {
if (/* some condition on newItem */) {
row.pseudoClassStateChanged(foo, true);
} else {
row.pseudoClassStateChanged(foo, false);
}
});
return row ;
});
and then
.table-row-cell {
/* your regular style settings here */
}
.table-row-cell:foo {
/* your specific style for when foo is set here */
}