. PLT: PROGRAMMING LANGUAGE TOOL JARED RUBIN

Transcription

1 . PLT: PROGRAMMING LANGUAGE TOOL By JARED RUBIN A THESIS PRESENTED TO THE GRADUATE SCHOOL OF THE UNIVERSITY OF FLORIDA IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE DEGREE OF MASTER OF ENGINEERING UNIVERSITY OF FLORIDA 2001

2 Copyright 2001 by Jared Rubin

3 ACKNOWLEDGMENTS I would like to thank my adviser, Dr. Douglas Dankel II. Without his guidance and support I would never have completed my thesis in a timely fashion. I would also like to thank Dr. Manuel Bermudez and Dr. Joseph Wilson for being on my committee and for the assistance they provided. In addition I would like to thank Ms. Rory J. Desimone for assisting me throughout graduate school. Finally I would like to thank my parents and family for their never-ending patience and love while I was in school. iii

4 TABLE OF CONTENTS page ACKNOWLEDGMENTS...iii LIST OF FIGURES... vi ABSTRACT...ix INTRODUCTION...1 Problem Overview... 1 Overview of PLT... 2 Thesis Organization... 4 BACKGROUND...5 Java... 5 JFC/Swing... 6 HTML... 6 CUP Parser Generator for JAVA... 7 Overview of Other Teaching Tools... 7 PVSE... 7 Thetis... 8 The Pascal Trainer... 9 MULE FLINT GRASP Summary PLT OVERVIEW...13 Parts of PLT GUI The PLT Language Summary IMPLEMENTATION DETAILS...40 Creating the GUI Summary of GUI Design Creating the Interpreter iv

5 Scanner The Grammar Specifications Final Step Code Interpretation Summary CONCLUSION...60 Overview of PLT Future Improvements Summary LIST OF REFERENCES...63 BIOGRAPHICAL SKETCH...65 v

6 LIST OF FIGURES Figure Page 1.1 The Programming Language Tool (PLT) First view of PLT Description of PLT Language Example of syntax error Example program 1 code First line of code evaluated Initiation before 1 st loop Condition test before 1 st loop A simple If statement evaluation A compound If statement evaluation Incrementing the loop variable Condition test before 2 nd loop Evaluation of print statement (skipped repetitive if statements) Conditional test becomes false Example program 1 code finished Program 2 code Program 2 is started The swap procedure is called with variables x and y Variables x and y are assigned to variables a and b...32 vi

7 3.19 The values of variables a and b have been swapped The procedure printsquare is called with variable b Inside the printsquare Procedure Return from the printsquare Procedure Return from the swap Procedure Overview flowchart of PLT The for loop A simple applet with one button The code to create a simple applet Additional components added to applet Code to add additional components to applet Text is colored red when button is selected Using a button action to color text Code to apply changes to GUI Creating a toolbar Scanner.java Contents of String s Tokens sent by scanner to parser The grammar specifications for PLT Actions applied by parser to the for loop The Classes used in grammar specification Reduction rule for token VARIABLE Class VariableNode Reduction rule for token NUMBER Class VariableNode...58 vii

8 4.21 Reduction rule for an assignment statement Class AssignNode Parse tree for initialization of the for loop...59 viii

9 Abstract of Thesis Presented to the Graduate School of the University of Florida in Partial Fulfillment of the Requirements for the Degree of Master of Engineering PLT:PROGRAMMING LANGUAGE TOOL By Jared Rubin May 2001 Chairman: Douglas D. Dankel II Major Department: Computer and Information Science and Engineering When first learning to program, a novice is usually taught that a computer program consists of a collection of statements. He learns about the different statement types and what each provides to the task of generating a solution to a problem. While these concepts are easy to understand, novice programmers typically experience a common problem: the inability to form an appropriate mental model of the execution of code. The Programming Language Tool (PLT) is a web-based application developed to assist beginning programmers in building a model of code execution. This tool provides a simple user interface that any person with Internet access can use. PLT takes code entered by a user and executes it line by line. As it steps through the code, the current line being executed is highlighted. In addition, all variables declared by the user are presented as well as the current values of these variables. PLT allows the use of standard control statements: if then else, while, and for. Another feature of PLT is that ix

10 subroutines can be declared and called within the code with each displaying a separate environment of variables. PLT tracks all of these environments and allows the user to see any of interest at any point during the code s execution. Therefore, PLT significantly assists a user in obtaining a better understanding of program control flow. x

11 CHAPTER 1 INTRODUCTION Problem Overview Advances in technology in everyday use have caused an increase in demand for individuals to enter the field of information technology. These individuals come from all types of educational backgrounds. However, no matter what the individual s background, all have one task in common: a need to learn basic computer programming skills. The typical syllabus for teaching any programming language consists of four topics: data types, syntax, control flow, and procedures. While there is consensus on teaching these topics to a beginning computer programmer, there is no consensus on the order in which they should be taught. Regardless of the order, individuals learning their first programming language often encounter the same conceptual problems when writing code and understanding what the code does. These include the following: What is block structure? How do different statements affect control flow? What is the scope of a variable, and what should be capitalized? In addition, a beginner programmer encounters many logical mistakes from the two topics of control flow and procedures. Control flow, i.e. how a program executes, is the core of any programming language. The common control flow instructions used by all major languages include the following: if then else, while do, and for loop. This set of instructions determines how a program executes. Procedures require a beginning computer programmer to understand the scope of variables. Computer 1

