Views
9 months ago

tornadofx-guide

Workspaces It looks like

Workspaces It looks like a default button. You can remove the border around the button by adding the icon-only css class to it. Optionally you can configure an icon for the graphic node if you like. The built in icons are svg shapes added in the built in workspace.css but feel free to add your icon in any way you see fit. Let's add an icon from the FontAwesomeFX library and make it look like the other buttons: button("Add Customer") { addClass("icon-only") graphic = FontAwesomeIconView(PLUS_CIRCLE).apply { style { fill = c("#818181") } glyphSize = 18 } action { addCustomer() } } In a real application you would use a css class so you don't need to configure the fill for every button you add. The result can be seen in Figure 16.5: Figure 16.5 234

Workspaces Navigating between docked views Our Customer List is configured so that whenever you double click a customer you will be taken to an editor for that customer. The TableView binds the selected user to a CustomerModel view model object, and the action is performed like this: tableview(customers) { column("First Name", Customer::firstNameProperty) column("Last Name", Customer::lastNameProperty) bindSelected(model) onUserSelect { workspace.dock() } } The only thing we need to do is actually dock the CustomerEditor when the user selects a row. Since the CustomerEditor will be looked up in the same scope we are currently in, it will have access to the selected customer as well: 235

GUIDE
Guide
GUIDE
GUIDE
GUIDE
Guide
Guide
GUIDE
Guide
Guide
GUIDE
Guide