easy development of guis using xml and java reflection

EASY DEVELOPMENT OF GUIS USING XML AND JAVA REFLECTION Gil Moreira1 and João M. P. Cardoso1,2 1

Faculty of Sciences and Technology, University of Algarve, Campus de Gambelas, 8000 – 117 Faro, Portugal 2 INESC-ID, Lisbon,

ABSTRACT This paper describes Xil, a Java™ package to easier the development of graphical user interfaces (GUIs) based on Java Swing components. The concept uses a markup language, based on XML (eXtensible Markup Language), to specify the structure and type of components of the GUI. The package interprets the specification and automatically generates the interface. The structural description also specifies the binding of actions, associated with some components of the GUI, with class methods to handle such actions and to connect the GUI structures to the rest of the application. Code for those classes and methods is the only code needed to be developed to generate the GUI. During program execution, the binding of GUI components to actions is performed using the Java reflection feature, which permits to instantiate a class and to invoke a method based on dynamically defined names. Some of those actions do not require to program additional code. The concept adds a layer between the programmer and the Java’s native interface Swing toolkit. Thus, the application’s development is abstracted from the Swing complexity and the concept truly helps the development of GUIs. The paper explains the concept, the package, and presents an example realized using the Xil package. KEYWORDS Software Engineering, XML, Java, Swing, Graphical User Interface (GUI).

1. INTRODUCTION Graphical user interfaces (GUIs) are the preferred way of interacting with computers and software in general (Preece, 1994). One of the reasons behind this is that in a graphical interface the execution of an application is interactively controlled using a visual mechanism. In addition, graphically displaying real-time data and results is of great importance. Abstract concepts to represent commands, such as icons and menus, and to organize information, such as windows, have been adopted. They facilitate the interaction between the user and the computer and thus the majority of today’s software includes a GUI. Software development can be a complex and very time-consuming procedure. When the application to be developed includes a GUI, the development is, unsurprisingly, even more complicated. Based on Myers (1995), the GUI portion of the entire application requires an average of 48% of the total application code, and 50% of the overall development time. The GUI requires code which adds to the overall complexity of the software. Its development requires knowledge of the application programming interfaces (APIs) used in the GUI’s building. Other aspects to consider are also human factors such as the ease of use, usability, of the interface, which are behind the goal of the work presented here. Visual GUI builders make significantly easier the development of applications with GUIs. However, most GUI builders limit themselves mostly to generating the code required for the graphical components of the GUI (see, for instance, the GUI builder for Java included in the SunOne Studio integrated design environment (Sun, 2004)). Thus, the programmer must be aware of the Java Swing components to deal with the automatically generated code. That code needs development of additional code to treat the events, for instance. On the other hand, the most advanced GUI builders are very expensive tools that a common user or low to mid-complexity projects might not afford.

I - 412

EASY DEVELOPMENT OF GUIS USING XML AND JAVA REFLECTION

As common approaches to GUI’s building of Java applications require knowledge of Swing and the acquisition of the Swing features is time-consuming, it may be very time-consuming for the common programmer to develop applications with graphical user interface. Several languages have been considered as far as GUI development is concerned (e.g., layout description languages which the Motif’s User Interface Language, UIL, is probably the best well known) (Meyers 1995). Recently, XML (2003) based approaches for interface definitions have been considered (XML Markup Languages… 2004). Two of those approaches are the XML-based User Interface Language (XUL, 1999) and the User Interface Mark-up Language (Abrams, 1999), (Phanouriou, 2000), and (UIML, 2004). The main focus of our work is to simplify the GUI building process and the interface between the GUI and the rest of the application. As the importance of the GUI development in the overall complexity of the software development, the aforementioned goal will also improve the overall software development. The concept relies on XML and Java to accomplish this goal. A language, based on XML, to define the GUI structure and to associate actions to some components of the GUI has been created. The developed interpreter is used to extract the GUI specification and to create the GUI based on Java Swing components. In our approach, a Java application with a GUI defined with Swing components can be entirely developed without knowledge of Swing details. Even more, the scheme does not require a deep understanding of Java's event handling model and thus might certainly be a good choice for fast development of low to mid-complexity applications. Our approach also maintains the GUI code in a separate layer than the rest of the application, which can really improve software development time, maintenance, and upgrade. This paper is organized as follows. Next section explains the methodology and the technologies used to generate GUIs. Section 3 briefly presents and explains the defined XML dialect to specify GUIs. Section 4 introduces the Xil package. Section 5 presents an example of a GUI developed with the Xil package, which shows some of the strengths of the concept. Finally, section 6 concludes the paper and focuses on some of the future extensions.

