Best Practices and State of the Art Tools for Modern GUI ... · ―Coding Java GUIs is so tedious...

Instantiations: www.instantiations.com Copyright 2009, Instantiations, Inc. All rights are reserved. WindowBuilder Pro is a registered trademark of Instantiations. All other trademarks are the property of their respective owners.

Best Practices and State of the Art Tools for Modern

GUI Creation

Creating Java User Interfaces for Today’s Market and Business Needs

Graphical user interfaces (GUIs) have evolved from command-line interfaces as

user needs have changed. Today’s computer users require sophistication in an

easy-to-use interface; most users have gotten very comfortable in a menu and

mouse-driven world. Gen Xers, Gen Y’s and the Millennium generation who

haven’t known a world without computers demand the total package—lightning-

fast, feature-rich software with an intuitive, easy-to-use, visually attractive

wrapper.

Enterprise Needs Have Changed

Requirements for software used in a business enterprise environment have also

changed. To stay competitive, companies need to be able to efficiently deliver

the interfaces users require. Many business interfaces collect data that can be

extremely valuable for assessing market demographics, future product and

service needs and more. Much information is now required to be collected in

pre-populated drop-down menus, radio buttons and checkboxes to create a

database that can be queried, sliced and diced. Enterprise GUIs are state-of-

the-art and are built for a Rich Java desktop or Web (Ajax) environment.

Why GUI Building Tools are Better than Hand Coding

Much of what users demand and companies need has been possible for many

years, but required time-intensive, cost-prohibitive hand coding. With the

introduction of graphical GUI design tools, the landscape has changed. A GUI

builder is visual programming software that lets a user build a graphical user

interface by dragging and dropping elements from a toolbar onto the screen.

These tools typically contain Wizards and templates that help automate the GUI

building process. GUI building tools allow developers to spend less time and

money creating Java GUIs, because they can focus on creating application-

specific functionality rather than coding the low-level logic required for GUIs to

run.

According to Ben Galbraith, in his Successful GUI Building blog, ―In my

experience, the number one reason why GUI builders hold appeal is that they

often lead to an order of magnitude improvement in productivity over hand

coding, especially amongst average-level Swing developers. I consider myself

above average, and I see improvements in productivity around 2x-10x (perhaps

higher) in my own work.‖

Hand-coding a GUI is a time-consuming task that often requires many iterations

and rework. ―Can you be productive on intuition and experience alone –

dropping widgets on the shell and trying to make the GUI look the way you

want?‖ asks developer Jason Morris. GUI building tools allow developers to see

how the GUI

Java GUI Building Tools

Provide: Increased productivity

Ease of use

Balance between creativity

and development

Quick recovery of tool costs in both time and frustration saved

"GUI building tools provide an increase in productivity of between 2x – 10x faster than hand coding."

Ben Galbraith

http://weblogs.java.net/blog/javaben/archive/2005/08/successful_gui.html


GUI Builders: Why They are Better than Hand Coding

looks as they are creating it. ―Laying out your GUI is a visual task. Use a visual tool!,‖

states Joshua Marinacci in his blog.

While developers may have design sense, most are not trained in graphic design,

and GUI design has specialized knowledge requirements. Jason Morris states,

―Coding Java GUIs is so tedious and requires such detailed knowledge of the AWT,

Swing, and SWT APIs that it has become a specialty within the Java programming

community.‖ GUI building tools provide a balance between creativity and

development, helping developers build user interfaces without drowning in the

minutia of the Java GUI libraries. ―It’s perfectly acceptable to lay out your GUI

initially…and then add tweaks afterward,‖ states Joshua Marinacci, 6/14/07 in his

blog.

Developers and enterprises striking this balance with GUI building tools quickly

recover the cost of a GUI building program as the result of saving both time and

frustration.

Analysis of GUI Builder Tools

A case can be made that any GUI builder that automates creating and modifying a

GUI is better than hand coding. However, there is a wide variance in GUI building

tools. A good GUI builder is easy to use and provides flexibility across different types

of UI frameworks, letting the developer learn it once and having the tool automate

much of the process. GUI builders should provide good support for layout managers

and should also support external layout managers. In addition, GUI builders should

provide full-support for standard components and custom components that follow

Java Beans specifications. Refer to the sidebar for a quick ―Top 10‖ feature list.

Features of a Good GUI Builder

GUI building tools allow developers to spend less time and money creating Java

GUIs. With the advancements in today’s GUI building tools, developers can add GUI

elements from within a design view without having to hand code the GUI, as well as

easily modifying the code. Here are some specific features to look for in a good GUI

building tool as well as some things to watch out for:

WYSIWYG visual designer and editing – A GUI builder should take guessing out of building and modifying a GUI. It should contain both design and source views allowing developers to view content identical to the end result while the interface is being created.