12 2 programs depend heavily on separate pieces of code, often known as subroutines or procedures. Each subroutine has its own scope or the range of statements where a program variable is visible. For example, variables in the main body of a program may or may not be in the scope of a subroutine. Learning the topics of control flow and procedures is difficult because most teaching environments lack appropriate tools to aid beginners to visualize what is occurring when their program executes and why. These individuals would benefit from a tool that (1) allows them to walk through code seeing why the control flow acts the way it does and (2) presents a visualization of the scope of variables to illustrate how and why the concept of scope is important. The focus of this thesis is to develop an application called PLT, Programming Language Tool, to assist students in overcoming the difficulties of control flow and procedures as mentioned above. Overview of PLT PLT is a computer program written entirely in Java. This program is a Java applet, allowing it to run as a web based application through an Internet browser. The user interface of PLT is implemented using the Java Swing package. Users type code directly into the applet and view the results of the execution of their code. The result is an easy to use system that conveys to the user the concepts of control flow and scope (See Figure 1). PLT allows a beginning computer programmer to enter code consistent with the psuedolanguage syntax accepted by PLT. If the code entered is syntactically incorrect, the user is informed. Once syntactically correct code is entered, the user views the results

13 Figure 1.1 The Programming Language Tool (PLT) 3

14 4 of the code s execution. The user has the ability to single step (i.e., go from one line of code to the next), seeing how the program behaves. All variables in the code are tracked, as are the variables associated with called procedures. The user knows his exact location in the code as it executes because PLT highlights the current statement being executed. As the code is executed, the results of this execution are displayed. This allows programmers to understand the control flow of instructions and the scope of variables. Although PLT is geared toward beginner programmers, it can be used for experienced programmers to evaluate code as well. Thesis Organization The thesis is organized into five chapters. Chapter 2 discusses other web-based applications and the underlying technology used in PLT. Chapter 3 provides a high level view of PLT from a user s perspective. It contains a walk through of how and what PLT is capable of doing and how to use PLT effectively. Throughout this chapter are screen shots of the user interface illustrating PLT s use. Chapter 4 discusses the implementation issues of PLT, supplying a low level view from the designer s perspective. Finally, Chapter 5 provides a conclusion for this thesis with suggestions for future improvements of PLT.

15 CHAPTER 2 BACKGROUND This chapter gives a brief discussion of the technologies used in developing PLT. Java, Java Swing, HTML, and Java Cup Parser are discussed in the first half of this chapter. The second half of this chapter discusses several software tools developed at other universities that assist students in learning how to program. These include PVSE, Thetis, The Pascal Trainer, MULE, FLINT, and GRASP. Java Java is an object-oriented programming language developed by Sun. The original use of the Java language, embedding active content (applets) within web pages, required security because of the ability to execute code from untrusted hosts [Sun99]. The ability to show active content in the Web was first shown in the Sun Web browser HotJava. After the release of HotJava, other major web browsers began to support the running of Java applets including the two most popular web browsers, Netscape Navigator and Internet Explorer. The Java language shares many similarities with C++. Some of the main differences between Java and C++ are that Java has automatic garbage collection and multithreading while C++ does not. In addition, Java does not have the features of multiple inheritance and operator overloading that have caused difficulties in C++ [Eck00]. Java allows for secure execution of code across a network and is platform 5

16 6 independent. Java is compiled to an intermediate byte-code, which is executed by a Java interpreter. JFC/Swing JFC, or the Java Foundation Classes, encompasses a group of features to help people develop complex applications and build graphical user interfaces (GUIs). Swing components are part of the JFC and are build on top of Java s Abstract Web Toolkit (AWT) which was Sun s older package for building graphical user interfaces. Swing components include items like text boxes, buttons, and drop down lists. Swing helps build a pure Java based GUI. JFC was first announced at the 1997 JavaOne Developer Conference and is defined as containing the following features: 1. The Swing Components This includes everything from buttons to split panes. 2. Pluggable Look and Feel Support This gives any program using Swing components a choice of looks and feels. For example, the same program can use either the Java look and feel or the Windows look and feel. 3. Accessibility API This enables assistive technologies such as screen readers and Braille displays to obtain information from the user interface. 4. Java 2D API This enables developers to easily incorporate high-quality 2D graphics, text, and images in applications and in applets. 5. Drag and Drop Support This provides the ability to drag and drop between a Java application and a native application [Sun99]. HTML HTML, Hypertext Markup Language, is the text markup language used on the World Wide Web. It indicates the structure and format of a document and instructs a Web