2. METHODOLOGY Initially, two approaches have been considered. The first approach is similar to the way the current GUI editors work. In this approach the definition of a graphical user interface would be made using XML, it would then be processed by a GUI generator which would create the code for the interface. The programmer would then have to add the remaining code, like handling of component events, and compile the final code. In the second considered approach, the graphical interface would be automatically created (see Figure 1). A set of classes to interpret the XML definition would be created and the programmer would simply have to invoke the generation of the interface in the application code. The second approach has been chosen because the code integration process is simpler. Unlike the first approach it implies the programmer must learn how to use the supplied methods, but it avoids having to learn the native GUI building API which would take certainly longer. XML

Xil package

Application code

Java Compiler

Classfiles

Figure 1. Block diagram showing the development process.

Since we needed to define a language for specifying the GUI’s structure and the binding of actions to components, we chose to employ XML. XML (Ray, 2001), eXtensible Markup Language, is a very complete technology which allows data processing operations, from document formatting to data filtering. Despite its name it is not in itself a markup language but instead a set of rules by which markup languages can be defined (usually named a meta-language). XML allows the definition of tags, like the ones used in HTML,

I - 413

IADIS International Conference Applied Computing 2004

which can be used to construct markup languages. XML is a standard managed by the W3C (World Wide Web Consortium) (W3C, 2004). Java is the other technology used (Arnold, 2000). Being Java a platform independent programming language, it allows a Java application to run in any platform that supports the JVM (Java Virtual Machine), without changes to its code. The Java technology includes an extensive set of libraries, known as Java Foundation Classes (JFC, 2003), which make it, in comparison with other languages, a very productive language. A part of the JFC is the Swing toolkit. Swing (Elliott, 2002) is a set of classes and methods available for Java programmers to build graphical user interfaces. Swing provides most of the main concepts used in graphical interfaces, such as drag and drop. The components Swing provides are also platform independent. One of Java’s features used in our work is called reflection (Arnold, 2000), (McCluskey, 2003). Reflection allows the program to dynamically create objects of any existing class and invoke methods from that class with the class’ and method’s name only known during runtime. Since the GUI is defined by an XML source file, the integration of XML, with the application programmed in Java, is required. Such integration is accomplished through the use of an XML parser (Harold, 2002). An XML parser is a program that reads an XML file and makes the data in that file available for the programmer to use in the application. The way the data are provided may vary since different APIs exist to handle the parsing procedure. Xerces2 Java (Xerces, 2003) is a Java package to deal with XML documents. Xerces supports APIs to parse and represent an XML document. The two APIs considered were SAX (Simple API for XML) (Megginson, 2000) and DOM (Document Object Model) (Dom, 2003). SAX lets the programmer handle the data as it is being read, and thus the programmer has to provide all the data structures required to store the data. DOM, a W3C standard, on the other hand, processes the entire XML file and makes all of the data available in its own tree-like data structure. The programmer must then work with that structure. Since it is simpler to use a tree-like structure than to build a customized one, DOM has been chosen as the parser API.

3. MARKUP LANGUAGE FOR GRAPHICAL INTERFACES In order to use XML for defining a graphical interface, the design of a markup language was required. The language uses tags to define all of the interface components and the actions associated to those components. Table 1 illustrates some of the tags and the components defined by each one. Further details and the complete definition of the markup language can be found in (Moreira, 2003). Table 1. Component defining tags Tags

