Tuesday, March 22, 2011

Implementing graph editor in JavaFX using MVC like approach

JavaFX has very good SVG support, embedded into language runtime. This makes it interesting choice for implementing custom UI components, which includes graph editors.
In this article, I show how to create a simple graph editor, using MVC like approach and XML serialization via XStream.

Example can be found here: Launch JNLP, Browse on GitHub.
Application brings graph editing functionality and maximum network flow computation using Ford Fulkerson algorithm



Architecture is divided into Model, View and Controller. I made a slight upgrade to classic understanding of MVC. Classic View was responsible for displaying data only. Here, View consists also of UI parts, which include editable labels or combo boxes. Also, in Classic MVC, Model was responsible for refreshing View after Model changes by sending events to registered views. Here, Controller is responsible for refreshing View after Model changes and Model is just a plain POJO structure. I found such approach easier to implement.

Model consists of Three Java classes (non JavaFX), which represent structure of a graph: MNode, MShape, MConnection. Separating those classes from UI gives benefit of easier serialization. In this case using XStream::toXML(model) does the job. Sample output is like this:


View consists of corresponding UI implementations for Model elements, which are UINode, UILine, UIShape. Here, UINode is connected to MNode through model property. This is Bridge Pattern like approach for splitting class hierarchy of nodes into two.
UINode classes refer to controller to perform user input actions, like delete node.

Controller implements user action logic. This includes add, delete, and drag node. It is also responsible for refreshing UI after model changes. In order to do that easily, it uses Weak Hash Map, which keys are Model nodes and values are UI Nodes. Update function is like this:

Because of Weak Hash Map, removing nodes from Model leads to removing corresponding UI elements from map automaticly.

JavaFX SVG support and Layouts make it easy to render quite good looking nodes and connections.

12 comments:

  1. Hi, where can I find all the complete code for this application? It 'a very interesting idea and I would for a job I'm doing!Thank you!
    Anna

    ReplyDelete
  2. Hello,

    it's on github: https://github.com/rafalrusin/javafx

    Regards

    ReplyDelete

  3. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.
    Also great with all of the valuable information you have Keep up the good work you are doing well.
    visit us @ online idea lab

    ReplyDelete
  4. Earn Rs.25000/- per month - Simple online Jobs - Are You Looking for Home-Based Online Jobs? - Are You a Student, Housewife, jobseeker ? - Are you ready to Work 1 to 2 Hours daily Online? - Do You need Guaranteed Payment Monthly? Then this is for You, - Clicking on their Advertisement E-mails. - Submitting their Data\'s online. - Reading their Advertisement Sms. - Filling Forms on their websites, etc,. FREE to Join >> http://dailyonlinejobs.com
    9PJK1587500784 2020-04-23 21:45:00

    ReplyDelete
  5. This post was really thinkable for me, please updates more information about this related blog. Visit Ogen Infosystem for quality web design and SEO Services in your budget.
    Website Designing Company in Delhi

    ReplyDelete
  6. Wow, very inforamtive! Don't you think it's worth posting these thoughts on Instagram? After all, this social network is now very popular. By the way, I advise you to use the help of https://viplikes.net/buy-instagram-followers in order to quickly increase the number of followers and promote your account to the top.

    ReplyDelete
  7. Here we provide jobs in Mumbai from Job vacancy result company . And we also provide jobs in different state. Thanks for commenting.
    Jobs in Mumbai
    Jobs in Mumbai
    Jobs in Mumbai
    Jobs in Mumbai

    ReplyDelete
  8. Thank you for all the enthusiasm to provide such helpful information here. Indiana Jones Jacket

    ReplyDelete
  9. The blog effectively communicates the architecture, implementation, and benefits of the presented approach for creating a graph editor in JavaFX.
    Also Read: Java Spring Boot Simplifying Enterprise Application Development

    ReplyDelete