In this article we'll look at some features of jvider GUI that make it different from other GUI building tools.

We all know what GUI builder is supposed to do - build GUI for your application. But having said that we miss the whole lot of things that make one GUI builder different from another. Very often this difference is crucial.

First, let's define what is it that makes us look for GUI builders as opposed to simply coding the UI manually:

• First, we want the job done faster;
• We want the job to be simple and let us stay focused on the functional part of our project;
• We want it to be visual, so we can see what we are building on the screen, not just in our imagination;
• We want to be able to experiment with the design because we don't know what is the best solution until we actually see several layouts in action.

Note, that I intentionally did not include item like "we want to be able to do everything in GUI builder, so that we don't need to go into the code at all." Because, although the wish is understandable, it is not possible. And trying to achieve it many GUI builders fail by becoming slow and complicated and still not being even close to the goal.

Building GUI with layout managers has one distinct feature from building GUI with fixed positions. Layout managers define the exact position of your components, not you. In other words the task of the designer is not to define the locations of the components but rather the interdependence between the components.

So laying out the screen shown in the picture we don't mean that button 1 has to be exactly this size and located in that position on the screen. Rather we are saying that button 1 is next to button 2, they are the same height and button 3 is below buttons 1 and 2 and takes the width they both occupy.

Using the layout managers gives UI the flexibility to resize properly, adopt to text or font size changes and look good in different environments.

On the other hand, when using GUI builder, it takes away the freedom to freely move around with your components. The freedom that you have with graphical editors or GUI builders that use fixed positioning.

The concept of jvider GUI is truly revolutional in that sense. It gives you the feeling of actually positioning the components. Although it all smoothly comes down to the interdependence between the components.

A small example:

In the process of creating the button 3.

Extending button 3.

Dragging in newly created button 4.

Here is a fragment of the code produced from our example. Please note that we did not do any tuning of components fill mode or anchor position nor set variable names etc. Also to keep it simple we did not make it wrapped as a ready to compile frame or applet.

import javax.swing.JPanel;
import javax.swing.BorderFactory;
import java.awt.GridBagConstraints;
import java.awt.GridBagLayout;
import javax.swing.JButton;
JPanel pnPanel0;
JButton btBut0;
JButton btBut1;
JButton btBut9;
JButton btBut10;
pnPanel0 = new JPanel();
GridBagLayout gbPanel0 = new GridBagLayout();
GridBagConstraints gbcPanel0 = new GridBagConstraints();
pnPanel0.setLayout( gbPanel0 );
btBut0 = new JButton( "1" );
gbcPanel0.gridx = 0;
gbcPanel0.gridy = 0;
gbcPanel0.gridwidth = 1;
gbcPanel0.gridheight = 1;
gbcPanel0.fill = GridBagConstraints.BOTH;
gbcPanel0.weightx = 1;
gbcPanel0.weighty = 0;
gbcPanel0.anchor = GridBagConstraints.NORTH;
gbPanel0.setConstraints( btBut0, gbcPanel0 );
pnPanel0.add( btBut0 );
btBut1 = new JButton( "2" );
gbcPanel0.gridx = 1;
gbcPanel0.gridy = 0;
gbcPanel0.gridwidth = 1;
gbcPanel0.gridheight = 1;
gbcPanel0.fill = GridBagConstraints.BOTH;
gbcPanel0.weightx = 1;
gbcPanel0.weighty = 0;
gbcPanel0.anchor = GridBagConstraints.NORTH;
gbPanel0.setConstraints( btBut1, gbcPanel0 );
pnPanel0.add( btBut1 );
btBut9 = new JButton( "3" );
gbcPanel0.gridx = 0;
gbcPanel0.gridy = 1;
gbcPanel0.gridwidth = 3;
gbcPanel0.gridheight = 1;
gbcPanel0.fill = GridBagConstraints.BOTH;
gbcPanel0.weightx = 1;
gbcPanel0.weighty = 0;
gbcPanel0.anchor = GridBagConstraints.NORTH;
gbPanel0.setConstraints( btBut9, gbcPanel0 );
pnPanel0.add( btBut9 );
btBut10 = new JButton( "4" );
gbcPanel0.gridx = 2;
gbcPanel0.gridy = 0;
gbcPanel0.gridwidth = 1;
gbcPanel0.gridheight = 1;
gbcPanel0.fill = GridBagConstraints.BOTH;
gbcPanel0.weightx = 1;
gbcPanel0.weighty = 0;
gbcPanel0.anchor = GridBagConstraints.NORTH;
gbPanel0.setConstraints( btBut10, gbcPanel0 );
pnPanel0.add( btBut10 );

jvider really meets the requirements we set earlier in this article:

• You can put working design fast even without opening a single property window;
• It is extremely simple to use and understand;
• It is very visual, almost WYSIWYG;
• You have almost unlimited freedom to play around with your design. Something one wouldn't even think is possible for layout GUI builder.

March 3, 2003
Linas Urbonas
UAB "Midpoint systems"