0

So, I'm trying to design my first GUI app, and i'm stuck on putting elements exactly where I want them. I'm not trying to let anyone do my job for me, but some starters would be great.

For example:

enter image description here

Hovercraft Full Of Eels
  • 283,665
  • 25
  • 256
  • 373
user3408559
  • 67
  • 1
  • 9
  • You do it by playing with your code, experimenting, using all the tools available to you in this amazing laboratory that exists on your desktop, your Java compiler. – Hovercraft Full Of Eels Mar 12 '14 at 01:52
  • 1
    Check out an IDE like NetBeans or Eclipse; both have fantastic GUI builders that let you drag-and-drop components and layouts and edit the resulting code. – Jason C Mar 12 '14 at 01:53
  • 3
    Bah, learn the layout managers first and the rudiments of the Swing library before using GUI-builder tools. Else you'll be cheating yourself out of a great deal of understanding. – Hovercraft Full Of Eels Mar 12 '14 at 01:54
  • @HovercraftFullOfEels That's a great point. An argument for the builders is that the generated code is clear and you have an opportunity to interact with layouts visually. An approach that involves thorough experimentation in a GUI builder (instead of just relying on it right off the bat and forgetting about it) could be equally helpful. – Jason C Mar 12 '14 at 01:57
  • @JasonC Form editors can look you into a IDE platform and could potentially restrict users in a wider team environment. Don't discount their use for learning, but they have there place. I, personally, agree with HovercraftFullOfEels, better to learn the basics by hand and understand how they work (especially together) before embarking on any level of automation - IMHO – MadProgrammer Mar 12 '14 at 02:02
  • See also: To organize the components for a robust GUI, use layout managers, or [combinations of them](http://stackoverflow.com/a/5630271/418556), along with **layout padding & borders for [white space](http://stackoverflow.com/q/17874717/418556).** – Andrew Thompson Mar 12 '14 at 09:56

2 Answers2

5

The basic answer is, you don't. Pixel perfect positioning is an illusion in modern user interfaces. Why? Because no two platforms are equal (unless they are exact copies). Each computer will have different requirements when it comes to how information is rendered on the screen, most notably, fonts.

Font metrics will change between platforms, meaning that the way a font is rendered on your screen won't be the same as it is rendered on someone elses. This causes no end of issues not only of an individual component, but how the surrounding components should react.

The best choice is to use layout managers, which provide "guides" on how components should be laid out and how they effect surrounding components.

enter image description here

Based on your example above, I would suggest you would actually need (at least) three layout managers.

At the base, you would use a BorderLayout, this would separate the form from the buttons.

You would need a fields panel and a buttons panel.

The fields panel would contain the actual fields and probably use a GridBagLayout. The buttons panel would contain the buttons and probably use a FlowLayout

The form panel would be added to the CENTER position of the base panel and the buttons to the SOUTH position.

Take a look at Laying Out Components Within a Container for more details

MadProgrammer
  • 343,457
  • 22
  • 230
  • 366
3

What you want to look at is various layouts in Java (Given that you are asking a basic question I am assuming you are using Swing).

See this link for more info: http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

It will show you the various layouts available in Java and how to use them. You will need to use different Components along with different layouts to render your GUI exactly the way you want it.

  • For example; one way to achieve the layout in the given image is a BorderLayout with a frame containing buttons on a horizontal BoxLayout in the south, and a frame containing labels and text fields in a GridBagLayout in the center. – Jason C Mar 12 '14 at 01:55
  • Adding on @Jason C I would possibly make the top label/textfield combo a separate JPanel added to the NORTH section of the BorderLayout using a standard FlowLayout (default in JPanel) since it looks like you are trying to center your first group of Label/textfield –  Mar 12 '14 at 01:57
  • @RazsApps thanks for the link, i'll go read up on that immediately. thank you everyone! – user3408559 Mar 12 '14 at 02:00