3 Replies Latest reply on Dec 13, 2012 1:36 PM by 979248

    Zoom-in/Zoom-out Pane

      Hi. I want to put 4 Line Chart nodes into a container in a 2x2 grid such that when the user double-clicks one of the charts, the double-clicked chart expands to take up the whole container space (the other 3 charts "disappear"). When the user double-clicks the chart again, it returns to its original size and the other 3 charts are again visible.

      I got this work (in JavaFX 2) using 2 HBox containers nested within a VBox container, setting the various VBox.vgrow and HBox.hgrow attributes to "ALWAYS" and dynamically (i.e., in code) removing and replacing the appropriate Line Chart and HBox child nodes.

      However, I am wondering if there is a better, more elegant way to accomplish this functionality. I have been programming in Java for years, but I am new to JavaFX. Thus, it is very likely I am missing something obvious.

      If anybody knows of a better approach, please let me know. Thanks!!

        • 1. Re: Zoom-in/Zoom-out Pane
          That's more or less what I'd do.

          You can use a GridPane instead of the nested HBoxes and VBoxes. This way you can set the GridPane constraints on the charts at creation time; those constraints will remain set even when you remove them from the GridPane (so the charts essentially remember their locations in the GridPane). Then your mouse handler just adds or removes them from the grid pane, and doesn't have to worry about where they go. This might simplify it a bit.

          This would be more work (not sure how tricky), but you could also consider setting all the charts minimum height and width to zero when they're created, and then setting the maximum height and width to zero to "hide" them. The (only) advantage to this is that you could animate the changes to the maximum width/height properties, which would create some nice eye-candy.
          • 2. Re: Zoom-in/Zoom-out Pane
            As James says, your approach is totally sound.

            If you want to do the animation James describes, there is a sample here:
            though it is just eye candy and probably a power user would want to skip the animation and have an instant transition.
            1 person found this helpful
            • 3. Re: Zoom-in/Zoom-out Pane
              Thank you very much James and JSmith for your input! I appreciate it. In my initial experimentation I did try using a Grid Pane container, but I could not get it to work like I wanted. I will give it another try, based on your insight.