SpeedJG - XML based Java Swing GUI Builder

Java Swing GUI Builder - Introduction

In order that you become familiar with the handling of the SpeedJG GUI builder tool, this page is to introduce you to the basic essentials of the user interface, so that you are quickly in a position to develop your own Java GUI application.

The following picture shows the main window of the SpeedJG GUI builder, consisting of different areas of operation that are explained below.

Tree Navigation Panel

On the left-hand side you find a tree showing all the components your projects and GUIs consist of. As the structure of a Java GUI is built up from different components containing other components and so on, this structure optimally fits the structure of XML. Therefore all the meta data of your GUI project, i.e. the description of the components and their properties, are stored as XML and presented within the tree in their structural order with their name. All the menu and toolbar items found on the SpeedJG IDE correspond to the currently selected component within this tree, and within the context of the tree selection these menu and toolbar items are enabled or disabled. Thus e.g. if a JFrame is selected within the tree you are able to press the new JMenu button on the toolbar but you aren't if a JPanel is selected.

Editors Panel

The Editors Panel consists of different tabs showing you the components you're currently working on. The properties of the components will be defined here and are presented in respect of the component currently being edited. For example, a JFrame editor only shows those properties that make sense for a JFrame and and not all the Component and Container properties a JFrame as inheritor hypothetically accepts.

Thus the developer of a GUI is focused on the main properties when customizing a component, and he is not overstressed with all possible properties from the inheritance hierarchy in alphabetical order. Instead, only those properties which are relevant are presented and ordered by importance.

The buttons shown on the bottom of these editor tabs refer only to the active Component being edited and have the following functions:

• Save
  Saves the meta data into the project XML structure. Newly edited components do not become visible in the tree structure until this button has been pressed.
• Check
  Shows the current Component on the Check Panel. If this Component is a JFrame or JDialog it is shown as a separate window. The underlying process is that these components are built up on the fly by constructing them based on their XML meta-data information.
• Source
  Creates Java source code to build up the current Component. The source code is written on the Source Panel, and from there it can be saved as .java file or copied into your application.
• XML
  Creates XML formatted text containing the meta data of the current Component. The text is written to the XML Panel and from there it can be copied into an XML file defining a GUI to be dynamically loaded by your application later on.
• Exit
  Removes the current component tab from the Editors Panel.

The properties on the Editors Panel normally are self-explanatory and correspond to the properties the correlating Java Component understands. To activate a property the corresponding check boxes have to be marked.

There are, however, some virtual properties interpreted by the GUI builder to fulfill the requested feature:

Every Component has (and must have) a name that identifies it within the generated source code. This name becomes the variable name of the Component, and this is the name you use to fetch Components from a repository to get a reference to them.

The Dynamic check box is used to tell the GUI builder not to add this Component to its parent container but to store it in the repository in any case. So, for example, if you have a group of Components alternatively to be laid out on a container, you can mark them as Dynamic, and later on use that Component you want to be shared in a given context.

The SizeRatio property allows you to define the size (width and/or height) of a Component dependent on the size of its container.

X-MDR means x-axis multiply-divide ratio, and in the example above this component will become the width of one fifth of its parent container, and

Y-MDR means y-axis multiply-divide ratio, in our example half the height of the parent container.

If one of these width/height properties is not set, the corresponding Preferred Size property of the component is taken as the width or height.

The PlusX and PlusY values define how many pixels additionally should be added to (or subtracted from if negative) this width or height.

The Title property intrinsically belongs to the JTabbedPane, but it is defined within those Components to be added to a JTabbedPane, and is used only in this context.

This also is true for the Icon property in the above example. But I chose this example to demonstrate in general the usage of icons which are found on other property panels too. The button on the right allows you to open an embedded resource browser where you can search for icons in your file system and alternatively in your currently defined CLASSPATH. If the icon is selected from ClassPath or if you want the icon to be loaded from the ClassPath you have to mark the CP check box near the icon name. Thus you are able to deploy your icons within a .jar file and the GUI builder context and/or the generated code will load them from there.

While editing JList, JComboBox or JTree Components you may construct an underlying model based on a Text ItemSource or on a XMLFile ItemSource.

The example above shows how to construct a text-based DefaultTreeModel with Colors as the root node and red, green, blue as the leaves.

But like for icons you can also use the embedded resource browser to look for an XML file either in the file system or in your CLASSPATH. If you select this file the GUI builder constructs a tree model based on this XML file and visualizes all elements in it as nodes.

The Remarks property allows you to add comments to your component properties. This text is also visible as Java comment in the generated code.

Output Panel

The Output Panel is implemented as JTabbedPane. If any output is generated by the GUI builder, the corresponding tab will be selected automatically. These tabs are headed as:

• Console
  Used to record all the comments displayed on the Status Line of the SpeedJG application window.
• Error
  If any exceptions are thrown while working with the application, the message of this exception is written to the error tab.
• Warning
  Shows hints if any warnings are detected while generating source code or interpreting the XML meta-data structure.
• Check
  If you press the Check button, either from the toolbar or from the edit panel, the selected Component (including the sub-components contained) will be presented on the check panel, as you can see in the following example.
  
• Source
  When the source code is generated, it is written on a JTextArea lying on this Source tab. From here you can (via a popup menu) save the code into a .java file or copy the code to the system clipboard, and from there paste it into your .java file. Alternatively you may as well only select a fragment of the code and copy and paste it with your operating system inbuilt functionality.
• XML
  As with the source code, the XML tab shows the XML formatted structure from where you can copy and paste it into an XML file. Thus you are able to define your GUI as XML meta data and construct it at runtime without having to write any line of code.

Tool Bars

As mentioned above all the toolbar buttons will be activated/deactivated in dependency on the Component selected in the tree. That is to say, if a toolbar button is active it refers to the Component currently selected.

To give you a short overview of what these buttons mean and what functionality is associated with them, the events initiated by these buttons are explained below.

Open Project

Presents a file dialog you can select a SpeedJG project file from and visualizes the structure of this file within the tree panel.

At this point there is something to say about the structure of the XML meta data. As you can see on the first picture of this page, the root of this structure begins with SpeedGJ. Next to the root different projects can be made available, and not until you have opened a project element can you place your GUI components below them. So the project is the anchor of different GUIs and only a whole project can be saved to the file system; its file name becomes ProjectName.gpr.

Save Project

Stores the contents of the project currently selected on the hard disk. This button is activated only if the underlying meta data have been changed.

Exit Project

Removes the selected project from the tree. If the meta data of the project have been changed, you will be asked to save the contents before closing.

New Project

When pressed instantiates a new project editor on the Editors Tab.

Edit Project

Opens a new editor for the Project currently selected on the Editors Tab.

Cut Component

Removes the Java Component currently selected from the tree structure and stores the contents of this Component (and all of its sub-components) into a separate copy buffer. In addition there is a cut history buffer where up to the last 50 cut components will be stored and from where they can be restored if required.

Copy Component

Stores the contents of this Component (and all of its sub-components) into a seperate copy buffer.

Paste Component

Fetches the component structure currently located in the copy buffer and adds this structure to the component structure currently selected in the tree.

Move Up Component

Changes the order of Components at the same structure level by placing the Component currently selected before the preceding one.

Move Down Component

Changes the order of Components at the same structure level by placing the Component currently selected after the following one.

Open Cut-History

Opens a dialog from where a previously cut component structure can be selected. This structure is than stored into the copy buffer from where it can be pasted to any place of the current tree structure.

Edit Component

Opens a new editor for the Component currently selected on the Editors Tab.

Generate View-Code

Following the model-view controller pattern the view and controller-code generation is separated (the model code is up to you because it is not GUI specific). When you create this code you see that the controller is given a GUIObject representing the view. So the controller only sees those components he's interested in and we have a rigid separation of the view and the controller.

Generate Controller-Code

When activating this button you will first be asked within a little dialog which Listeners to implement for which components. Here you can select any combination of:

ActionListener and/or CaretListener and/or ChangeListener and/or ComponentListener and/or FocusListener and/or HyperlinkListener and/or InternalFrameListener and/or ItemListener and/or KeyListener and/or ListSelectionListener and/or MenuListener and/or MouseListener and/or MouseMotionListener and/or PopupMenuListener and/or TreeExplansionListener and/or TreeSelectionListener and/or TreeWillExpandListener and/or WindowListener

Generate XML

Prints the readable and parseable structure of the Component currently selected on the XML Panel.

Check Component

Instantiates a new Component from the selected XML meta-data structure on the fly. If this Component is a JFrame or JDialog it will be shown as a separate window. Otherwise it will be placed on the Check Panel.

The rest of the toolbar buttons are used to instanciate corresponding Component editors. These editors are customized with regard to the Component to be created. After editing this Component becomes part of the Component currently selected in the tree. So you are able to create the following GUI elements:

JFrame

JDialog

JDesktopPane

JInternalFrame

JMenuBar

JMenu

JMenuItem

JSeparator

JRadioButtonMenuItem

JCheckBoxMenuItem

JPopupMenu

JToolBar

JToolBar.Separator

JPanel

JSplitPane

JTabbedPane

JScrollPane

Box

JButton

JToggleButton

JRadioButton

JCheckBox

JLabel

JTextField

JFormattedTextField

JPasswordField

JTextArea

JEditorPane

JComboBox

JSpinner

JList

JTable

JTree

JSlider

JProgressBar