• Home
  • Events
  • About
  • Medusa KPI Skins

    November 29th, 2016

    At the current project I’m working on a JavaFX dashboard using gauges…which is awesome 🙂

    And so I was looking for interesting designs that might be useful for a dashboard visualizing KPI’s (Key Performance Indicators). So I stumbled upon two interesting designs that might be a good fit for a grid or tile based dashboard layout.

    So here they are…



    The TileTextKpiSkin on the left side shows the current value by the text, a bar, the maximum value it could reach (here 100) and the value in percentage.

    The TileKpiSkin on the right side shows the current value by it’s number, a defined threshold (75) and a needle that shows where the current value is in the given range.

    Both tiles also show a title on the upper left corner.

    Well…it’s nothing special but didn’t take long to implement it so why not 🙂


    Both skins are part of the latest Medusa version (6.3) which you can find here


    *** UPDATE ***

    After playing around with the new skins I came to the conclusion that it would also make sense to have the ability to visualize sections. So I’ve added them to both skins and they will be available with the next version (6.4) of Medusa.

    Here is a little screenshot of how they will look like…



    So as soon as you have sections enabled the threshold won’t be shown on the left skin (TileKpiSkin) but only the active section.

    On the right right skin (TileTextKpiSkin) the bar and the percentage text will either be colored with the default value (barColor) or with the color of the active section. I’ve also added the unit text for the right skin.

    That’s it for today…so keep coding…

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    WorldMap Cosmetics

    November 18th, 2016

    Aloha again,

    Remember the the world map control that I’ve created during JavaOne? Because it is based on high resolution SVG data the map is big (from a memory point of view). Sometimes you need high res but sometimes you don’t…long story short…I’ve created also a low resolution version of the map.

    Here is a little screenshot that shows both maps (the upper one is the low-res version and the lower one the high-res version)…

    At the moment both maps are in the same repo which you can find on github.

    Oh and before I forget to mention it, there is now also support for CSS styling available.

    That’s it for a Saturday morning…now I need more coffee 😉

    *** UPDATE ***
    More fun on a Sunday morning… 🙂

    I’ve added the possibility to visualize locations by their latitude and longitude. With this you could mark locations like airports, cities etc. At the moment the indicator is just a simple circle but I might change this in the near future. It would be cool if one could also use icons like fontawesome etc. to visualize the location (maybe I’ll be able to implement this next week).

    Here is a screenshot that shows some major airports on the world map…



    Oh and be warned that there will be modifications coming soon…just need more time 🙂


    *** UPDATE 2 ***

    Like mentioned there have been more modifications but now I guess the world map component is ready to go. At least I have no further ideas anymore at the moment.

    Here is a list of changes that I did…

    • got rid of the scalable content pane
    • moved the SVG paths to property files
    • added support for Ikonli icons
    • added mouse wheel zooming at mouseposition
    • added selectable countries
    • added zoom to country method
    • mouse handler support for locations
    • clean ups


    Here is another screenshot…



    *** UPDATE 3 ***


    The more I play around with it the more ideas are coming… 🙂

    While I was skimming the web for some new ideas I saw some worldmaps in business dashboards where they use it to visualize regions like APAC, EMEA etc.

    So I thought it might be useful to support those business regions and add some convenience methods to handle them.


    On the map above you see the European Union (in it’s current state) colored and centered. To get this view you simply have to call two methods now…

    I thought this might be useful for dashboard kind of things so you will now find a new enum called Business Region which contains the following regions

    • APAC
    • APJC
    • ANZ
    • BRICS
    • DACH
    • EMEA
    • EU
    • NORAM

    Because I do not know which other business regions could be useful I’ve also added the possibility to add your own region by using the new CountryRegion class. So if you would like to create a region with the countries Belgium, Netherlands and Luxemburg (which are the Benelux) you can do this with the following line of code…

    There is one little problem at the moment when zooming to the region APAC. Because APAC contains countries on the very right and left of the map (this is related to the used Mercator projection) which makes zooming in not really useful.

    If you have other needs or ideas on how to improve the world map control, please let me know 🙂

    So feel free to use it for what ever you need it…

    And don’t forget…keep coding…


    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Asciidoctor-Gradle: Separate tasks for PDF and HTML output

    November 15th, 2016

    Sometimes you want to have simple additional tasks in a build to generate certain output.

    A good example is generation of HTML or PDF from Asciidoctor. With the following example you can just do gradle pdf or gradle html to create the desired output – instead of changing the „backends“ property in the build.gradle back and forth.

    Have fun ;-)

    Update: To reuse the settings from a common block, we need to define the config in a variable and use it to configure the tasks with configure as updated in the example. :)

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    MVC is dead – what comes next? – Part 2

    November 2nd, 2016

    The first part of this series gave an overview of the key concepts and listed some of the main advantages of using functional reactive programming techniques in UI development. Future articles we will focus on different components that are involved, starting today with the State component, a key ingredient of functional reactive UI programming.
    MVC vs FRP Data Structures
    In MVC we differentiate between domain model and UI state, in functional reactive UI programming everything is part of the State.

    Single Source of Truth

    In MVC applications we usually differentiate between the domain model and UI state. For example if we implement the TodoMVC application (see screenshot below) following some kind of MVC-pattern, our model will probably only consist of a list of ToDo-entries, because they define our domain. But the model would not keep the current entry in the input field (“What need to be done?”). And it would probably also not contain the selected filter.

    Screenshot TodoMVC
    Screenshot of TodoMVC


    The State component of a functional reactive application on the other hand contains the complete state of the application. The domain model and the UI state are typically merged into a single data structure – a tree. The picture at the beginning of the article shows the difference between both approaches.

    Why is this important?

    If we have all state in a single place, i.e. a single source of truth, we can implement the View as a pure function.

    This has many advantages: it is easier to understand, easier to reason about, and easier to test.



    The second important characteristic of the State is its immutability. We cannot change it.

    If the state of the application changes, we have to create new data structures.

    This may sound like a terrible waste. If we store the whole state in a tree and we have to create a new instance every time something changes, how can this be efficient? The trick is, that we do not have to copy the whole tree, but only a small part.

    Modifying an immutable tree
    When modifying a single node of an immutable tree, only a small number of nodes have to be replaced.


    Imagine our applications state is stored in the tree shown above. We want to change the property of the green leaf node. The node itself has changed, therefore we need to create a new instance. We also need to create a new instance for the parent node, because one of its children has changed. But the other child of that parent has not changed and we can reuse it by referencing it from the new parent node. The same is true for all the other parent nodes up to the root node. We need to create a new instance for each parent on the path to the top, but we can reuse the other children. In the diagram we only have to create new instances for the blue nodes, which are only a small fraction of the tree in particular if the tree becomes huge.

    Implementing State in Java

    I have recently started an experiment to explore how the principles from functional reactive UI programming could be applied to Java and JavaFX. You can find the current state of the mini-framework ReduxFX and a sample application at GitHub.

    Implementing the State component in Java is straight-forward. All elements of the state can be implemented as simple, immutable POJOs.

    Unfortunately the standard-collections in the JDK are not really suitable for immutability. But luckily there are several alternatives out there, that you can use instead. My personal favorite at this point are the collections in Javaslang, which offer several additional benefits besides being immutable.

    The code below shows the class AppModel from the sample project in ReduxFX. The property todos is of type Seq, which is part of Javaslang. Seq is similar to Iterable in the JDK, because it is the supertype of all sequential data structures in Javaslang (though Seq offers much more functionality). In other words todos is a list of TodoEntries.

    The property newTodoText contains the text stored in the TextField for new todo-entries. Last but not least, the property filter stores the current filter (ALL, ACTIVE or COMPLETED).


    State in functional reactive UI programming is similar, but not the same as the Model in a classical MVC application. It contains all state, including UI state, and not only the domain model. In many frameworks the state is stored in a single data structure, usually in a tree. Another key requirement is immutability. Implementing the State component in Java is straightforward with immutable POJOs.

    The next part will cover the View-function, which translates the State to the actual UI. If you have any questions, ideas or thoughts, please leave a comment. Also do not forget to checkout my JavaFX sample ReduxFX.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks