JavaFX - Z-order of Nodes


Z-order is an ordering of overlapping two-dimensional objects, such as windows in a graphical user interface (GUI) or shapes in a vector graphics editor. One of the features of a typical GUI is that windows may overlap, so that one window hides part or all of another. When two windows overlap, their Z-order determines which one appears on top of the other. courtesy: wikipedia

JavaFX provides toFront() and toBack() methods in Node to change the Z-order. But users may want more control on how to order the nodes.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script><script src="/rakeshmenonp/resource/ZOrder/ZOrder.js"></script>


For Applet mode, click on above image

For standalone mode

In above sample, the Rectangles are stacked. The node is brought to top when user clicks on it. ActionScript provides DisplayObjectContainer.setChildIndex(child, index). Silverlight provides ZIndexProperty which can be set using SetValue method. Looks like its two different approach, one is done on Container and another on Node. So what is best way to address this in JavaFX? Here is an attempt...

In JavaFX, a sequence of Node is added to Group. So we could change the Z-order by sorting the sequence. This may be done using utility method - sort - available in javafx.util.Sequences.

The sort method is expecting an instance of java.lang.Comparable, for this we can create a CustomNode which implements Comparable and implement compareTo method. Also we can add an additional attribute zOrder. The comparison can be done based on this zOrder attribute. Please refer to NodeZ implementation for more information.

Now we can manipulate the Z-order by updating UI with node array returned by Sequences.sort(). The comparator may also be implemented based on various other attributes such as scale, translate, opacity etc. Yes, there may be some concern regarding updating of content in Group for every sort. What will be its implications? I need to perform some analysis on that, will try to share some info soon..

Try it out and let me know feedback and other options..


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/ZOrder/zoneit.js"></script>

Comments:

Hey, nice solution for this problem! I didn't think about it that way up to now... (instead I was struggeling with toFront() :) )

I will definitely try this out!

Cheers,
Jens

Posted by Jens Kloppenburg on October 27, 2009 at 08:35 AM IST #

@Jens Kloppenburg Thanks! Please try it out and let me know if you see any performance issues.

Posted by Rakesh Menon on October 27, 2009 at 09:34 AM IST #

Seems there's a bug. I just clicked on the cyan rectangle at the bottom, and the light brown under the top rectangle also moved

Posted by Bob Donyl on October 27, 2009 at 01:36 PM IST #

@Bob Donyl Thanks for feedback. I think that is expected, due to simple logic of swap in http://code.google.com/p/javafxdemos/source/browse/ZOrder/src/zorder/Main.fx The clicked index is swapped with top most node. The logic may be updated so as to update all z-order index.

Posted by Rakesh Menon on October 27, 2009 at 02:22 PM IST #

I decided to drag the tiles around a little bit.

It seems like when I click on a tile to make it come to the top, the previous tile is sent to the bottom of the stack, instead of merely making the newly selected tile come to the top of the stack.

I am uncertain why the previous selected tile needs to have any update done to it.

I would think that the algorithm should only touch the newly selected tile.

Posted by David on October 27, 2009 at 06:50 PM IST #

@Bob Donyl, David I think the swap logic is confusing, so I updated the code to just bring the selected node to top. But if this is the only requirement then its better to use toFront()

Posted by Rakesh Menon on October 28, 2009 at 02:02 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today