Flexibility and consistency across frameworks – A good GUI builder is easy to use and provides flexibility across different types of UI frameworks, meaning that the tool has a flexible parser to parse its own code as well as code written by hand or by other GUI building tools. It also provides a consistent development experience no matter which UI framework is being used.

Bi-directional code generation (round-trip editing) – Bi-directional code generation is important so that the visual design and source are always synchronized no matter which you edit.

"Coding Java GUIs is so tedious and requires such detailed knowledge of the AWT, Swing, and SWT APIs that it has become a specialty within the Java programming community. Developers need to be able to build user interfaces without drowning in the minutia of the Java GUI libraries."

Joshua Marinacci

Top 10 Features of a Good

Java GUI Building Tool

1. Contains flexible code parser—can parse its own code as well as code written by hand or other GUI builders

2. Maintains only one representation of the GUI code

3. Reads and writes code in any format or style

4. Makes micro edits to the source GUI code (smallest possible edit to make a code change)

5. Offers easy-to-use Internationalization and Localization tools

6. Provides visual inheritance that lets code features be easily inherited from a parent – child hierarchy

7. Contains support for UI Factories and reusable customized GUI elements

8. Provides a Morphing tool to easily change one widget type into another

9. Fully supports all standard

widgets and layout managers as well as select third-party widgets and layout managers

10. Provides WYSIWYG visual

designer and bi-directional code

generation

http://weblogs.java.net/blog/joshy/archive/2007/06/a_response_to_g.html




TIP – Be Aware: Some GUI Builder tools do not have this feature and the source code can get out of sync with the visual design. If the code and design do not match, it requires manual re-work, which results in lost time and frustration.

Drag-and-drop – A GUI Builder tool should permit developers to implement exactly what they want, where they want it, by simply dragging and dropping GUI elements into the design layout view.

Layout managers and widgets: A program written in Java may be deployed on multiple platforms. If standard user interface design techniques are used specifying absolute positions and sizes for UI components, the interface won't be portable. Layout managers and widgets are provided in GUI builder tools to help ensure that the interface will be portable.

o Layout managers are software components used in widget toolkits which have the ability to lay out widgets by their relative positions without using distance units. It is often more natural to define component layouts in this manner than to define their position in pixels or common distance units.

o Widget (or control) is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user, such as a window or a text box (other examples include button, slider, drop-down list, menus, tree view, icon, scrollbar, etc.) The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given kind of data. Widgets are basic visual building blocks which, combined in an application, hold all the data processed by the application and the available interactions on this data.

Wizards, builders and templates – These features give developers a head-start in designing a GUI because they don’t have to re-create the basics. Tools with these features promote consistency in a company’s applications, plus help all developers adhere to design best practices.

Reverse engineering capabilities – A good GUI builder allows a developer to read and write code that comes from a variety of sources —such as code generated by other GUI builders, code created by hand, or code created in another application. This feature means that developers do not have to start from scratch on developing the GUI because they can use the existing code as a starting basis, especially with a product that is already in production. Tip – Be Aware: Many GUI building tools can only read their own code format and will not provide the ability to reverse-engineer GUIs.

Ability to make it global – Localization and internationalization capabilities refer to the process of designing a software application so that it can be adapted to various languages and regions without engineering changes.

Quality assurance – A good GUI builder provides the ability to ―run‖ the application within the design environment for basic testing. This saves developers time and companies money because they don’t need the overhead and real estate to run a separate application to see that the GUI displays correctly.

Features of an

Inadequate Java GUI

Building Tool

1. Stores information in secondary XML file which parallels the Java code

files can get out of sync

if you lose metadata XML file, you can’t edit the Java GUI code

2. Contains an inadequate parser which can’t even parse its own code or other code

3. Locks GUI code into one format; generates code in only one way

4. Contains protected blocks of code that can’t be modified

5. Makes major modification to GUI source code

6. Lacks tools to easily morph events or make language changes for localization

7. Lacks the ability to easily customize components, panels or other GUI elements

8. Requires user to manually build a GUI for the first time

9. Supports only a subset of standard widgets and layout managers

10. Doesn’t integrate into popular

Java IDEs

http://en.wikipedia.org/wiki/Widget_toolkit

http://en.wikipedia.org/wiki/Widget_(computing)

http://en.wikipedia.org/wiki/Pixel

http://en.wikipedia.org/wiki/Graphical_user_interface

http://en.wikipedia.org/wiki/Window_(computing)

http://en.wikipedia.org/wiki/Text_box

http://en.wikipedia.org/wiki/Direct_manipulation



Minimal code changes – A good GUI builder should make minimal edits to the source code and maintain changes made by developers to customize the GUI.

