Assigned: Wednesday, March 18, 2020,
Due: Wednesday, April 1, 2020 extended until Wednesday, April 8 at 1:30pm.

The goal of this assignment is to create some widgets using your toolkit, and then use those widgets and your primitives to re-create the graphical editor from homework 1 using your complete toolkit.

Part 1: Create a Set of Widgets

  1. The widgets you create must use your retained object model, your input model, and your constraint system. For example, buttons should be constructed out of rectangle and string objects from the retained object model, held together with constraints, and the user interaction with the buttons should be handled by a Choice Behavior.
  2. Widgets to be created must include:
    1. A button panel, which is basically a fixed menu or palette. The user can press a button to perform an action. The interaction should be not first-only (i.e., the user can press on one item and move to another before releasing). A parameter to the button panel should determine whether there is final feedback or not, i.e., whether the final selection remains selected after you release the mouse, or not. If final selection is shown, then the user should be able to pick the type of selection: SINGLE or MULTIPLE. The manner for feedback (how the interim and final feedback is shown) is up to you.
    2. A check-box panel, which is a set of check boxes. The interaction should be first-only (i.e., the user cannot press on one item and move to another before releasing). The "check" in the box can be presented as a picture (image), a checkmark in a font, an "X" created with 2 lines, or anything you want. The final selection should always be visible. The selection type should always be MULTIPLE.
    3. A radio-button panel, which is a set of radio buttons. The interaction should be first-only (i.e., the user cannot press on one item and move to another before releasing). The "dot" in the box can be presented as a picture (image), a dot in a font, a filled-in circle or square, or anything you want. The final selection should always be visible. The selection type should always be SINGLE.
    4. A number slider, for selecting a number in a range. You can do either a horizontal or vertical slider (you do not have to do both). The slider should accept a minimum and maximum value and standard increment value (defaults: 0.0 to 100.0, and 10.0). There must be some kind of graphical indicator to show the current value, and which can be dragged with the mouse to change the value. There should also be arrows at either end of the slider to increment and decrement the value by the standard increment. Extra credit for providing "paging" by clicking on either side of the indicator (in the "trough") to increment or decrement by bigger amounts. You do not need to support auto-repeating by holding the mouse button down over the arrows or in the trough. The appearance of the slider is up to you; it might look like a scroll bar or a slider in other widget sets. It should use your Move Behavior object for dragging the indicator, and the Choice Behavior for detecting the tapping on the arrows.
  3. The button panel, check-box panel, and radio-button panel should take the same layout parameters as LayoutGroup: layout and offset, to control how the items are laid out.
  4. The labels shown for each item for the button panel, check-box panel, and radio-button panel should be able to be strings or arbitrary GraphicalObjects, including groups. This could be made convenient to the programmer for example by having two forms of the addChild method that adds new items to the panels: one that takes a GraphicalObject and one that takes a Java String object (in Java, by overloading; in JavaScript by testing the type of the parameter).
  5. Each widget should provide its current value in a value variable of the widget, that other objects can have constraints to.
  6. Each widget should have a way of calling a call-back procedure when the user changes the value of the widget. In Java, this might be implemented by taking an object on which a standard method is called, as in standard Java Swing widgets, where the "listener" pattern is used. In JavaScript, you can just pass in a function to the constructor. The callback for the panels should take as a parameter the current value of the widget (i.e., which panel item is selected). Note that since the label is not necessarily a string, the call-back may be passed a graphical object as the current item. The number slider should pass the current number value to its call-back.
  7. Hitting some key (typically: ESC) should abort the widget while it is in progress. (This should come for free from your implementation of input handling.)
  8. Note that you are not being asked to create any widgets that pop up: no pull-down menus, no option menus, etc. These may require that the toolkit support creating special kinds of windows and having your interactions work across multiple windows, which requires a lot of special and tricky programming.
  9. Extra credit for other parameters for these widgets, or other kinds of widgets created.

Part 2: Create a Graphical Editor

  1. Now, using those 4 kinds of widgets and the rest of your toolkit, recreate the graphical editor of homework 1. Please keep track of how much time and effort goes into creating this editor (note, do not include the time for Part 1 of this assignment). Note that you should only do the part of assignment 1 in section 2 (requirements 2.1 to 2.9). You should not try to do selection handles or growing objects, even if you did provide these for your assignment 1 implementation. Compare the time and lines of code for this part to your answer in homework 1.
    1. That is, repeat requirements 4-3 and 4-5 for homework 1 for the time and lines of code you take here.
    2. The editor must use your graphical objects, constraints and interactors. For example, the name should be centered in the node using constraints, and objects should be created with a New behavior, moved with a Move behavior, and selected with a Choice behavior.
    3. You should also use constraints (if possible with your design) to connect the line style with the style of the selected object (requirement 2-7.2 in homework 1).
    4. There is no need to match the set of optional features that you did for homework 1, and there is no need to match the user interface of the features with the UI in homework 1. For example, you are not allowed to use an html or Swing button for the "delete" button (requirement 2-9) - you have to use a button from your toolkit.
  2. Add to your implementation usage of the other widgets. Make sure to use all 4 kinds. For example, you might use buttons for the line style, check boxes for filled or outlined (or both or neither), a slider for the outline width, radio buttons for the color, etc. This requirement (#2) is separate from #1 so you can have a valid comparison for the time and number of lines of code with the required parts of homework 1.

Write a Readme file

Please include a readme file in .doc, .txt or .pdf format (note: not .md format) that discusses the following:

Back to Homework Overview
Back to 05-830 main page