Question

I’m quite new to creating layout using SWT. This is what I have to create

And this is my try so far :

Code :

   private void createContents(final Shell shell) {
    shell.setLayout(new GridLayout(2,true));

    /// Side Panel
    Composite sideComposite = new Composite(shell, SWT.NONE);
    sideComposite.setLayout(new RowLayout(SWT.VERTICAL | SWT.BORDER ));
    Label codeLabel = new Label(sideComposite, SWT.NONE);
    codeLabel.setText("Folders");

    // Create list of folders
    Composite foldersComposite = new Composite(sideComposite, SWT.NONE);
    foldersComposite.setLayout(new GridLayout(2,true));
    createFoldersComposite(foldersComposite);

    // Create tags
    Composite tagsComposite = new Composite(sideComposite, SWT.NONE);
    tagsComposite.setLayout(new RowLayout());
    createTagsComposte(tagsComposite);

    /// .Side Panel

    /// Main Panel
    Composite mainComposite = new Composite(shell, SWT.NONE);
    mainComposite.setLayout(new RowLayout(SWT.VERTICAL));

    // Create search field
    Composite searchComposite = new Composite(mainComposite, SWT.NONE);
    searchComposite.setLayout(new GridLayout(2,true));

    Label searchLabel = new Label(searchComposite, SWT.NONE);
    searchLabel.setText("Search");
    GridData gridData = new GridData();
    gridData.horizontalSpan = 1;
    searchLabel.setLayoutData(gridData);

    Text searchText = new Text(mainComposite, SWT.BORDER | SWT.V_SCROLL);
    searchLabel.setLayoutData(gridData);

    // Create search result
    Composite resultComposite = new Composite(mainComposite, SWT.BORDER);
    resultComposite.setLayout(new GridLayout(2,true));
    createResultComposite(resultComposite);

    // Code Review
    Text codeText = new Text(mainComposite, SWT.MULTI | SWT.V_SCROLL | SWT.BORDER );
    codeText.setSize(500, 500);


    /// .Main Panel
}

Question: How can I fix my existing code to have the exact layout I want ?

Answer 1

It may be helpful to break this down into separate widgets, instead of having a monolithic control that tries to handle the layout for everything at once. This allows you to nail down the layout on each separate component correctly, then building them up a piece at a time to get the overall layout you want.

This is especially noticeable in your sample code – you’re creating a Composite called searchComposite with a two-column GridLayout, and you’re adding searchLabel to that composite. But you’re adding searchText to mainComposite, which I think is not what you intended.

Instead, I would create a SearchControl that had a two-column GridLayout containing a Label and a Text. The GridData on the Text should grabExcessHorizontalSpace to fill the remainder of the control.

I would suggest getting more familiar with GridLayout and GridData. Don’t be afraid to experiment. For example, you’re always passing true to the GridLayout constructor, which will make column match widths. While this is perfectly reasonable, it doesn’t match the layout you’ve sketched where some columns are wider than each other. Also, I would suggest looking at GridDataFactory. It will turn all the GridData fiddling into a one-liner.