Screw all GUI builders

Are you making your GUI with a builder? Do you like the generated code you get? I hate it. Even though I like the idea of building GUI with visual means (WYSIWYG), I can't stand the mess that code generators produce. In addition to that, there are more serious downsides:

• You don't know how exactly the generated code works. You don't need to. You start not to care and GUI application development becomes a process of drawing and adding simple event handlers here and there.


• Most GUI builders force you to use single class for single window, so generated classes tend to have thousands of lines of code.


• Most GUI builders don't want you to modify the generated code. And if you do, they either break or rewrite your code.


• GUI builders force you to use an IDE, mostly one you started coding with. So if you start with NetBeans, you most likely be forced to stay with it for the whole project.


• The generated code is far from being optimal. It's not resize-friendly, not dynamic enough, it has many hard-coded values, refactoring is most likely impossible, because builder would not allow that.

So, why are you using GUI builders? Is it because you're doing GUI apps during your day job, you need fast results and you don't want to learn more than you have to? Or you just have no choice? That's reasonable, but when you have a choice, consider learning how Swing or SWT works, spend some time reading the API docs and examining the code - it's amazing how fast and dynamic your GUI building process can get when you finally get a clear understanding HOW to use all the widgets and layouts. Let me show you. Here's a window from Hawkscope app that I'm making in my spare time. It was generated with Jigloo GUI builder in Eclipse. First let's see how it looks:



The code (all comments removed):

package com.varaneckas.hawkscope.gui;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.MouseAdapter;
import org.eclipse.swt.events.MouseEvent;
import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.Cursor;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.program.Program;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

import com.cloudgarden.resource.SWTResourceManager;
import com.varaneckas.hawkscope.Version;
import com.varaneckas.hawkscope.cfg.ConfigurationFactory;
import com.varaneckas.hawkscope.util.IOUtils;
import com.varaneckas.hawkscope.util.IconFactory;
import com.varaneckas.hawkscope.util.OSUtils;

public class AboutWindow extends org.eclipse.swt.widgets.Dialog {
    
    private Shell dialogShell;
    private Canvas logoCanvas;
    private Label appNameLabel;
    private Label appSloganLabel;
    private Label appVersion;
    private Label appHomepageValue;
    private Button copyReportButton;
    private Button closeButton;
    private Label environmentLabel;
    private Text environmentTextArea;
    private Label appHomepageLabel;
    private Label appReleasedValue;
    private Label appReleasedLabel;
    private Label appVersionValue;

    public AboutWindow(final Shell parent, final int style) {
        super(parent, style);
    }