Component Control

Button

Button

CheckBox

Check Box

ImageLabel & TextLabel

Labels

TextArea

Text Area

TextField

Text Field

MenuBar Menu

Menus Menu Bar Menu

MenuItem

Menu Items

Picture

Visual

The tags belong to different categories, depending on the function they perform (e.g., a Button is a control component). Other special tags have also been defined. They control other aspects, such as the beginning and the end of the interface definition (tag GUI), the grouping of components (tag OUT), and the size of the GUI

I - 414


(tag SIZE). The tag OUT is used to define group of components (sub GUIs) that are called by actions performed on other GUI components. Together with the component tags, attributes for the components have also been defined. Some of the defined attributes can be seen in Table 2. Table 2. Simple Attributes Attributes Function Regarding Components: NAME Name LABEL Label displayed TEXT Text displayed IMAGE Picture displayed SELECT Selected or not selected ALIGNH Horizontal alignment ALIGNV Vertical alignment

Attributes Function Regarding the interface: HEIGHT Height WIDTH Width RESIZE Resizable or not resizable

An example of a component defined using the language is: In this example a check box is defined and the name check1 is assigned to it as well as the label Check Box. For this language to be more useful, it supports attributes which control the actions performed by the components (see Table 3). Some of those attributes can be used to define actions which do not require extra code from the programmer. Consider, for example, the following definition of a button: The above definition creates a button named Button1 with a visible label Exit. Whenever the button is pressed it will trigger an action named exit that causes the application to finish. Trough the use of the CLASS and METH attributes, it is possible to make a pressed button trigger the execution of a method present in the application code. The code below shows one such example: When the button created by this definition is pressed, it will invoke the method button1Click from the class MyButtons. Such assignment of methods to actions is accomplished using the reflection feature from the Java programming language (Arnold 2000). More complex pre-defined actions which require additional code are also present. Consider the definition below: In this definition, a button named Button3, with the label Open, is created. This button, when pressed, opens a file choosing box (file browser). Such action is defined assigning to the ACTION attribute the value open. The file or option chosen in the file browser is then passed to the method button3Click, present in the class MyButtons. Table 3. Action attributes ACTION CLASS METH MSG TITLE TYPE

Actions Assigns an action to a component Defines the class where the method specified by the attribute METH can be found Name of the method triggered by a component Defines the text for an automatically generated message box Defines the title for a message box Controls the type of message box shown

The previously illustrated examples show different types of actions supported by the package. Those types of actions are: a) Actions to open another component or group of components; b) Standard actions such as: exit from application, print a massage in a text box, etc;

I - 415


c)

Actions to be managed by the rest of the application such as: open a file browser, press a button, open a box for input data, open a box asking for confirmation, etc. Only type (c) actions require addition of Java code. All the others represent actions automatically handled by the package.

4. XIL PACKAGE After the interface is defined, using the mentioned tags and attributes, it is automatically generated using the developed Java package. In the main application code, an instance of the class BuildGUI must be declared and initialized with the filename of the XML file where the interface is defined, e.g. BuildGUI gui=new BuildGUI(filename.xml). Then, the generation of the interface is started by invoking the gui.build() method. After the interface is built, a way to control and to interact with the components is obviously required (e.g., to retrieve a value from a text field or to change its value). The package also supplies methods to achieve the interaction with the GUI components (Moreira, 2003). Table 4 shows some of the implemented methods. For example, the method isVisible returns a boolean value, based on the fact that a component is visually represented on the screen or not. The setVisible method can be used to make a certain component visible or invisible (a boolean argument is used to indicate the option). Figure 2 conceptually illustrates the interface between an application and the GUI and its components. The methods to interface the application with the GUI require the name of the GUI component as argument. As a consequence, the XML specification of the GUI requires a distinct name for each component. Table 4. Supplied methods Methods

Function Status Checking isComponentEnabled Checks if the component is enabled isComponentValid Checks if the component exists isVisible Checks if the component is visible Status Changing setComponentEnabled Enables or disables a component setVisible Hides or Shows a component Obtaining Values getComponentValue Obtain a value from a component Modifying Values setComponentValue Change a component value addComponentText Add text to components that support text

The methods to deal with GUI’s components have been developed to be uniform and as independent of the component’s type as possible. Such property helps to speedup the learning process, since the programmer does not have to memorize a different method for each type of component. A practical example of this is the getComponentValue method. When in presence of a text component, the method returns a string with the text it contains. When we use the method with a check box, it returns a string either “true” or “false” which indicates whether the check box is selected or not. The generation of the GUI starts by processing the XML document using the DOM API. This produces a tree representing the XML elements and attributes. Then, the tree is traversed verifying and exposing the GUI components, and the attributes. When traversing the tree, each component is added to the GUI and after traversing all the nodes of the tree the GUI is shown on the screen. The specified binding of actions to GUI’s components is accomplished during the execution of the application with the use of the Java reflection feature. Reflection allows the creation of a class instance whose name is known only during the execution of the program. This concept is the currently main support of Xil, since the current version is based on the dynamic interpretation of the XML source file. The Xil package requires the Java 2 SDK (J2SE, 2003), which includes Java Swing, and the Xerces2 Java and DOM packages (Moreira, 2003).

I - 416


getComponentValue

setComponentValue

Rest of the Application

Figure 2. Interface between the GUI’s components and the rest of the application.

5. EXAMPLES The following is an example of an application developed using the markup language and the previously described Java package and without knowledge of Java Swing. The entire code of the application and other examples can be found in (Moreira, 2003). The GUI of the application is shown in Figure 3. When the menu item is triggered, the window in Figure 4e is shown and this type of connection between GUI’s components does not require extra code. The application shows the syntactic tree, on the right side text area, which corresponds to the Java code inserted in the left side text area. The code can come from a file or be directly typed in. Status messages (left lower corner), and compile time (bottom text area) are also shown. The Compile button triggers the execution of a lexical and syntactical analyzer on the code in the left side text area, and the result of the analysis is then shown on the right side text area. The required execution time is also shown, as illustrated in Figure 3.

Figure 3. GUI of an application that receives as input a source Java program and outputs the corresponding abstract syntax tree.

The example illustrates the use of several components and actions supported by the package. The menus on the application demonstrate some of these actions. Figure 4a illustrates a menu item which triggers the termination of the application. The declaration of this menu item in the XML input file is:

I - 417


In the Source File and Dest File menus, Figure 4b and 4c, some pre-defined actions which require extra code from the programmer are demonstrated. The definition of the menu item “Open…” is: When this action is triggered, it automatically causes (without extra code) a file browser to be created (see Figure 5).

(a)

(b)

(c)

(d)

(e)

Figure 4. Some components in the example: (a) Control Menu; (b), (c) File Menus; (d) Help Menu;(e) AboutWindow component.

Figure 5. File browser.

The items in the Help menu, Figure 4d, are associated with another type of action. When chosen, these items open a special component defined with the OUT tag. For example, the About item is defined in the following manner: The value AboutWindow which the ACTION attribute possesses is the name of the component to be shown. This component is defined with the OUT tag. The definition of the AboutWindow component is: The previous example shows some of the potentialities of the Xil package. The GUI of the depicted application has been developed in a short time and without being cognizant of the Java Swing features. The binding of some events to other GUI’s components has shown to be of great importance, since it does not require development of extra code.

6. CONCLUSION The main goal of the work presented in this paper is to simplify the building of graphical user interfaces. To achieve this goal, a markup language has been defined using XML, and a Java package, to interpret that

I - 418


