Cross Platform Layout Relative to Background Image

Question

I've created a super class (ImagePanel) which extends JPanel and paints an image as the background. In my ImagePanel subclass I'm using GroupLayout (via the NetBeans GUI Designer) to overlay the panel with JTextFields which are aligned with the underlying image.

This approach works as intended on a single platform; however, when I run the application on a different platform, the JTextFields are resized/moved based on the Look and Feel. If I set the layout manager to null the JTextFields remain in the appropriate position, but I lose the resizing of the JTextFields. Ideally, I would like to keep the position of the JTextFields, but have them sized according to the L&F? How can I approach this differently?

/**
 * Extends JPanel adding the ability to paint a background image.
 */
public class ImagePanel extends JPanel implements Serializable
{
    public static final String PROP_IMAGEFILE = "imageFile";

    //~--- fields -------------------------------------------------------------

    private ImageIcon imageIcon;
    private String imageFile;

    /**
     * Constructs a new ImagePanel.
     */
    public ImagePanel()
    {
        // required by Beans specification.
    }

    /**
     * Get the path to the image file used to paint the background.
     *
     * @return the path.
     */
    public String getImageFile()
    {
        return imageFile;
    }

    /**
     * Set the path to the image file used to paint the background.
     *
     * @param imageFile the image file path.
     */
    public void setImageFile(String imageFile)
    {
        String oldImageFile = this.imageFile;

        this.imageFile = imageFile;

        imageIcon = new ImageIcon(getClass().getResource(imageFile));

        firePropertyChange(PROP_IMAGEFILE, oldImageFile, imageFile);
    }

    /**
     * Overridden to draw image background image.
     */
    @Override
    public void paintComponent(Graphics g)
    {
        /* Draw image on the panel */
        super.paintComponent(g);

        if (imageIcon != null)
        {
            /* create image icon to get image */
            Image image = imageIcon.getImage();

            if (image != null)
            {
                g.drawImage(image, 0, 0, getWidth(), getHeight(), this);
            }
        }
    }
}

On Windows:

On Linux:

Answer 1

I am not sure how well compound layouts will work in this case and it might very well be one of the 1% of cases where you do need a null layout (though that should be avoided whenever humanly possible). as mentioned, miglayout might work with with a little playing around, but what you might have to do is hard code ratio values rather than position values. Calculate the percentage of the image that represents the location and size of each component and, after the image has been drawn, and use those ratio values to programatically lay out your components.

A new layoutmanager could be written to accomplish the same thing (and would probably be preferred to the null layout method above. The add(); method could take 5 variables (component, ratio value for location x, ratio value for location y, size value for locaton x, size value for locaton y);. I am not well versed as to how to write a layout manager, but it is an option.