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
- 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.
- Widgets to be created must include:
- 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.
- 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.
- 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.
- 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.
- 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.
- 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).
- Each widget should provide its current value in a value variable of the widget,
that other objects can have constraints to.
- 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.
- 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.)
- 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.
- Extra credit for other parameters for these widgets, or other kinds of
widgets created.
Part 2: Create a Graphical Editor
- 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.
- That is, repeat requirements 4-3 and 4-5 for homework 1 for the time and lines of code you take here.
- 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.
- 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).
- 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.
- 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:
- Describe any extra credit items you did.
- Provide a detailed explanation of how users would use the widgets in your toolkit. For example, if the user wanted to implement their own UI, how do they use buttons, radio buttons, check boxes, a slider, etc.?
- Provide a discussion of the times and lines of code for your editor here vs. the editor from homework 1. In addition to just listing the times, discuss why they are bigger or smaller here compared with homework 1.
- Provide a more general discussion of how easy or hard it was to implement your editor. What design decisions in your toolkit made it difficult or easy to build the editor? How does the difficulty compare to the difficulty of using whatever tool you used in homework 1? How should your toolkit be improved to be easier to use?
Back to Homework Overview
Back to 05-830 main page