17 7 browser on how to render the document. HTML is written as a plain text file but it allows one to publish documents, create links to other documents, and include graphics and multimedia. CUP Parser Generator for JAVA The Java(tm) based Constructor of Useful Parsers (CUP for short) is a system for generating Look Ahead LR (LALR) parsers from simple specifications [Hud96]. A parser is a software program that reads a program and determines whether or not it has valid syntactic structure. Parsing is important because a compiler takes source code and translates it into object code, which is readable by a computer. A parser generator inputs text specifying the language grammar and constructs, and outputs an executable program, which recognizes the specified language. In performing these actions, CUP provides the same function as YACC (Yet Another Compiler Compiler), which is a widely used program for generating parsers. The main difference between CUP and YACC is that CUP is written in Java and produces a parser that is implemented in Java. Overview of Other Teaching Tools Over the past 10 years, many teaching tools have been developed to improve the learning process for beginner programmers. These tools have been developed at various universities and have been presented at conferences for the Special Interest Group for Computer Science Education (SIGCSE). PVSE The Pascal-like language and accompanying user environment (PVSE) is a system developed at Lawrence University to allow the exploration of parameter-passing and scooping [Nap96]. The programming language used in PVSE offers only assignment

18 8 statements and procedures. The reason for this is that the study of parameter passing and scope of variables does not require a language with decisional logic, iterative constructs, and structured data types. However, understanding parameter passing and scope does require an understanding of the role played by the stack of activation records that is maintained by an existing program. The PVSE system provides students with this feature by producing detailed graphical snapshots of the stack of activation records at user-selected points within a program s execution. These snapshots are rendered by GAIGS (Generalized Algorithm Illustration through Graphical Software) [Nap96]. GAIGS is an algorithm visualization system that was also developed at Lawrence University. The syntax of the PVSE language is similar to Pascal except for extensions to the syntax of formal parameter lists. The PVSE language supports four types of parameter passing: pass by reference, pass by value, pass by copy-restore, and pass by macro. In addition to the parameter passing options, PVSE also allows for either static binding or dynamic binding for non-local variables. PVSE allows only three types of statements in statement blocks. The first is a TRACE statement that takes a snapshot of the runtime stack. This snapshot can then be viewed with GAIGS. The second statement is a procedure call, and the third is the assignment statement. Thetis Thetis is a programming environment designed for student use that was developed at Stanford [Fre96]. Commercially available compilers are often not well-suited to students in introductory computer science courses because they assume a level of sophistication that beginning students do not possess. [Fre96 p 300]. Thetis consists of a C interpreter and user interface that provides students with editing, debugging, and

19 9 visualization capabilities. With Thetis a student creates source files in editor windows, indicates what files compose the application, and then controls the execution of the program through menus. The major differences between Thetis and a regular Integrated Development Environment (IDE) are that Thetis improves error reporting by giving descriptive messages, and it provides a debugger/visualizer that operates at a conceptual level for beginning programmers. In addition, the Thetis interpreter checks for some common run-time errors which introductory students often have a difficult time detecting and debugging. Thetis also has another debugging tool available, Listener, which allows the user to evaluate any expression while the program runs. This allows for students to test functions and determine the source of errors without repeatedly restarting the program and/or writing special code for test cases, reinforcing the idea of incremental development. The Pascal Trainer Trainer was created to provide a system for learning programming that would build logically from simple expressions, through statements, to functions and procedures. Trainer is a DOS application developed by Adam Brooks Webber at Western Illinois University [Web96]. Trainer s compiler is a parser also developed by Webber that has separate entry points for the parsing of expressions, statements, functions, procedures, and full programs. The system gives immediate feedback on small exercises to the student without special instruction in the interface. The programming statements that Trainer covers are assignment, conditional, procedure call, compound, while loop, for loop, and repeat loop. The data types used in Trainer are Integer, Boolean, Char, and String. In addition, Trainer catches many runtime errors that a student would have to

20 10 debug on his or her own. The runtime error checking it catches includes overflow, attempts to use uninitialized variables, and infinite loops. MULE MULE, the Multiple Language Environment, is a software environment developed at Ithaca College that supports the development of interpreter based projects for multiple languages [Bar95]. The main goal of MULE was to teach students the concepts central to a traditional programming course and give experience with the implementation of various programming languages. Another goal of MULE was for students to understand how language features are implemented because every language construct has implementation concerns. MULE supports the development of interpreterbased projects for multiple language paradigms by providing a simple but limited interpreter for each paradigm. MULE provides a text window in which commands can be typed. A command interpreter parses the typed text and then executes the code. FLINT The Flowchart Interpreter (FLINT) is an integrated program development tool used for teaching design, algorithm development, testing, and debugging [Zie99]. Students engage in all of these activities through a point and click interface and can move back and forth between them. FLINT was developed at Western Kentucky and offers support to teachers as well as students in introductory programming courses. This tool was developed because commercially available IDEs have several disadvantages for introductory programming students. The first disadvantage is that a whole programming language with complex syntax is supported. This is a problem because students can end up thinking program development is writing a syntactically correct program. The second disadvantage is that problem solving design is not supported. This is a problem because

