how to create and control a modular ui with javafx?

[S Fox]

Hello I'm trying to learn javafx, coming into it after learning a bit of java with swing. So far I have designed a nice looking layout with scene builder, and I assigned a controller in the fxml file. The controller is working correctly and I've got a css stylesheet working. Everything good so far! But I can't figure out what I'm supposed to do in order to make and manage a ui with a reoccurring subset of components, which would be necessary with a lot of them.

For example, if I wanted to display 200 collapsible TitledPanes, with each one holding a TextFlow, TextArea, and a BarChart. It would be tedious having to create 200 sets of identical items in the fxml file and then give each its own unique fx:id. I was searching for info about doing this programmatically and saw there is a tag called fx:include, but I can't find out much about it, not sure if it is really for this purpose.

After I learn more about creating and managing the UI I would like to try making a multi threaded program which can efficiently do searching and sorting of large amounts of data. Having a ui such as this with lots of displays for the data will be useful to see if it's working correctly. Are there any special considerations for creating a thread-safe ui?

[S Fox]

I should clarify the question, it's easier than I made it sound.

I need an EventHandler for my controls, but...
Should I use a single handler for every control in the program? (1 handler)
One for each type of control?  (3 handlers)
One per set of controls? (200 handlers)
One per control instance? (600 handlers)

Which way will give the best performance in a busy multi-threaded program?
I could make a class containing each set of controls, and assign the handler to them in its constructor, then track their references with a list. Is there a better way?

[Daniel Demesmaecker]

Normaly it's one controller pro fxmlfile. I'm to coding a javaFx program for the moment and the way I do it is using components.
Components are what you're talking about with the include tag. The way you that is simply to put <fx:include source="yourfxmlfile.fxml" /> at the location you want the component to be placed at.
If you needs some more clearafication you always can look up The program I'm working on on github.
Hopes this helps a bit

[S Fox]

Thanks Daniel, I imported it into eclipse as a maven project but I'm not sure how to get it to build or run. I've never used maven before.

[Daniel Demesmaecker]

You probably will have to remove the .idea folder, since its coded in itelij.

[S Fox]

When I build it with maven in eclipse it says:
[ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
[INFO] 1 error

[Knute Snortum]

This means Maven can't find javac, and it suggests that you may not have installed the JDK.  Did you?

If you have, it may be that your environment variables aren't set correctly.

[S Fox]

Hi Knute, I did install the jdk but eclipse was not using it, its now using jdk. I get a new error now though:

[INFO] Scanning for projects...
[INFO]                                                                        
[INFO] ------------------------------------------------------------------------
[INFO] Building KOKWAdminFX 1.0
[INFO] ------------------------------------------------------------------------
[WARNING] The POM for org.apache.maven.plugins:maven-jar-plugin:jar:2.5 is missing, no dependency information available
[INFO]
[INFO] --- maven-clean-plugin:2.5:clean (default-clean) @ KOKWAdminFX ---
[INFO] Deleting C:\Users\Administrator\Downloads\Kokw-master\target
[INFO]
[INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ KOKWAdminFX ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] Copying 1 resource
[INFO] Copying 37 resources
[INFO]
[INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ KOKWAdminFX ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 41 source files to C:\Users\Administrator\Downloads\Kokw-master\target\classes
[INFO]
[INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ KOKWAdminFX ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Users\Administrator\Downloads\Kokw-master\src\test\resources
[INFO]
[INFO] --- maven-compiler-plugin:3.1:testCompile (default-testCompile) @ KOKWAdminFX ---
[INFO] No sources to compile
[INFO]
[INFO] --- maven-surefire-plugin:2.18.1:test (default-test) @ KOKWAdminFX ---
[WARNING] The POM for org.apache.maven.surefire:maven-surefire-common:jar:2.18.1 is missing, no dependency information available
[WARNING] The POM for org.apache.maven.surefire:surefire-api:jar:2.18.1 is missing, no dependency information available
[WARNING] The POM for org.apache.maven:maven-toolchain:jar:2.2.1 is missing, no dependency information available
[WARNING] The POM for org.apache.maven.plugin-tools:maven-plugin-annotations:jar:3.3 is missing, no dependency information available
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 2.327 s
[INFO] Finished at: 2017-12-08T07:26:56-08:00
[INFO] Final Memory: 29M/643M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.18.1:test (default-test) on project KOKWAdminFX: Execution default-test of goal org.apache.maven.plugins:maven-surefire-plugin:2.18.1:test failed: Plugin org.apache.maven.plugins:maven-surefire-plugin:2.18.1 or one of its dependencies could not be resolved: The following artifacts could not be resolved: org.apache.maven:maven-plugin-api:jar:2.2.1, org.apache.maven.surefire:maven-surefire-common:jar:2.18.1, org.apache.maven.surefire:surefire-api:jar:2.18.1, org.apache.maven:maven-toolchain:jar:2.2.1, org.apache.maven.plugin-tools:maven-plugin-annotations:jar:3.3, org.codehaus.plexus:plexus-utils:jar:1.1: Cannot access central (https://repo.maven.apache.org/maven2) in offline mode and the artifact org.apache.maven:maven-plugin-api:jar:2.2.1 has not been downloaded from it before. -> [Help 1]
[ERROR]
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR]
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/PluginResolutionException

[Knute Snortum]

It looks like Maven can't connect to the Internet.  It says it's in offline mode.

[S Fox]

yeah I just noticed that too, i got it to build now but when i run it all i see is some console output for spring? theres no program window coming up.

 .   ____          _            __ _ _
/\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/  ___)| |_)| | | | | || (_| |  ) ) ) )
 '  |____| .__|_| |_|_| |_\__, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot ::        (v1.3.8.RELEASE)

