Nested structure

In this Java Swing GUI example, we will build some very simple text editor. It looks like this:

Let's think about how the Java components can be placed as above. Because JToolBar with Actions need to be placed on North part of BorderLayout, the main JPanel of this example editor needs to have BorderLayout. And, to make JTextArea scrollable, we need to place JTextArea within JScrollPane. So, the JPanel of this example has the nested structure as shown below:

On JToolBar, we'd like to place JButtons with slight spaces between them. And JLabel is required at the left side. JButtons can be created by adding Actions on JToolBar, so JToolBar of this example has the following structure:

To place JScrollPane and JButton with the vertical spaces of the same size, it is preferable for them to be placed on BoxLayout of Y_AXIS. Vertical spaces between them can be created by Glue. So, on Center part of the main JPanel, another child JPanel of BoxLayout should be placed. It looks like this:

Now that, we know the nested structure of the Swing GUI in our example editor.

Tree structure

Within the nested structure, each element is both the parent of some element and the child of another element (except for the most outer element, which is only the parent element). For example, JToolBar is the child of the main JPanel, but it is also the parent of Actions in it. From the view point of the relation between the elements, we can represent the nested structure in the Tree Structure. Then, let's convert the nested structure of the example to the tree structure. It will be something like:

Thus, we can represent the Swing GUI in the tree structure. And each leaf of this tree can have the property. This is useful, because each Java components on the Swing GUI has the properties. For instance, each JButton on JToolBar of this example needs to be specified the image file. Or, JTextArea on JScrollPane must be set as editable, because this example is the text editor. By representing the Swing GUI in the tree structure, these properties can be specified as the properties of each element in the tree.

Swing GUI in XML

Now that we know how the Swing GUI can be represented in the tree structure. Then, the next step is to write this tree structure in XML. OOP-Reserch has defined the DTD for this XML. It is available at our site. But you need not to be familiar with XML. To edit the XML compliant with this DTD, the XML editor is included in the distribution of XMLPanelEdit.

To start this editor, please edit EditRun.properties and specify your serial ID and project directory.

For details about project directory, please read the previous page.

You can start the editor either by:

java -jar xmledit.jar
Double click xmledit.jar if you use Windows OS

As for the trial version, JAR file is xmledit_try.jar instead of xmledit.jar.

All the XML for the Swing GUI of this example is already included in the distribution. Please open gui/example.xml by this XML editor. Then, the tree structure of this example is shown on the upper part. When you select the element on the tree, JButton for editing the element will be activated. Image of Tool related with element

Click it, then the property editor for the selected element is shown on the lower part. You can see the available properties and their current values of the selected element.

To select another element, you need to close the property editor in the lower part. You can close it by clicking Close button at the bottom.

Please walk through the tree freely. You can learn how this example is represented in the tree structure. Under gui directory, the XMLs for the 2 dialogs are also placed. So, don't forget to explore them.

For details about how to use this XML editor, please read How to use the XML editor. It is included in the distribution.

Tips for XML editor

As you know, JToolBar can be placed on either of North, East, West or South part of BorderLayout. To place JToolBar as the child Java component of JPanel, you need to set the Layout of the parent JPanle to BorderLayout. Otherwise, JToolBar will not appear on the list selection dialog of the XML editor.

The default value of Opaque property is always true. But for the JTextArea and JTextPane, setting Opaque property to true results in the corrupted GUI. So, please set Opaque property to false for them.

You can specify the URL of the image on JButton or JLable in the property editor. In usual, the image file will be included in the distribution JAR file. And the image file should be placed under project directory at the development time. So, the URL of the image file need to be the relative to the project directory. Note that the URL is different than the file path, and independent from the file system, i.e. regardless the OS, the file separator is always /. For instance, the image under image subdirectory can be referred by:

image/some.gif

, even if you are on the Windows OS.

Java and all Java-based trademarks and logos are trademarks or registered of Sun Microsystems, Inc. in the United States and other countries.

OOP XMLPanelEdit home page