21 11 CASE tools support the development environment of software lifecycle, while not supporting problem solving and design. FLINT allows a student to avoid dealing with syntactic details that often require considerable time for debugging. FLINT uses structured flowcharts to represent algorithms. Constructed flowcharts will always be structured and syntactically valid because complete program constructs can only be added, deleted, moved, or copied. FLINT only supports the basic program structures of sequence, selection, and repetition. GRASP GRASP, or Graphical Representation of Algorithms, is a software engineering tool that automatically generates the Control Structure Diagram (CSD) for multiple languages [Hen00]. When combined with an appropriate compilation system, GRASP becomes a complete program development environment with support for editing, compiling, and execution. CSD is a graphical representation that visually depicts the control structure and module-level organization of the source code. Applying visualization techniques to represent program structure and behavior is the focus of software visualization research. CSD allows control structures and control flow to be seen easier by programmers than they would in plain text. Summary This chapter covered the technologies used in the construction of PLT including Java, Java Swing, Java Cup Parser Generator, and HTML. Java is an object-oriented language providing all of the logic for constructing PLT. JFC/Swing provides for GUI construction for programs written in Java. Cup Parser Generator provided a tool to build

22 12 the parser for PLT. HTML is a markup language used to specify structure and format of documents on the World Wide Web. In addition to the technologies discussed in this chapter, other tools for teaching beginner programmers were discussed. PVSE is a system that teaches parameter passing and scope of variables. Thetis supports incremental development of programs. The Pascal Trainer is a tool for learning programming by building logically from simple expressions to whole programs. MULE is a tool that is geared to immediate programmers because it focuses on the differences between programming languages. FLINT is a system used for teaching design, algorithm development, testing, and debugging through the use of flowcharts. GRASP is a tool used by many IDEs to visually show program control flow.

23 CHAPTER 3 PLT OVERVIEW This chapter provides a high level overview of PLT. It also serves as a README file for anyone that wants to learn how to use PLT. The chapter displays pictures showing Figure 3.1 First view of PLT 13

24 14 two examples of the functionality of PLT. When a user starts the PLT applet the user sees the first view of PLT as shown in Figure 3.1. Parts of PLT GUI There are six different components in the PLT. The first is a toolbar that contains all of the buttons necessary to use PLT. The buttons are labeled enter, start, next, prev, and reset. There are five text areas: Input Code, Result, Environment Variables, All Environments, and Output. The only area in which a user can type is the input code area where a user types his program. After typing the code, the user selects the enter button. The enter button causes the code to be checked for syntactic errors. If there is a syntactic error then a message appears in the result area; otherwise, the user can press the start button. The start button is only selectable after the enter button has been selected and the program entered is syntactically correct. The start button begins the line-by-line execution of the code. The next and prev button are selectable after the start button has been selected. The next and prev button cause execution forward and backward through the program. The reset button is selectable at any time. The purpose of the reset button is to allow a user to start over. The reset button clears all text in all the areas of PLT. When the reset button has been selected, the enter button and reset button are the only buttons that can be selected. There are five text areas in PLT. The input code area has already been explained and is the only area that is editable. The result area displays the result of the current line of code highlighted by PLT. The bottom three areas, starting from the left, are environment variables, environment tabs, and output. The enviroment variables area

25 15 displays only the current environments variables and the values of these variables. The text under each environment tab displays each active environments in the program executed. In addition the environment tabs area allows for a user to select which environment they want to see simply by selecting the tab of that environment. The output area displays the output of the program. One interesting feature of the output area is that it displays all of the output of the program once the start button has been selected. The output area does this because the result area displays the result of the current highlighted line of code. Therefore, it would be repetitive for both the result area and output area to display the result of a print statement at the same time. In addition, a user may just want to see the result of a program without stepping through the whole program. The PLT Language To use PLT, a user needs to know the language constructs it supports. PLT does not use any specific language, but instead uses a pseudo language similar to Pascal. The language constructs supported by PLT are described in Figure 3.2. After loading the applet, the user enters code in the Input Code area that is consistent with the grammar of PLT and selects the enter button. Figure 3.3 shows code that has been entered into the Input Code text area. Because the code has a syntax error, a missing end brace, an error message appears in the Result area. A future improvement in PLT would be to show how to correct the error or where the error is in the code. When one has an error in his code, hitting the reset button clears everything, allowing the user to start over. Figure 3.4 shows new code entered into the Input Code area after the reset button has been pressed. Because the code entered into the input code text area is syntactically

26 16 correct, no error messages appear when the Enter Button is pressed, so the Start Button can now be selected. Pressing the Start Button causes the first line of code to be highlighted. This identifies the current statement in the program being executed as displayed by Figure 3.5. By repetitively pressing the next button, PLT steps through each line of code. Additionally, the user has the option of pressing the previous button to go backwards in the program. The following example illustrates the display of control flow for a for loop and an if then else statement. Figures 3.5 through 3.14 show PLT stepping through the program code of Figure 3.4 when one repetitively selects the next button. Programs begin and end with brackets. Only integers are allowed. Variables can only be assigned integer whole numbers. The following reserved words cannot be used for variable names or for subroutine names: if, else, elsif, while, for, print, and sub. Variables can be incremented and decremented: x++ or x--. A variable can hold the range of values from -2^31 to 2^ Expressions can contain the operations: *, /, +, -, and %. The supported control operators are: if () {} if () {} else {}, if () {} elsif() {}, while () {}, and for (;;) {}. The following conditional operators are allowed in expressions <, >, <=, >=, &,, and ==. Subprograms are permitted but must be declared within the main program. Subprograms cannot be declared within other subprograms. A subprogram can call another subprogram. Recursion is allowed. Subprograms pass parameters using the pass-by-value-result method. Figure 3.2 Description of PLT Language.

