1. Using the SWT Designer for visual UI design

1.1. Overview of the SWT Designer

SWT Designer is a visual editor used to create graphical user interfaces. It works in both directions: you can edit the source code or use the graphical editor to modify the user interface, and SWT Designer keeps the two representations in sync.

SWT Designer is part of the WindowBuilder project. WindowBuilder provides the foundation, and SWT Designer adds the support for SWT-based applications.

1.2. Using SWT Designer

SWT Designer provides a special editor. This editor can work with Eclipse 4 parts, SWT and JFace dialogs, JFace wizards and more.

The following screenshot demonstrates what the editor looks like.

Showing SWT Designer main perspective

SWT Designer allows you to drag and drop SWT components into an existing layout. You can configure layout settings and create event handlers for your widgets.

SWT Designer contributes additional SWT and JFace templates to the Eclipse IDE. For example, you can use it to create Composite classes and add these to the Eclipse user interface. To create a new Composite, select File  New  Other…​  WindowBuilder  SWT Designer  SWT  Composite.

New wizard with the SWT Designer Composite entry selected

SWT Designer supports establishing data binding via the JFace Data Binding framework.

2. Install SWT Designer

To install SWT Designer, use the Help  Install New Software…​ menu entry and enter the following update site.

Install SWT Designer

The WindowBuilder downloads page lists the available SWT Designer releases. Typically, the latest release is the best to use.

3. Optional exercise: Getting started with SWT Designer

SWT Designer supports parts that use @PostConstruct from jakarta.annotation and provides an Eclipse 4 ViewPart wizard. It does not support the builder API of the JFace WidgetFactory, which most exercises in this book use. After this exercise, do not use SWT Designer for the remaining exercises.

3.1. Building a user interface

Add a new part to your application with WindowBuilderPlaygroundPart as its implementation class.

The following exercise assumes that you have SWT Designer already installed.

Right-click on your WindowBuilderPlaygroundPart class and select Open With  WindowBuilder Editor.

WindowBuilder uses the @PostConstruct method to identify that a class is an Eclipse part. This method needs to specify at least a Composite as parameter.

package com.vogella.tasks.ui.parts;

import jakarta.annotation.PostConstruct;

import org.eclipse.swt.widgets.Composite;

public class WindowBuilderPlaygroundPart {

    // WindowBuilder detects an Eclipse 4 part by a @PostConstruct method
    // that receives at least an SWT Composite
    @PostConstruct
    public void createControls(Composite parent) {
        System.out.println(getClass().getSimpleName() + " @PostConstruct method called.");
    }
}

Switch to the Design tab in the WindowBuilder editor, as highlighted in the following screenshot.

Switch to design tab in the SWT Designer

Use the SWT Designer to change the layout of the Composite of the part to a GridLayout.

Changing the layout with WB

Click on Button in the Palette and add a few buttons to your user interface.

Adding buttons

Add a Label and a Text field.

Adding label and text

3.2. Add a SelectionListener to the button

Assign a SelectionListener (event handler) with a widgetSelected method to one of your buttons. You can do this via a right-click on the button. Select Add event handler  selection  widgetSelected.

Assign an EventHandler to your Button

3.3. Review the generated code

Switch to the Source tab and review the code generated by the SWT Designer.

4. Learn more and get support

This tutorial continues on Eclipse RCP online training or Eclipse IDE extensions with lots of video material, additional exercises and much more content.

Home Tutorials Training Consulting Books Company Contact us


Get more...