Question

I’m trying to make a box that allows you to select some variables, and re-order the ones that are selected. So the LEFT box starts filled, the RIGHT box starts empty. You move items from the left to the right, and on the right you can re-arrange their order (with the up and down buttons). This lets you pick what items you want and in what order (for sorting purposes in another section of the program).

The layout I’m going for looks like of like this:

Unfortunately, it’s coming out like… well… 🙁

The functionality I’m looking for all works. Yay. I am just having a very hard time with the layout. I think if I can reach the following four primary objectives, I’ll be set.

1. How can I get the OK and CANCEL buttons on the bottom instead of above the multis?
2. How can I get the multis to have a pre-set size (let’s say… 10)
3. How can I get the arrow buttons to be stacked vertically instead of horizontally?
4. How can I get the arrow buttons to be between the two multis?

I figure each of these particular objectives are probably one-liners, perhaps a little bit of plumbing here and there…

On a side note, I’m using GridLayout – this might be a poor choice. Is there a better choice for something like this?

Without further ado, here’s the code that generates this horrid mess…

    @Override
protected Control createDialogArea(Composite parent) {
    parent.getShell().setText("Multi-sort");

    Composite dialogcomp = new Composite(parent, SWT.NONE);
    dialogcomp.setLayout(new GridLayout(3, false));

    available = new List(getShell(), SWT.BORDER | SWT.V_SCROLL);
    for(String t : MultiSortDialog.availableNames) {
        available.add(t);
    }
    used = new List(getShell(), SWT.BORDER | SWT.V_SCROLL);
    for(String t : MultiSortDialog.usedNames) {
        used.add(t);
    }
    createButton(parent, ADD, ">", false);
    createButton(parent, REM, "<", false);
    createButton(parent, UP, "^", false);
    createButton(parent, DOWN, "V", false);

    return dialogcomp;
}

Answer 1

1. I would suggest you simple use the Dialog‘s default OK and Cancel buttons and not trying to lay out your own. SWT has a nice system for placing them in the system default location (i.e., on Mac OS, the OK button will be on the right, which is the correct location.)

2. Don’t use Dialog.createButton() to create buttons. This creates a button on your dialog which, although it sounds like what you want to do, actually isn’t. This creates a button in the style of OK or Cancel buttons, expected to be placed in the button bar composite that the Dialog class owns and styled appropriately for the bottom row OK/Cancel buttons. You want to create a new Button in the composite you’re creating. That is:

    Button addButton = new Button(dialogcomp, SWT.PUSH);
    addButton.setText(">");
    addButton.addSelectionListener(...);

1. To stack the buttons vertically, create a new composite inside dialogcomp to contain them.

2. To put the arrow buttons between the Lists, you need to ensure that you add things in the correct order. With a GridLayout, you need to add widgets in the order that you want them to appear.

Other points:

1. Don’t change the title of the dialog by calling Shell.setText(). Call setText() in your

2. Don’t try to parent your Lists inside the parent shell. You’re given a composite to put things in. This will wreak havoc on your layouts. You’re basically hoisting widgets up into things you don’t own and don’t layout. Instead, put it in the Composite you created.

3. You may also wish to create buttons with the type SWT.ARROW | SWT.LEFT instead of simply drawing a < sign. It may be more visually appealing. Just something to investigate.

A simple rearrangement of your code, creating Buttons properly, and creating a new composite to hold the buttons, will get you much closer:

Composite dialogcomp = new Composite(parent, SWT.NONE);
dialogcomp.setLayout(new GridLayout(3, false));

available = new List(dialogcomp, SWT.BORDER | SWT.V_SCROLL);
for(String t : MultiSortDialog.availableNames) {
    available.add(t);
}

Composite buttonComposite = new Composite(dialogcomp, SWT.NONE);
buttonComposite.setLayout(new GridLayout(1, false));

Button addButton = new Button(buttonComposite, SWT.PUSH);
addButton.setText(">");

Button removeButton = new Button(buttonComposite, SWT.PUSH);
removeButton.setText("<");

Button upButton = new Button(buttonComposite, SWT.PUSH);
upButton.setText("^");

Button downButton = new Button(buttonComposite, SWT.PUSH);
downButton.setText("v");

used = new List(dialogcomp, SWT.BORDER | SWT.V_SCROLL);
for(String t : MultiSortDialog.usedNames) {
    used.add(t);
}

This will probably get you pretty close to what you want. However, you will probably want to apply GridDatas for each of your instances. For example, your two Lists will probably want to grab and fill horizontally and vertically to fill the layout as the Dialog is resized. But I’ll leave that as an exercise for the reader.