    public synchronized void open() {
        if (dialogShell != null && !dialogShell.isDisposed()) {
            dialogShell.setVisible(true);
            dialogShell.forceFocus();
            return;
        }
        final Shell parent = getParent();
        dialogShell = new Shell(parent, SWT.DIALOG_TRIM 
                | SWT.APPLICATION_MODAL);
        {
            SWTResourceManager.registerResourceUser(dialogShell);
        }
        dialogShell.setImage(IconFactory.getInstance()
                .getUncachedIcon("hawkscope16.png"));
        dialogShell.setText("About");
        
        dialogShell.setLayout(new FormLayout());
        dialogShell.layout();
        dialogShell.pack();            
        dialogShell.setSize(516, 322);
        {
            copyReportButton = new Button(dialogShell, SWT.PUSH | SWT.CENTER);
            FormData copyReportButtonLData = new FormData();
            copyReportButtonLData.width = 125;
            copyReportButtonLData.height = 29;
            copyReportButtonLData.left =  new FormAttachment(0, 1000, 314);
            copyReportButtonLData.top =  new FormAttachment(0, 1000, 252);
            copyReportButton.setLayoutData(copyReportButtonLData);
            copyReportButton.addSelectionListener(new SelectionAdapter() {
               @Override
               public void widgetSelected(SelectionEvent event) {
                   IOUtils.copyToClipboard(Version.getEnvironmentReport());
               } 
            });
            copyReportButton.setText("Co&py to Clipboard");
            OSUtils.adjustButton(copyReportButton);
        }
        {
            closeButton = new Button(dialogShell, SWT.PUSH | SWT.CENTER);
            FormData closeButtonLData = new FormData();
            closeButtonLData.width = 47;
            closeButtonLData.height = 29;
            closeButtonLData.left =  new FormAttachment(0, 1000, 451);
            closeButtonLData.top =  new FormAttachment(0, 1000, 252);
            closeButton.setLayoutData(closeButtonLData);
            closeButton.addSelectionListener(new SelectionAdapter() {
               @Override
                public void widgetSelected(SelectionEvent event) {
                   dialogShell.dispose();
                } 
            });
            closeButton.setText("&Close");
            OSUtils.adjustButton(closeButton);
        }
        {
            environmentLabel = new Label(dialogShell, SWT.NONE);
            FormData environmentLabelLData = new FormData();
            environmentLabelLData.width = 486;
            environmentLabelLData.height = 17;
            environmentLabelLData.left =  new FormAttachment(0, 1000, 12);
            environmentLabelLData.top =  new FormAttachment(0, 1000, 127);
            environmentLabel.setLayoutData(environmentLabelLData);
            environmentLabel.setText("Environment");
            environmentLabel.setFont(SWTResourceManager.getFont("Sans", 10, 1));
        }
        {
            environmentTextArea = new Text(dialogShell, SWT.MULTI | SWT.WRAP 
                    | SWT.V_SCROLL | SWT.BORDER);
            FormData environmentTextAreaLData = new FormData();
            environmentTextAreaLData.width = 468;
            environmentTextAreaLData.height = 90;
            environmentTextAreaLData.left =  new FormAttachment(0, 1000, 12);
            environmentTextAreaLData.top =  new FormAttachment(0, 1000, 150);
            environmentTextArea.setLayoutData(environmentTextAreaLData);
            environmentTextArea.setText(Version.getSystemProperties());
            environmentTextArea.setEditable(false);
        }
        {
            appHomepageValue = new Label(dialogShell, SWT.NONE);
            appHomepageValue.addMouseListener(new MouseAdapter() {
                @Override
                public void mouseUp(MouseEvent event) {
                    Program.launch(Version.HOMEPAGE);
                } 
            });
            appHomepageValue.setCursor(new Cursor(dialogShell.getDisplay(), 
                    SWT.CURSOR_HAND));
            appHomepageValue.setForeground(
                    new Color(dialogShell.getDisplay(), 0, 0, 255));
            FormData appHomepageValueLData = new FormData();
            appHomepageValueLData.width = 242;
            appHomepageValueLData.height = 17;
            appHomepageValueLData.left =  new FormAttachment(0, 1000, 256);
            appHomepageValueLData.top =  new FormAttachment(0, 1000, 104);
            appHomepageValue.setLayoutData(appHomepageValueLData);
            appHomepageValue.setToolTipText("Click to open in browser");
            appHomepageValue.setText(Version.HOMEPAGE);
        }
        {
            appHomepageLabel = new Label(dialogShell, SWT.NONE);
            FormData appHomepageLabelLData = new FormData();
            appHomepageLabelLData.width = 94;
            appHomepageLabelLData.height = 17;
            appHomepageLabelLData.left =  new FormAttachment(0, 1000, 156);
            appHomepageLabelLData.top =  new FormAttachment(0, 1000, 104);
            appHomepageLabel.setLayoutData(appHomepageLabelLData);
            appHomepageLabel.setText("Homepage:");
            appHomepageLabel.setFont(SWTResourceManager.getFont("Sans", 10, 1));
        }
        {
            appReleasedValue = new Label(dialogShell, SWT.NONE);
            FormData appReleasedValueLData = new FormData();
            appReleasedValueLData.width = 242;
            appReleasedValueLData.height = 17;
            appReleasedValueLData.left =  new FormAttachment(0, 1000, 256);
            appReleasedValueLData.top =  new FormAttachment(0, 1000, 81);
            appReleasedValue.setLayoutData(appReleasedValueLData);
            appReleasedValue.setText(Version.VERSION_DATE);
        }
        {
            appReleasedLabel = new Label(dialogShell, SWT.NONE);
            FormData appReleasedLabelLData = new FormData();
            appReleasedLabelLData.width = 77;
            appReleasedLabelLData.height = 17;
            appReleasedLabelLData.left =  new FormAttachment(0, 1000, 156);
            appReleasedLabelLData.top =  new FormAttachment(0, 1000, 81);
            appReleasedLabel.setLayoutData(appReleasedLabelLData);
            appReleasedLabel.setText("Released:");
            appReleasedLabel.setFont(SWTResourceManager.getFont("Sans", 10, 1));
        }
        {
            appVersionValue = new Label(dialogShell, SWT.NONE);
            FormData appVersionValueLData = new FormData();
            appVersionValueLData.width = 242;
            appVersionValueLData.height = 17;
            appVersionValueLData.left =  new FormAttachment(0, 1000, 256);
            appVersionValueLData.top =  new FormAttachment(0, 1000, 58);
            appVersionValue.setLayoutData(appVersionValueLData);
            if (Version.isUpdateAvailable() == null) {
             appVersionValue.setText(Version.VERSION_NUMBER);
             if (ConfigurationFactory.getConfigurationFactory()
               .getConfiguration().checkForUpdates()) {
              appVersionValue.setToolTipText("Could not get version information.");
             }
            } else {
             if (Version.isUpdateAvailable()) {
                    appVersionValue.setForeground(new Color(dialogShell
                            .getDisplay(), 255, 0, 0));
                    appVersionValue.setText(Version.VERSION_NUMBER 
                            + " (Update Available!)");
                    appVersionValue.setToolTipText("Click to go to update " +
                      "download page");
                    appVersionValue.setCursor(new Cursor(dialogShell
                            .getDisplay(), SWT.CURSOR_HAND));
                    appVersionValue.addMouseListener(new MouseAdapter() {
                       @Override
                        public void mouseUp(MouseEvent event) {
                           Program.launch(Version.DOWNLOAD_URL);
                           dialogShell.dispose();
                        } 
                    });
                } else {
                    appVersionValue.setText(Version.VERSION_NUMBER);
                    appVersionValue.setToolTipText("Latest available version!");
                    appVersionValue.setForeground(new Color(dialogShell
                            .getDisplay(), 0, 128, 0));
                }
            }
        }
        {
            appVersion = new Label(dialogShell, SWT.NONE);
            FormData appVersionLData = new FormData();
            appVersionLData.width = 77;
            appVersionLData.height = 17;
            appVersionLData.left =  new FormAttachment(0, 1000, 156);
            appVersionLData.top =  new FormAttachment(0, 1000, 58);
            appVersion.setLayoutData(appVersionLData);
            appVersion.setText("Version:");
            appVersion.setFont(SWTResourceManager.getFont("Sans", 10, 1));
        }
        {
            appSloganLabel = new Label(dialogShell, SWT.WRAP);
            FormData appSloganLabelLData = new FormData();
            appSloganLabelLData.width = 342;
            appSloganLabelLData.height = 17;
            appSloganLabelLData.left =  new FormAttachment(0, 1000, 156);
            appSloganLabelLData.top =  new FormAttachment(0, 1000, 35);
            appSloganLabel.setLayoutData(appSloganLabelLData);
            appSloganLabel.setText(Version.APP_SLOGAN);
        }
        {
            appNameLabel = new Label(dialogShell, SWT.NONE);
            FormData appNameLabelLData = new FormData();
            appNameLabelLData.width = 342;
            appNameLabelLData.height = 17;
            appNameLabelLData.left =  new FormAttachment(0, 1000, 156);
            appNameLabelLData.top =  new FormAttachment(0, 1000, 12);
            appNameLabel.setLayoutData(appNameLabelLData);
            appNameLabel.setText("Hawkscope");
            appNameLabel.setFont(SWTResourceManager.getFont("Sans", 10, 1));
        }
        {
            final FormData logoCanvasLData = new FormData();
            logoCanvasLData.width = 114;
            logoCanvasLData.height = 109;
            logoCanvasLData.left =  new FormAttachment(0, 1000, 12);
            logoCanvasLData.top =  new FormAttachment(0, 1000, 12);
            logoCanvas = new Canvas(dialogShell, SWT.RESIZE);
            logoCanvas.addPaintListener(new PaintListener() {
                public void paintControl(PaintEvent e) {
                    e.gc.drawImage(IconFactory.getInstance()
                            .getUncachedIcon("hawkscope128.png"), 0, 0, 128, 
                            128, 0, 0, 114, 109);
                }
            });
            logoCanvas.addMouseListener(new MouseAdapter() {
                @Override
                public void mouseUp(MouseEvent event) {
                    Program.launch(Version.HOMEPAGE);
                } 
            });
            logoCanvas.setCursor(new Cursor(dialogShell.getDisplay(), 
                    SWT.CURSOR_HAND));
            logoCanvas.setToolTipText("Click to visit Homepage");
            logoCanvas.setLayoutData(logoCanvasLData);
        }
        dialogShell.setLocation(getParent().toDisplay(100, 100));
        dialogShell.open();
        Display display = dialogShell.getDisplay();
        while (!dialogShell.isDisposed()) {
            if (!display.readAndDispatch())
                display.sleep();
        }
    }

}

