Java Swing GUI example by XML, How to use GridLayout and BoxLayout

Make It Simpler by Object Oriented Programming

Example 3: Java Swing GUI example by XML / How to use GridLayout and BoxLayout / ActionListener on JComboBox

In this example, we prepare 3 XML for the single Java Swing GUI, JPanel with GridLayout and BoxLayout. Each XML defines the different number of JLabel and JTextField (or JButton) within the JPanel. When the user selects the item from JComboBox, ActionListener asks the JPanel to reload the corresponding XML, and the Java Swing GUI will be updated on the fly. By GridLayout and BoxLayout, the pairs of JLabel and JTextField (or JButton) are placed gracefully in the cell of the matrix within JPanel.

You can download the free source code of this example at:

Download free source code

When you extract it, you will find the source code of the required classes along with the XML, property resource file and image file.

About XMLPanelEdit...

This example uses XMLPanelEdit. XMLPanelEdit consists of Java Swing GUI tool (Java Swing GUI builder) and abstract Java classes.

Java Swing GUI tool included in XMLPanelEdit is the XML editor for representing the JFC Swing GUI in XML.
By this XML editor, JPanel, JFrame or JDialog can have any LayoutManager, i.e. you can select FlowLayout, BorderLayout, BoxLayout or GridLayout.
By the LayoutManager, you can place JButton, JCheckBox, JRadioButton, JLable, JTextField or any other JComponents anywhere within JFrame, JDialog or JPanel.
Or, the Java components can be placed on the intermediate Swing containers, such as JTabbedPane, JSplitPane and JScrollPane.

The abstract Java classes in XMLPanelEdit represent JFrame, JDialog and JPanel. These Java classes parse the XML written by Swing GUI tool and generate your Java Swing GUI. And your Java Swing GUI can access all the JComponents placed on it.

If it is your first time to use XMLPanelEdit, please read through the articles and example below before going ahead.

Among them, Example 1 will be the good staring point for your Swing GUI development by XMLPanelEdit. So, please read at least Example 1 before you try this example.

Subject : Dynamic contents in JPanel

The main subject of this example is:

How to update the contents of JPanel

We will build a very simple property editor, which just writes the specified key-value pairs into the property file. To specify the property values, this simple editor shows the series of JTextField within JPanel.

Image of standard editor

The user can selects the level from JComboBox. Based on the selected level, the different set of JTextField will be shown on JPanel.

Image of simple editor

To update the contents of JPanel, we will prepare the 3 XML, each of which describes the structure of the above GUI. Whenever the item is selected from JComboBox, ActionListener on JComboBox is responsible for asking JPanel to update its contents. Then, JPanel will reload the appropriate XML on demand to update its contents.

In this JPanel, the series of JLabel (or JButton) will be placed along with the available JTextField. By the help of GridLayout and BoxLayout, these pairs of JLabel (or JButton) and JTextField are placed gracefully on the cell of the matrix.

Preparation

To try this example, you will need to download XMLPanelEdit. You can download the 30 days trial version at FREE from:

Java API Shop by OOP-Research

In addition, the free source code of this example is available at the link below:

Download free source code

When you extract the ZIP file for the example, the new directory:

DynamicGuiByXML

will be created. From the installation directory of XMLPanelEdit, please copy:

xmledit_try.jar
xmlrun_try.jar

to the extracted directory for this example.

ChildEditor

This class is the subclass of XMLPanel_1_0, and can generate the 3 different GUI on the fly. Under dist directory, you will find:

dist/gui/simple.xml
dist/gui/standard.xml
dist/gui/advanced.xml

Start XMLPanelEdit by:

java -jar xmledit.jar

Then, open the above XML and explore their structures. You will notice that they are very similar with each other.
To place the JLabel (JButton) along with JTextField, each of these XML defines the nested JPanel, i.e. while the enclosing JPanel has BoxLayout of X_AXIS (the horizontal direction), each of the 2 child JPanel has GridLayout of 1 column. In each XML, these 2 child JPanel have the same number of rows. By this way, JLabel (or JButton) and its corresponding JTextField are horizontally aligned on the same row. The column for JLabel (or JButton) and the one for JTextField are placed into the separated JPanel, because we'd like to make the width of JTextField wider than that of JLabel. If both columns are placed into the single JPanel, its GridLayout will allocate the same width to both of the columns. And this is not what we expect.
You will also find:

dist/gui/main.xml

, but please don't open it at this point (be patient).

The constructor of ChildEditor reads standard.xml as default, but you can let it to reload any of these 3 XML on demand through:

public void reset(String xml){ readXML(xml); iniParts(); }

Then, ChildEditor will update its appearance based on your request.
The source of this class is available under src directory. Within the source, please look into the implementation of:

public void iniParts()

Whenever this method invokes:

gui.getGUI(String name)

, it check if the returned object is null or not. And, only if the returned object is not null, this method casts the returned object to the appropriate type of object and add the ActionListener on it. By this way, ChildEditor can be ready for the different XML.

Anyway, let's compile this class. Under src directory, you will find the 2 UNIX shell script. Please open build_1.sh and edit it if required. This script compiles the source of ChildEditor and places the compiled class files into dist directory.

PropertyEditor

This class is the main window of this example and the subclass of XMLFrame_1_0.
Because EditRun.properties specifies dist as the project directory, the classes compiled by the previous step are visible to XMLPanelEdit. This means you can specify ChildEditor as the child JComponent within the XML for other GUI.
So, it's time to open:

dist/gui/main.xml

which refers ChildEditor as one of the child JComponent. The source of this class is available under src directory. When the items in JComboBox is selected by the user,

private void selected(){ String level=(String)(select.getSelectedItem()); child.reset("gui/"+level.toLowerCase()+".xml"); validate(); }

is invoked, which forces the instance of ChildEditor to reload another XML.

The rest of the implementation of this class is very simple, because this example is intended to show you the way to update the GUI by XML.
Please open build_2.sh and edit it if required. This script compiles the source of PropertyEditor and places the compiled class files into dist directory.
After compilation, please go to dist directory. Then, please open build.sh and edit it if required. This script will prepare the JAR file for the distribution.

Caution!

All the APIs for Servlet/JSP introduced by this web site are now included in Bento framework:

Simpler than JSTL or Apache Struts
MVC framework by HTML
Input validation from CGI FORM
Easy user authentication
Easy localization (L10n)

To download the APIs and source code examples, please visit the web site of Bento framework.

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