Interesting read on changing stylesheets on the fly: https://stackoverflow.com/questions/50520076/change-style-sheets-during-app-execution-tornadofx

Depends on what the tab contains. For example, if you have loads of data that is fetched in a ListView and the ListView being added to a Tab, I won't be worried about performance of Tab since the performance bottleneck is the ListView and not the Tab.

It's not really performance I'm worried about, but if you ever only look at one of 10 tabs, there is a lot of unneeded data fetching.

Right. In that case, it does make sense to initialize a Tab only when selected. Nevertheless, this has a downside as well. In case where data is fetched in background, all the tabs are ready and the user gets a smooth experience when switching Tabs. Where as, in case where you perform an on-demand loading of data, user might to wait for sometime while switching each Tab. This may lead to bad user experience.

So, the developer need to weight in the parameters and decide. As a part of a framework, letting the developer do both is definitely a 👍

@abhinay You make som very valid points. I'll look into adding another signal then 🙂

I wonder if this would apply to other parent controls than TabPane though. If not, the callback name should clearly identify when you can expect to get a callback, by including "tab" somewhere perhaps

This can definitely apply to Accordion

Ah, forgot about Accordion

@edvin I’ve inverted the tab loading before and let the Tab decide if it wants a refresh.

@carlw What do you mean by "inverted"?

(might have misread the chat on my phone) are you looking for a convenience for the selection model so that you don't have to go through the object?

what i meant by inverted was i've been using EventBus style notifications and the tab responded by checking its selection status or ignoring the status and refreshing itself

works with detachable tabs too

@carlw In essence, I want a View that is used as a tab to get a callback when the tab that hosts it is selected

@edvin uploaded a file: Playing with this test code

It would be easy to support this if the builders were the only way to construct objects, but it becomes a lot more gory when you take FXML and manual creation into account. I need to listen to parents of the UIComponent I think

But the parent of the root node of a UIComponent when attached to a Tab is an internal class in TabPaneSkin, so that's not really possible

@edvin onTabSelected definitely makes sense for tabs. Were you trying to generalize it for accordions? I find myself wondering what is the proper name for a child of an accordion...

onTitledPaneSelected?

@Carlton Whitehead Yeah, that was what I was thinking, but those might as well be two separate callbacks perhaps 🙂

Less confusing

I've committed the initial functionality. Needs some testing though, but it seems to be working.

Nothing stopping someone overriding onTabSelected on a View that isn't attached to a Tab?

It would just never get called, I guess?

@Carlton Whitehead That's right.

It seems to be working beautifully for me now at least 🙂

''' package Views import Controller.Store import javafx.scene.paint.Color import javafx.scene.text.Font import javafx.scene.text.FontWeight import tornadofx.* class BookView : View() { val store: Store by inject() var chapterNum = 1 override val root = vbox { useMaxWidth = true prefHeight = 525.0 prefWidth = 525.0 scrollpane { vbox { text(store.book.title) { font = Font.font("sans-serif", FontWeight.EXTRA_BOLD, 18.0) fill = Color.RED stroke = Color.BLACK strokeWidth = 0.75 } val sb = StringBuilder() for (chap in store.book.chapters) { if (store.getChapterNumber(chap.title) == chapterNum) { text(chap.title) { font = Font.font("sans-serif", FontWeight.EXTRA_BOLD, 18.0) stroke = Color.RED fill = Color.BLACK strokeWidth = 0.75 } for (v in chap.verses) { sb.append(v.text) } continue } } text(sb.toString()) } } hbox { button("<<<Prev").setOnAction { selectChapter("prev") } button(chapterNum.toString()) button(">>>Next").setOnAction { selectChapter("nxt") } } } private fun selectChapter(string: String): Int { if (string == "prev") { if (chapterNum > 1) chapterNum -= 1 else chapterNum = 1 } else if (string == "nxt") { if (chapterNum < store.book.chapters.size) chapterNum += 1 else chapterNum = 1 } println(chapterNum) return chapterNum } } '''

how do I make the changes in chapter number change the text accordingly?

You need to read up on observable properties and bindings in the guide 🙂