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:
Edit > Show Tooltip Description: toggle the display of the tooltip containing documentation about the element on which the carret is pointing at.
Source > Organize Imports: automatically adds all the missing imports.
Source > Format: nicely reformats your source code.
Source > Generate Element Comment: inserts a javadoc block comment for the element on which the carret is pointing at.
Also, the shortcut
space gives you an auto-complete menu.
The aim of this exercise is to create a temperature converter containing:
init()in the file
TempConverter.javaby using the class
JPaneland layout managers of your choice to make the resulting window look like the one pictured above.
textFieldCListenerreads 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.
textFieldFListenerin order to do the conversion from Fahrenheit to Celsius. Associate it with the text box of the Fahrenheit value.
buttonCloseListenercloses the window. Associate it to the close button.
buttonResetListenerin order to empty both text boxes. Associate it to the reset button.
enter. Use a
KeyListener(that you attach with
JTextField.addKeyListener) instead of an
KeyListenerwill be notified at each key press.
All the following exercises are originally made by Nicolas Roussel and are translated here in english version for convenience.
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:
ColorChooser.javafile by using the class
JPanelto make the resulting window look like the one pictured above.
JTextField, use a
DocumentListenerthat you can attach this way:
JTextField.getDocument().addDocumentListener. What do you observe?
You can use the methods
String.substring to convert a color into an hexvalue and the method
Color.decode to do the conversion in reverse.
Note that Swing provides a class,
JColorChooser, that allows to easily choose a color.
Finish the second exercise (the one about the color chooser). You can look at the solution of the first exercise which is posted right after the instructions.
The aim of this third exercise is to build a file chooser similar to the one pictured below:
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.
FileSelector.javafile by using the classes
JButtonto build the dialog box pictured above. Make sure that the location of the widgets remains consistent when resizing the window.
Cancelbutton or the
Openbutton while a file is selected closes the dialog box.
Openbutton on a selected folder updates both the scroll list and the pop-up menu.
Note that Swing provides a class,
JfileChooser, that allows to easily choose a file or a folder.
The aim of this exercise is to build a drawing application in order to get familiar with 2D drawing:
GraphicalEditor.javais the graphical interface.
PersistentCanvas.javais a persistent canvas which stores the created items.
CanvasItem.javais the abstraction of one item of the canvas.
RectangleItem.javais the rectangle item class (inherited from the abstract class
GraphicalEditorclass to enable mode selection: when the user clicks on a radio button, it should change the mode and update the window title accordingly.
GraphicalEditorclass 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
pon the 2D canvas.
Clonebuttons so that the user can delete or clone (and translate a bit) the selected shape.
GraphicalEditorclass to let users move shapes in the canvas.
PathItemclasses. They should support the same features: move, delete, color change, etc. For the path, you can use the class
jarfile on the project folder in the Eclipse window or by right-clicking on the project name and choosing
Properties, then select the
Java Build Pathsetting, then the
Librariestab and add the jar).
SimpleButtonand shows it on a
Canvas. For now, only the button label is drawn on the Canvas (through the use of a
CTextobject) and it has no associated behavior.
CElement.below(CElement after)) and that the label moves with the rectangle when calling
CStateMachine) that defines the behavior and appearance of the button when the cursor is:
SimpleButton.action()) is triggered only if the pointer presses then releases the button while inside of it.
SimpleButton.showStateMachine()function to show the state machine created at the previous step.
SimpleButton.setDraggable()) by completing the dragger state machine and uncommenting the appropriate line in the
main()function. Note that, once this is operational, any shape in the canvas with a tag named "draggable" can be dragged with the right mouse button pressed.
SimpleButtoninstances with various behaviors (e.g., toggling the dragging state) and different required modifier keys (e.g., pressing while holding the shift key).
armTimerand the transitions
TimeOutin order to detect dwelling (pressing the mouse button and not moving for x millisecond), click-and-a-half (clicking then dwelling) and double click events.
Finish the first state machine on a canvas exercise.
RectangleTool.javain order to create ellipses, segments and strokes (use the classes
Submit the first part of your project (assignment 1B).
You can also use online services such as JSFiddle.
To run your webapp, simply use your browser. We recommend the following browsers:
Show Develop menu in menu bar. From the
Developmenu that just appeared, select
Show Error Console.
Inspect Element. Then click on the
Toolsmenu, select the item
Web Developer > Web Console.
The temperature converter is similar to the previous Swing exercise.
jsfolder holding the required libraries.
(celsius * 1.8) + 32.
$(inputSelector).val()to retrieve or set the value of an input element. Use
parseFloat(string)to convert a string to a float and
isNaN(value)to check if the value was successfully converted.
15.7should be displayed instead of
rangeor by using jQueryUI sliders. Make sure that all interface elements (slider and input text fields) are synchronized.
The goal of this exercise is to add missing features to a simple web-based drawing application.
jsfolder holding the required libraries.
Skey selects the
Selectortool) by editing the section dedicated to keyboard shortcuts. Make sure that the shortcut appears in the tooltip by editing the
titleattribute in the
buttonhtml element). Also add a shortcut to it (e.g. pressing the
Dkey duplicates the selected shapes) and make sure that the tooltip mentions that shortcut. Make sure that the delete and duplicate buttons are disabled (use the
disabledbutton attribute) when no shape is selected and enabled again when a new selection is made.
bodypart of the html document) and edit its behavior so that it reflects and edits the selected objects. When selecting several shapes, the styling inspector should show the common values (e.g., if all selected shapes have the same background color, then this should be shown in the inspector). See this demo to find the right events to listen for on the canvas and the documentation of the jQuery Simple Color plugin.
This session is about getting feedback and tips for the ongoing smart home projects.
Complete instructions about assignment 2 and project presentation are available here.
As homes are becoming more and more equipped with interconnected devices, the goal is to implement a simple version of an interface to manage the behavior of a smart home. This interface will be extended in the second assignment.
A smart home is [a home] equipped with lighting, heating, and electronic devices that can be controlled remotely by smartphone or computer: you can contact your smart home on the Internet to make sure the dinner is cooked, the central heating is on, the curtains are drawn, and a gas fire is roaring in the grate when you get home. “ Oxford dictionary
To control a smart home you need an interface to program its behavior, running on a mobile, the web or on a panel at home.
Our assumption is that the control interface will run on a panel inside your smart home. As it is difficult to build a complete system on one go, here are the recommended functionalities for this assignment:
You can use any interactions your can think of for doing the above actions (the only requirements is the existence of one drag-and-drop interaction). Everything else is up to you. We are interested in how everything fits together in your system, and how creative you are in your interactions. To get a very good mark we expect you to go beyond the above recommended functionalities, with at least 3 extensions: they will be judged by their complexity and how they fit overall with your prototype).
Possible extension examples include: more parameters to control, add note-taking, complex programmable behavior (e.g. different rules based on conditions outside the house), saving your parameters, etc.
Create a storyboard of the tool you plan to create as one or more images:
Give your storyboard to your instructor in class, or scan it and email it before class. Make sure your full name is clearly visible on the storyboard.
Create an archive (zip or tar.gz) named
first-last-name.tar.gz that includes:
Send your compressed archive by Friday, November 7, 2013 at 23:00 the latest to your instructor, David or Cedric and put Anastasia in copy. Use the subject
[IS] Assignment 1 in your email.
Complete instructions about assignment 2 are available here.