• 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

    • AMERICAS
    • APAC
    • APJC
    • ANZ
    • BENELUX
    • 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.

     

    Immutability

    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).

    Summary

    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

    MVC is dead ‚Äď what comes next?

    October 10th, 2016

    React.js, Elm, Cycle.js, and other UI frameworks introduced a new way of building user interfaces. By applying principles from functional reactive programming to UI development, they even changed how we think about user interfaces. In no time, these approaches have simply smashed the seemingly inevitable dominance of MVC and its siblings (MVP, MVVM etc.). This article, which is the first in a series, will give a brief introduction into this new way of building UIs and list some of the advantages it has over traditional approaches. These factors are so strong, that in my opinion there is a good chance that we are right now witnessing the end of the MVC-era.

    Graph showing the cyclic dependency between DOM Driver, ActionCreator, Updater, and View()

    Concept of functional reactive UI development

    On the face of it, frameworks like React.js with the Redux-architecture, Elm, and Cycle.js seem quiet different. Redux applications initially appear to be similar to regular JavaScript application, perhaps with a strong focus on functional programming. Elm-applications come with their own language, while Cycle.js applications consist of reactive streams only which are knotted together in astonishing ways.

    But under the hood, all of these frameworks have something in common: the essence of functional reactive UI development.

    The picture above shows a rough¬†overview of the concepts, which are shared between pretty much all modern¬†UI¬†frameworks that foster reactive programming. First thing to note is that everything ‚Äď all changes, events, and updates ‚Äď flow in a single direction to form a cycle. This article will give just a¬†brief explanation of the¬†cycle, while later articles will go into more details.

    Functional Reactive UI-Development

    The cycle consists of four data-structures (State, Virtual DOM, Event, and Action) and four components (View()-Function, DOM-Driver, ActionCreator, and Updater). The DOM-Driver is provided by the framework, while the other components have to be implemented by the application developer.

    Let’s assume our application, a todo-list, is already running for a while and the user presses a button to create a new entry in the todo-list. This will result in a button-clicked event in the DOM, which is captured by the DOM-Driver and forwarded to one of our ActionCreators.

    The ActionCreator takes the DOM-event and maps it to an action. Actions are an implementation of the Command Pattern, i.e. they describe what should be done, but do not modify anything themselves. In our example, we create an AddToDoItemAction and pass it to the Updater.

    The Updater contains the application logic. It keeps a reference to the current state of the application. Every time it receives an action from one of the ActionCreators, it generates the new state. In our example, if the current state contains three todo-items and we receive the AddToDoItemAction, the Updater will create a new state that contains the existing todo-items plus a new one.

    The state is passed to the View()-Function, which creates the so-called Virtual DOM. As the name suggests, the Virtual DOM is not the real DOM, but it is a data-structure that describes how the DOM should look like. The code snippet above shows an example of a Virtual DOM for a simple <div>. A later article will explain the Virtual DOM and its advantages in detail.

    The Virtual DOM is passed to the DOM-Driver which will update the DOM and wait for the next user input. With this, the cycle ends.

    Advantages

    Functional reactive UI Development has three major advantages over traditional approaches, all of them are huge: straightforward testing, a comprehensive flow of events, and time travels (yes, seriously).

    Straightforward testing

    The View()-Function and the ActionCreators are simple mappings, while the Updater performs a fold (also often called a reduce) on the Actions it receives.

    All components are pure functions and pure functions are extremely easy to test.

    The outcome of a pure function depends only on the input parameters and they do not have any side effects. To test a pure functions, it is sufficient to create the input parameter, run the ‚Äúfunction under test‚ÄĚ and compare the outcome. No mockups, no dependency injection, no complex setup, and no¬†other techniques are necessary that¬†take the fun out of testing.

    Comprehensive Flow of Events

    Reactive programming is a lot of fun ‚Äď except when it is not. The control flow of graphical user interfaces is¬†inherently event-based. An application has to react to¬†button-clicks, keyboard input, and other¬†events from users or servers.¬†Applying reactive techniques, be it the Observer Pattern, data-bindings, or reactive streams, comes naturally.

    Unfortunately these techniques come with a price. If a component A calls a component B, it is simple to see the connection in your IDE or debugger. But if both components are connected via events, the relationship is not as obvious. The larger the application becomes, the harder it gets to understand its internals.

    The architecture of a functional reactive application avoids these problems by defining a simple flow of events that all components must follow.

    No matter how large your application grows, the flow of events will never change.

    Time Travel

    Functional reactive applications allow you to travel back and forth in time ‚Äď at least in the context of your application. If we store the initial state and all actions, we can use a technique called ‚ÄúEvent Sourcing‚ÄĚ. By replaying the actions, we can recalculate every state the application was in. If we replay only the last n-1, n-2, n-3‚Ķ actions, we can actually step¬†back in time. And by modifying the recorded stream of actions while applying them, we can even change the past. As you can imagine this can be very handy during development and bugfixing.

    The first time-traveling debuggers have been built, but I think we have only started to understand the possibilities, and more amazing tools will be released in the future.

    Summary

    So far we have only touched the surface of functional reactive UI development, but by now it should be clear that this approach has some tremendous advantages. Future¬†articles will go deeper into the technical details, but also show¬†the disadvantages (or let‚Äôs call them ‚Äúyet-to-solve-challenges‚ÄĚ), and show an example how the lessons learned can be applied to¬†JavaFX applications.

    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

    css.php