Tip – Be Aware: Many GUI building tools ―protect‖ the GUI code and don’t allow modifications to be made. Some tools allow developers to make changes such as formatting edits, but then don’t save these changes. This limits the amount of customization that developers can do and results in lost changes and a need for possible rework.

Morphing tools – A good GUI builder should contain advanced features such as a Morphing tool that allows the developer to change one widget type into another.

Visual inheritance – A good GUI builder should support visual inheritance so that code can be inherited from a parent-child hierarchy. Visual Inheritance is implementation inheritance of visual elements such as windows and panels in derived GUI classes. Inheriting forms is a powerful feature that allows standardization of common GUI elements on a window that may be changed in one place rather than in countless individual windows. Visual inheritance makes it easy to create code once and reuse that functionality in sub-classes.

Seamless IDE integration - When selecting a GUI building tool, it is important to look for a tool that is well-integrated to IDEs (such as Eclipse, JBuilder

®,

MyEclipse™, etc.)

Good reputation and software support – When evaluating GUI builders, companies should look for tools that have a low frequency of software problems. In addition, it is important that the company selling the GUI builder does regular update releases and provides reliable and responsive support.

Commercial vs. open source – It is important to consider not only cost but support when selecting a GUI building tool. In open source software, quality can vary dramatically, and the software may not stay in sync with the current version of your IDE. Support can be less reliable, when it occurs at all. Additionally, open source tools will often support only the latest release of Eclipse and companies that are not constantly moving forward can be left behind.

With the wide range of features available, we have provided an overview to show

how much more efficient today’s GUI builders are compared to hand coding. Using

GUI building tools to automate much of the process, developers can often add

features that may not previously have fit into the production schedule. Essentially, the

automation saves countless hours and makes life easier. The remainder of the paper

introduces the Instantiations WindowBuilder Pro™ suite of GUI design tools.

Instantiations, Inc. has extensive experience in developing leading-edge software

products, including products that support Eclipse and Eclipse-based environments.

Things to Consider

When Evaluating a GUI

Builder Vendor

Look for GUI building tools with a low frequency of software problems

Make sure the vendor does frequent software releases and provides good support

If the tool is open source, make sure that support is adequate for your needs

Make sure the software stays in sync with the latest version of the IDE, such as Eclipse

Instantiations has over two decades of experience in developing software, services, and technologies. Since 1999, Instantiations has been actively involved in various Eclipse boards, committees and software development initiatives, and is a Solution Member of the Eclipse Foundation. Instantiations has applied its software expertise in developing the WindowBuilder Pro GUI building tool.

WindowBuilder Pro: An Innovative Solution for Building Automated Java

GUIs

Instantiations: www.instantiations.com Copyright 2009, Instantiations, Inc. All rights are reserved. WindowBuilder is a registered trademark of Instantiations. All other trademarks are the property of their respective owners.

Why WindowBuilder Pro™ Makes it Easy to Start using a

GUI Designer

Increase Productivity

WindowBuilder Pro eliminates the need to manually

create and test high quality Java interfaces by

automating much of the process. With

WindowBuilder Pro, developers can use the built-in

visual designer wizards, editors, and an intelligent

layout assistant to create a complicated interface in

minutes. Automating GUI development dramatically

increases the productivity of the developer and

reduces the time required to create and maintain

interfaces. See the list of WindowBuilder Pro

features in the sidebar.

Using WindowBuilder Pro lets developers focus on

creating application-specific functionality rather than

coding the low-level logic required for GUIs to run.

―WindowBuilder delivers the kind of GUI building productivity that we used to

have before we converted to Java. WindowBuilder not only dramatically

improves productivity for design and maintenance, but it also enables us to

significantly improve the look-and-feel of our GUIs without costing days of

coding. Until discovering WindowBuilder, I had forgotten just how much fun and

easy it can be building Java GUIs,‖ states Sally Rich, senior software engineer

at RSS Solutions Inc.

Flexible Support for UI Frameworks, IDEs and Applications

WindowBuilder Pro provides flexibility across different types of user interface

frameworks. Developers can easily choose the type of Java GUI to create,

because WindowBuilder Pro works with SWT, Swing and RCP for desktop

applications. It also supports the Google Web Toolkit (GWT) for web

applications.

Developers have a wide degree of flexibility and choice for the Java IDE they

choose to use in developing GUIs. WindowBuilder Pro plugs into Eclipse

[staying in sync, WindowBuilder Pro currently fully supports Eclipse 3.4 and 3.5,

and is backward compatible to v3.0 (SWT/Swing), or 3.2 (GWT)], JBuilder 2008

and to MyEclipse 5.0 or higher.