Now, a hand-rewritten version with no GUI builder:



The code:

package com.varaneckas.hawkscope.gui;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.MouseAdapter;
import org.eclipse.swt.events.MouseEvent;
import org.eclipse.swt.events.PaintEvent;
import org.eclipse.swt.events.PaintListener;
import org.eclipse.swt.events.SelectionAdapter;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.graphics.Color;
import org.eclipse.swt.graphics.Cursor;
import org.eclipse.swt.graphics.Font;
import org.eclipse.swt.graphics.FontData;
import org.eclipse.swt.layout.FormAttachment;
import org.eclipse.swt.layout.FormData;
import org.eclipse.swt.layout.FormLayout;
import org.eclipse.swt.program.Program;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Canvas;
import org.eclipse.swt.widgets.Control;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.Text;

import com.varaneckas.hawkscope.Version;
import com.varaneckas.hawkscope.cfg.ConfigurationFactory;
import com.varaneckas.hawkscope.tray.TrayManager;
import com.varaneckas.hawkscope.util.IOUtils;
import com.varaneckas.hawkscope.util.IconFactory;

public class AboutShell {
    
    private Shell shell;
    private FormData layout;
    private Font bold;
    private Color red;
    private Color green;
    private Color blue;
    private Cursor hand;
    private Canvas logo;
    private Label labelAppName;
    private Label labelAppSlogan;
    private Label labelVersion;
    private Label labelReleased;
    private Label labelHomePage;
    private Label labelAppVersion;
    private Label labelAppReleased;
    private Label labelAppHomePage;
    private Label labelEnvironment;
    private Text textEnvironment;
    private Button buttonCopyToClipboard;
    private Button buttonClose;
    
