2500 F '12
The Hand In
Set 1
Set 2
Set 3
Set 3h
Set 4
Set 4h
Set 5
Set 5h
Set 6
Set 6h
Set 7
Set 7h
Set 8
Set 9
Set 8h
Set 10
Set 9h
Set 11
Set 12
Set 10h

Problem Set 4h

Due date: 10/1 @ 11:59pm

Honors-section homework

Remember to do this assignment with the same partner you had for hw3. If you just moved to honors, or if your hw3 partner is no longer in the honors class, let us know right away so we can assign you a new partner.

You must follow the design recipe. However, when you turn in your homework make sure you comment out your templates.

You might also note that your graders are now being instructed to grade off for gruesomely laid-out code; proceed accordingly.

You must hand in your homework electronically, using the handin server as discussed Here.

This means that a perfect homework assignment submitted on paper, or via email, carrier pigeon, FedEx courier, etc. will be worth: ZERO POINTS. Thus you are well advised to submit a place-holder test homework solution several days early, so that you have an opportunity to get help with the handin server/plugin should you have problems.

A Graphical Editor

DrRacket allows you to edit programs. That is, you type on a keyboard and it records your keystrokes. By doing so you create a document and this document can be viewed as a program. You could also use DrRacket to enter your English assignments, though for that purpose, you can install different better-suited software applications. All of them include a functionality that computer scientists dub "editor" or even "graphical editor."

The purpose of this assignment is to design a world program that acts as a one-line editor. In other words, the challenge is to design a program that allows you and even your grandmother to enter and edit one line of text. Editing means changing existing text, perhaps by deleting a character or by adding another one to the end of the existing text, in the middle, or even the beginning.

In order to change the existing text in the middle, you must have some notion of "position" within the text. We call this position a cursor, and most graphical editors display the cursor in such a way that you can easily spot it. To move the cursor, people can use the arrow keys or the mouse.

Given this context, you can easily imagine how this configuration of your editor program comes about:

You entered the text "helloworld" and then you hit the left-arrow key about five times. This way the cursor — displayed in red — moves from the end of the text to the position between "o" and "w" in this text. If you now press the space bar, the editor should change its display as follows:

In short, it should show the phrase "hello world" with a cursor between the space and the letter "w."

Obviously this world program must keep track of two pieces of information:

  1. the text entered so far
  2. the current location of the cursor.

This in turn suggests a structure with two fields.

We can imagine several different ways of going from the information to data and back. For example, one field in the structure may contain the entire text entered and the other the number of characters between the left and the cursor. Another data representation is to use two strings in the two fields: the part of the text to the left of the cursor and the part of the text to its right. Here is our preferred approach to representing the state of an editor:

  (define-struct editor (pre post))
  ;; An Editor is a (make-editor String String)
  ;; interp.: (make-editor s t) means the text in the editor is
  ;; (string-append s t) with the cursor displayed between s and t

You must follow the design recipe in completing this assignment.

Exercise 1: Design the function render, which consumes an Editor and produces an image.

Exercise 2: Design the function editor->scene, which consumes an Editor and produces scene.

The scene for your editor program should be 33 pixels tall and 200 pixels wide. For the cursor, use a 1 x 25 red rectangle. The text that you type should appear as you hit the keys on your keyboard. Use black text of size 20 for rendering the text and place the text image into the scene at position (4,4).

Exercise 3: Design the function edit. It consumes two inputs: an editor e and a key event k. The function's task is to add all character key events k to the end of the pre field of e, unless it denotes the backspace character (#\backspace) key. In that case, it should delete the character immediately to the left of the cursor (if any).

Otherwise, the function pays attention to only two key events: "left" and "right". The former moves the cursor one character to the left (if possible), and the latter moves it one character to the right (if possible).

Note: We recommend that you develop a solid number of tests, paying attention to special cases. In addition, think of this function as a function that consumes an enumeration and use auxiliary functions that then deal with the Editor structure. (Remember: one task, one function).

Exercise 4: Use big-bang to run your editor.

Exercise 5: You should notice that if you type a lot, your editor program does not display all of the text. Instead the text is cut off at the right margin.

Modify your function edit from exercise 3 so that it ignores a key event if adding it would mean the rendered text is too wide for your scene.

Exercise 6: Develop a data representation based on our first idea, i.e., using a string and an index. Then solve exercises 1 through exercise 5 again.

Note: The exercise is a first study of making design choices. It shows that the very first design choice concerns the data representation. Making the right choice requires planning ahead and weighing the complexity of each. Of course, getting good at this is a question of gathering experience.

last updated on Sun Dec 2 14:52:34 EST 2012generated with Racket