―WindowBuilder delivers the kind of GUI building productivity that we used to have before we converted to Java. WindowBuilder not only dramatically improves productivity for design and maintenance, but it also enables us to significantly improve the look-and-feel of our GUIs without costing days of coding. Until discovering WindowBuilder, I had forgotten just how much fun and easy it can be building Java GUIs.‖

—Sally Rich, senior software

engineer at RSS Solutions Inc.

Benefits:

WindowBuilder Pro: 1. Increases productivity

2. Improves flexibility

3. Provides ease of use

4. Speeds GUI creation

5. Reduces development costs

WindowBuilder Pro

Features:

Bi-directional Code Generation - read and write almost any format and reverse-engineer most hand-written code

Internationalization (i18n) / Localization - externalize component strings, create and manage resource bundles.

Custom Composites & Panels - create custom, reusable components.

Visual Inheritance - create visual component hierarchies.

Event Handling - add event handlers to components.

Menu Editing - visually create and edit menubars, menu items and popup menus.

Morphing - convert one component type into another.

Factories - create custom widget factories.

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/bidirectional.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/internationalization.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/internationalization.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/custom_composites.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/visual_inheritance.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/event_handling.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/menu_editing.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/morphing.html

http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/features/templates.html


WindowBuilder Pro: An Innovative Solution for Building Automated Java GUIs

In addition, WindowBuilder Pro works with various IBM® Rational

® IDEs. In

2008, WindowBuilder Pro achieved the ―Ready for IBM Rational Software‖

validation which differentiates software that can be effectively integrated with

products based on the IBM Rational Software Delivery Platform products,

including Rational Application Developer.

One of the design components of WindowBuilder Pro, Swing Designer™ is also

a native part of JBuilder® 2008. ―CodeGear (now Embarcadero) recently

reviewed all available commercial and open source GUI builders (including

Matisse) and selected Swing Designer as their new GUI builder for JBuilder

2008,‖ states Eric Clayberg, VP of Product Development for Instantiations.

Visually Design Applications and Automatically Generate Java Code

WindowBuilder Pro is designed from the ground up for creating rich and highly

functional application interfaces. Developers can visually design an application

in the Design View and automatically generate/view the Java code in the Source

View. Easily create an application GUI by dragging widgets from the Palette and

dropping them into the Sample Application window, then manipulate them in the

PropertyEditor. The GUI will display as it is built and can easily be modified by

moving items around on the screen, with no need for manual coding.

Figure 1: WindowBuilder Pro is used to create GUIs

The WindowBuilder Pro designer provides a WYSIWYG view for all Swing, SWT

and GWT elements. The Design view shows real Swing/SWT/GWT controls,

not fake mockups, so all properties are reflected graphically.

Benefits:

Using WindowBuilder

Pro:

WindowBuilder Pro is an easy to use tool that helps automate GUI creation

You can lay out a GUI visually in the Design view and code is automatically created in the Source view

WindowBuilder uses a drag-and-drop method that makes it quick and easy to layout a GUI

WindowBuilder provides a WYSIWG view for Swing, SWT and GWT elements



‖The GUI editor just rocks. I can drag and drop layouts and composites and

controls - and the visual hierarchy of components really helps me understand

how the underlying code base hangs together. The Properties/Events tab is also

very nicely implemented (including changing properties of your layout data). You

can also right-click on an object and select the event you want to handle -

whatever works for you!,‖ states Glen Smith is his blog posting.

Read and Write Almost Any Style

WindowBuilder Pro takes an entirely different approach on how it reads and

writes code. It is also well regarded as having the most flexible and clean code

generation of any GUI builder in the industry, winning the Eclipse Magazine’s

Reader’s Choice Award for best Eclipse Add-on in 2006 partially based on that

fact. WindowBuilder Pro can emulate the code generation of any other GUI

builder (including older versions of JBuilder, NetBeans, Matisse,

JFormDesigner, Jigloo, VisualAge Java or the Eclipse Visual Editor) as well as

other code styles. Developers have even noted that they gained tips about

writing maintainable Java GUIs by studying how WindowBuilder Pro structured

its output and reviewing the source code.

According to Eric Clayberg, Instantiations, ―WindowBuilder Pro is like the

Rosetta Stone of GUI Builders; it can read and write Java-based GUI code in

any format (such as NetBeans, JBuilder, etc). This is a powerful feature because

users can configure WindowBuilder to match almost any format they want to

use.‖

Bi-Directional Code Editing

WindowBuilder Pro’s Bi-Directional Code Generation (also called round-trip

editing), gives developers complete freedom to change and refactor the

generated code and see changes immediately reflected in the visual designer.

This round-trip editing lets the developer edit the GUI in either the graphical

layout or the code, and they are always kept 100% in sync. Developers can

easily add controls using drag-and-drop, then add event handlers to the

controls/components and change various properties of controls using a property

editor – all resulting in easy navigation and manipulation.