27 Figure 3.3 Example of syntax error 17

28 Figure 3.4 Example program 1 code 18

29 Figure 3.5 First line of code evaluated 19

30 Figure 3.6 Initiation before 1 st loop 20

31 Figure 3.7 Condition test before 1 st loop 21

32 Figure 3.8 A simple If statement evaluation 22

33 23 Figure 3.9 A compound If statement evaluation

34 Figure 3.10 Incrementing the loop variable 24

35 Figure 3.11 Condition test before 2 nd loop 25

36 Figure 3.12 Evaluation of print statement (skipped repetitive if statements) 26

37 Figure 3.13 Conditional test becomes false 27

38 28 Figure 3.14 Example program 1 code finished The next example illustrates the scope of variables in a program and the passing of parameters from one environment to another. The code of program 2 is shown in

39 29 Figure The example has two procedure calls, swap and printsquare. When a new environment occurs in the code, a new tab in the middle window of the bottom panel Figure 3.15 Program 2 code

40 30 appears. When that new environment is gone, the tab in the middle window will also disappear. In the first example, there was a single main program with no procedure calls. Figure 3.16 Program 2 is started

41 31 As a result, the single environment that was created was labeled main. This example results in three environments: main, swap, and printsquare. Figure 3.17 The swap procedure is called with variables x and y

42 32 Figure 3.18 Variables x and y are assigned to variables a and b

43 33 Figure 3.19 The values of variables a and b have been swapped

44 Figure 3.20 The procedure printsquare is called with variable b 34

45 35 Figure 3.21 Inside the printsquare Procedure

46 36 Figure 3.22 Return from the printsquare Procedure

47 37 Figure 3.23 Return from the swap Procedure

48 Figure 3.24 Program 2 is finished 38

49 39 Summary This chapter provided an overview of PLT from the user s perspective. It began with an introduction to PLT s user interface and how to use the buttons that control it. A simple example is first provided to illustrate what is displayed by a program with incorrect syntax. The chapter provided two more detailed examples illustrating the use of PLT. These examples illustrate the user s view of control flow and environment scope in a program. The next chapter discusses the internal implementation of how PLT was constructed.

50 CHAPTER 4 IMPLEMENTATION DETAILS This chapter covers the underlying design and implementation details in developing PLT. It discusses the various procedures in the construction. The chapter is divided into two main sections. The first section discusses the construction of a Graphical User Interface (GUI) using Java Swing and how information typed into the GUI is passed to the interpreter. Following this is a discussion of how results to be displayed are retrieved from the interpreter. The next section discusses the creation of the interpreter. A flow chart describing the sequence of events that occurs when PLT is used is presented in Figure 4.1. Interpreter GUI GUI sends information Scanner Scanner breaks string Parser from Input code box into tokens and sends as string to Scanner the tokens to Parser Parser takes tokens and makes reductions to build program start symbol, then evaluates program and sends results back to GUI Figure 4.1 Overview flowchart of PLT 40

51 41 The code entered in PLT has many options making the grammar and scanner complex. Therefore, a simplified version of the grammar and scanner are demonstrated in this chapter. The simplified version demonstrates the for loop shown in Figure 4.2. { for (I=0; I<5; I=I+1) { print(i); } } Figure 4.2 The for loop Creating the GUI The GUI for PLT required many components to display different information and to contain buttons. PLT contains five subwindows that include an input window, a result window, an environment variables window, an environments window, and an output window. In addition a toolbar contains all of the buttons for PLT. The purpose of the windows and buttons was discussed in Chapter 3. The following discussion illustrates how these components are created in the construction of the GUI. All the code for PLT including the GUI was written in Java. The GUI was developed using the Java Swing package, which contains a set of components that a user can put into an applet. This section starts with the creation of a simple applet, then components are added to this applet that are similar to the types of components that were used in PLT. This includes functionality to retrieve input from the GUI by button activation and the coloring of text. In addition, it is demonstrated how to deactivate buttons and how to add or remove tabs from a tabbed pane. A simple applet with one button is shown (See Figure 4.3).

52 42 Figure 4.3 A simple applet with one button To create an applet one has to extend the JApplet class. Components are added to an applet by calling the method getcontentpane() and using the add() method with the component as a parameter (See Figure 4.4). The other parameter in the add method is the location where the component is placed. The addition of components occurs in the init() method of JApplet [Gea99]. This method is automatically called when the applet is opened in a browser. There are many types of layouts that can be applied to an applet, in this example the BorderLayout is used. The meaning of BorderLayout is explained in the next example. Figure 4.5 illustrates additional components added to the previous applet. The

53 43 import javax.swing.*; import java.awt.*; public class simpleapplet extends JApplet { JButton button = new JButton("hit me"); public void init() { getcontentpane().add(button,borderlayout.north); } } Figure 4.4 The code to create a simple applet placement of these components in the GUI is determined by choosing one of the locations NORTH, SOUTH, WEST, EAST, or CENTER. For example the button hit me is added to the NORTH part and a JTextPane is added to the CENTER part of the applet. Figure 4.5 Additional components added to applet

