Today a post to share with you some night coding. I wanted to try reproducing a radial menu I saw on internet here
So one evening I started coding this. As a challenge I wanted to see how fast I could code this reusing my existing RadialMenuItem in JavaFx. What I can say is that it was easier than my previous radial menu (see my previous post) because there are less interactions.
In about one hour I was able produce the following video :
I think I will go on reproducing radial menu form internet. I hope it will lead me to find the good granularity in providing an extensible radial menu, or maybe several easy-to-use easy-to-configure radial menus. If you have any idea, do not hesitate to contact me or post a comment !
I will clean the code a little before putting it on dowload page… I swear…
It’s been some time since my last post. No much time for house coding lately…. I was looking around on the net and found that my RadialMenu form JFXtras had been used by Sean Phillips in two DZone posts :
It allows to me see how he extended the radial menu in order to customize the content of a radial menu item (text instead of graphics for item menu content amongst other things). I will have to take some time to integrate it in my last JFXtras version !
It also allows me to identify that making a completely reusable/customizable radial menu was hard because I could never fill all the user needs AND keep the thing really good looking and the animation adapted. So I tried to find a really great good looking radial menu to see if I could make it with the current state of my JavaFX implementation. What I found is this version of Radial Menu concept that is very awesome to me :
This has been done by Howard Gonzales and posted on dribble.
After some plane/hotel coding, I finally managed to perform something close to the original (although the original version was designed for touch device, while mine is not for now).
What I can tell that the Look part was easy to do with the JFXtras version of the radial menu. But when it comes to the animations, I could not perform it just with the normal version of radial menu. I had to see inside the box to be able to :
customize layer visibility (depending on parent/child layering between groups and internal radial menu implementation)
customize items animations (also inside the code)
customize the interraction triggers (hard to mix the outside radial menu events with the internal ones)
So I used the base of JFXtras radial menu (RadialMenuItem class) in order to aggregate many instance differently in order to create the RadialMenuEnhanced that mostly match the Howard gonzales post. Here is the video of the new JavaFX Radial Menu Enhanced version.
Note that I used the lovely icons from http://gemicon.net/. Thanks to them for sharing such a great work with us !
So making reusable control is not easy (combining extensibility, ease to use, good looking is clearly hard, at least for me). Making specific is easier, but surely increase cost at the end. The choice is just a question of priority. What I can conclude is that it is really easy to do UI (specially animations) with JavaFX !
Code will be available on download page soon, and maybe commited to JFXtras project ?
Just added a new feature to the JavaFx radial menu. Now you can choose to display the center of the menu. Three mode are availables : Always, Never and With_Menu. You can specify a node to display on the center circle. Center background and stroke is mapped on the one of the Radial Menu object. You can see it in action in this video.
Next Step, splitting to use the Control/Skin/Behavior, eventually.
Today a small video of the radial menu demo update. Now supporting the sub-menu concept, java fx property based menu and menu item dependencies. Some update done to correctly handle events too.
Next step is to manage the radial center show/hide button and maybe allow to choose the animation used to show/hide. This will introduce the builder pattern that I’m not using for the moment. And another improvement would be to use the Skin/Behavior/Control pattern. May I will wait for the public API to be released
Thanks for those suggesting ideas, I take it into account on the fly.
As part of the JFXtras control, the updated RadialMenu is also delivered here !
This post is related to the radial menu demo. Some nice guys have taken some time to upgrade the demo (and correct little mistakes in the code) to offer this video, showing RadialMenu control working in touch screen device, and using Touch Rotation event support.
Many thanks to José Pereda (@jperedadnr) for his time, contribution and video. I can feel I will love interracting with other JavaFx guys.
Another important information is that thanks to JFXtras guys (@hansolo_), I will integrate this custom control in the JFXtras open source project. Feel free to participate and upgrade code available here !