At the core of the bi-directional, reverse engineering capabilities in

WindowBuilder Pro is an extremely powerful parser. Developers can edit and

even refactor the generated code and then can continue to edit it in the design

mode. Developers can also add their own code without fear that the tool will

arbitrarily overwrite it. WindowBuilder Pro is the only Java GUI builder available

today that can actually do that. Many other tools have very limited parsers and

generally limit use to a single specific code format and limited "safe zones" in

which you can make changes. There are no "don't touch this" warnings in the-

generated code, because WindowBuilder Pro is designed to understand code

changes made by developers.

―WindowBuilder Pro takes an entirely different approach on how it reads and writes code. WindowBuilder is like the Rosetta Stone of GUI builders, it can read and write Java-based GUI code in any format (such as NetBeans, JBuilder, etc). This is a powerful feature because users can configure WindowBuilder to match almost any format they want to use.‖

—Eric Clayberg, Instantiations

Benefits:

Bi-directional Code

Editing:

Make changes and immediately see results

Source code automatically generated as GUI is laid out

Source and design code are kept in sync—changes in one are reflected in the other

Only one Java source file is maintained

http://blogs.bytecode.com.au/glen/2005/04/12/swt-designer_is_unbelieveably_good_software-.html



WindowBuilder supports free-form code editing (make changes anywhere...not

just in special areas), and allows the developer to rename or subdivide methods

in most user refactorings without a problem.

Many GUI builder tools maintain a secondary metadata file that parallels the

Java code, which results in having the same information stored in two places.

This can cause problems because it requires keeping the two files in sync. If the

metadata file is lost, then the Java GUI code can’t be edited. This can never

happen in WindowBuilder Pro because only a single source file is maintained.

Figure 2: Bi-Directional Code Layout

Layout Managers and Widget Kits

A program written in Java may be deployed on multiple platforms. If standard

design techniques are used specifying absolute positions and sizes for interface

components, the interface won't be portable. What looks fine on the

development system might be unusable on another platform. To solve this

problem, Java provides a system of portable layout managers. Developers use

these layout managers to specify rules and constraints for the layout of a GUI in

a way that will be portable.

WindowBuilder Pro includes Swing and SWT Layout Manager components that

can be used to quickly lay out widgets by their relative positions, without using

distance units, so that the GUI will be portable. See the sidebar for a list of some

of the available Layout Managers.

GWT contains a comprehensive collection of various Panel (layout) types such

as Grid, FlexTable, and TabPanel. The GWT Designer component product

provides a rich editing experience with support for all panel types with

convenient and appropriate layout edit policies. WindowBuilder Pro provides

support for all Swing and AWT widgets, SWT widgets and basic support for

GWT-Ext and MyGWT.

Benefits:

Swing Layout

Managers: JGoodies FormLayout

GroupLayout

Null/Absolute

FlowLayout

BorderLayout

GridLayout

CardLayout

SprintLayout

GridBagLayout

BoxLayout

SWT Layout Managers: GroupLayout

FillLayout

Null/Absolute

RowLayout

GridLayout

FormLayout

GWT Panels: Grid

Flex Table

Tab Panel

Dockpanel & StackPanel

TabPanel & DeckPanel

SplitPanel

DisclosurePanel

and many more



Layout managers can provide the following advantages:

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.

Ability to position easily, without trying to hit an exact position. This is

especially true for grid-based layout managers, where developers need

to point at a cell to align components in the cell, with all calculations of

precise positions done by the layout manager itself.

GUI builders should provide good support for layout managers and should

also support external layout managers. In addition, GUI builders should also

provide full support for standard components and custom components that

follow Java Beans specifications. Many GUI builders don’t provide either of

these support features— WindowBuilder provides both,

Templates, Wizards, Custom Composites and Panels

WindowBuilder Pro contains a number of wizards to help automate GUI building,

as well as factory support that can be used to create reusable custom widget

libraries. In addition, WindowBuilder Pro can create custom, reusable panels

using any Swing, SWT or JFace components. For example, custom composites

might be used to create a custom address component consisting of text fields

such as city, state, and zip. Once these custom panels are created, they can be

easily reused in various elements of the interface.

Reverse Engineering Capabilities

Inadequate GUI building products often generate code in only one format. In

addition, many GUI building tools can only read their own code format. Both of

these features lock users into doing things according to the product

requirements which may not match the desired code format. This tool

inflexibility also requires that developers do many steps manually, which results

in wasted time and possible rework.

WindowBuilder Pro contains reverse engineering capabilities that make it easy

to build a GUI from existing code. With the industry’s most advanced GUI

parser, WindowBuilder Pro can not only parse code that it generates, but can

also parse code created by any other GUI builder. In addition, it can parse 80-

90% of code generated by hand. The powerful parsing tools in WindowBuilder