    public void open() {
        if (shell != null && !shell.isDisposed()) {
            shell.setVisible(true);
            shell.forceFocus();
            return;
        }       
        createShell();
        createResources();
        createLogo();
        createLabelAppName();
        createLabelAppSlogan();
        createLabelVersion();
        createLabelReleased();
        createLabelHomePage();
        createLabelAppVersion();
        createLabelAppReleased();
        createLabelAppHomePage();
        createLabelEnvironment();
        createButtonClose();
        createButtonCopyToClipboard();
        createTextEnvironment();
        shell.pack();
        shell.open();
    }
    
    private void createResources() {
        final FontData data = new FontData();
        data.setHeight(10);
        data.setStyle(SWT.BOLD);
        bold = new Font(shell.getDisplay(), data);
        red = new Color(shell.getDisplay(), 255, 0, 0);
        green = new Color(shell.getDisplay(), 0, 128, 0);
        blue = new Color(shell.getDisplay(), 0, 0, 255);
        hand = new Cursor(shell.getDisplay(), SWT.CURSOR_HAND);
    }
    
    private void createShell() {
        shell = new Shell(TrayManager.getInstance().getShell(), SWT.SHELL_TRIM);
        final FormLayout layout = new FormLayout();
        layout.spacing = 6;
        layout.marginHeight = 12;
        layout.marginWidth = 12;
        shell.setLocation(shell.getParent().toDisplay(100, 100));
        shell.setImage(IconFactory.getInstance()
                .getUncachedIcon("hawkscope16.png"));
        shell.setText("About");
        shell.setLayout(layout);
        shell.layout();
    }
    
