Easily switch from Visual Basic to a Swing-based platform

AbaGUIBuilder: An open source GUI builder for the Delphi and VB developer

When Abacus Research AG, a business software development company in Switzerland, decided to switch development platforms from Borland's Delphi to Java Swing, it found itself at a development crossroads. Our large application development team had many years of GUI development in Delphi, but little experience with Java/Swing, and we needed to port hundreds of Delphi applications to Swing within a tight schedule. After researching the GUI tools available at the time, we felt we could accomplish our goals by sponsoring a GPL (GNU General Public License) open source Java GUI builder that could help other application developers facing the same challenge.

The Abacus Java GUI builder, called AbaGUIBuilder, was designed to ease the development transition from Visual Basic (VB) or Delphi into Java Swing. This strategy has helped Abacus Research meet its delivery goals for its Java release, reduced development time, and allowed its application developers to focus on the business application instead of the intricacies of the Swing framework.

As illustrated in Figure 1, AbaGUIBuilder has most of the elements found in other development environments such as VB and Delphi. At the top-left corner of the window is the active object tree and below it is the Swing component palette. Located at the top center is the development panel, or "canvas," where all Swing components are dropped and instantiated. At the top right is a property editor. At the bottom is the Event panel, containing two tab pages: the Event Code editor, where you add event code for each individual visual object, and the Messages panel, which displays the AbaGUIBuilder's status messages.

Figure 1. The Abacus GUI builder. Click on thumbnail to view full-sized image.

Why write our own GUI tool?

Why did we choose to write our own tool? In the beginning, we decided our tool should include the following five requirements:

  1. Easy to use
  2. Little or no experience with layout managers required
  3. No experience with Swing required
  4. No need to output Swing code
  5. The UI could be separated from the business logic

During our evaluation of the GUI development tools available at that time, we found good IDEs that manufactured Java Swing code; however, they did not meet our first and last key requirements.

We defined easy-to-use as the ability of any developer, regardless of his or her Java Swing experience, to create a running GUI form within minutes, not hours, thus allowing the developer to concentrate on the business logic instead of the framework details. From the beginning, our developers wanted a WYSIWYG environment so they could visually predict how their applications would look and feel at deployment. As it turns out, this feature has saved them hours of development time. None of the tools we evaluated at that time provided this capability; the designed screen never matched the output screen and vice versa—this was a huge drawback for us. The AbaGUIBuilder handles this requirement with a preview mode so you can see how your application will look when you run it.

Why did Abacus Research require separation of the UI from the business logic? Because the company deals with ever-changing government regulations, such as taxes and payroll calculations, we need the ability to keep the UI intact while maintaining the rules and formulas in a separate wrapper module so, when the formulas change, the application JAR (UI) doesn't. Therefore, only the changing formulas must be tested, thus streamlining the release process.

To fulfill this requirement, the GUI builder was designed to compile the applications and events into an application JAR that hides all the GUI Swing code and requires a renderer class (AbaRenderer) to execute the application at runtime. With this approach, no Java code is written or manufactured.

No Swing experience required

To ensure a true WYSIWYG development tool, we decided to implement an XY layout manager with anchor support similar to the paradigm found in Delphi and VB. With this in place, the Swing JFrame becomes a canvas where the developer drops in Swing components to the JFrame's XY layout. With the XY layout manager, our developers don't need to understand Swing's unfamiliar and complicated layout managers, thus allowing our application developers to concentrate on the application UI and its business logic.

In fact, the AbaGUIBuilder features most of the Swing visual components, from panels to tab pages, as well as menu and menu items, database-aware components using Java Database Connectivity, JFreeChart component support, and the ability to import third-party visual libraries. All these components can be dragged from the component palette to the empty frame to create your GUI application.

Sample project: Tracking developers' contact information

The best way to demonstrate AbaGUIBuilder's rapid application development is to create a sample multipage tab panel application with a menu bar. First, you must place a JFrame object onto the empty form panel by selecting JFrame from the class palette and dragging it to the application canvas. Then, drag and drop all the visual components on to JFrame. Keep in mind that a JFrame must be placed first when you start a new project—the frame becomes your object canvas, as shown in Figure 2.

Figure 2. The application JFrame acting as the canvas. Click on thumbnail to view full-sized image.

Next, add a tab pane and two tab pages. Choose JTabbedPane from the Containers section in the component palette and drag it to JFrame1. Once the JTabbedPane is in place, activate JTabbedPane's pop-up menu and choose Add JATabPage to add the two tab pages to the panel.

Figure 3. To add tab pages: Right-click on the tab pane and select Add JATabPage. Click on thumbnail to view full-sized image.

Next, set the titles for each tab page by selecting TabTitle from the property table. Figure 4 illustrates the finished pages.

Figure 4. Empty tab pages ready for you to drop in the Swing components. Click on thumbnail to view full-sized image.

At this point, you have empty tab pages, where you can drop any of the Swing components from the class palette. In our sample application, the Developers tab page contains two panels with a series of JLabel and JTextField objects. You should be able to create an application form similar to the one in Figure 5 within minutes. As a visual application developer, you can appreciate the ease with which you can create a sophisticated GUI application with the Abacus GUI builder.

Figure 5. Your application in minutes. Click on thumbnail to view full-sized image.