have even been used to reverse-engineer code in situations where the metadata

file associated with other GUI tools has been lost, allowing the Java code to be

regenerated.

Benefits:

Reverse Engineering:

Lets you create a GUI from existing code

Can parse code from other GUI builders

Can parse up to 80-90% of code generated by hand

Can be used to reverse engineer a GUI where Java code has been lost

Frees you from vendor lock-in



Micro Editing

Many GUI builder tools contain protected blocks of code generated by the tool.

Most GUI builders do not allow the user to make arbitrary edits to the generated

code. Any modifications made outside of these so-called protected blocks are

lost the next time the tool regenerates the code, which means any modifications

made by the user are lost. This is one of the most common complaints levied

against Java GUI builders.

WindowBuilder takes a different approach. The tool knows which lines of code

are GUI-related and parses only those. It ignores non-GUI code added by the

user and preserves that code any time it edits the file. WindowBuilder Pro also

uses a style of micro editing that ensures that the smallest possible change is

made to the source, again preserving all user code and formatting. This

approach saves both time and money because developers can modify the code

and their changes are retained.

―WindowBuilder Pro is the best tool out there for building Java, SWT or GWT

GUIs. Pre-existing GUI code can be modified by the tool and there are no

additional untouchable sections created by the tool like other GUI programs,‖

states Danny D’Amours, Fredericton, New Brunswick, Canada in his August 20,

2008, Bullroarer blog.

Widget Morphing

It is frustrating and time consuming to make GUI changes such as changing a

Group to a Composite or a Combobox to a List after GUI design is complete. It

is very easy to remedy this using WindowBuilder Pro’s Widget Morphing feature.

This tool allows developers to morph similar components from one type to

another. When a component is morphed from one type to another, the

properties that are the same between the two types are kept.

Example: The following is an example of how the morphing tool might be used.

A developer lays out a complex screen using a list box, sets up its properties

(font, color, items list, etc.), then adds some events. The developer runs out of

space in the interface window and needs to use a drop-down list instead. The

morphing tool in WindowBuilder Pro lets the developer easily replace one widget

type with another and map over all properties and events, rather than deleting

the original widget and creating a brand new one with all the same properties.

Using the Morphing tool allows quick design changes without having to re-create

all the components, saving both time and money.

Benefits:

Micro Editing:

WindowBuilder code is not protected and can be freely edited

WindowBuilder uses a micro editing approach to maintain all of the user’s code changes

Widget Morphing:

Allows morphing of similar components from one type to another

Properties that are the same between the two are kept

Allows quick design changes without having to recreate all the components



Figure 3: WindowBuilder Morphing Tool

Visual Inheritance

Visual Inheritance is implementation inheritance of visual elements such as

windows and panels in derived GUI classes. Inheriting forms is a powerful

feature that allows standardization of common GUI elements on a window that

may be changed in one place rather than in countless individual windows. For

example, imagine that you need to re-order the buttons on several dozen

windows so that the buttons flow left to right as Help, OK, and Cancel instead of

OK, Cancel, and Help. If you use a base GUI class, you could change the order

on the base window in one place and have it update all of the derived windows

automatically.

WindowBuilder Pro contains an advanced Visual Inheritance feature which is

relatively unique in GUI building tools. The Visual Inheritance feature allows

common elements in a hierarchy to be inherited by sub-classes. It is common in

sophisticated GUIs to create hierarchies of windows/dialogs with common

elements inherited from a common super class. Handling this correctly is

difficult. For example, inherited (private) components from a super class should

be visible in the design view, but not be editable. The Visual Inheritance feature

in WindowBuilder Pro is efficient, because it allows the reuse of components,

saves time, and can result in a more sophisticated, better-factored design. It

also contributes to consistency of GUI designs.

WindowBuilder Pro supports visual inheritance of SWT Shells and Composites,

Swing JFrames, JDialogs, JApplets and JPanels. All inherited widgets are

visible and can access inherited custom properties. Inherited widgets appear in

the hierarchy tree with a special indicator.

Benefits:

Visual Inheritance:

Allows common elements in a hierarchy to be inherited by sub-classes

Provides efficiency and allows reuse of components

Saves time and can result in more sophisticated, better factored designs

Contributes to consistency in GUI designs



Localization and Internationalization

Localization and internationalization capabilities refer to the process of

designing a software application so that it can be adapted to various languages

and regions without engineering changes. ―Besides the economic benefits,

some countries require products to pass certain localization requirements set by

the government before it can be introduced to their markets,‖ reports Dan Kehn,

Scott Fairbrother, and Cam-Thu Le in their Eclipse tutorial on

Internationalization.

WindowBuilder Pro has powerful internationalization (i18n) support that helps

automate the localization process. It can externalize component strings, create

