Saturday, November 20, 2010

MigLayout - you really should try it

At my new job they used the NetBeans GUI editor to create their panels / dialog boxes. At some point they started to use MigLayout now want to replace all the existing panels. I started with around 220 and now have about 160 to convert.

So why use MigLayout? Why not GridBagLayout or one of the other Swing layouts? My previous job used GridBayLayout for everything even when a very simple BorderLayout would work. I wanted them to switch to MigLayout but it never happened. I have used MigLayout for a few of my side projects and I really like it.

MigLayout Pros:
  • Handles all your layout needs - if you draw it you can lay it out
  • Very simple to learn - string driven
  • Easy to read even if another developer did the initial layout
  • Very concise making for compact code
  • Will handle Mac vs. PC differences in button layout ([Cancel] [OK]  vs [OK] [Cancel])
  • Handles high DPI settings
  • Will handle insets for each OS (also a con, see below)
  • Easily lets you keep a set of controls to be the same size. You can have all buttons in a panel be the same width by putting them in a size group
  • Add special gaps to any side of a control. For some layouts you may want a little extra spacing above or below a control
MigLayout Cons:
  • Handles insets for each OS but the Mac uses large insets with can throw off look and will cause issues if you use setSize in your code for a dialog box. You can override the insets so you get the same look on every OS
  • Since it is string based you will not find out if you typed something in wrong until run time. Of course you are going to run the application anyway to make sure you layout is fine but your code is not validated by the compiler which is something you get used to with the base layouts
  • Another JAR file to include in your download
The Pros outweigh the Cons by a large margin. I have been able to take a screen shot of the current panel, drop it in Paint.NET on my second monitor and quickly type the new MigLayout code just looking at the screen shot. I don't have to sit down and draw out things like I did when I was doing a mix of BorderLayout, FlowLayout, GridLayout etc. I don't have to constantly do a row++ or column++ to add things to a GridBagLayout and I don't have to fill in some big GridBagConstraints object or pass a pile of parameters to a help method to add a component. Really it is as simple as this:

setLayout(new MigLayout("ins 5", "[grow]", "[][grow][]");
add(new JLabel("Enter comments:", "wrap");
add(textAreaScrollPane, "growx, growy, wrap");
add(okButton, "gapabove 10, split 2, aligny right, sg btn, tag ok");
add(cancelButton, "sg btn, tag cancel");

This would be a standard comment entry dialog with a label telling you want to enter, a text area in a scrollpane that grows vertically and horizontally to fill the space and the [OK] and [Cancel] buttons that are the same width right justified in the dialog box. The buttons are tagged so each OS can swap the order if needed. I put a 10 pixel gap above the [OK] [Cancel] button area to separate it a bit from the text area. The "sg btn" just puts them both in the same size group named "btn" you can name it whatever you want and have as may different size groups as you need. This is a tiny example. I have layouts at work with over 50 controls in them, everything is handled perfectly and all of it sizes as the user sizes the dialog box with no problems.

See a bunch of funky numbers in there? See me incrementing rows and columns? Nope, pretty clean stuff. Check out the MigLayout website to find out more. I am not associated with the program in any manner other than being a happy user for many years.

2 comments:

  1. Find at MigLayout tutorial an interesting article with visual example on how basic attribute behaves

    ReplyDelete
  2. Always nice to find good tutorials on MigLayout. I have not used it in a bit as I am doing iPhone and Android work but I sure miss it. The iPhone layout is nice and visual but doing both portrait and landscape is not fun. The Android layout is XML based and flexible. You do one file for portrait and one for landscape which works out cleanly.

    ReplyDelete