[ANU] [DCS] [COMP2100/2500] [Description] [Schedule] [Lectures] [Labs] [Homework] [Assignments] [COMP2500] [Assessment] [PSP] [Java] [Reading] [Help]

COMP2100/2500
Assignment 2: Graphical User Interface

Due at 5pm on Friday 27th May 2005

Hints and FAQ

This assignment is to be done in pairs. You must work with a partner. You do not have to stick with the same partner you had for Assignment 1. If you can't find a partner, email comp2100@cs.anu.edu.au and I will try to find you one (but since most people will probably stay with the same partner, the possibilities may be very limited).

The next stage of the project is a graphical viewer for Open Office XML documents. Imagine that the team leader has produced a very rough prototype, then suddenly departed (for a highly-paid job at Microsoft), leaving the work incomplete. You have to pick up the pieces and complete the job.

(It may not be quite clear to you why you're writing a graphical interface to oops since it was supposed to be a web-based preflight system. Who knows what management and marketing are thinking? You're a software engineer, and the way things work these days, you just have to do what the people in the suits want.)

You are to carry out the following tasks:

1. Add code to make it format documents properly.

2. Add a menu bar with a File menu and menu items for opening and exporting documents.

3. Add a Properties menu item in the File menu that pops up a message dialog box showing document metadata (title, author's name and affiliation).

4. Add a new view that displays the document's XML structure as a tree widget side-by-side with the ordinary view.

5. (Maybe hard) Link the two views so that selecting something in one of them causes the same part of the document to become visible in the other one.

6. (Maybe very hard) Make the tree view editable so that users can modify their documents in the tree view and see the results reflected in the standard view.

---

1. Format the document

The code you have been given will display the contents of the document in a window, but it's all in one paragraph with no formatting at all. Your task here is to modify classes GuiRenderer, TextPanel and View so that the application formats the document better. When you're finished, what you see in the window should look roughly like what you see in your web browser when it displays the HTML version of the document. Specifically:

1. Add a scrollbar so that users can see all of long documents. (Actually, the right way to do this is not to use a scrollbar as such, but to use a JScrollPane.)

2. Use bold and italic fonts where appropriate for span elements. (See the existing HTML renderer for how to identify bold and italic spans. The basic font for the application is 18pt Serif plain, so in ordinary text, an italic span should be in 18pt Serif italic... and so on.)

3. Start each paragraph on a new line. Paragraphs with style Initial Body Text should start at the left margin like ordinary lines, but paragraphs with style Text body should have the first line indented by two ems. (An “em” is the width of a capital ‘M’ in the current font.)

4. Display headings in large bold fonts: 36pt Serif bold for the article's title, 24pt Serif bold for Primary Headings, 18pt Serif bold for the Author's name and Secondary Headings.

5. Add the equivalent of one blank line of extra vertical space before all headings. That blank line should be the size of a line in the font that the heading is in. (So there will be more space before a Primary Head than a Secondary Head.)

6. Display the title, author's name, affiliation, displayed equations, figure captions and table heads centred on the page. (That is, with the same amount of space on the left and the right.)

7. Display the abstract, categories, footnotes and figure captions in a smaller font: 14pt Serif plain.

8. Display the abstract and quoted text between narrower margins. Move the left and right margins in by 4 ems.

9. Show displayed equations in italic font.

10. Show anchors in blue type. (And underlined if you like, but don't worry about it, it won't cost you any marks if you don't do underlining.)

11. (This one may be difficult, and won't cost you any marks if you don't attempt it.) Figure out how to display “curly quotes” correctly. At the moment they show up as a bit of a mess on my Linux machine, and a different mess on my Mac, including somehow screwing up the interline spacing so that lines end up partly on top of each other. (Run the program on sample9.sxw and sample10.sxw to see this.) Don't worry about a general solution for all non-ASCII characters, just get the quotes working right for now.

Swing already has components that can do a lot of this stuff. For this assignment I want you to learn how to write this sort of code at a low level, following the pattern I've established in the starting code. You are not permitted to use the two Swing classes that support styled text: class JEditorPane and its subclass JTextPane.

[Changed on Friday 13th June] OK, I changed my mind. You can use a JTextPane if you wish. However you may not simply save the document as HTML and then use the setPage() method of class JTextPane.

---

2. Opening and exporting files

At the moment the program just displays the file named on the command line and then stops. It doesn't recognise any events except the automatic things that happen when the window is resized, moved, iconified or closed.

Add a menu bar to the top of the window, with one menu in it called “File”. In that menu, add three menu items, “Open”, “Export” and “Quit”. To the Export item add a submenu with three items on it: “As Plain Text”, “As XML” and “As HTML”. Then add listeners and other code as needed so that these items are associated with the following actions:

1. The Open item should cause the program to pop up a file selection dialog widget. This should open looking at the directory that the current document came from, and with its filter set to only display OpenOffice Writer files (those with extension .sxw. When the file selection dialog returns, if the user clicked “Cancel”, then do nothing. If they clicked “Open” and there was a file selected of the correct type, then the program should open this file, parse it and display it in the main window, replacing the document that was displayed there and making this new document the current document. If there was no file selected or if there was a file selected, but it was the wrong type, or it didn't exist or it couldn't be opened for whatever reason, pop up a message box with an error message. (This means trapping exceptions and doing something sensible with them, instead of just writing an error message on System.out and then quitting as the starting program you were given does.)

2. Make it possible to start the application without specifying a document on the command line. In this case, the main window should open but be left blank, and the application should immediately pop up the file selection dialog (showing the user's home directory) on top of it for the user to select their first document. This will now be the normal way to run the program.

3. The different items in the “Export” submenu should pop up another file selection dialog, this time for saving a file. Again the initial display should be of the directory the current document came from, and the filter should be set to the file type the user chose to save as: Plain Text with extension .txt, XML with extension .xml, or HTML with extension .html or .htm. If the user clicks “Cancel” do nothing. If the user clicks “Save”, then save the file to the name they have selected. If the file already exists, pop up a confirmation dialog: “File already exists. Overwrite?” and respond to “Yes” or “No” clicks appropriately.

4. The “Quit” item should close the application.

Add appropriate mnemonics to the menu and menu items so that users can navigate the menu without using the mouse.

Add keyboard accelerators for the actions, e.g. Ctrl-Q for Quit, Ctrl-O for Open and so on. (You can look up how to do this in the Swing Tutorial.)

---

3. Properties display

Add a “Properties” item to the File menu. When the user selects it, pop up an information dialog box displaying the document metadata from the metadata extractor. The design of the data display in the dialog box is up to you, but it must show the title, author's name(s) and affiliation(s) clearly. Probably the right way to do this is to make this popup (or perhaps its content pane) another Observer of the Model.

---

4. Add a tree view

Add a new view to the application that displays the XML structure of the current document using a tree widget. (See Lecture 20.) The tree widget view should appear in the left half of the main window, with the default text view in the right half. You will need to look up how to put a split pane into the main window, and how to display the document structure with a tree widget. Like the normal view, the tree view should be in a scrolling pane so that if it gets too big for its space, the user can scroll to see the bit they want.

For each node in the parse tree structure, you will need to create a node in the tree widget. If a node has children, you will need to add a subtree to it containing those children. Each tree node has a string (label) associated with it. For XML elements attach the element name and attributes as the label. (You may find the toString() method of class AttributeList saves you some work.) For data elements, just attach the content. You don't need to do anything about handling the mouse clicks on the little plus and minus signs; once you have built the widget, it handles all that by itself.

Notice that in the existing application, it is not class View but class TextPanel that is an Observer. For this question you should be adding a new class TreePanel that will also be an Observer of the Model. You will probably also want to add a new Visitor (perhaps called something like TreeRenderer) that traverses the parse tree creating nodes for the tree widget.

---

*5. Link the two views

This part may be difficult. If you are aiming for a Pass or a Credit on this assignment, you do not need to attempt it.

Add code to the program so that selecting a node in the tree view causes that part of the document to be highlighted in the other view, and if necessary causes the other view to scroll so that the selected part of the document is visible.

If that works, try to do the converse. Make it possible for the user to select some text in the text view, and for this action to cause that part of the document to be selected in the tree view also. If necessary, the tree view should scroll so that this part becomes visible. If necessary, the tree view should expand so that the selected part becomes visible.

---

**6. Make the tree view editable

This part may be difficult, and/or long. If you are aiming for a Pass, Credit or Distinction on this assignment, you do not need to attempt it. The parts are presented in what I think is order of difficulty.

Make the tree view editable so that the user can modify the content of data elements. This should modify the actual data node in the parse tree in the model, not just whatever is displayed in the tree widget. As a result, the other view should change too.

If you succeed with that, add “Save” and “Save As” items to the File menu, allowing the user to save the modified document. You'll have to figure out how to write the modified content.xml file into the Zip archive.

Make it also possible for the user to modify XML element names and attributes through the tree view in the same way. So for example, the user could change the style name attribute of a paragraph, and this should then be reflected in the other view and perhaps in the Properties popup. (You may want to change the way element names and attributes are displayed in the tree view. That's OK.)

Investigate the possibility of deleting, inserting and moving elements in the tree view. This may be too hard, or indeed impossible, but if you have the time and inclination, research it and see.

---

Getting started

Download the compressed archive file a2start.jar. This contains the source code for the starting version of the program. Uncompress and unpack the archive into a fresh directory.

Make the build and oops scripts executable, then compile the program by typing ./build. Run the program by typing ./oops sample1.sxw. The main class is comp2100.oops.Oops, so you can also run it by typing java comp2100.oops.Oops sample1.sxw. There are eleven sample Open Office word processor documents provided in the jar file along with the source code. Note that these sample documents are just that — samples. They are certainly not a comprehensive test suite. For proper testing of your program, you will need to create your own test documents as well.

Take time to read and understand the code before you try to modify it. Don't just dive in and start changing things until you understand how they work.

A large part of this assignment is finding the information you need in the API documentation and the Swing Tutorial. You're not expected to already know how to do all this. You are expected to have a rough idea of how Swing GUIs work, and to be able to look up the information you need, read and understand it and put it into action. Take some time to read the documentation and think about it before you start writing code.

If you don't understand something in the requirements, send your questions to comp2100@cs.anu.edu.au sooner rather than later. I will post some of the answers to the Assignment 2 FAQ and Hints Page, so check there before you write to me. I will also leave some of the relevant questions and answers from last year there.

There's not very much time for this assignment: two and a half weeks and two weekends. Don't stress too much. Do what you can. If you've got this far in the course, you're doing OK.

---

Submission

You and your partner must submit only one assignment representing your joint work. The way we have set up the submission system, only the partner with the lower UniID will be able to submit.

To submit your assignment:

1. Open a shell window on the ANU DCS student system and cd to your assignment top directory. This is the directory containing the sample documents and the build and oops scripts.

2. Create a jar file called a2.jar containing all your Java sources by typing:

   jar cvf a2.jar comp2100/oops/*.java comp2100/oops/*/*.java

   (Instead of typing, you can just cut and paste that line.)

3. Submit this jar file using the mark command:

   mark comp2100 a2 a2.jar

4. Check that your submission succeeded using the markshow command:

   markshow comp2100 a2

   If you do not see your submission in the output of this command, then it has not succeeded and you should seek help from the TSG immediately.

The mark and markshow commands may prompt you for your password. This is normal.

Do not use the submit command. It won't work.

Hint: You may submit the assignment as many times as you want. Only your last submission will be marked. I advise you to try submitting a few days before the deadline just to check that it works. This way you can avoid any panic in the last minutes before the deadline.

Marking

Your submission will be marked out of 30 according to a standard marking guide. Your program will be compiled and run on test data as part of the marking process.

Your assignment mark will be based on: the correctness of your submitted program, the clarity, readability and simplicity of added or modified code, documentation of added or modified code using Javadoc comments and other comments. Make sure that the version you submit will compile and run, even if it won't do everything it is supposed to. You will be penalised heavily if your program crashes or fails to compile.

We will make every effort to return your assignment to you before the final exam.

Late submissions

Late submissions will be accepted up to one week after the deadline. They will be penalised 20% (6 marks).

[ANU] [DCS] [COMP2100/2500] [Description] [Schedule] [Lectures] [Labs] [Homework] [Assignments] [COMP2500] [Assessment] [PSP] [Java] [Reading] [Help]