CODEWITHSUNDEEP
javafx
Spyros
Spyros

Reputation: 197

JavaFX 8 hiding side panel and mini window with button

Good evening.

After playing around with a few Java FX 8 tutorials and making some simple applications, I decided to take a slightly more difficult project.

I had an old Swing map application that displayed maps, layers and meteorological data from a DB using map objects and taking the maps from a local map server. I wish to update this application to pure Java FX 8 and probably the geoserver java api, which I recently added to my old swing app.

The first thing I did, is try to build a model for the application in Scene Builder 2.0, to have the general idea. Since I was making this from scratch, I wished to make it a little more modern.

And here is the problem. I wish to have the map in a tabbed pane, taking almost the whole screen, with a minor panel bellow displaying some data ( I have yet to decide which of the old data is actually useful), and a menu bar on top. I user the border pane for the central app, with the menu bar north, the pane south and the tab in the center.

So far so good. But, I cannot figure out how to add a button with which the user can hide/unhide an accordion pane and a minimap of the whole world, as the picture bellow show: enter image description here

enter image description here

enter image description hereenter image description here

I think the accordion panel will actually be with the map inside an HBOX, with the map panel having the Hgrow set as Always and the button actually resizing the accordion panel to hide/unhide it. Also, I want the mini-map to be always on top of both windows.

However, I have no idea how to put the buttons there. I tried many different layouts and tricks, but have found no actual solution. I cannot find any examples, and unfortunately the 2 books I bought do not even go beyond the given layouts. Is there any way to do this?

Also, while not a priority, does JavaFX have the capability to drag and drop components (p.ex. the minimap) and lock it on a certain place? For a user that could perhaps want the minimap to the down-right corner instead?

Upvotes: 0

Views: 2944

Answers (1)

eckig
eckig

Reputation: 11134

I would suggest using/writing a custom Pane.

Add the Map, SideBar, SideBar ToggleButton, Minimap ToggleButton and the MiniMap to its children. And do not forget to call toFront() and toBack() accordingly to put the the elements in the correct layers.

Now there are two ways on how to position your elements:

  1. Overwrite the layoutChildren() method of the StackPane and set the coordinate of the components there with relocate(x,y) or resizeRelocate(x,y,width,height). Or
  2. Set the managed property of the aforementioned elements to false (setManaged(false)) and bind layoutX and layoutY Properties to the desired values.

If you are going for #1 (not really code, but hopefully you get the idea):

  • The MiniMap Button, should be left bottom so: x = 0 | y = Pane.getHeight() - button.getHeight()
  • The SideBar Button should be left center: x = SideBar.getWidth() - Button.getWidth() | y = Pane.getHeight() / 2 - button.getHeight() / 2
  • and so on...

If you are going for #2 (again not really tested code):

  • The MiniMap Button: setLayoutX(0) | layoutY.bind(Pane.heightProperty())
  • The SideBar Button: layoutXProperty.bind(SideBar.widthProperty().subtract(button.widthProperty)) | `layoutYProperty.bind(Pane.heightProperty().divide(2).subtract(button.heightProperty().divide(2)))
  • and so on...

And yes, you can move the MiniMap with mouse gestures. Have a look at setOnMousePressed() and setOnMouseDragged(). With the first event you would typically store the current coordinate and with the second event calculate the delta by which you would adjust the layoutX/layoutY values.

Edit:

You might also have a look at ControlsFX, they have a HiddenSidesPane and a MasterDetailPane which might (partly) be what you are looking for.

Upvotes: 1

Related Questions