FXML communicates to FXML via FXControllers and Interface

Hello guys, I’m back after my lots of works and stuffs that’s why this post got delayed. Anyway now I’m going to demonstrate today about how to communicate between FXML using FXController classes. Some of my commentator also asked me to share this communication of FXML so I’m blogging for the same. Today I’m going to just continue the blog post of  previous post I’ve blogged about FXML Stuffs (include and define) . So If you have not started reading those previous blog then please have a look because the things I’m going to tell is related to them.

Anyway Let’s summarize the previous blog.

  • Main.fxml (The main container of all fxml)
  • Home.fxml (the tab content of Home Tab)
  • About.fxml (the tab content of About Tab)
  • FXMLTest.java (this is just the executor class)

Now In today’s post we are having one more extras class which is listed below.

  • DockletListener.java (The java interface)

Before going to start this communication between fxml . Let’s have a look at how the flow gets working.


 
DockletListener.java

What we see in above flow is that there is always an Interface DocketListener.java which have functions like added(), removed() . This helps the Main.java(Main.fxml) to know what’s being added/removed. The approach I’m using is like a Swing Listeners style. This interface works by living in the middle of FXController classes. Ok Let’s move to the Main.fxml which helps to listen the event of this interface.

 
Main.fxml

 
Main.java

Now What we see in Main.java it implements the DockletListener interface and has overridden the methods added(Node n) and removed(String id). Now this class can easily listen which node to be added in docklet and which is to be removed. Currently We are adding only Button Node as an item in Docklet. These added,removed will be invoked by Home and About fxml. As you can see in highlighted lines above; I’ve added the addListener(this) to help the Home/About class to invoke via this a.k.a. Main.java object which is instance of DockletListener.
We have two tabs “Home” and “About” . I’ll only describe “Home” tab because both fxml and classes have almost identical codes. Here we have distinguish our dock item by the help of id. We can remove the items by the help of “id”. Whenever the id==home then the item will be deleted from the docket. In the Home.fxml I’ve added one button of ‘remove’ and some layout too.

 
Home.fxml

Here the “Add” button trigger the function to invoke the add item in docklet. And the “Remove” button to delete the item from docklet.

Home.java

The highlighted lines in above code tell the Home.java to addListener of the DockletListener instance. And now when the “Add” button trigger then the handleAction() takes the job to add item to the docklet by the same instance which was added as Listener.

Now if you run your program with the same FXTest executor then it will now easily take the event of Home.fxml and the effect goes on Main.fxml.

I’ve modified even more in this app and I’m going to give you the screenshot of that app.

To view demo of this app : DockletDemo

That’s all for today. Also you can share your views and ideas about FXML Communicate just below at the comment.
Have a good 🙂 day.
Thanks

