Growing a GUI from an XML tree
Authors: Mark A. Boshart, Martha J. Kosa
Venue: Proceedings of the 8th annual conference on Innovation and technology in computer science education (2003)

Computer science faculty in the current fast-paced computing environment must be very resourceful; they must constantly learn new topics and explain them to their undergraduate students (who are familiar with the acronyms and inquisitive about their meaning), while not letting these exciting new topics overshadow the fundamentals. They must analyze these new developments to see the fundamental concepts that ultimately serve as their basis. They must then determine how to integrate these concepts into the undergraduate curriculum at the correct level for their students. This poster shows how XML (eXtensible Markup Language) and hierarchical data structures are correlated, allowing instructors to add XML concepts to the CS2 curriculum in a way that is fun for students, namely, GUI development.Students typically enjoy designing their GUIs. They find it is hard to understand how a GUI will look without the visual aid of an IDE (Integrated Development Environment). However, when using an IDE, the details of how the user interface is created are hidden from the programmers - not just the code, but the design principles as well. The programmers can become dependent on the IDE for GUI development, limiting their ability to design novel interfaces. In addition, students who do not use an IDE at all find it difficult to remember all their GUI component relationships, making GUI design a trial and error process. We seek a way for students to design GUIs that forces them to consider how GUIs are constructed, improving their design skills, while at the same time making the design process as straightforward as possible.GUIs are hierarchical in nature because they are based on containers holding GUI components, which may themselves be containers. Thus, it may be helpful to utilize the notion of a tree in the construction of a GUI, allowing development of GUIs without the dependence on a standard IDE and without many of the difficulties of GUI construction by hand. As students typically learn about trees in CS2, this is an appropriate time to introduce GUI hierarchies. Students are also often eager to be exposed to hot topics in computer science, such as XML. XML is hierarchical in nature; thus, it lends itself to GUI design. We propose integrating these ideas into an "XML-based IDE" that students can use in the beginning stages of development for their own GUIs. This makes students aware of the hierarchical nature of their GUIs in the design phase, enhancing their ability to develop useful and creative user interfaces. At the same time, students are exposed to basic XML concepts and syntax.Our "XML-based IDE" has two important parts: our markup language and our code generator. First, we developed a preliminary XML schema describing a grammar for basic GUI programs. This schema describes the XML tags and the relationships among them. Our XML tags correspond to Java nomenclature (swinggui, jframe, jpanel, jcomponent, listener, layout, etc.) as our CS2 students program in Java. After developing our schema, we implemented a Java program to translate an XML document conforming to our schema to corresponding Java source files. To build a shell of a GUI program, a student needs to write an XML document describing the interface and run our utility program to generate the Java source files. When the Java source files are compiled and executed, the student can see the resulting GUI. The student only needs to design and implement the event-handling algorithms. Our "XML-based IDE" demonstrates the usefulness of XML in other areas besides the World-Wide Web and is a refreshing change from the standard XML examples.We believe that our "XML-based IDE" is a practical and fun way to introduce XML into the introductory computer science curriculum without sacrificing fundamental concepts.