Home Tutorials Training Consulting Products Books Company Donate Contact us









Get more...

Training Events

Eclipse WindowBuilder. This tutorial describes the usage of WindowBuilder for creating user interfaces.

1. Using a the SWT Designer (WindowBuilder) for visual UI design

1.1. What is SWT Designer?

SWT Designer is a visual editor used to create graphical user interfaces. It is a two way parser, e.g., you can edit the source code or use a graphical editor to modify the user interface. SWT Designer synchronizes between both representations.

SWT Designer is part of the WindowBuilder project. WindowBuilder provides the foundation and SWT Designer adds the support for working with 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, etc.

The following screenshot demonstrates how the editor looks like.

Showing SWT Designer main perspective

SWT Designer allows to drag-and-drop SWT components into an existing layout. You can 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 Composites and add these to the Eclipse user interface. To create a new Composite select File  New  Other…​  WindowBuilder  SWT Designer  SWT  Composite.

SWT Designer in Action

SWT Designer has support to establish data binding via the JFace Data Binding framework.

2. Install SWT Designer

The following website lists the available SWT releases. Open it in your browser. WindowBuilder download site.

It is recommended to use latest release of SWT Designer. Use Help  Install New Software and enter the following update site to use it. https://download.eclipse.org/windowbuilder/latest/

Install SWT Designer

3. Exercise: Getting started with SWT Designer

3.1. Building an user interface

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

Right-click on your PlaygroundPart 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 javax.annotation.PostConstruct;

import org.eclipse.swt.widgets.Composite;

public class PlaygroundPart {

    // the WindowBuilder / SWTDesigner tooling
    // uses the @PostConstruct method to figure out
    // that the class is am Eclipse 4 part

    // one method must be annotated with @PostConstruct and
    // must receive a least a SWT Composiste


    @PostConstruct
    public void createControls(Composite parent) {
        System.out.println(this.getClass().getSimpleName()
        + " @PostConstruct method called.");
    }
}

Switch to the Design tab in the WindowBuilder editor. This selection is 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 in the Palette on Button 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 SelectionLister to your button

Assign an SelectionLister (event handler) to one of your buttons for the widgetSelected. You can to 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 about Eclipse RCP development

I hope you enjoyed this tutorial. You find an extended online training at the Eclipse RCP online training website.

Nothing listed.

6. vogella training and consulting support

Copyright © 2012-2019 vogella GmbH. Free use of the software examples is granted under the terms of the Eclipse Public License 2.0. This tutorial is published under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Germany license.