44 thoughts on “FXML communicates to FXML via FXControllers and Interface”

  1. The code labeled “Main.fxml” is actually Home.fxml, and you forgot to show us the actual Main.fxml, without which we can’t build this example.

  2. Okay, now it runs. But it illustrates the same controller confusion I mentioned about your previous post. Your example only works because you declared the “listener” field static in Home and About. That’s not good programming practice, and it’s not a sustainable design pattern for using FXML. In this toy case, where you only ever have one instance of Home or About, you can get away with it. But in real-world examples, an application often uses a control more than once — e.g., a custom control used to display each item in a list view, or the layout for a property window that you might have multiples on the screen at once.

    It doesn’t seem like the FXML designers really thought this one through. They don’t make it easy for a controller and the code that created the control to communicate. I may have to write a blog post on this myself.

    By the way, you don’t need @FXML on the listener field — it’s not referenced in your FXML file.

  3. Hi Bill,
    Yes I do prefer your points for ‘static’ concept. Currently in FXML I’ve not found any good control for talking between FXML. I’ve read the documentation and somehow I found that the FXML can handle the ‘static’ property. So by using this static concept I’ve presented this post.One more thing; I’ve made the static variable ‘listener’ but I’ve made them private so it doesn’t violate the Java good programming. As I’m a GUI Developer I also felt awkward for this methodology.

    I’ll be waiting for your new post.

    Thanks for your comment. I really appreciate with your views.

  4. @Rey
    For doing on mac style is just same..!! Use some effects and gradient . If possibly you can use SVG path for making exact dock of MAC 🙂 I’ve tried once exactly same when I was playing with some effects and CSS. I used photoshop to firstly copy cat the design.

    Thanks
    Narayan

  5. Hiii Dear
    This is farhan from mangium infotech i want to ask one thing that i have to take image dynamically by using filechooser then i have to set border on the image view but it is not comming and how i can set the zooming and drag the image view when i have taken image dynamically please send me the code on my mail if possible .

  6. Hi farhan,
    Please use the FileChooser and preview the instance of image in the Scene then for zooming and drag use some concept of scaleX,scaley,LAYOUTX,LAYOUTY property of ImaveView Class.

    Thanks

  7. Hi, till now I have developed javafx app such that when ever we run the application the window(o/p) is showing. But here I need an app which should not show the window immediately. It should show the stage only when some event occurs. For instance,
    I have created one java which can detect any file/folder manipulations under one folder. Here when ever I create any folder, one method will execute then only Javafx app should call stage.show(). This is some thing like Integrating javafx with general Java code. Please let me know how to achieve this.. It will be helpful to so many.. [I am using Javafx with fxml]..

  8. You can create the multi-threaded javafx which helps you to make the thread alive even without the Javafx stage close event.

    Some procedures
    1. Create New Async Java Thread like a daemon thread
    2. Create JavaFX Thread only when any event is occured other wise just close that thread using Task . In this thread you will instantiate new Stage object and run.
    3. Finally close the daemon thread when all your job is completed.

    Thanks
    Narayan

  9. hi,
    please reply for #17 query.If javafx does not support MDI approach then please try to send me the implementation details of integrating swing in javafx.

  10. Hi @ananth,
    Sorry for the late response due to busy days. Anyway if you want to make use of MDI approach in your javafx application then you probably need to use some pre-built library of some javafx geeks. Like VFXWindows which helps to make multi window inside your javafx scene. Currently the JFXTras project does contains VFXWindows library as well. Refrence: http://mihosoft.eu/?p=392

    Thanks
    Narayan

  11. Hi,
    I need one more help from you..
    when i deploy javafx aplication in web browser it will not fit to screen.
    so how to achieve it.

  12. Hi,
    How can achieve multi scene interface under single stage with common menu bar in javafx ?
    I am using javafx scene builder to build Gui’s.

  13. @ananth,
    you mean to add multiple scene in a single stage? If so then it is not possible to add more than more scene in a stage but you can however make use of replacing the multiple scene in stage one at a time. To share your node between scene you must remove from the scene1 container and then add them in scene2 container .

    Thanks
    Narayan.

  14. hi,
    As you have specified i have used width=100% and height =100% in javascript function but it is applied only for the first scene but the second scene will not fit to the screen.

  15. hi,
    i am swaping scene’s in single stage. i want to run this app in browser i have used height and width as 100% in html page but it is applied only for the first
    scene the second scene will not fit to screen the second scene is taking the size give in scene builder..i need your to sort out this problem.

  16. Type your comment here


    null:

    hi,
    i am swaping scene’s in single stage. i want to run this app in browser i have used height and width as 100% in html page but it is applied only for the first
    scene the second scene will not fit to screen the second scene is taking the size given in scene builder..i need your help to sort out this problem.

  17. HI,
    As you have suggested to bind scene height and width with the stage..
    but i am not getting it.. i have hard codded height and width value of the parent node in the scene builder and in html file i have used width and height =100% ..but i want the app to fit in every screen so please help me in implementing this.

  18. HI @ananth,
    As you have suggested to bind scene height and width with the stage..
    but i am not getting it.. i have hard codded height and width value of the parent node in the scene builder and in html file i have used width and height =100% ..but i want the app to fit in every screen so please help me in implementing this. Use something likethis

    In JNLP Script
    width:100%
    height:100%

    In JavaFX
    Use some tricks to make use of
    scene.widthProperty()
    scene.heightProperty()

  19. when I am displaying through stage the maximize and minimize appears but I need to get the popup window without the maximize and minimize button like confirmmessage in the swings.

  20. Hi
    I am facing problem when trying to open the javafx application(webstart and browser embeded) in some systems through server after deploying it into tomcat server

  21. Thank u for the first query

    Can u help out in the second query I have deployed javafx application by copying the files in the server it is working good in some systems but in some systems the FXML file not rendring in the browser and in webstart application i am getting runtime error

  22. HI
    I came to know that javafx 2.0 does not contain Datepicker api then how can
    i implement datepicker in my application. i am using javafx fxml application.

  23. Hi,
    I am coding an event for menuitem and i have included the below line

    stage.initOwner(((Window)event.getSource()).getScene().getWindow());

    When i click on menuitem it is giving an exception
    java.lang.ClassCastException: javafx.scene.control.MenuItem cannot be cast to javafx.scene.Node

    How to over come it

Leave a Reply