https://kotlinlang.org logo
Join Slack
Powered by
This is the output from DataGrip (Jetbrains query ...
# tornadofx
m
This is the output from DataGrip (Jetbrains query tool). To make a TornadoFx table view look that way, what should be done? use CSS or something else.
r
Use CSS (or better yet, type safe styles)
m
Do you have any samples you could share?
m
offtop - can you pls share your datagrip theme name? tnx!
m
@msafarulla the best way I have found to experiment with CSS is to use Scene Builder, it has a CSS Analyzer that lets you click on parts of the UI and see all the styles as well as design and manipulate the UI
👍 1
👍 1
m
@mp Theme is Drakula.
@Marshall Thats where I ended up going. Instead of Kotlin I moved to Java as well.
m
ah ok, good luck 🙂 I don't think anything could make me go back to Java at this point
➕ 2
m
@Marshall do you mean to say Kotlin&FXML are as plug play as Java&FXML?
m
yeah I have an app that uses Kotlin and FXML
its kind of a hybrid approach
the FXML is basic layout, then things like table columns are done in the tornadofx builders
You can do this:
Copy code
override val root: SplitPane by fxml("/fxml/Areas.fxml")
    private val tvAreas: TableView<Area> by fxid()
then in your init do this:
Copy code
with(tvAreas) {
            vgrow = Priority.ALWAYS
            isEditable = true
            column("Id", Area::idProperty).prefWidth(75).makeEditCell()
            column("Name", Area::nameProperty).prefWidth(250).makeEditCell()
}
m
@Marshall Would you be kind enough to send me to one of your github repos? I am all new to Java/Kotlin/CSS and related. I would really appreciate.
m
I only have one on github and it doesn't use FXML
my largest app is one I built for work which of course I can't release
that one uses FXML, and is currently over 10,000 lines of code
it used to be JavaFX and it was at over 12,000 lines of code, since I've converted it I've almost doubled the functionality and improved the user experience
m
tempting to ask you to release the code 🙂
m
wish I could
r
It's also worth keeping in mind you can use JavaFX in Kotlin without TornadoFX if it fits your use case.
✔️ 1
m
Thanks guys, I was able to make it up here without any prior Java/JavaFX/Kotlin knowledge. Thank you guys and especially @Marshall
r
Looks pretty good. Congratulations!
✔️ 1
m
What is the best way to make the SQL queries look better like this with line number on the left?
r
That is, unfortunately, quite a bit more difficult of a question. You can look into RichTextFX.
m
will dig that. How to add that small image to the left of the column heading?
r
Load your image into an 
Image
and set it as the 
graphic
of the column.
m
Thanks @Ruckus
👍 1
Do you know why the column headings and column values are not expanded as needed by default.
r
I don't. Are you using TFX? If so, you could look into the 
SmartResize
policy, though I don't have much experience with it.
m
Not sure what that means. JavaFX it is. After using the 
graphic
this issue started happening.
r
Sorry, by TFX I meant TornadoFX. Edvin made a custom column resize policy called 
SmartResize
.
m
JavaFX and CSS boot strapping I been tussling with.
I could add 
SmartResize
but it made it further worse. Is it a good idea to mix up both TFX and CSS bootstrapping?
r
I've never tried, but I don't think it should cause any issues.
m
from a maintenance perspective, it might. Considering I have zero experience with this I might absolutely be wrong.
It is a dynamically populated tableView, So at the time when column headings are set, issued this 
column.prefWidth(175.0)
and that seemed to have resolved the problem. Would be happier if this could have been done with the CSS bootstrap itself. Of course it is not the perfect solution and columns are wider than I want it to be.
@Ruckus css 
-fx-graphic: url(img.jpg);
adds the image to all the columns, but dont want this on the id column, is there a way to do that only for the selected columns?
r
Use a better selector in your CSS that targets only the columns you specify (such as those with a given class).
m
Would need some more directions. Also the table is a dynamic table and for that reason I don’t have a class, off of which the tableView is built.
m
You can either apply the graphics property to each column except ID
or apply a style class to the columns
m
was looking for the DSL tag for doing that, but not lucky yet. Ooh I could try adding the css style class.
m
if your columns are dynamically generated you can do something like this:
Copy code
tableview.columns.forEach { if( it.text != "Id" ) it.graphic = img }
✔️ 1
it.graphic could instead be a style or adding a css class
etc
m
@Marshall this looks really great to thy eyes. 
view.table.columns.forEach { it.graphic = Circle(5.0)
, but how do thy get an image instead of a circle?
m
I think you have to create an image view
And assign that as the graphic
m
worked like a charm! 
view.table.columns.forEach { if(it.text!="") it.graphic = ImageView("img.jpg")
How to make the Id column values also have the same solid background as the header?
Is it a unusual requirement?
5 Views
Open in Slack
PreviousNext
Powered by