Programming of Interactive Systems

Programming of Interactive Systems (Intro)

Lectures Room E202, TA room E202, building 640 (PUIO)

Anastasia Bezerianos
Lectures web site

  1. Wed, September 13, 13:30pm Java Swing
  2. Wed, September 20, 13:30pm Java Swing
  3. Wed, September 27, 13:30pm MVC
  4. Wed, October 4, 13:30pm Drawing on Canvas
  5. Wed, October 11, 13:30pm Project Brainstorm and Storyboards
  6. Wed, October 18, 13:30pm Project work
  7. Wed, October 25, 13:30pmProject work
  8. Wed, November 8, 13:30pm Project work
  9. Wed, November 15, 13:30pm Project presentation

TA 1 — Wed, September 13, 2017


Eclipse is an IDE (Integrated Development Environment) tailored for writing programs in Java. If you haven't done it yet, install it. Below are some useful menu items in Eclipse that you should consider using:

Also, the shortcut ctrl+space gives you an auto-complete menu.

Exercise 1: layout managers, labels, text boxes and buttons

The aim of this exercise is to create a temperature converter containing:

  1. Download the file.
  2. Complete the function init() in the file by using the class JPanel and layout managers of your choice to make the resulting window look like the pictured above.
  3. Make sure the widgets are aligned and that their location remains consistent while resizing the window as in the following picture:
  4. The textFieldCListener reads a floating value in the Celsius text box when the user press "enter", convert it from Celsius to Fahrenheit, and write the result in the Fahrenheit text box. Associate this listener to the text box of the Celsius value.
  5. Fill in the textFieldFListener in order to do the conversion from Fahrenheit to Celsius. Associate it with the text box of the Fahrenheit value.
  6. The buttonCloseListener closes the window. Associate it to the close button.
  7. Fill in the buttonResetListener in order to empty both text boxes. Associate it to the reset button.
  8. The temperature conversion occurs when the user presses enter. Use a KeyListener (that you attach with JTextField.addKeyListener) instead of an ActionListener. The KeyListener will be notified at each key press.

Solution of exercise 1


TA 2 — Wed, September 20, 2017

Exercise 3: pop-up menus and lists - a file chooser

the following exercise was originally made by Nicolas Roussel and is translated here in english.

The aim of this third exercise is to build a file chooser similar to the one pictured below:

File selector

The scrollable list in the middle of the window shows the content of the current folder; sub-folder names are followed by a slash (/). The pop-up menu at the top contains a list of all parent folders of the current folder.

  1. Download the file.
  2. Change the file by using the classes JComboBox, JList, JScrollPane and JButton to build the dialog box pictured above. Make sure that the location of the widgets remains consistent when resizing the window.
  3. Make sure that, when choosing a parent folder, both the scroll list and the pop-up menu are updated to reflect the newly selected folder.
  4. Check that the "Open" button is only usable (active) when a file or a folder is selected in scroll list.
  5. Make sure that clicking on the Cancel button or the Open button while a file is selected closes the dialog box.
  6. Make sure that when clicking the Open button on a selected folder updates both the scroll list and the pop-up menu.
  7. Make sure that double-clicking on a file or a folder inside the scroll list is identical to selecting the file and clicking on the Open button.

Solution of exercise 3

Note that Swing provides a class, JFileChooser, that allows to easily choose a file or a folder.

TA 3 — Wed, September 27, 2017

Apart from 2bis the following exercises are originally made by Nicolas Roussel and are translated here in english.

Exercise 2: linked variables - a color chooser

The aim of this second exercise is to build a color chooser which enables users to:

The current color is previewed in a rectangular area. The whole window looks like this:

The code of the color chooser should be decomposed in 3 parts using the MVC model. The goal of this model is to separate the internal data from the way to display these data to users and the way to enable users to interact with these data. If you don't know what the MVC model is, ask your TA for explanation!

  1. Download the file.
  2. Complete the function init() in the file by using the class JPanel to make the resulting window look like the one pictured above. It's the View of the MVC model.
  3. Create the Controller and the Model. Make the link between these 3 components.
  4. Make sure that all widgets are linked:
  5. Instead of using an ActionListener or a KeyListener for the JTextField, use a DocumentListener that you can attach this way: JTextField.getDocument().addDocumentListener. What do you observe?

You can use the methods Color.getRGB, Integer.toHexString and String.substring to convert a color into an hexvalue and the method Color.decode to do the conversion in reverse.

Solution of exercise 2

Exercise 2bis: A simple MVC example - a percentage pie chart

The aim of this exercise is to build a percentage viewer similar to the one pictured below using a MVC design pattern:


  1. Download the files and add them to a new e2b package in Eclipse.
  2. Draw an UML diagram of all the classes to understand the relationship between the different components.
  3. Add the 3 different views ( PercentageLabel, PercentagePieChart and PercentageSlider ) to the main class ( ) in order to have the same picture as above.
  4. Fill to make the link between the Model and the views (See TODO in the code).
  5. If needed fill the update function and listener of the views ( PercentageLabel and PercentageSlider - see TODO in the code).
  6. Make sure all your views are linked together, when you change the value of the percentage, all the views have to change.
  7. Now we want to add a new view to our system, each time the percentage value changes, we want to display the value in the console. Create this view and add it to the controller.

Solution of exercise 2bis


TA 4 — Tuesday, October 4, 2016

Exercise 4: structured drawing - a simple drawing app

The aim of this exercise is to build a drawing application in order to get familiar with 2D drawing:

  1. Download the package containing the classes for this exercise:
  2. Modify the GraphicalEditor class to enable mode selection: when the user clicks on a radio button, it should change the mode and update the window title accordingly.
  3. Modify the GraphicalEditor class to enable shape selection: when the "Select/Move" mode is active, when the user clicks on the canvas, the shape directly under the cursor should be selected. You will also have to implement the PersistentCanvas.getItemAt(Point p) method that handles the picking of a shape at a location p on the 2D canvas.
  4. Set the appropriate actions for the Delete and Clone buttons so that the user can delete or clone (and translate a bit) the selected shape.
  5. Modify the MouseMotionListener in the GraphicalEditor class to let users move shapes in the canvas.
  6. Enable the color setters that set the fill and stroke color of the currently selected shape and also future shapes. Also, make sure that when the user selects a shape, the color setters should be updated to reflect the fill and stroke colors of this shape.
  7. Add the support of other shapes by creating the EllipseItem, LineItem and PathItem classes. They should support the same features: move, delete, color change, etc. For the path, you can use the class java.awt.geom.GeneralPath. It is recommended to check the documentation about Shape.

Solution of exercise 4