Document Sample
GUI Powered By Docstoc
					                                                Building Java Graphical User Interfaces
                                                 in Introductory Programming Courses

                                                                Viera K. Proulx, Jeff Raab, Richard Rasala
                                                                      College of Computer Science
                                                                         Northeastern University
                                                                            Boston, MA 02115
                                                                      vkp, jmr, rasala

Abstract                                                                                                             Before describing the Java Power Tools, we should state
The Java Power Tools or JPT is a Java toolkit designed to                                                            why it is important for freshmen to work with graphical
enable students to rapidly develop graphical user interfaces                                                         user interfaces.
in freshman computer science programming projects.                                                                   Student Expectations
Because it is easy to create GUI’s using JPT, students have                                                          Today students come into a computer science program
the advantages of a GUI interface for their programs while                                                           having extensive experience with a number of computer
focusing on the fundamental computer science concepts of                                                             applications with elaborate graphical user interfaces. These
algorithms, data structures, classes, and interactions. In                                                           interfaces provide the overall view of all information
this paper, we will discuss why it is important to use GUI’s                                                         needed to perform one execution of a specific program
in freshman courses and will explain by example how the                                                              action. For example, in e-commerce, a GUI may collect
JPT dramatically reduces the effort needed to create a GUI.                                                          information about the customer, retrieve information about
We will conclude by discussing the pedagogical benefits of                                                           an order, process the shipping information and the billing,
using the JPT. For a discussion of the object-oriented                                                               etc. Students hope that they will learn how to design similar
design principles underlying the JPT, see [4].                                                                       complex applications.
                                                                                                                     Input Flexibility When Exploring Lab Assignments
1       The Importance of GUIs in Freshman Courses                                                                   A more serious reason for introducing GUI building into
In traditional freshman courses based on C and C++, it has                                                           early computer science courses is the fact that the
been difficult to introduce graphical user interfaces without                                                        input/output process for most non-trivial programs is not
using complicated class libraries. With the advent of Java,                                                          linear. As illustrated above, a typical program uses a
there has been hope that programming graphical user                                                                  number of parameters to control its progress and actions.
interfaces might be introduced earlier in the curriculum.                                                            These parameters may be altered in any order and typically
However, even though Java provides powerful tools in the                                                             do not depend on each other.
AWT and Swing libraries, the building of interfaces in Java                                                          For students to gain an understanding of what is important
remains somewhat tedious. Some people assert that the task                                                           in the assignment and to test and debug the programs
of creating useful and robust graphical user interfaces using                                                        actions, it is important for students to run the programs
Java and the Swing libraries is too difficult for freshman                                                           with a variety of data and parameters. If the input is taken
courses even when some elementary software support is                                                                from a console-style input stream then the input must be
provided [1, 2, 6, 7]. The purpose of the Java Power Tools                                                           given in a fixed linear order determined once and for all in
that we have developed is to encapsulate the steps in GUI                                                            the program. This greatly inhibits exploration by the
building to the greatest degree possible so that it is indeed                                                        students. It is difficult for them to do “what if” scenarios.
within reach for beginning students to create GUI’s.
                                                                                                                     In contrast, in a graphical user interface, all of the relevant
This work was partially supported by NSF grant DUE-9950829.                                                          input parameters can be displayed at once in a window.
                                                                                                                     The student can make choices in any order desired and vary
                                                                                                                     one or more parameters before running each test. This
                                                                                                                     permits the students to explore the parameter space at will.
                                                                                                                     For us, this freedom is the most important reason to use
                                                                                                                     GUI’s in freshman courses.
                                                                                                                     Program Behavior as a Set of Actions
                                                                                                                     Another important aspect of using GUIs is the ability to
                                                                                                                     independently program and execute the different actions