2017-12-08 07:38:30.389  INFO 5360 --- [JavaFX-Launcher] o.s.boot.SpringApplication               : Starting application on WINDOWS-61RREV9 with PID 5360 (C:\Users\Administrator\.m2\repository\org\springframework\boot\spring-boot\1.3.8.RELEASE\spring-boot-1.3.8.RELEASE.jar started by Administrator in C:\Users\Administrator\Downloads\Kokw-master)
2017-12-08 07:38:30.391  INFO 5360 --- [JavaFX-Launcher] o.s.boot.SpringApplication               : No active profile set, falling back to default profiles: default
2017-12-08 07:38:30.442  INFO 5360 --- [JavaFX-Launcher] s.c.a.AnnotationConfigApplicationContext : Refreshing org.springframework.context.annotation.AnnotationConfigApplicationContext@1e167e77: startup date [Fri Dec 08 07:38:30 PST 2017]; root of context hierarchy
2017-12-08 07:38:30.940  INFO 5360 --- [JavaFX-Launcher] o.s.b.f.s.DefaultListableBeanFactory     : Overriding bean definition for bean 'checkOutRepo' with a different definition: replacing [Generic bean: class [be.kokw.repositories.implementations.CheckOutRepoImpl]; scope=singleton; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null; defined in file [C:\Users\Administrator\Downloads\Kokw-master\target\classes\be\kokw\repositories\implementations\CheckOutRepoImpl.class]] with [Root bean: class [org.springframework.data.jpa.repository.support.JpaRepositoryFactoryBean]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null]
2017-12-08 07:38:30.944  INFO 5360 --- [JavaFX-Launcher] o.s.b.f.s.DefaultListableBeanFactory     : Overriding bean definition for bean 'bookRepo' with a different definition: replacing [Generic bean: class [be.kokw.repositories.implementations.BookRepoImpl]; scope=singleton; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null; defined in file [C:\Users\Administrator\Downloads\Kokw-master\target\classes\be\kokw\repositories\implementations\BookRepoImpl.class]] with [Root bean: class [org.springframework.data.jpa.repository.support.JpaRepositoryFactoryBean]; scope=; abstract=false; lazyInit=false; autowireMode=0; dependencyCheck=0; autowireCandidate=true; primary=false; factoryBeanName=null; factoryMethodName=null; initMethodName=null; destroyMethodName=null]
2017-12-08 07:38:31.598  INFO 5360 --- [JavaFX-Launcher] j.LocalContainerEntityManagerFactoryBean : Building JPA container EntityManagerFactory for persistence unit 'default'
2017-12-08 07:38:31.624  INFO 5360 --- [JavaFX-Launcher] o.hibernate.jpa.internal.util.LogHelper  : HHH000204: Processing PersistenceUnitInfo [
name: default
...]
2017-12-08 07:38:31.748  INFO 5360 --- [JavaFX-Launcher] org.hibernate.Version                    : HHH000412: Hibernate Core {4.3.11.Final}
2017-12-08 07:38:31.751  INFO 5360 --- [JavaFX-Launcher] org.hibernate.cfg.Environment            : HHH000206: hibernate.properties not found
2017-12-08 07:38:31.753  INFO 5360 --- [JavaFX-Launcher] org.hibernate.cfg.Environment            : HHH000021: Bytecode provider name : javassist
2017-12-08 07:38:31.924  INFO 5360 --- [JavaFX-Launcher] o.hibernate.annotations.common.Version   : HCANN000001: Hibernate Commons Annotations {4.0.5.Final}

[Knute Snortum]

Could this be the problem?
2017-12-08 07:38:31.751  INFO 5360 --- [JavaFX-Launcher] org.hibernate.cfg.Environment            : HHH000206: hibernate.properties not found

[S Fox]

found a page on stack overflow, says its not an error just an info?
https://stackoverflow.com/questions/25723464/hibernate-properties-not-found-not-needed-for-spring-mvc-though#25723564

[Knute Snortum]

That look like it's correct.  It's just an INFO level.

Well, I don't know Spring Boot -- the last time I used Spring was about five years ago.  Maybe someone from the Spring forum can help.

[John Damien Smith]

How did a question titled "how to create and control a modular ui with javafx?" morph into "Well, I don't know Spring Boot -- the last time I used Spring was about five years ago.  Maybe someone from the Spring forum can help."?

That's just crazy...

[S Fox]

