2: How to use 'com.oopreserch.xml.edit.XMLPanelEdit'

In the previous page, I introduced how to write Java Swing GUI in XML. But, writing such an XML by the text editor may be very tedious and error prone.
But don't worry. 'com.oopreserch.xml.edit.XMLPanelEdit' is an easy-to-use XML editor.

Image of XMLPanelEdit
View Full image

It works like following:

To show the nested structure of our Java Swing GUI on the screen clearly, the upper half part of its window shows the tree-structure of the working Java Swing GUI.
When you select the element (node) on the tree-structure on the upper part, we can:
- Append the new element as the child (or brother) element of the selected element
- Remove the selected element
- Edit the attributes of the selected element.
The lower part works as the attribute editor for the selected element.
Whenever the new element is created or the selected element was edited, the structure of our Swing GUI now can be updated. The updated structure can be 'validated', i.e. we can check if it complies with the DTD or not. For example, JSplitPane must have just two child components. If the element of JSplitPane has only one child element, the updated structure is invalid at that time.
Once the structure of our Java Swing GUI become valid, our actual Java Swing GUI can be viewed, i.e. we can pre-view the working Java Swing GUI.
Once the structure of our Java Swing GUI become valid, it can be saved to the XML document on our file system.
The character encoding of our XML document can be specified at any time.

Note that the change to the structure of our Java Swing GUI is not written the file system immediately:

By the creation of the new element or the modification of the existing element, the on-memory structure of our Java Swing GUI is updated. The updated structure must be validated.
After the updated structure is validated, it can be written to the XML document on the file system.

To avoid the error, it is desirable to save only the valid XML. This is the reason of this two-phase-update strategy.

2.1: Add the new element, edit/remove the existing element

To add, edit or remove the GUI component, please select some existing element of the GUI tree. Based on the selected element, the appropriate buttons are activated.

As long as some element in the GUI tree is selected (when the corresponding attribute editor is shown in the lower part of the GUI), we cannot select another one in the tree. To select another element, please close the attribute editor (by clicking 'Close' button at the bottom). Then the currently selected element is de-selected and you can select another one.

Any of

Append child button
Insert younger brother button
Insert elder brother button

is clicked, the dialog for choosing the new component appears:

Image of XMLPanelEdit

View Full image

Based on the selected element, only the appropriate child components are listed on the dialog.

2.2: Edit the attributes of the element

View Full image

After the new component chosen on the dialog or when the 'Edit component button' is clicked, the attribute editor for the selected element is shown in the lower part of the GUI.
After we modified any of the attributes, the 'Update' button is activated.

Image of XMLPanelEdit

View Full image

2.3: Update and validate the structure

When 'Update' button is clicked, 'Validate button' on the toolbar is activated.

View Full image

At this point, only the 'on memory' GUI structure is updated. If the GUI structure is valid at this point, please click 'Validate button'. Then, 'View GUI button' and 'Save file button' will be activated. But there may be a case that it is not true. For example, 'ToolBar' must have at least one child on it, so the validation will fail if it has no child yet. Please continue to append, edit or remove the GUI components until the GUI structure become valid.

As long as some element in the GUI tree is selected (when the corresponding attribute editor is shown in the lower part of the GUI), we cannot select another one in the tree. To select another element, please close the attribute editor (by clicking 'Close' button at the bottom). Then the currently selected element is de-selected and you can select another one.

View Full image

Only after validated, we can save the GUI structure into the local file by clicking 'Save file'. Or, we can pre-view our GUI by clicking 'View GUI button':

Image of XMLPanelEdit

View Full image

2.4: Change the character encoding

We can change the charset of our editing XML at anytime. Clicking 'Change encoding button' will pop up the dialog for selecting the charset.

Image of XMLPanelEdit

View Full image

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