that correspond to the different logical parts of a program.     language implementation details. While Java support for
For example, entering the data into a database, displaying       building GUIs is extensive, the language does not combine
and entering the query, displaying the result of processing      the primitives into a coherent set that would let the user
the query are independent actions contained within the           implement each of these steps as a single command.
same program.                                                    To define even a simplest GUI, we need the following:
Students understand this type of program behavior from           A. Define the model: Declare and initialize a data model
their own experience. By separating different program               object.
actions, students can focus on the design of each part of the
program independently of the rest and learn a valuable           B. Design the view: Create a GUI component that accepts
lesson about modular design. By being able to view in a             user input, place the component at a specific location
comprehensive display both the overall input state of the           on the screen, and make the component visible. Notify
program and its action controls, students will have a better        the view about the model that it represents.
sense of the key components of the program and the               C. Design the actions: There are two kinds of actions that
interactions between them.                                          we recognize. The first kind of action connects the
Encapsulation and Robustness                                        model and the view: we must be able to convert a
                                                                    representation of the object as shown in the view into
When students learn to build GUIs using tools that                  the internal data model representation and conversely
encapsulate the necessary logical steps, they learn a               to convert the internal data model representation into a
profound lesson in encapsulation and abstraction. By                form that can be displayed in the view. The second
seeing the benefits of encapsulation early, they develop a          kind of action implements the program's desired
habit of crafting programs with well-defined logical                behavior.
components. When the tools used to build the GUIs also
provide robust error detection and correction strategies,        D. Design the controls and connect them to the view, the
students learn to expect robust and error-free behavior in all      model, and the actions: Define buttons or other
of the programs they write.                                         components that will be used to initialize the desired
                                                                    action and make the button listeners that activate the
Student Motivation and Satisfaction                                 appropriate actions.
The esthetic appeal of a well-designed GUI enhances              Let us examine the information that is needed to implement
student satisfaction and provides motivation for further         each of the steps.
design exploration.
                                                                 Part A is the algorithmic component of programming. The
                                                                 information needed to implement part B is clearly
2   The ABC of Building a GUI                                    identified in the logical description of this step. Though the
2.1 Model-View-Action-Controller Design Pattern                  building of a GUI component may require several
                                                                 intermediate steps, these steps are well understood by
Graphical user interfaces allow the user to view a               professionals and follow the same logical sequence
representation of the internal state of some of the objects      regardless of the particular component. The decisions
that a program is working with. Although the view and the        related to the actual placement of the component on the
internal data model are linked, they are not identical. For      screen may be part of this step. While the technical details
example, a character string of digits “123” may represent        in a programming language may be lengthy, conceptually
the contents of a view while a binary representation of the      what the GUI component does is very simple.
value 123 may be stored in the data model. When the user
types a new value into the view, the view changes but the        Part C seems easy but is actually a very complex task.
data model is normally unaltered. Changes in the data            Programming languages typically include some such
model usually happen only as a result of a control action        automatic conversion but there are no standard provisions
that is programmed to extract the model value from the           for identifying errors and handling them. However, the
view. To be precise, by changing the state of some control       behavior of these actions is well understood and the design
in the GUI, the user initiates an action that will perform as    of appropriate parsers is a standard part of computer
part of its work the extraction of the value from the view to    science. It is possible to build the appropriate encoders and
be stored in the data model.                                     decoders for all of the basic data types and make them
                                                                 available as a part of a toolkit.
2.2 The Four Logical Steps in Building GUIs
                                                                 Part D is quite difficult for the novice programmer. The