It turns out that the IDE Rendering Mode is one of the most useful features in the GUI builder since it allows you to preview the application as you work. To activate IDE Rendering Mode, select the Run option from the toolbar or press the F9 key.

Figure 6. WYSIWYG: Check the look and feel while developing. Click on thumbnail to view full-sized image.

To save your work at this point, press Ctrl-S or choose the Save option, name the project devteam, and store it in the samples directory. After you've saved the project, look in the AbaGUIBuilder's samples directory and locate the file devteam.proj. The proj file is an XML file definition of all the classes, objects, objects' properties, and event code within your application. It is the flat representation of your visual project.

Adding event handlers

Adding event handlers to individual objects is a straightforward process. All you have to do is point to the object, pick the event you wish to trap from the event list, and write the appropriate Java code for the event. Once again, AbaGUIBuilder was designed to match the Delphi and VB paradigm. Our goal was to hide UI implementation details such as listeners from the application developer. For example, as shown in Figure 7, to activate a confirm dialog when the Exit button is pressed, select the actionPerformed event for the Exit button and add the following Java code:

 

String message = "Are you sure you wish to exit";

int answer = JOptionPane.showConfirmDialog(JFrame1, message, "Development Team Contact", JOptionPane.YES_NO_OPTION);

if(answer == JOptionPane.YES_OPTION) { // User clicked YES. System.exit( 0 ); } else if (answer == JOptionPane.NO_OPTION) { // User clicked NO. }

Figure 7. Add event handlers to the visual objects. Click on thumbnail to view full-sized image.

Keep in mind that event handlers are not active during IDE Rendering Mode, but they are executed at runtime, so you must compile and render the application to check the results.

Visually adding a menu and its menu items is another powerful and time-saving feature. All you have to do is select JMenuBar from the component palette and place it anywhere on the frame. Since JMenuBar always attaches itself to the top, XY coordinates are irrelevant. Next, right-click on top of the JMenuBar, and a pop-up, as shown in Figure 8, will activate. Add JMenu, the JMenuItem(s), and the event handlers with this menu.

Figure 8. Add menus and menu items visually. Click on thumbnail to view full-sized image.

Then, add the same actionPerformed code from the Exit button to the Exit menu item so a confirm dialog pops up when either the Exit button or Exit menu item is selected. And last, choose Save (With Compile) from the tool bar. Now you have produced your first AbaGUIBuilder application.

Where is the code?

We often hear the question: Where's the code? AbaGUIBuilder does not create Java code, but simply internally manufactures the Java code never to be seen or used. The GUI builder compiles the internal code into an application jar file that requires a separate wrapper program (renderer) to run. In fact, you can check the manufactured Java code the AbaGUIBuilder produces in the \bin\output directory. But remember, this code is not for external use; it's used only as a support tool, in case we have a problem in the manufacturing phase.

After compiling the project file (.proj), the GUI builder outputs two files, your application jar file and a declaration file (.decl). The decl file helps you later when you have to write the wrapper program. It contains all the object definitions and a general access function, getReferences(), and loads all the visual elements from the UI form to private variables. Later, we will use the private variables in the decl file in the section "Separating the Business Logic from the UI."

While developing, we recommend that you run your application jar file with the runproz script located in the sample directory. This script file sets the classpath, adds all the required JARs, and runs the application JAR with the sample Java wrapper. As illustrated in Figure 9, when running your devteam application, the command line looks like the following:

 runproz \abaguibuilder-1.7\samples\devteam.jar 
Figure 9. Your application at deployment. Click on thumbnail to view full-sized image.

It is important to understand the mechanism, albeit simple, behind the runproz script, so let's focus on the line "%JAVA_HOME%\bin\java.exe" exec %1. The exec is the sample AbaRenderer wrapper provided as the default loading mechanism, and the %1 parameter refers to the name of the AbaGUIBuilder application JAR. When the JAR path and name is passed to exec.java, it loads and renders the specified application JAR. That's how your application JAR runs.

Writing your wrapper

An AbaRenderer wrapper is a Java program that loads the application jar file using an AbaRenderer object. The wrapper is a simple program requiring a few lines of code:

 

public class exec { public static AbaRenderer m_AbaRenderer ;

// Assignments for this user interface public static void main(String[] args) { String docname = new String(args[0]); try { System.out.println("Loading.." + docname); m_AbaRenderer = new AbaRenderer(docname, true , null); boolean bTestLoad = m_AbaRenderer.load(); if(bTestLoad) m_AbaRenderer.renderInterface(); } catch(Exception e) { e.printStackTrace(); } } }

When deploying an application, you can choose to deliver it using the runproz and the sample wrapper, or you may manually write your own wrapper and classpath. We recommend writing your own wrapper when you want to add other features to your wrapper such as third-party library listeners, manual object initialization, such as adding data to a combo box, or, finally, to separate the UI from the business logic.

Separate the business logic from the UI

To separate the application UI from the business logic, you must write your own application wrapper. A simple example of separation is the initialization of the visual components in the application manually in the wrapper, outside the development tool and its project. If you recall, the GUI builder outputs a declaration file. This file has an access method that initializes a set of private variables that reference the visual objects on the form. The getReferences() method allows developers to access and manipulate each visual object on the form.

The exec2 program, shown below, initializes the combo box on the first tab, demonstrating a simple separation of application UI and business logic:

1 2 Page 1
Page 1 of 2