    private FormData relativeTo(final Control top, final Control left) {
        layout = new FormData();
        layout.top = new FormAttachment(top);
        layout.left = new FormAttachment(left);
        return layout;
    }
    
    private FormData relativeToBottomRight(final Control right) {
        layout = new FormData();
        layout.bottom = new FormAttachment(100, 0);
        if (right == null) {
            layout.right = new FormAttachment(100, 0);
        } else {
            layout.right = new FormAttachment(right);
        }
        return layout;
    }    
    
    private void createLogo() {
        logo = new Canvas(shell, SWT.NONE);
        logo.addPaintListener(new PaintListener() {
            public void paintControl(PaintEvent e) {
                e.gc.drawImage(IconFactory.getInstance()
                        .getUncachedIcon("hawkscope128.png"), 0, 0);
            }
        });
        logo.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseUp(MouseEvent event) {
                Program.launch(Version.HOMEPAGE);
            } 
        });
        logo.setCursor(hand);
        logo.setToolTipText("Click to visit Homepage");
        layout = relativeTo(null, null);
        layout.width = 128;
        layout.height = 128;
        logo.setLayoutData(layout);
    }
    
    private void createLabelAppName() {
        labelAppName = new Label(shell, SWT.NONE);
        labelAppName.setText(Version.APP_NAME);
        labelAppName.setLayoutData(relativeTo(null, logo));
        labelAppName.setFont(bold);
    }
    
    private void createLabelAppSlogan() {
        labelAppSlogan = new Label(shell, SWT.NONE);
        labelAppSlogan.setLayoutData(relativeTo(labelAppName, logo));
        labelAppSlogan.setText(Version.APP_SLOGAN);
    }
    
    private void createLabelVersion() {
        labelVersion = new Label(shell, SWT.NONE);
        labelVersion.setText("Version:");
        labelVersion.setFont(bold);
        labelVersion.setLayoutData(relativeTo(labelAppSlogan, logo));
    }
    
    private void createLabelAppVersion() {
        labelAppVersion = new Label(shell, SWT.NONE);
        labelAppVersion.setText(Version.VERSION_NUMBER);
        labelAppVersion.setLayoutData(relativeTo(labelAppSlogan, labelHomePage));
        updateLabelAppVersion();
    }
    
    private void updateLabelAppVersion() {
        if (Version.isUpdateAvailable() == null) {
            if (ConfigurationFactory.getConfigurationFactory()
                    .getConfiguration().checkForUpdates()) {
                labelAppVersion.setToolTipText("Could not get version information.");
            }
        } else {
            if (Version.isUpdateAvailable()) {
                labelAppVersion.setForeground(red);
                labelAppVersion.setText(Version.VERSION_NUMBER 
                        + " (Update Available!)");
                labelAppVersion.setToolTipText("Click to go to update " +
                        "download page");
                labelAppVersion.setCursor(hand);
                labelAppVersion.addMouseListener(new MouseAdapter() {
                   @Override
                    public void mouseUp(final MouseEvent event) {
                       Program.launch(Version.DOWNLOAD_URL);
                       shell.dispose();
                    } 
                });
            } else {
                labelAppVersion.setText(Version.VERSION_NUMBER);
                labelAppVersion.setToolTipText("Latest available version!");
                labelAppVersion.setForeground(green);
            }
        }
    }
    
    private void createLabelReleased() {
        labelReleased = new Label(shell, SWT.NONE); 
        labelReleased.setText("Released:");
        labelReleased.setFont(bold);
        labelReleased.setLayoutData(relativeTo(labelVersion, logo));
    }
    
    private void createLabelAppReleased() {
        labelAppReleased = new Label(shell, SWT.NONE);
        labelAppReleased.setText(Version.VERSION_DATE);
        labelAppReleased.setLayoutData(relativeTo(labelVersion, labelHomePage));
    }
    
    private void createLabelHomePage() {
        labelHomePage = new Label(shell, SWT.NONE); 
        labelHomePage.setText("Homepage:");
        labelHomePage.setFont(bold);
        labelHomePage.setLayoutData(relativeTo(labelReleased, logo));
    }    
    
    private void createLabelAppHomePage() {
        labelAppHomePage = new Label(shell, SWT.NONE);
        labelAppHomePage.setText(Version.HOMEPAGE);
        labelAppHomePage.setLayoutData(relativeTo(labelReleased, labelHomePage));
        labelAppHomePage.setCursor(hand);
        labelAppHomePage.setForeground(blue);
        labelAppHomePage.setToolTipText("Click to open in browser");
        labelAppHomePage.addMouseListener(new MouseAdapter() {
            @Override
            public void mouseUp(final MouseEvent event) {
                Program.launch(Version.HOMEPAGE);
            } 
        });
    }
    
    private void createLabelEnvironment() {
        labelEnvironment = new Label(shell, SWT.NONE);
        labelEnvironment.setText("Environment");
        labelEnvironment.setFont(bold);
        labelEnvironment.setLayoutData(relativeTo(logo, null));
    }

    private void createButtonClose() {
        buttonClose = new Button(shell, SWT.PUSH);
        buttonClose.setText("&Close");
        buttonClose.setLayoutData(relativeToBottomRight(null));
        buttonClose.addSelectionListener(new SelectionAdapter() {
            @Override
            public void widgetSelected(final SelectionEvent event) {
                shell.dispose();
            } 
         });
    }
    
    private void createButtonCopyToClipboard() {
        buttonCopyToClipboard = new Button(shell, SWT.PUSH);
        buttonCopyToClipboard.setText("C&opy to Clipboard");
        buttonCopyToClipboard.setLayoutData(relativeToBottomRight(buttonClose));
        buttonCopyToClipboard.addSelectionListener(new SelectionAdapter() {
            @Override
            public void widgetSelected(final SelectionEvent event) {
                IOUtils.copyToClipboard(Version.getEnvironmentReport());
            } 
         });
    }
    
    private void createTextEnvironment() {
        textEnvironment = new Text(shell, SWT.MULTI | SWT.WRAP 
                | SWT.V_SCROLL | SWT.BORDER);
        textEnvironment.setText(Version.getEnvironmentReport());
        textEnvironment.setEditable(false);
        layout = relativeTo(labelEnvironment, null);
        layout.right = new FormAttachment(100, 0);
        layout.bottom = new FormAttachment(buttonClose);
        layout.width = 500;
        layout.height = 150;
        textEnvironment.setLayoutData(layout);
    }    
    
}

If you compare the two versions, handcoded one is superior in most aspects. The code is smaller, more readable and text editor friendly. The window can be resized, it is better looking - in generated code the logo image was scaled due to dragging inacuracy. And, believe it or not, I've spent less time creating the handcoded GUI version than "drawing" the automated one and then hacking it's generated code. Of course, if you know your tools well, you can be much more productive with a GUI builder, but I'll rather learn the low-level GUI API than some commercial third party product that treats you like parents treat their kids with LEGO.

No more GUI builders for me.