Consider a program that will allow the user to input and         controls are activated asynchronously: they respond to user
display a value of a single object. We examine the key           input and the program must arrange to listen for this input.
logical steps for building such GUI and identify the             Trying to keep all the information in order gets to be hard.
software interface for each step, i.e., what information         However, thinking abstractly, we only need to define the
needs to be specified for a given step to be implemented.        type of button, its label, and the action that will be triggered
Each of these steps has a clear logical design and can be        when the button is activated by the user.
easily specified in writing apart from the programming
It is clear that the logical description of a graphical user
interfaces is not too hard. If the tasks can be encapsulated
and automated, a novice programmer can implement them
without undue difficulties. The Java Power Tools have
been designed to support such ease of GUI programming.
3   JPT Support for GUI Programming
The Java Power Tools have been design to support any
programmer in building robust graphical user interfaces
that interact smoothly with the internal data model. A great
care was taken not to hide any of the underlying Java code,
but to present a clear design that encapsulates all relevant
operations. The toolkit itself can serve as a case study in      The GUI consists of the following parts:
object-oriented design [4].                                      Three text field views (for radius, x, and y) and one actions
3.1 Design Philosophy                                            panel enclosed in a controls display panel. Two action
By examining the logical tasks necessary to build GUIs, we       buttons are placed inside the actions panel. The main
decided on the highest level of abstraction and delegation       display panel contains the controls display panel and one
possible. At the heart of the toolkit are views and actions.     graphics output window. The (static void) main function
For example, a TextFiledView object is responsible for the       builds one instance of this main display panel, inserts it into
encoding and decoding of all basic data types, for               a frame and activates the frame. The schematic view of all
implementing error handling strategy, and for adding             the GUI components is shown below:
proper annotations in the error dialog. Once the user creates
such an object and places it in the GUI, it can be asked for                                   Graphics Window
its data and have its display reset to new values. Other
views serve more specific purposes. An ActionsPanel
object allows the user to add AbstractAction objects,
where each such object defines a button label as well as the                yTFV
action that will be performed when the button is activated.
ActionPanels and different View are included in Displays
that are built recursively, so that an action at the highest              G        R
level can propagate as programmer desires to all included
levels. The additional functionality of this toolkit is beyond
the scope of this paper (see [4]).
3.2 Basic Operations                                             A one-line constructor builds each of these items (eight
                                                                 constructors total: three text field views, one actions panel,
The basic operations in building a program with graphical        two actions, one controls display panel, one graphics
user interface can be summarized as follows:                     window). Two statements add the actions to the actions
 build a model                                                  panel and four statements place the three views and the
 build a view                                                   actions panel in the controls display. A bit of bookkeeping
 get value from the view                                        places the main display and the graphics window into a
 set the value in the view                                      common frame, but that concludes the design of the GUI.
 define action behavior                                         Function graph() draws one circle - it is the action taken
 build a button that will trigger the action                    when the GRAPH button is selected; reset() function
 add the action to the button                                   clears the graphics window when RESET button is chosen.
The example in the next section illustrates how each of          3.3.1    Using the TextFieldView
these steps can be easily implemented using the JPT
toolkit.                                                         The graph() function defines the internal model objects
                                                                 (radius, x, y) as local variables and extracts their values
3.3 A Simple Example                                             from the view using statements of the form:
The simple example we present allows the user to enter           double x = xTFV.demandDouble();
three double values that determine the center and the radius
of a circle and then paints the circle in a graphics window.     Here, xTFV is the view that contains the user’s x value and
Once the circle is painted, the program updates the center       the demandDouble function extracts from xTFV the String
coordinates so that a sequence of paint requests creates a       that user typed in, attempts to convert it into a double, and
diagonal of adjacent circles.                                    if successful returns this value. If there is an error in the
                                                                 user input, a modal error dialog box appears automatically
                                                                 that alerts the user and persists until a valid input is