and manage resource bundles for multiple languages, and edit translated strings

in context. WindowBuilder Pro allows developers to switch which language is

used to render the GUI on the fly to see the effect of different length strings.

WindowBuilder makes it easy to support different languages by adding existing

locales or creating new locales from existing language and country codes.

QA Testing

WindowBuilder Pro can save both time and money in QA testing because

developers can ―Run‖ the application within the design environment for basic

testing. In WindowBuilder Pro:

Preview Mode: Execute and test Java GUIs instantly within the design

environment—this lets developers see a design "running" without the

need to launch the application.

GWT Application Launching: GWT Application launch configuration

includes a launch shortcut for fast launching using a pop-up menu or hot

key in an editor.

GWT Designer CSS Support: GWT Designer can apply CSS to the

design view, so developers can see an exact rendering of how a screen

will look in the browser. They can edit CSS files using the CSS Editor

and edit CSS properties from within the graphical designer.

For more extensive GUI testing, WindowBuilder Pro works hand-in-hand with

Instantiations’ WindowTester Pro product. Download a complimentary trial at:

http://www.instantiations.com/windowtester/download.html

Factories

WindowBuilder Pro supports the creation of custom factory classes and

methods. This is a convenient way to create customized, reusable versions of

common components. It allows developers to create a static factory method

from any widget, morph any widget into a factory instance, or add any factory

component to the palette. This feature saves time and is a good method of

building versions of commonly used components.

Benefits:

Localization

Powerful localization and

internationalization tools make it easy to change the language associated with text

QA Testing

Save time and money by testing

the GUI within WindowBuilder Pro

Factories

Supports creation of custom

factory classes and methods

Provides the ability to create a

static factory method from a widget or morph a widget into a factory instance

Allows adding a factory

component to the palette

http://www.eclipse.org/articles/Article-Internationalization/how2I18n.html



http://www.instantiations.com/windowtester/download.html



Web Applications with GWT Designer

The GWT Designer component product enables Java developers to quickly

create Ajax web applications using the GWT framework. GWT Designer gives

developers complete control over user interface construction through intuitive

visual design, code generation, and access to the rich and high performance

Google Web Toolkit framework.

In his blog post evaluating tools, Hasan Turksoy recommends two software

tools, “My second tool is GWT Designer. It's an Eclipse-based GUI building

plugin for GWT apps. Though it is not free, you can be sure it deserves all the

money you spent for it. It provides bi-directional code generation between

designer and your client Java code (and even your I18N bundles). With this

plugin, you can focus on creating your GWT apps without worrying about the

complexities of Ajax coding and time consuming user interface design tasks.

Although it includes some third party library integrations (like GWT-Ext), you can

add extra widget libraries onto designer panel. I'm currently working on my first

GWT app. When thought about my GUI disability, GWT Designer increased my

speed at least 5 times.‖

Summary

Computer users today require an easy-to-use interface with rich-application

features. Businesses increasingly collect valuable data in pre-populated drop-

down menus, radio buttons and checkboxes to pass to a database which is

used to analyze the collected information. In the past, creating a suitable

graphical user interface required time-intensive hand coding that was cost-

prohibitive. With the introduction of graphical GUI design tools, the landscape

has changed. GUI building tools allow developers to spend less time and money

creating Java GUIs, because they can focus on creating application-specific

functionality rather than coding the low-level logic required for GUIs to run.

Instantiations’ award-winning WindowBuilder Pro software allows developers to

quickly create GUIs that meet business requirements. WindowBuilder Pro is a

GUI builder tool that seamlessly integrates into any Eclipse-based Java™

development environment, adding powerful capabilities like a visual design

editor, wizards, intelligent layout assistants and internationalization. Using

WindowBuilder Pro, developers can use the visual designer to create a

complicated interface in minutes, with the underlying Java code automatically

created in a Source view.

Benefits:

GWT Designer:

Designed as a GUI building tool for Google Web Toolkit

No need to write Java code; GWT Designer creates it

Generated code doesn’t require special libraries to compile and run

Can read and write almost any format

Acts as an automatic deployment tool to create a WAR file and upload it to a server

―WindowBuilder Pro has helped us to produce high-quality GUIs for important internal and customer projects in a very short time. In contrast to competitive offerings, WindowBuilder Pro has proven to be very robust and an excellent performer."

—Stu Shannon, staff software

engineer at Illumina, Inc.

http://www.instantiations.com/gwtdesigner/



WindowBuilder Pro increases productivity in creating and maintaining user

interfaces. ―Our customers manage complex workflows and massive datasets

using our genetic analysis platform,‖ said Stu Shannon, staff software engineer,

Illumina, Inc. ―They have rigorous expectations for ease of use in our LIMS and

data analysis software. WindowBuilder Pro has helped us to produce high-

quality GUIs for important internal and customer projects in a very short time. In

contrast to competitive offerings, WindowBuilder Pro has proven to be very

robust and an excellent performer.‖

Reverse engineering features in WindowBuilder Pro can read and write almost

any code generated by other GUI building programs or hand-written code. Bi-

directional code generation (round-trip editing) keeps the visual design and

source synchronized. WindowBuilder Pro also includes Localization /

Internationalization tools to speed the generation of GUIs for multiple locales.

Advanced features such as Morphing, Visual Inheritance and Factories further

automate the process of developing an interface.

"In 25 years of software development I have used a plethora of development

tools,‖ states John Bond. ―I can honestly say that WindowBuilder is head and

shoulders above anything I have used for serious development. The features I

particularly like include the bi-directional edit process, the native look and feel of

cross platform GUIs and the manner in which component management is greatly

simplified. It all adds up to allowing the developer to get on with the process of

creating an application rather than worrying about the technology beneath it."

Next Steps

Now that you have been introduced to WindowBuilder Pro and how it can help

developers automate the GUI building process, we encourage you to:

Read more about WindowBuilder Pro:

http://www.instantiations.com/windowbuilder

See web demos of WindowBuilder Pro in action:

http://www.instantiations.com/windowbuilder/demos.html

Download a free trial version of WindowBuilder Pro, and give it a try:

http://www.instantiations.com/windowbuilder/pro/download.html

References

A discussion of GUI Builder tools by Ben Galbraith, in his Successful GUI Building blog post: http://weblogs.java.net/blog/javaben/archive/2005/08/successful_gui.html

A recommendation for GWT Designer as published by Hasan Turksoy in his blog, at: http://www.jroller.com/hasant/entry/recommendation_serena_for_prototyping_gwt

―In 25 years of software development I have used a plethora of development tools. I can honestly say that WindowBuilder is head and shoulders above anything I have used for serious development. The features I particularly like include the bi-directional edit process, the native look and feel of cross platform GUIs and the manner in which component management is greatly simplified. It all adds up to allowing the developer to get on with the process of creating an application rather than worrying about the technology beneath it."

—John Bond, Developer

Instantiations' Team—Eclipse Experts:

Developed by authors of the popular book ―Eclipse Plug-ins, Third Edition‖

Development team with years of Eclipse development experience

Many developers are committers to the Eclipse open-source effort

http://www.instantiations.com/windowbuilder

http://www.instantiations.com/windowbuilder/demos.html

http://www.instantiations.com/windowbuilder/pro/download.html

http://weblogs.java.net/blog/javaben/archive/2005/08/successful_gui.html

http://www.jroller.com/hasant/entry/recommendation_serena_for_prototyping_gwt

http://www.jroller.com/hasant/entry/recommendation_serena_for_prototyping_gwt

http://qualityeclipse.com/

http://qualityeclipse.com/



A discussion of GUI layout by Joshua Marinacci in his blog http://weblogs.java.net/blog/joshy/archive/2007/06/a_response_to_g.html

A discussion on using a GUI designer by Glen Smith is his blog posting at:

http://blogs.bytecode.com.au/glen/2005/04/12/swt-designer-is-unbelievably-

good-software-.html

A testimonial stating ―WindowBuilder is the best tool out there for building Java, SWT or GWT GUIs.‖– Aug 20, 2008, Bullroarer blog, Danny D’Amours, Fredericton, New Brunswick, Canada http://danny.damours.net/wordpress/

Instantiations

Instantiations was founded in 1997, and first began developing powerful, easy-

to-use Java GUI development tools based on the Eclipse platform in 2003 for

Swing, SWT, RCP and GWT. With extensive experience in developing leading-

edge software products that support Eclipse and Eclipse-based environments

since 1999, Instantiations has been an active participant in the Eclipse

community and is a Solution Member of the Eclipse Foundation. Members of the

Instantiations team served on the original Eclipse Consortium Board.

Instantiations staffers contribute to a variety of Eclipse software development

projects and initiatives, and Instantiations is active in Eclipse-related events like

EclipseCon, EclipseWorld, Eclipse Summit Europe and Eclipse Demo Camps.


http://blogs.bytecode.com.au/glen/2005/04/12/swt-designer-is-unbelievably-good-software-.html

http://blogs.bytecode.com.au/glen/2005/04/12/swt-designer-is-unbelievably-good-software-.html

http://danny.damours.net/wordpress/

http://www.instantiations.com/press/archive_release/020620.html

Best Practices and State of the Art Tools for Modern GUI ... · ―Coding Java GUIs is so tedious...

Documents

Transcript of Best Practices and State of the Art Tools for Modern GUI ... · ―Coding Java GUIs is so tedious...