54 44 import javax.swing.*; import java.awt.*; public class simpleapplet extends JApplet { JButton button = new JButton("hit me"); JTextPane jt = new JTextPane(); JTabbedPane jtp = new JTabbedPane(); public void init() { jt.settext(new String("the text for jtextpane")); jtp.addtab(new String("first"),new JTextArea("1 st textarea")); jtp.addtab(new String("second"),new JTextArea("2 nd textarea")); getcontentpane().add(button,borderlayout.north); getcontentpane().add(jt,borderlayout.center); getcontentpane().add(jtp,borderlayout.south); } } Figure 4.6 Code to add additional components to applet The components added to the applet include a JTextPane and a JTabbedPane (See Figure 4.6). A JTextPane is a component that allows the formatting of text to be changed. These formatting changes include changing the font s color, size, and font type. In addition, text can be underlined, bolded, and italicized. This component was used to contain the input code as discussed by Chapter 3. A JTabbedPane is a component that allows a user to switch between components by clicking on a tab. This component is used so that each environment can be selected when a user s code is evaluated as discussed in Chapter 3. A common requirement of GUI s is the ability to trigger actions when a button is selected. This is done by writing an actionperformed() method for a button that is triggered when the button is selected [Sun00]. Figure 4.7 demonstrates the font color of text set to red when the color text button is selected.

55 45 Figure 4.7 Text is colored red when button is selected This example illustrates a button action when the button has been selected. By default text is displayed in black within text areas. In this example, the pressing of the button results in the text becoming red. The code required to color the text red in the applet is shown in Figure 4.8. The ability to change text color or font size is done through