supplied. The TextFieldView object xTFV encapsulates all        button is selected. The reset action is defined in a similar
of this behavior. The student only creates an instance of       manner.
this object.                                                    4   Conclusions
Conversely, the user can set the state of the TextFieldView     The key gains in using GUIs early are not the appearance
object (i.e. the String that is displayed) using a statement    of the program, but the students’ perception of the
of the form: xTFV.setViewState(x + "");                         underlying structure.
Notice that the value of the object x is converted into a       Students learn early the distinction between the user input
String by using the concatenation operation. That means         and the internal data representation extracted from that
we can set the state to any valid String, for example:          information - and that this only happens when an
xTFV.setViewState(x + " + sqrt(2) * " + radius);                appropriate action is invoked.
Now the current value displayed in the view corresponds to      The fact that separate buttons activate parts of the program
shifting the center of the circle the precise amount needed     divides the program naturally into separate entities where
so that the next circle is tangent to the previous one as       each deals with one logical aspect of the program.
shown in the figure. This new String will return a              The relevant program state is visible when the program
numerical value next time the demandDouble function is          runs.
invoked, though the user can change this suggested value.
                                                                Learning about encapsulation starts early. Students see the
The constructor for the TextFieldView accepts a default         powerful actions of just a few constructors and functions
value, a prompt message to display inside the error dialog      and realize that repetitious complex tasks should be
and a title for the error dialog. When the TextFieldView is     relegated to an encapsulated tool
added to the enclosing Display, a label is added identifying
the meaning of the field. The constructor for the               The use of GUIs changes the nature of programming and
TextFieldView looks as follows:
                                                                places a greater value on interactions between program
private TextFieldView xTFV =        new TextFieldView(
      "0",                          // default content          To summarize, we believe that the goal of the first year
      "Enter the center's x",       // error prompt
                                                                computer science courses is no longer just: Algorithms +
                                                                Data Structures = Programs. Rather the new paradigm is:
      "x coordinate of center of circle");         // title
                                                                Algorithmics, Encapsulation, and Interactions.
The following statement is what is needed to add xTFV to
                                                                5   Access to the Java Power Tools
the controls display:
                                                                The JPT toolkit, sample projects, and tutorials are available
      new Display(xTFV, "Center X:", null));
where "Center X:" is the prompt that appears in the GUI,
and null is passed to designate that no title is desired.       [1] Buck, D., and Stucki, D., Design Early Considered
                                                                    Harmful: Graduated Exposure to Complexity and
3.3.2    Working with Actions                                       Structure Based on Levels of Cognitive Development,
The standard member function graph() performs the                   SIGCSE Bulletin 32(1), 2000, 75-79.
desired program activities - in our case extracts the three
values from the three views, paints a circle, and updates the   [2] Lewis, J., Myths About Object-Orientation and Its
view state for xTFV and yTFV. To attach this operation is to        Pedagogy, SIGCSE Bulletin 32(1), 2000, 245-249.
a GRAPH button in the GUI an action button is defined as        [3] Raab, J., Rasala R., and Proulx, V.K., Pedagogical
an AbstractAction object:                                           Power Tools for Teaching Java, SIGCSE Bulletin
private AbstractAction graph = null;                                3(2000), 156-159.
We then define an ActionsPanel named actions:                   [4] Rasala, R., Raab, J., Proulx, V.K., .Java Power Tools:
private ActionsPanel actions=new ActionsPanel();                    Model Software for Teaching Object-Oriented Design,
Finally, we add a labeled button that triggers the desired          accepted for SIGCSE 2001.
action to the ActionsPanel as follows:                          [5] Rasala, R. (1999) Toolkits in Freshman Computer
actions.addAction(                                                  Science: A Pedagogical Imperative, SIGCSE Bulletin
  graph = new AbstractAction("Graph"){                              32(1), 2000, 185-192.
      public void actionPerformed(ActionEvent evt){             [6] Reges, S., Conservatively Radical Java in CS1,
         graph();}                                                  SIGCSE Bulletin 32(1), 2000, 85-89.
                                                                [7] Wolz, U., and Koffman, E. simpleIO: A Java Package
The String "Graph" will be used as a label for this button.         for Novice Interactive and Graphic Programming,
The member function graph() will be invoked when the                SIGCSE Bulletin, 31(3), 139-142.

Shared By: