How to replace a button and re position it dynamically? - swt

Question

I have a text box and a add button next to it, when I click on add button I am able to add a text box and delete button next to it. Now I want the add button on the first row to be changed to delete and the add button should be re-positioned below two rows, when the second row delete button is clicked (the second row is deleted )the add button should go back to the first row and replace delete button. It should look like following.
How do I achieve this?

Answer 1

If you create a Composite as a container of sorts, you can add and remove from it allowing everything outside to remain in the correct order. By reserving the space, the delete button is always below the contents of the container.
I have a text box and a add button next to it, when I click on add button I am able to add a text box and delete button next to it
For example, if we have a small Shell with an add Button as you mentioned, and an empty space to add the Text widgets to:
final Composite baseComposite = new Composite(shell, SWT.BORDER);
baseComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
baseComposite.setLayout(new GridLayout());
final Composite rowsContainerComposite = new Composite(baseComposite, SWT.BORDER);
rowsContainerComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
rowsContainerComposite.setLayout(new GridLayout());
final Button addButton = new Button(baseComposite, SWT.PUSH);
addButton.setText("Add");
(For now the empty space is grabbing all available space, but you can change that as needed)
When adding rows, you can add to the rowsContainerComposite:
addButton.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(final SelectionEvent e) {
new Row(rowsContainerComposite);
rowsContainerComposite.layout();
}
});
A sample Row class:
public class Row {
final Composite baseComposite;
public Row(final Composite parent) {
baseComposite = new Composite(parent, SWT.BORDER);
baseComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
baseComposite.setLayout(new GridLayout(2, false));
final Text text = new Text(baseComposite, SWT.BORDER);
text.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
final Button deleteButton = new Button(baseComposite, SWT.PUSH);
deleteButton.setText("Delete");
deleteButton.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(final SelectionEvent e) {
baseComposite.dispose();
parent.layout();
}
});
}
}
when the second row delete button is clicked (the second row is deleted )the add button should go back to the first row
Then when deleted, rows will shift back appropriately:
the add button should be re-positioned below two rows
The idea is that by using the "container" composite, you're reserving that space to add and remove the rows from. The delete button will always be below the rows as they are added and removed.
Full example:
public class AddDeleteButtonTest {
private static class Row {
final Composite baseComposite;
public Row(final Composite parent) {
baseComposite = new Composite(parent, SWT.BORDER);
baseComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, false));
baseComposite.setLayout(new GridLayout(2, false));
final Text text = new Text(baseComposite, SWT.BORDER);
text.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
final Button deleteButton = new Button(baseComposite, SWT.PUSH);
deleteButton.setText("Delete");
deleteButton.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(final SelectionEvent e) {
baseComposite.dispose();
parent.layout();
}
});
}
}
private final Display display;
private final Shell shell;
public AddDeleteButtonTest() {
display = new Display();
shell = new Shell(display);
shell.setLayout(new FillLayout());
final Composite baseComposite = new Composite(shell, SWT.BORDER);
baseComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
baseComposite.setLayout(new GridLayout());
final Composite rowsContainerComposite = new Composite(baseComposite, SWT.BORDER);
rowsContainerComposite.setLayoutData(new GridData(SWT.FILL, SWT.FILL, true, true));
rowsContainerComposite.setLayout(new GridLayout());
final Button addButton = new Button(baseComposite, SWT.PUSH);
addButton.setText("Add");
addButton.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(final SelectionEvent e) {
new Row(rowsContainerComposite);
rowsContainerComposite.layout();
}
});
}
public void run() {
shell.setSize(200, 200);
shell.open();
while (!shell.isDisposed()) {
if (!display.readAndDispatch()) {
display.sleep();
}
}
display.dispose();
}
public static void main(final String... args) {
new AddDeleteButtonTest().run();
}
}

Answer 2

I did the same in one of my project. The code is bit complicated to do in Jface/SWT. Adding and removing widgets on composite will be bit heavy task. This will reduce UI performance.
If you use Jface tableviewer instead of creating composite, you will get better UI performance and good look as well. In table viewer in one column you can show textboxes and in one column you can show buttons. You can write table column Editing support/label providers to show the buttons.
With this approach you will be able show buttons for all rows or when you click on any cell you want to add or delete.
I can't share the code snippet right now, due to some reasons, but if you need I will share it on weekends