This final article in the XML JavaBeans series builds on the previous two parts. Part 1 discussed nonvisual JavaBeans that parse XML documents into DOM trees, and Part 2 explained how Integrated Development Environments (IDEs) interconnect JavaBeans with event and property change relationships. This month, I tie together those articles by developing a somewhat more complex (though still functionally trivial) XML editor. You'll see that as the application becomes more complex, the standard nonvisual XML JavaBeans quickly become more difficult to use. So, I explain how the XMLConvenience bean set simplifies creating XML GUI editors, with an example. I also cover a general Java programming topic: how to use interfaces to simulate multiple inheritance.
TEXTBOX: TEXTBOX_HEAD: Process XML with JavaBeans: Read the whole series!
Building a better editor
The result of last month's article was an XML editor that edited an XML document containing a single tag,
<Name>. Though the little application provided a good example of how IDEs wire applications together with event relationships, I think the result was disappointing. I certainly wasn't hurrying home from work every night to play with the Recipe Name Editor. Figure 1 shows the extensions I've created to make the application more useful. I call this improved Recipe Editor the
I'm making three extensions to last month's editor. I start by adding a
<Description> tag (indicated by the letter A in Figure 1). Second, I add a Save File button (B), which saves the editor's DOM document as an XML file. Third, I add a status bar for error messages (C), which also indicates the name of the file being edited.
I'll do all of this the hard way first, using nonvisual beans and connecting them to standard AWT (Abstract Windowing Toolkit) interface components. The result will be a tangled web of event and property relationships. Then I'll show you how to use XMLConvenience beans to create the same application with just a few objects and connections.
Adding the Description tag
Figure 2 shows last month's application. I'm going to add a
TextArea so you can edit a recipe's description as well as its name.
Figure 3 shows the additional components and connections that I made to generate a
<Description> tag to the editor. Don't be intimidated by Figure 3's complexity. (My apologies for the event and property connection lines overlapping the object labels. That's how VisualAge for Java's Visual Composition Editor draws things.)
The only additions are that of another
ElementContainer (F in Figure 3), which holds the
<Description> element, and a
TextContainer (H), which holds the text inside the
Take a look at the objects underneath the
DocumentContainer1 object (C) in Figure 3.
DocumentContainer1 has an
ECFindRecipe, which itself has two
ECFindDesc, each of which has a
This structure of XML JavaBeans objects exactly reflects the structure of the DOM tree it represents, as Figure 4 illustrates. XML JavaBeans container classes are designed to can contain any structure that can be described by an XML DTD (document type definition). XML JavaBeans programmers can then connect these containers to other objects, such as GUI components, to do useful work.
A number of readers have been a bit confused about what the labels in the diagram refer to: classes or instances. Each object label in the diagram is the name of the instance, and it is the value of that instance's
beanName property. VisualAge for Java makes up instance names by adding a number to the class name (as in the case of
DocumentContainer1). In some cases (like
DOMGenerator), I changed the instance name to the class name. It would be like naming my dog "Dog." Just remember that all of the objects in the diagram are instances, not classes, and the whole discussion will make a lot more sense.
The class diagrammed in Figure 3 works by objects passing events and values to one another. A look at the diagram may not make it clear how these DOM elements are "passed" from one XML JavaBean to another as I've been describing. It's really quite simple. The connection between the output of one XML JavaBean and the input of another is a bound property relationship. A bound property is a property whose value is set to track some other property of an object. In this case, the
result property of each XML JavaBean is bound to the input property of another bean. When the first bean produces a result, it sets its
result property, and the property relationship (by way of a
PropertyChange event) updates the other bean's input to that same value. It is as if the first bean passed its result to the second bean.
The class whose structure is displayed in Figure 3 works almost the same as
RecipeEditor did in last month's article. When a user clicks the Open File button, the
DOMGenerator (B in Figure 3) acquires an input filename from
ExtendedFileDialog and produces a DOM tree that represents the XML document in the file.
DocumentContainer1 (C), which receives the DOM tree as input, passes any
<Recipe> element it finds at the top level of the tree through to its output. The
<Recipe> element in
DocumentContainer1 is passed to an
ECFindRecipe (D), whose outputs are in turn connected to two other
ECFindName (E) and
ECFindDesc (F). These containers search for the
<Description> nodes (respectively) of the
Recipe that contains them. Connected to the output of those last two containers are the
NameContainer (G) and
DescContainer (H), which contain
Text nodes that hold the text values of the recipe's name and description. The content of the two
Text nodes is edited in the GUI.
Now that the editor can add descriptions, it's time to add the status bar.
Adding a status bar to RecipeEditor
Figure 5 shows the
ComplicatedRecipeEditor, now with a status bar(A). The status bar itself is simply a
java.awt.Label with a navy blue background added to the application frame.
Label's text property controls the displayed text. Each of the event connections in Figure 5 sets this text to some value.
DOMGenerator (B) has three event connections that may set the status
DOMGeneratorproduces before it starts parsing, is connected to set the
Labeltext to the string
generationErrorevent is connected to set the
Labeltext to the string
"Parse error!"when a parse error occurs.
- Connection E:
generationOverevent, produced when
DOMGeneratorcompletes a successful parse, sets the
Labeltext to the name of the file being edited. The link F attached to
ExtendedFileDialog(G) supplies the name of the file as an argument to connection E.
By using the connections described above,
DOMGenerator reports its status to the user. It would be nice to extract the error message from
DOMGenerator and display it in the status bar; unfortunately, there is no easy way to do so from this IDE, since the error itself is expressed as an event.
The final improvement to the application is the addition of a Save To feature.
Saving the edited document
The implementation of the Save File function is straightforward. As you may remember from Part 1 of this series, the
XMLFileGenerator's XMLCore bean turns a DOM tree into an XML file and writes it to the file system. In other words, it performs the inverse operation of the
DOMGenerator class. Figure 6 shows an
XMLFileGenerator bean (B) added to the application, and the event relationships connected to it that control its operation.
When the user clicks the Save File button, the button's
actionPerformed() method calls the
XMLFileGenerator to write the DOM document at its
inputDocument property to the file whose name is the value of its
Note that the
autoAction property is set to
false (though this is not visible on the diagram in Figure 6).
true, causes the
XMLFileGenerator to write its output file immediately whenever its
inputDocument property is set to any DOM structure.
false in this example because if it weren't, the
XMLFileGenerator would try to write a file every time a successful parse occurred. The application should write a file only when the user indicates that it should (by clicking the Save File button.)
XMLFileGenerator processes its input, it emits a
fetchArguments event, which is used to set up the generator's inputs. This event is used to set both the output filename and the input document for the
To set the output filename, connection D hooks the
fetchArguments event to the
show() method of the
ExtendedFileDialog (C), causing the dialog to present a file selection box to the user. When the user selects a file, the
ExtendedFileDialog sets its
fullpath property to the pathname of the selected file. Connection E is a property change relationship that updates the
xmlSaveLocation property, setting it to the selected file pathname.
Connection F is also an event relationship involving the
fetchArguments event fired by
XMLFileGenerator. Connection F sets the
inputDocument property to the document contained in
DocumentContainer1 -- that is, the DOM document currently being edited. Connection G passes
DocumentContainer1's document to
XMLFileGenerator finishes with the list of objects listening for
fetchArguments, it assumes that its (possibly recently set) arguments are correct and writes the
inputDocument DOM tree to the filename indicated by
xmlSaveLocation in the form of an XML document.
Evaluating the improved application
Figure 6 shows the new
ComplicatedRecipeEditor with all of its modifications. If you download the sample code from Resources below, you can run the program. Try using the application with the
example.xml file included with the source code. The status bar reports what's going on with the parse, the Save File feature saves the edited file, and the editor can edit both the name and the description in the XML file.
In sum, this application works quite well, but creating it was a pretty detailed process. Figure 6 shows a mess of property and event relationships. Since VisualAge for Java doesn't label the connections, it's hard to tell by looking at the diagram what is actually happening. A lot of the event connections are repetitive, such as those between the text container XML JavaBeans and the text items in the GUI. Fortunately, the creators of the XML JavaBeans suite also created classes that ease the creation of fully functional XML editors. These XMLConvenience classes are a combination of AWT user interface components with the XML containers we've been discussing. In the next section, I present a couple of these convenience classes and, with very few components, use them to implement the editor we just wrote.
SUBHEAD_BREAK: XMLConvenience to the rescue
ComplicatedRecipeEditor was precisely that: too complicated. If such a small application starts looking tangled, imagine how cluttered a large application will look!
Many of the beans in the XMLConvenience bean set combine the XML-processing capabilities of the other XML JavaBeans classes with the graphic display and editing capabilities of the AWT. The connections of, for example,
TextContainer objects with the
TextField widgets used to edit them are combined into a single class called
ElementEntryField plays the role of both a
TextContainer and a GUI text field.
The XML JavaBeans authors recommend that programmers using the XML JavaBeans package with GUI frameworks other than AWT (Swing, for example) create analogous convenience components for the target framework, instead of trying to create the application with simple connections (as in the
To see how simple an editor application can be with these XML Convenience beans, see Figure 7.
Believe it or not, the application in Figure 7 performs the same functions as the tangled mess in Figure 6. As noted above, each convenience class groups one or more XML JavaBeans within a subclass of a GUI component. The first of these classes is the
XMLEditor class, a subclass of
java.awt.Frame that incorporates four "hidden" XML JavaBeans: a
ExtendedFileDialog, and a
DocumentContainer. They're all connected to one another pretty much as the same components are connected in Figure 6, but the XML JavaBeans components are private members of the
XMLEditor class. This concept of "wrapping" several classes into a single class with higher-level functionality is illustrated in Figure 8.