About Mohanraj Gurubatham

Mohanraj Gurubatham is an Engineering graduate and currently running a Technology consulting firm. He also has got a post graduation in Master of Business Administration specialized in Retail Sales. Basically he is a Java and Android enthusiast and he is very much interested in using java whether it be a core java or using frameworks like spring. He has more than 18 years of practical experience in software development using Java/EE Technologies and worked as a technical architect for more than 9 years.

Eclipse Window Builder Tutorial for GUI Creation

1.Introduction

In this example, we will show you how to develop Java GUI Application using Eclipse WindowBuilder plug-in.

Eclipse WindowBuilder is a powerful and easy to use bi-directional Java GUI designer that makes it very easy to create Java GUI applications without spending a lot of time writing code to display simple forms.

The bi-directional Java GUI designer means the developer can seamlessly move between a Drag n’ Drop designer and the generated code.

Using Eclipse WindowBuilder, the developer will enjoy creating Java GUI based applications. One can create complicated windows in minutes using WindowBuilder.

WYSIWYG (What You See Is What You Get) layout tools in WindowBuilder are used to generate back-end java code by drag-and-drop of components to the container.

2.Simple Java Window Application

Now, we will see how fast a simple Java GUI application can be created uisng Eclipse WindowsBuilder.

2.1 System requirements

Tools required to run this example are:

2.1.1 Eclipse

WindowBuilder is built as a plug-in to Eclipse. ‘Eclipse for RCP and RAP Developers’ is the default IDE bundled with ‘Windows Builder’ plug-in. This IDE has a complete set of tools for developers who want to create Eclipse plug-ins, Rich Client Applications (RCA).

Download ‘Eclipse for RCP and RAP Developers’ from here. Please refer the picture given below to identify the correct IDE.

2.1.2 Java

3. Open New Project

Let us create a new ‘SWT/JFace Java Project’ to see the usage of WindowBuilder for building GUI components. Open ‘File – New – Other’ and then click ‘SWT/JFace Project’ as depicted below

Open Project

SWT/JFace Java Project

Project Name

The reason for creating new project as ‘SWT/JFace Java Project’ is to have all the necessary JARs and native libraries included by the IDE itself. Otherwise, you have to add all these dependent JARs and native libraries on your own.

The Standard Widget Toolkit (SWT) is a graphical widget toolkit to be used with the Java platform. It provides a portable graphics API independent of the OS but that relies on the native widgets.

JFace is a UI toolkit with classes for handling many common UI programming tasks. JFace is window-system-independent in both its API and implementation, and is designed to work with SWT without hiding it.

JFace is a higher-level user interface toolkit that uses the raw SWT widgets to provide model-driven widgets, and to some extent some functionality that isn’t available in the Swing libraries, such as advanced editors, dialog boxes, and wizards.

4. New SWT Application

Let us add widget to the project. As a main window, create Application Window as shown below. Right click on the project and select ‘New – Other – Window Builder – SWT Designer – SWT – Application Window’. And then click ‘Next’

Application Window

Enter Class Name and click ‘Finish’

Class Name

A basic window application has been created. Window Builder can be used to get your UI up and running quickly. Click ‘Design’ tab as shown below.

Basic Window Application

Now, you will see the graphical representation (Design View) of your code.

Design View

This application can be simply executed like any other java program with main method. Right click on the class name and ‘Run As – Java Application’

Run Application

As we have not yet added any other elements, you will see a simple window popping-up as a result of the execution.

Executed Application

5. Components in the editor

As shown above, the editor is composed of the following major components:

Design View – the main visual layout area.

Source View – write code and review the generated code

Structure View – composed of the Component Tree and the Property Pane.

Component Tree – shows the hierarchical relationship between all of the components.

7. Layouts in SWT

Layouts are non-visible widgets used to give GUI windows a specific look and it helps to control the position and size of children in a Composite.

To make sure the GUI application developed in one environment works perfect in another platform, Java provides a system of portable layout managers. We use these layout managers to specify rules and constraints for the layout of the UI in a way that will be portable.

Layout managers gives you the advantages as given below,

Correctly positioned components that are independent of fonts, screen resolutions, and platform differences.

Intelligent component placement for containers that are dynamically resized at runtime.

Ease of translation. If a string increases in length after translation, the associated components stay properly aligned.

SWT Designer supports the following layout managers.

Layout Manager

Description

AbsoluteLayout

AbsoluteLayout or Null Layout helps to specify the exact position, the width and the height of components. In a generic environment where the size of the screens may vary, this layout manager should be avoided.

FillLayout

FillLayout is the simplest layout class. It lays out controls in a single row or column, forcing them to be the same size.

RowLayout

Puts the widgets in rows or columns and allows you to control the layout with options, e.g., wrap, spacing, fill and so on.

GridLayout

Arranges widgets in a grid.

FormLayout

Arranges the widgets with the help of the associated attachments.

StackLayout

A StackLayout object is a layout manager for a container. It treats each component in the container as a card. Only one card is visible at a time, and the container acts as a stack of cards.

BorderLayout

BorderLayout lays out a container, arranging and resizing its components to fit in five regions: north, south, east, west, and center. Each region may contain no more than one component, and is identified by a corresponding constant: NORTH, SOUTH, EAST, WEST, and CENTER.

BoxLayout

BoxLayout allows multiple components to be laid out either vertically or horizontally. The components will not wrap so, for example, a vertical arrangement of components will stay vertically arranged when the frame is resized. Nesting multiple panels with different combinations of horizontal and vertical gives an effect similar to GridBagLayout, without the complexity.

FlowLayout

A flow layout arranges components in a left-to-right flow, much like lines of text in a paragraph. Flow layouts are typically used to arrange buttons in a panel. It will arrange buttons left to right until no more buttons fit on the same line.

8. New UI Page

We will now design a new Login UI page using Window Builder. For this normal size screen, we will continue with the default (absolute) layout. We are going to have an image, two labels, one text field, one password field and a button on the screen.

11. Conclusion

From this example, we learned how quickly a Java GUI application can be developed using Eclipse Window Builder. WindowBuilder Engine provides a rich API for creating UI designers. It supports Java-based UI frameworks such as Swing, SWT/RCP, eRCP, GWT etc. It also supports XML-based UI frameworks like XWT, GWT UiBinder, Android etc.

The comment form collects your name, email and content to allow us keep track of the comments placed on the website. Please read and accept our website Terms and Privacy Policy to post a comment.

Subscribe

newestoldestmost voted

Notify of

Guest

Nate

One big thing: I installed Eclipse Oxygen and then the WindowBuilder and SWT plugins. Following the tutorial I find that the shell – SWT Application in the design window is upside down as is the text. It previews OK though.

Newsletter

Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

Email address:

Receive Java & Developer job alerts in your Area

Leave this field empty if you're human:

Join Us

With 1,240,600 monthly unique visitors and over 500 authors we are placed among the top Java related sites around. Constantly being on the lookout for partners; we encourage you to join us. So If you have a blog with unique and interesting content then you should check out our JCG partners program. You can also be a guest writer for Java Code Geeks and hone your writing skills!

Disclaimer

All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners. Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries. Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.