56 46 styles. To apply a new style to the above JTextArea, the attribute of color red is set for a style. This style is then applied to the text in the JTextArea. Additionally if an actionperformed() method for a button exists, it will not be triggered if disabled by using the method setenabled(false) for that button. When a button is disabled it is automatically displayed in gray rather than black, which is used for active components. This is an important feature consistent with good GUI design principles [Joh00]. import javax.swing.*; import java.awt.*; import java.awt.event.*; import javax.swing.text.*; public class simpleapplet extends JApplet { JButton button = new JButton("color text red"); JTextPane jt = new JTextPane(); JTabbedPane jtp = new JTabbedPane(); public void init() { jt.settext(new String("the text for jtextpane")); jtp.addtab(new String("first"),new JTextArea("1st textarea")); jtp.addtab(new String("second"),new JTextArea("2nd textarea")); button.addactionlistener(new ActionListener() { public void actionperformed(actionevent e) { SimpleAttributeSet sa = new SimpleAttributeSet(); // next 4 lines set StyleConstants.setForeground(sa,Color.red); // color of text red StyledDocument document = (StyledDocument)jt.getDocument(); document.setcharacterattributes (0,document.getLength(),sa,true); }}); getcontentpane().add(button,borderlayout.north); getcontentpane().add(jt,borderlayout.center); getcontentpane().add(jtp,borderlayout.south); } } Figure 4.8 Using a button action to color text

57 47 The ability to modify the GUI by adding interactions to a button is simple. For example, PLT required text to be sent to the scanner, tabs to be removed/added from the tabbed panel, and for the JTextPane to not be editable. This was all done within the actionperformed() method of buttons. Figure 4.9 shows the code one would write in the actionperformed() method of a button to remove a tab from the JTabbedPane, to get the text from the JTextPane, and to set a JTextPane to uneditable [Gea99]. String s = jt.gettext(); jt.removetabat(0); jt.seteditable(false); Figure 4.9 Code to apply changes to GUI The GUI of PLT has many components. Everything shown so far has been a simple, single component, but PLT required many buttons to add interaction. Instead of adding all the buttons separately to the GUI, a toolbar was created to keep these buttons together. The code required to create a toolbar is shown in Figure After creating the toolbar, it is added to the contentpane identical to other components. JToolBar jt = new JToolBar(); jt.add(jbutton button1= new JButton( enter ); jt.add(jbutton button2= new JButton( start ); jt.add(jbutton button3= new JButton( next ); Figure 4.10 Creating a toolbar In addition to sending text from the GUI to the interpreter, PLT required that the GUI retrieve results from the interpreter. Results were reflected in the GUI by adding text

58 48 to a text area. Previously it was shown that to obtain text from a text area the gettext() method is called. Setting text in a text area uses the settext() method. Summary of GUI Design Many of the design decisions for the GUI in PLT were based upon the instruction provided by the book GUI Bloopers Don ts and Do s [Joh00]. These included the activation or inactivation of buttons based upon their functionality, the use of clear button names, and the addition of labels above components in the GUI to describe the purpose of that component. The only missing component within the GUI was a help button. A help button could create a window that instructs the user on the use of PLT. This would be a simple addition to the toolbar. Creating the Interpreter PLT requires an interpreter to translate the code entered into the GUI by the user. This was accomplished using CUP, a system for generating LALR parsers from simple specifications. Using CUP involves creating a specification of the grammar for the parser and constructing a scanner for creating meaningful tokens (e.g., keywords, numbers, and special symbols) from the input characters [Hud96]. In the following section, the scanner is discussed and then the grammar specifications used to create the parser is presented. A brief example of code translation is also presented. Scanner When the user has entered code into the Input Code sub-window and presses the enter button, the GUI sends this code from the Input Code sub-window to the scanner. This is done when the scanner s initialize method is called. The scanner consists of a large switch statement with the different cases matching the different types of tokens

59 49 within the pseudo-language (See Figure 4.11). This includes numbers, variables, reserved words, operators, parentheses, brackets, and semicolons. When the scanner matches one of the items from this set, a token is sent to the parser. public class scanner { static int next_char; // current character static int position=0; // position in the string s static String s = new String(""); // this is the // string sent from GUI submit box /* advance input by one character in string s */ public static void advance() throws java.io.ioexception { if (position==s.length()) { test=0; } // this is to determine if at end of string if (test==1) { // variable test used to determine next_char = s.charat(position); // if we have // gone through the whole string position++; } else { next_char = blank.charat(0); } } /* initialize scanner, first method called by PLT */ public static void initialize() throws java.io.ioexception { s=plt.getinfo(); // get code from GUI advance(); } /* recognize and return the next complete token */ public static Symbol next_token() throws java.io.ioexception { for (;;) { if ((test==1) && (pos==s.length())) { // at // EOF break out of outer for loop return new Symbol(sym.EOF); } else { // we are not at EOF so do switch switch (next_char) { case '0':case '1':case '2':case '3':case '4': case '5':case '6':case '7':case '8':case '9': /* parse a decimal integer */ double val = 0; do { value = value * 10 + (next_char - '0'); advance(); } while (next_char >= '0' && next_char <= '9');

60 50 return new Symbol(sym.NUMBER, new Double(value)); case ';':advance(); return new Symbol(sym.SEMI); case '+':advance(); return new Symbol(sym.PLUS); case '{':advance(); return new Symbol(sym.LBRACE); case '}':advance(); return new Symbol(sym.RBRACE); case '(':advance(); return new Symbol(sym.LPAREN); case ')':advance(); return new Symbol(sym.RPAREN); case '<':advance(); return new Symbol(sym.LESS); case '=':advance(); return new Symbol(sym.ASSIGN); case -1: return new Symbol(sym.EOF); default: // parse a variable or reserved word StringBuffer barebuffer = new StringBuffer(); if ((next_char >= 'A')&&(next_char <= 'z')) { while ( ((next_char >= 'A')&&(next_char <= 'z')) (next_char == ',')) { barebuffer.append((char)next_char); advance(); } String key = barebuffer.tostring(); // check if string is a reserved word else if (key.equals("for")) { return new Symbol(sym.FOR); } else if (key.equals("print")) { return new Symbol(sym.PRINT); } return new Symbol(sym.VARIABLE,key); // not reserved word } // so therefore it is a variable else { advance(); break; } // end of else } // end of big switch } // end of else } // end of for } // end of method next_token } // end of class scanner Figure 4.11 Scanner.java The scanner class has three methods. These methods are initialize(), advance(), and next_token(). The purpose of initialize() is to initialize the scanner by assigning the input text from the GUI to a String s as shown in Figure 4.12.

61 51 The purpose of advance() is to move through the string s while the purpose of next_token() is to send the next token found in the string s to the parser. String s= { for(i=0; I<5; I=I+1) { print(i); } } Figure 4.12 Contents of String s The scanner class has three main variables. These variables are string s, integer next_char, and integer position. String s contains the text sent from the GUI to the scanner. The current position in s is tracked by the variable position. When position points to the end of s, the variable test is set to 1 to signal that there are no more tokens. The variable next_char is the current character in s. The variable next_char is an integer because when one retrieves a character from a string, it is returned as an integer that must be converting into the character type. Subtracting char 0 does this. Figure 4.13 shows the set of tokens sent to the parser for the code in string s of Figure LBRACE FOR LPAREN VARIABLE ASSIGN NUMBER SEMI VARIABLE LESS NUMBER SEMI VARIABLE ASSIGN VARIABLE PLUS NUMBER RPAREN LBRACE PRINT LPAREN VARIABLE RPAREN SEMI RBRACE BRACE Figure 4.13 Tokens sent by scanner to parser The Grammar Specifications So far, we have seen code entered into the GUI passed to a scanner, which creates a list of tokens as shown by Figure This list of tokens is considered an input sentence that is sent to the parser. The parser converts this list of input tokens into a parse

62 52 tree using the bottom reduction rules of a grammar specification [Ter97]. The grammar specifications representing PLT s program syntax are shown in Figure These grammar specifications are used by CUP to generate the parser. The program symbol is the top rule for PLT s grammar. CUP requires that all terminals, nonterminals, and precedence rules be specified [Hud96]. CUP allows semantic actions to be added to the grammar, so the program code entered into the GUI can be translated. /* Preliminaries to set up and use the scanner. */ init with {: scanner.init(); :}; scan with {: return scanner.next_token(); :}; /* Terminals (tokens returned by the scanner). */ terminal LPAREN, RPAREN, LBRACE, RBRACE; terminal SEMI, ASSIGN, LESS, FOR, PRINT; terminal String VARIABLE; terminal Double NUMBER; /* Non terminals */ non terminal program; non terminal StmtNode stmt, for_stmt, block, block_stmt; stmt_list; non terminal ExprNode expr; /* Precedences */ precedence right ASSIGN; precedence left LESS; precedence left PLUS; /* The grammar */ program ::= LBRACE stmt_list:s RBRACE {: Environment e = new Environment ("main"); (0) s.eval(e); :} ; stmt_list ::= stmt:s SEMI {: RESULT = new StmtListNode(s); :} // (1) block:b {: RESULT = new StmtListNode(b); :}; // (2) stmt ::= expr: {: RESULT = e; :} // (3) expr:e1 ASSIGN expr:e2 {: RESULT = new AssignNode(e1,e2); :} // (4) PRINT LPAREN expr:e RPAREN {: RESULT = new PrintNode(e); :} ; // (5)

63 53 block ::= block_stmt:b {: RESULT = b; :} // (6) for_stmt:f {: RESULT = f; :} ; // (7) for_stmt ::= FOR LPAREN stmt:s SEMI stmt:t SEMI stmt:u RPAREN block_stmt:b {: RESULT = new ForStmtNode(s,t,u,b); :} ; // (8) block_stmt ::= LBRACE stmt_list:sl RBRACE {: RESULT = new BlockStmtNode((StmtListNode)sl); :} ; // (9) expr ::= expr:e1 PLUS expr:e2 {: RESULT = new PlusNode(e1,e2); :} // (10) NUMBER:n {: RESULT = new ValueNode(n); :} // (11) VARIABLE:v {: RESULT = new VariableNode(v); :} // (12) expr:e1 LESS expr:e2 {: RESULT = new LessNode(e1,e2); :} ; // (13) Figure 4.14 The grammar specifications for PLT Once the grammar for the language is fully specified, the parser is generated by CUP. The actual parser code that is generated is not presented in this chapter. Figure 4.15 details the set of actions performed by the parser when the tokens of the for loop shown in Figure 4.13 are processed. STEP ACTION Reduction Parse Stack 0 Read LBRACE LBRACE 1 Read FOR LBRACE FOR 2 Read LPAREN LBRACE FOR LPAREN 3 Read VARIABLE LBRACE FOR LPAREN VARIABLE 4 reduce 12 LBRACE FOR LPAREN expr 5 read ASSSIGN LBRACE FOR LPAREN expr ASSIGN 6 read NUMBER LBRACE FOR LPAREN expr ASSIGN NUMBER 7 reduce 11 LBRACE FOR LPAREN expr ASSIGN expr 8 reduce 4 LBRACE FOR LPAREN stmt 9 read SEMI LBRACE FOR LPAREN stmt SEMI 10 read VARIABLE LBRACE FOR LPAREN stmt SEMI VARIABLE

64 54 11 reduce 12 LBRACE FOR LPAREN stmt SEMI expr 12 read LESS LBRACE FOR LPAREN stmt SEMI expr LESS 13 read NUMBER LBRACE FOR LPAREN stmt SEMI expr LESS NUMBER 14 reduce LBRACE FOR LPAREN stmt SEMI expr LESS expr 15 reduce 11 LBRACE FOR LPAREN stmt SEMI expr 16 reduce 10 LBRACE FOR LPAREN stmt SEMI stmt 17 read SEMI LBRACE FOR LPAREN stmt SEMI stmt SEMI 18 read VARIABLE LBRACE FOR LPAREN stmt SEMI stmt SEMI VARIABLE 19 reduce 12 LBRACE FOR LPAREN stmt SEMI stmt SEMI expr 20 read ASSIGN LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN 21 read VARIABLE LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN VARIABLE 22 reduce 12 LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN expr 23 read PLUS LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN expr PLUS 24 read NUMBER LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN expr PLUS NUMBER 25 reduce 11 LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN expr PLUS expr 26 reduce 10 LBRACE FOR LPAREN stmt SEMI stmt SEMI expr ASSIGN expr 27 reduce 4 LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt 28 read RPAREN LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN 29 read LBRACE LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE 30 read PRINT LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE PRINT 31 read LPAREN LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE PRINT LPAREN 32 read VARIABLE LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE PRINT LPAREN VARIABLE 33 reduce 12 LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE PRINT LPAREN expr

65 55 34 read RPAREN LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE PRINT LPAREN expr RPAREN 35 reduce 5 LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE stmt 36 read SEMI LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE stmt SEMI 37 reduce 1 LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE stmt_list 38 read RBRACE LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN LBRACE stmt_list RBRACE 39 reduce 6 LBRACE FOR LPAREN stmt SEMI stmt SEMI stmt RPAREN block_stmt 40 reduce 8 LBRACE for_stmt 41 reduce 7 LBRACE block 42 reduce 2 LBRACE stmt_list 43 read RBRACE LBRACE stmt_list RBRACE 44 reduce 0 program Figure 4.15 Actions applied by parser to the for loop The parsing of the for loop requires 44 steps. The action column in Figure 4.15 describes what occurs in each step of the parser. The reduction column specifies which rule the parser used to perform a reduction on the tokens in the parse stack. The parse stack column shows the state of the stack as reductions are applied. The grammar specifications shown in Figure 4.14 and actions of parser in Figure 4.15 should be familiar for anyone experienced with parsing. Final Step Code Interpretation Code interpretation is made possible by adding semantic actions within the grammar specifications [Hud96]. Semantic actions are placed in the brackets {::} for each of the reduction rules as shown in Figure 4.14.