I know it's crazy but someone provided source to a program that makes use of the fx:include tag, and it seems to be a very little used or understood aspect of fxml which is relevant to making a modular ui. I have trouble building/running it is all :p

The topic is still about making an efficient modular ui and more importantly, how to control it. I'm not sure yet if fx:included components can be individually controlled or if they all will share a single fx:id. My goal is to avoid as much code repetition as possible and have a high performance and professionally done control scheme for a multi-threaded app. Any and all suggestions or approaches to it are appreciated, as well as example programs with source.

[Knute Snortum]

Here's my suggestion: write a minimal (Hello, World) JavaFX project with a minimal Spring configuration and see if you can get the GUI to appear.  

Also, if you're not already, use SceneBuilder to modified and visualise your FXML files.  In the Java 9 version, under the File menu, is a submenu called Include.  That should be a help.

[S Fox]

Yep I do use scenebuilder (w/ java8 right now) and I know it has the include submenu, but I wasn't sure if it would work for controllable components as they each need their own fx:id. Including 50 buttons with the same fx:id, that's not gonna work.

So I had seen on a blog someone saying it doesn't work for that reason, and is only suited for non-interactive panels and such. But now I found someone that seems to be saying it does work by using a trick, over at stack overflow
I will have to try it out and see what happens, will be pretty cool if it works!

[Daniel Demesmaecker]

My gui is also maded with scenebuilder, why waist time to try and run it, if you can just read the source code. for every sepperated part you want a controller for you insert a pane in your main, in te sourcecode of the fxml file you put

<fx:include source="path to your fxml" />

in the pane you want to display your content.
This is a example of my homepage:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-image: url('/images/achtergrond.jpg');
-fx-background-position: center; -fx-background-repeat: no-repeat; -fx-background-size: cover;" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
      <top>
            <VBox BorderPane.alignment="CENTER">
                <fx:include source="/fxml/menu.fxml" />
            </VBox>
        </top>
        <bottom>
            <VBox alignment="CENTER" style="-fx-background-color: #A9CCE3; -fx-background-radius: 10;" BorderPane.alignment="CENTER">
                <fx:include source="/fxml/footer.fxml" />
            </VBox>
        </bottom>
</BorderPane>

You see I include my menu and my footer

[Daniel Demesmaecker]

S Fox wrote:Yep I do use scenebuilder (w/ java8 right now) and I know it has the include submenu, but I wasn't sure if it would work for controllable components as they each need their own fx:id. Including 50 buttons with the same fx:id, that's not gonna work.

So I had seen on a blog someone saying it doesn't work for that reason, and is only suited for non-interactive panels and such. But now I found someone that seems to be saying it does work by using a trick, over at stack overflow
I will have to try it out and see what happens, will be pretty cool if it works!

You can't use 50 buttons with the same id in the same controller...
That would be the same as having 2 variables with the same name in the same class.
With include, you can't eather, every button would have a different controller.
This said, I don't see why they would have a id, since you can specify your methods in your fxml

[Daniel Demesmaecker]

Back to your original question. If all 200 oanes are exactly the same and have the same function, you indeed could make 1 and include it 200 times.
In the next example I did 10 times, I didn't care about positioning and so fourth, but you'll get the idea.

main.fxml:

<?xml version="1.0" encoding="UTF-8"?>


<?import javafx.scene.layout.*?>
<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.121"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="fxml.Main">
    <children>
        <HBox prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="10.0" layoutY="10.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="20.0" layoutY="20.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="30.0" layoutY="30.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="40.0" layoutY="40.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="50.0" layoutY="50.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="60.0" layoutY="60.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="70.0" layoutY="70.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="60.0" layoutY="60.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
        <HBox layoutX="70.0" layoutY="70.0" prefHeight="100.0" prefWidth="200.0">
            <fx:include source="titlepane.fxml"/>
        </HBox>
    </children>
</AnchorPane>

Titlepane.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.TilePane?>


<TilePane alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" orientation="VERTICAL" prefHeight="459.0" prefWidth="1631.0" xmlns="http://javafx.com/javafx/8.0.121" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField alignment="CENTER" prefHeight="25.0" prefWidth="201.0" promptText="some text" />
      <TextArea prefHeight="258.0" prefWidth="306.0" promptText="text area" />
      <BarChart>
        <xAxis>
          <CategoryAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
          <NumberAxis side="LEFT" />
        </yAxis>
      </BarChart>
   </children>
</TilePane>

[S Fox]

Daniel Demesmaecker wrote:This said, I don't see why they would have a id, since you can specify your methods in your fxml

Hmm, I don't understand what you mean by specify my methods in fxml.
I thought fx:id was required for each item otherwise how are they referenced later or assigned to the controller?
In your example here with 10 panels, how are each of the 10 bar charts being individually controlled?
It looks like they are all being controlled by fxml.Main so it is one controller, not 10 controllers?
It's all very confusing to me =)

[Daniel Demesmaecker]

In this case they are, its not 10 panels, its one panel I include 10 times. You only need a fx:id if you want to use the item in your controller. When using scenebuilder, on the right controlmenu under code you can specify your methods, on action, on drag detected and so on.