language and to dynamically generate the GUI, has been developed. Both the markup language and the package have been developed to be intuitive and easy to use. The language allows actions to be associated to interface’s components. Some of those actions are automatically handled by the package and do not require additional Java code. The approach and a number of small applications built so far, prove that it is possible to simplify the construction of graphical user interfaces, based on Java Swing components, using XML and Java. The Java reflection feature has been used to abstract the programmer from the Java Swing idiosyncrasies by creating an interface layer between Swing components and actions to be performed. Since the package has been developed as a proof of concept, improvements are still required. Those improvements include the relative placement of the components on the interface, the support of additional components (including, third party GUI components), and the support of GUIs for Java Applets. Another version of the package that does not require dynamic XML interpretation should be considered in a near future. Such version may use XSLT to statically generate, based on the XML description, the Java classes of the GUI. The package presented here can be a back-end of a drag-and-drop GUI development environment. In such case, the environment must generate the XML Xil file, describing the GUI’s components and the binding of actions to methods.

REFERENCES Abrams, M., et al. (1999), “UIML: Appliance-independent XML User Interface Language.,” in 8th International World Wide Web Conference, Toronto, 1999. Arnold, K., Gosling, J, and Holmes, D. (2000), The Java Programming Language, 3rd Edition. Addison-Wesley, Reading, MA, USA, 2000. DOM: Document Object Model (2003), World Wide Web Consortium, W3C, 1997-2003. http://www.w3.org/DOM/. Elliott, James, et al. (2002), Java Swing, O'Reilly & Associates; 2nd edition, November 1, 2002. Fowler, Amy (2003), “A Swing Architecture Overview: The Inside Story on JFC Component Design”, Sun Microsystems, Inc., http://java.sun.com/products/jfc/tsc/articles/architecture/index.html Harold, Elliotte R. (2002), Processing XML with Java: A Guide to SAX, DOM, JDOM, JAXP, and TrAX, Addison Wesley Professional; 1st edition, November 5, 2002. J2SE : Java 2 Platform, Standard Edition (2003), Sun Microsystems, Inc., http://java.sun.com/j2se/. JFC: Java Foundation Classes (2003), Sun Microsystems, Inc., 1995-2003, http://java.sun.com/products/jfc/ McCluskey, Glen (2003), “Core Java Technologies Tech Tips January 10, 2003”, http://developer.java.sun.com Megginson, David (2000), SAX (Simple API for XML). http://sax.sourceforge.net/ Moreira, G. (2003), Java Package for Automatic Generation of XML-defined GUIs, final year project technical report (in portuguese), Faculty of Sciences and Technology, University of Algarve, July 2003. Myers, Brad A. (1995), “User Interface Software Tools,” In ACM Transactions on Computer-Human Interaction, vol. 2, No. 1, March 1995, pp. 64-103. Phanouriou, C. (2000), UIML: A Device-Independent User Interface Markup Language, Ph.D. Dissertation, Virginia Polytechnic Institute and State University, USA, Sept. 2000. Preece, et al. (1994), Human-Computer Interaction, Addison-Wesley. http://www2.cs.cmu.edu/afs/cs/project/amulet/www/amulet-overview.html Ray, Erik T., Maden, Christopher R. (2001), Learning XML, O'Reilly & Associates; 1st edition, February 2001. Sun One Studio Software (2004), http://wwws.sun.com/software/sundev/news/features/sunone.html UIML: User Interface Markup Language (2004), http://www.uiml.org/index.php W3C: World Wide Web Consortium, (2004), http://www.w3c.org Xerces2 Java Parser 2.5.0 Release (2003), The Apache XML Project, The Apache Software Foundation. http://xml.apache.org/xerces2-j/ XML Markup Languages for User Interface Definition (2004), http://xml.coverpages.org/userInterfaceXML.html XML: Extensible Markup Language (2003), W3C (World Wide Web Consortium), http://www.w3.org/XML/ XUL Language Spec (1999), Mozilla, second draft, http://www.mozilla.org/xpfe/languageSpec.html.

I - 419