2

I am planning to implement a screen arrangement view for a desktop Java application. By screen arrangement view, I mean a view that allows to arrange several rectangles around a central rectangle, so that no gaps are allowed, much like the screen arrangement interface in eg macOS or Windows works:

The screen arrangement UI on macOS

The user would be able to drag the rectangles (except the central one) around and place them somewhere adjacent to another rectangle (that is connected to another rectangle that is connected to another rectangle .... that is connected to the central rectangle). The rectangles would automatically move to a correct spot if dropped at an incorrect spot.

Example mockups of the control

I have experience in Java (Android), but little knowledge of User Interface design on desktop Java. I am using Swing for all UI I have already in my application.

I have done some research but could not find any similar implementation or question on SO.

However, I do not want to reinvent the wheel, so before I start implementing from scratch, I have these questions:

  1. What search terms could I use for further research?
  2. Are there any built-in components I could use as a base?
  3. Is there maybe an open-source component I could use?
  4. Does anyone know an implementation of such a control in any language that I could use as a reference?
  5. How would you implement such a control?

Any help is highly appreciated!

FD_
  • 12,947
  • 4
  • 35
  • 62
  • *"I am using AWT.."* ..why?!? Why use AWT? See [this answer](http://stackoverflow.com/questions/6255106/java-gui-listeners-without-awt/6255978#6255978) for many good reasons to abandon AWT components in favor of Swing. – Andrew Thompson Jul 12 '16 at 10:58
  • @AndrewThompson I only have a very raw sketch for UI yet (quickly implemented with AWT; Concentrated on core functionality first). Thanks for the suggestion for using Swing! If you have an idea of how to build a suitable Swing component, please let me know! – FD_ Jul 12 '16 at 11:02
  • @AndrewThompson Sorry, I am already using Swing. As mentioned, I don't have much experience with those two and just quickly looked at the imports of one of my UI classes. First import was awt (For mouse events), so though AWT. Corrected my question now. – FD_ Jul 12 '16 at 11:06

1 Answers1

2

1.What search terms could I use for further research?

One of the search term you can use is drag and drop (and that is what you plan to do).

2.Are there any built-in components I could use as a base?

Java has built in classes for drag and drop. Take a look here: Drag and Drop Turotial

3.Is there maybe an open-source component I could use?

I am sure there are quite a few if you try Googling it. But, personally I don't think you need an open source component to perform your required task. Java Swing already has pretty good classes available which is easy to use and more than enough to handle what you want.

5.How would you implement such a control?

Other than using the DnD from Java, a similar feature can be implemented using custom painting + various listeners such as Mouse motion listener. This way, you set what ever rules you want over the components that is being dragged / clicked / mouse-over. For example.

Community
  • 1
  • 1
user3437460
  • 17,253
  • 15
  • 58
  • 106
  • I am aware part of what I need is drag and drop. However, I think the more difficult parts are enforcing the constraints (always adjacent to rectangle...) and auto-moving when dropping at an invalid position, so I was hoping for tips and approaches regarding those. – FD_ Jul 12 '16 at 13:12
  • @FD_ If you take a look at the example in my post, the jigsaw puzzle actually "auto fits" when it is in the correct location. Same logic can be applied using various methods such as rect.contains(). You may even write your own rules by checking the height of your rectangles against the their x,y position and offset it and make sure it was dropped onto the same vertical / horizontal alignment with the previous rectangles. – user3437460 Jul 12 '16 at 13:15
  • Further more, you may even set properties like "sensitivity" on your rectangles. For example if it is 3 pixel away from another rectangle on dropped, auto fit it. Else (it is in an invalid position), let it remain at where it is. – user3437460 Jul 12 '16 at 13:19