Label as a Custom Button in JavaFX? (By using FXML) - java

I have a FXML document containing the visual basis of my JavaFX project and I want to make an own Topbar (where the X, minumum/maximum, etc... is) by using a Pane. But my program will have multiply pages (scenes) and to keep the code clean, I wanted to make the Custom-Topbar as a separate class (an component object kinda). I just don't know how I should implement this class into the FXML basis I use (I am using Scene Builder).

Option 1
If the toolbar is always there you can have a main fxml file with the toolbar and a container.
Then load content from other fxmls and place that content in the container. To switch pages switch the content of the container (and not the scene).
Option 2
Create an fxml file with just the toolbar. Then use the <fx: include /> tag in your other fxmls to include the toolbar. This is like a "component".
Edit: This is how option 2 can work in practice.
Say toolbar.fxml is the name of the fxml file containing only the toolbar.
Simply include <fx:include source="toolbar.fxml"/> in an other fxml file to incldue the toolbar at that location. See here for more information.

Related

JavaFX: Can not set -fx-background-image from SceneBuilder

Could someone explain why I can't load image from field -fx-background-image inside SceneBuilder?
Images for reference:
SceneBuilder
application
I've found out that I can do that from a .css file, for example:
#base {
-fx-background-image: url("background.jpg");
-fx-background-size: 100% 100%;
-fx-background-position: center center;
}
But that doesn't update from inside SceneBuilder, while I would like it too.
You need to attach the style sheet to the fxml element for it to be applied to the FXML viewed in the SceneBuilder design view.
There is a stylesheet field in the SceneBuilder property sheet view (it is actually in the image from your question). Select the root element and click the + symbol to select the CSS style sheet to apply. The style sheet will be applied to the root and all child elements.
Or you can use Preview | Scene Style Sheets | Add Style Sheet... to apply style sheets when you use the preview view.
You don't need to (and probably should not) set the style attribute in Scene Builder if you have a CSS file. The styles will be applied from the CSS files according to their selectors. Instead sets ids and style classes in scene builder and attach the stylesheet.
Your id is base, so if the id of the node is set to base, the selector will find it. I prefer working with style classes rather than ids but ids will work too.
You are referencing the image directly by name without relative path usage. So, as long as the image is in the same location as the fxml file and the style sheet is correctly applied as outlined above, the image defined in CSS should display in SceneBuilder.
I think that SceneBuilder automatically monitors the file system for changes, so if you change the FXML or CSS file externally, it will automatically reload them (notifying you of some, but not all, errors that may occur on reload).
If things still aren't working, see the Eden guide on where to put resources in JavaFX apps and try following their recommended approach (you might already be doing that, so locating the image might not be your issue).

FXML - multiple custom type objects defined in .fxml file

My main UI is defined in an FXML file and is supposed to contain a list of persons.
A person would have a picture and some different lines of read-only text to display (name, age, etc...)
The list itself will change all the time throughout runtime. (CRUD)
I know it would be possible to create a person-class and just add instances of it to a VBox/Hbox/... at runtime but I would like to create the definition of what the person should look like in an FXML file - if possible.
Is there a way to do this AND also fill these 'object-templates' with data (picture and texts) like with a normal template via the #FXML annotation?
You may consider using SceneBuilder tool to create fxml files. With SceneBuilder, you can create custom FXML elements, and embed them to each other.
Check these links out:
https://rterp.wordpress.com/2014/05/21/adding-custom-javafx-components-to-scene-builder-2-0/
Adding a custom component to SceneBuilder 2.0

How should I load a fxml into another fxml?

I have some problem with loading a fxml.
What I want to do it that:
I have 4 fxml files: main.fxml, head.fxml, body.fxml and new.fxml
Main includes head and body (i.e. I included (NOT imported) head and body inside main).
When I click a button in head, I want to load new.fxml and cover the body.fxml
I don't want to replace body.fxml with new.fxml. I just want to cover it.
Is there a possible way to achieve it?

javafx: fxml: display elements twice

I was wondering if there is a simple way to clone elements in FXML (such as textboxes) to display them more then one time.
Following situation:
I have a TabView and want to display on the first Tab elements X, on the second Tab elements Y and on the third Tab I want to display X and Y.
Dublicating the same fx:id is not allowed (Netbeans says) and exporting X and Y in different .fxml files, so that I just include them twice, neither works. Thats another problem.
How would you solve this ?
Make a new component with its own FXML. Then you can just include as many as you want.
One way to achieve this is to implement a custom java class that extends a javafx component (Pane or VBox for instance), then in the constructor of this class you load the FXML of its layout. With FXMLLoader you set the controller and root as the current component and you use the fx:root tag in FXML.
You'll have a component with a java class which will be the root and controller of its own FXML.
I would generally suggest splitting the whole .FXML into 3 different pieces which can be maintained seperately.
TabView, SplitPanes and all containers like this should be in a standalone FXML and each new pane in another one. In your case:
TabView = 1 FXML
Tab 1 = 1 FXML
Tab 2 = 1 FXML
You can export them in that way, but the elements need a container like HBox or something simple (like the Pane you need to create when you start SceneBuilder or your root Parent)

How to replace Remove, Add and Replace Panes?

JAVA's abstraction is somehow brought out by allowing us to create a JFrame (and save it in its own .JAVA file) and populate it with different kinds of objects such as JPanels, JTextFields ... (saved in different files) if and when needed by using the remove(), add(), validate(), repaint() methods.
I'm trying to move my JAVA project to JAVA-FX due its great flexibility in design via JavaFX Scene Builder and css. Are there any equivalents to the above methods here (In JAVA-FX)? Is there a way I could create a Pane or a Label ... and save it in its own file as it waits to replace onother Pane with its own child Nodes (and saved in its own file) on the Stage later when it's called via an action, such as a button click?
Would really appreciate any help. Sample code enumerating the above could help also.
Thank you all in advance.
Your's trully, Complete JAVA-FX Newbie.
In a regular JavaFX application, there is only one primary stage and its one scene. Create your FXML file (optionally with its controller) containing any JavaFX node and load this file on button action using FXMLoader. Then you can use the loaded node as a root of scene;
scene.setRoot(MYNode) (though only Parent can be set as root)
or add it to subtree of root node as a child;
if you know the substructure: scene.getRoot().getChildren().get(3).getChildren().add(MYNode);
if you know the id: scene.lookup("myPane").getChildren().add(MYNode);
The same logic applies to another FXML file(s) being loaded in another action event.

Categories

Resources