On a lot of platforms, if I start typing "a" when the combo box below has the focus, it will automatically highlight "alice". Is it possible to get that behavior with Tornadofx/Javafx? I tried adding setEditable(true) but that just allows me to freeform edit the name and it doesn't do any highlighting/selection of the existing names.
class MainView : View("Hello TornadoFX") {
val names = FXCollections.observableArrayList(
"alice", "bob", "charlie", "denise")
override val root = vbox {
combobox<String> {
items = names
}
}
}
You can use the TornadoFX makeAutocompletable() extension for that. Here is an example with a bit tighter syntax as well. Note that normally you'd bind the result of the combobox to an observable string property, so the builder syntax would be combobox(name, names) or something like that.
class MainView : View("Hello TornadoFX") {
val names = observableListOf("alice", "bob", "charlie", "denise")
override val root = vbox {
combobox(values = names) {
makeAutocompletable()
}
}
}
You can also pass a filter function to makeAutocompletable if you need to change the filter criteria.
Related
I have a problem with TextField that is hiding under the keyboard, I've found the answers for the similar question here, but they are not helping me in my case. I have a LazyColumn with the list of different composables in it, and when I have not enough elements in the window for scroll to be activated, focusing on TextField is not lifting up focused TextField above keyboard. Keyboard just hides it.
My code:
val listState = rememberLazyListState()
typealias ComposableType = #Composable (Int) -> Unit
val uiList = listOf<ComposableType>( {IconButton}, {Text}, {CustomTextField(listState,it)}, {CustomTextField(listState,it)})
LazyColumn() {
itemsIndexed(uiList) { index, ui ->
ui.invoke(index)
}
}
val scope = rememberCoroutineScope()
#Composable
CustomTextField(scrollState: LazyListState, position: Int) {
OutlinedTextField(
modifier = Modifier.onFocusEvent { focusState ->
if (focusState.isFocused) {
scope.launch {
scrollState.animateScrollToItem(position)
}
}
)
}
So, for example if i have 10 CustomTextFields in my uiList, scroll works when one of TextField is focused. But when there are only 2 TextFields in the uiList, focusing on either of them does not lift up them above keyboard.
Also I tried using RelocationRequester() and used Column with scroll instead of LazyColumn, none of it helped.
It's a combination of things...
You need to add this in your activity's declaration in Android.xml
android:windowSoftInputMode="adjustResize"
Use BringIntoViewRequester as modifier in your TextField as you mentioned.
.bringIntoViewRequester(yourBringIntoViewRequester)
The steps above worked for me when the component gain focus programatically (using FocusRequester). However, when the user taps on the TextField, it didn't work for me. So I implemented a workaround (which I'm not very proud of): when the TextField gain focus, I wait a bit to use the RelocationRequester. So I added this modifier to my TextField.
.onFocusEvent {
if (it.isFocused) {
coroutineScope.launch {
delay(200)
yourBringIntoViewRequester.bringIntoView()
}
}
}
These three things worked for me.
You need to add this in your activity's declaration in AndroidManifest.xml
android:windowSoftInputMode="adjustResize"
You have to set wrapContentHeight().navigationBarsWithImePadding() to the modifier of parent composable
Column(modifier = Modifier.wrapContentHeight().navigationBarsWithImePadding()){}
This solution worked for me.
Add this to your activity in manifest file
android:windowSoftInputMode="adjustResize"
And in the column for example use :
Column (horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.navigationBarsPadding().imePadding()
.verticalScroll(rememberScrollState())
.fillMaxHeight()
.padding(top = 20.dp))
works for me , happy coding ..
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 have a label in a view that is controlled by a integer property, when the value is negative it displays with a minus sign, when the value is positive it does not. However, I would like the Label to display "+5", "-3" ...
take the following code as an example
import javafx.beans.property.SimpleIntegerProperty
import tornadofx.*
class MyView : View() {
val negProp = SimpleIntegerProperty(-3) // this prop is in a ItemViewModel
val posProp = SimpleIntegerProperty(+4) // this prop is in a ItemViewModel
override val root = hbox {
label(negProp) // shows - 3
label(posProp) // shows 4
}
}
Is there a way I can format the text once the property changes ?
Thank you.
You could create a stringbinding which holds the value you want to display in the label and then bind the label's value property to that:
val prop = SimpleIntegerProperty(1)
val propDesc = prop.stringBinding { "%+d".format(it) }
Now you can do:
label(propDesc)
The label will update whenever the property changes value.
You can of course also inline it:
label(prop.stringBinding { "%+d".format(it) })
Say I have an HBox like this:
val texts = new HBox {
content = Seq(new TextArea, new TextArea)
}
Now I'd like to get TextAreas' text values in a collection. How can I get to these TextAreas? texts.content is an ObservableList[javafx.scene.Node], not ObservableList[TextArea].
I've tried type casting like this:
texts.content.get(0).asInstanceOf[TextArea].getText
And gott the following exception: java.lang.ClassCastException: javafx.scene.control.TextArea cannot be cast to scalafx.scene.control.TextArea
You can type cast the elements while fetching them, for example:
TextArea txt1 = (TextArea)observableList.get(0);
TextArea txt2 = (TextArea)observableList.get(1);
Or, if you have multiple TextArea
for(Node node: observableList){
TextArea txt = (TextArea)node;
//Do something with the txtArea
}