Professional Documents
Culture Documents
MVC Architecture
Definition: MVC stands for Model-View-Controller. It's a software design pattern
for developing user interfaces.
● Model: Represents the data and the business logic. It's responsible for
managing the state of the application, which can include reading from and
writing to a database, as well as processing data.
● View: Responsible for presenting data to the user. It displays the model
data, and sends user commands (events) to the controller.
● Controller: Acts as an interface between Model and View. It processes all
the business logic and incoming requests, manipulates data using the
Model, and interacts with the Views to render the final output.
Relationship with State Machine: In an MVC architecture, the state machine can
be used to manage the state of the Model. The Controller may change the state
of the Model in response to user actions, and the current state of the Model can
influence how data is presented in the View.
The concepts of augmenting mouse input and input with time, such as long press and
double-click, are significant. These are methods to enhance the user experience by
providing more intuitive or efficient ways to interact with software. Let's break down
each concept:
Long Press
Definition: A long press occurs when the user clicks and holds the input (like a
mouse button or touchscreen) for a longer duration than a standard click.
Usage: It's often used to open context menus, initiate drag-and-drop operations,
or activate alternative interaction modes. In touch interfaces, a long press can
substitute for a right-click in a mouse-driven interface.
Design Considerations: When implementing a long press, it’s important to
balance the duration required to trigger it. Too short, and it might be triggered
accidentally; too long, and it might frustrate users.
Double-Click
Definition: A double-click is two quick, consecutive clicks of the mouse button
without significant movement of the mouse between them.
Common Use: In many GUIs, a double-click is used to open files, applications, or
execute commands. It’s a standard pattern recognized by users and is often
expected as a shortcut for certain actions.
Design Challenges: Double-clicks can be challenging for some users, particularly
those with motor disabilities. Therefore, alternatives (like single-click with a
modifier key, or context menus) are often provided.
Parallel States
Definition: Parallel states, also known as orthogonal states, are a concept in
state machines where a system can be in multiple states at the same time. This
is different from the traditional state machine model where the system can only
be in one state at any given moment.
Usage: They are used when different aspects or components of a system operate
independently but simultaneously. For instance, in a multimedia application, one
part of the system could be controlling the playback of a video, while another
part is managing user interface interactions.
Advantages: Parallel states allow for more modular and scalable system design.
They enable the independent management of different features or components
of an application, making the overall system more manageable and less prone to
errors caused by complex state interactions.
Pseudo-Events
Definition: Pseudo-events are conceptual events used in state machines and
user interface design that do not correspond to physical actions by the user but
are triggered by the system itself based on certain conditions or states.
Examples:
● Timeout: A pseudo-event that occurs when a specified period of time has
passed. For example, a state might transition to a "timeout" state if the
user has not interacted with the system for a certain period.
● Completion: This pseudo-event might be triggered when a process or task
(like loading a file or completing a download) finishes.
● System Events: These might include changes in system status, like losing
a network connection or a device being plugged in.
Role in UI Design: Pseudo-events allow for more dynamic and responsive user
interfaces. They enable the system to react to internal changes or external
conditions, providing more interactive and adaptive user experiences.
Hierarchical States: Also known as nested states, where states are contained
within other states. This allows for the representation of more complex behaviors
and can simplify the state machine by reducing the number of transitions needed
between states.
Parallel States: Allows a system to be in multiple states at the same time, as
mentioned earlier. This is particularly useful for systems that have multiple
components or aspects that operate independently.
In an MVC architecture with a state machine, ensuring that the Model's state, the View's
presentation, and the Controller's logic are synchronized and consistent is crucial. State
machine enhancements can help manage this complexity by clearly defining
state-dependent behaviors and transitions.
scene.setOnKeyPressed(event -> {
if (event.getCode() == KeyCode.ANY) {
// Handle the key press event
}
});
scene.setOnKeyPressed(event -> {
if (event.getCode() == KeyCode.A) {
longPressTimer = new Timer();
longPressTimer.schedule(new TimerTask() {
@Override
public void run() {
// Handle long key press
}
}, LONG_PRESS_DURATION);
}
});
scene.setOnKeyReleased(event -> {
if (event.getCode() == KeyCode.A && longPressTimer != null) {
longPressTimer.cancel();
}
});
3. Timers
In JavaFX, java.util.Timer is a utility that can schedule tasks for future execution in a
background thread. This is useful for creating a long press feature.
Integration into Your State Machine
For your lab assignment, you need to integrate this long-press interaction into your state
machine. Here's a conceptual guide on how to do this:
● Modify the Event Handler: In the key press event handler, check the current state
of your state machine. Start the timer only if the state is READY or
PREPARE_CREATE.
● Cancel the Timer in DRAGGING State: If the state transitions to DRAGGING, cancel
the timer. This can be done by adding a method in your state machine class that
cancels the timer, and calling this method whenever the state transitions to
DRAGGING.
● Handle Long Press: In the timer task, when the long press is detected, again
check the state of the state machine. Clear the model only if the state is READY or
PREPARE_CREATE.
scene.setOnKeyPressed(event -> {
if (event.getCode() == KeyCode.A && (state == State.READY || state ==
State.PREPARE_CREATE)) {
startLongPressTimer();
}
});
The key is to ensure the long press action is tied to the state machine's current state,
adhering to the specified conditions.
Managing and selecting overlapped objects is a common challenge. The key issues
involve determining which object is drawn on top, which object is selected upon a
user's click, and how to manage the Z-order (the order of objects along the Z-axis,
which represents depth on the screen) within the model. Let's explore each of these
aspects:
● Last Clicked or Selected: The most recently interacted with or selected object is
brought to the front.
● Creation Order: Objects created later are drawn on top of earlier ones.
● Z-Index Management: Explicit management of a Z-index property for each object,
where a higher value means the object is drawn on top.
● Assign a Z-Index in the Model: Each object in the model can have a Z-index
property. When objects are created or modified, the Z-index is adjusted
accordingly.
● Update Z-Index on Interaction: When an object is clicked or selected, the model
updates its Z-index to bring it to the front. This might involve reordering objects in
a collection or adjusting their Z-index values.
● Rendering Based on Z-Index: The View renders objects based on the Z-index
stored in the Model. This ensures that the visual representation matches the
logical order in the Model.
● Handling Z-Index in Controllers: Controllers should interpret user actions (like
clicks, drags, etc.) and update the Model accordingly. For instance, if a user clicks
an object, the Controller tells the Model to update the Z-index of that object.
Selection Mechanisms
● Point-and-Click: The most basic form, where a single click selects an object.
● Shift-Click: Used for contiguous multiple selections. The user clicks the first
item, holds the Shift key, and then clicks the last item, selecting everything in
between.
● Ctrl-Click (or Command-Click on macOS): Used for non-contiguous multiple
selections. The user can select multiple items individually by holding the Ctrl (or
Command) key.
Multiple-Selection Mechanisms
● Keyboard Shortcuts: As described above, Shift and Ctrl/Command keys are used.
● Checkbox or Toggle Buttons: In interfaces like file explorers, checkboxes allow
for multiple selections.
● Drag Selection (Rubber-band): Clicking and dragging the mouse to form a
rectangle (rubber-band) that selects all objects within its bounds.
Visual Representation of the Selection
● Highlighting: Changing the color or style of the border of selected objects.
● Checkmarks or Icons: Indicating selection with visual cues in lists or grids.
● Selection Handles: Displaying small handles around a selected object, often used
in design software.
Normalized Coordinates
Definition: Normalized coordinates are a way of describing positions and sizes of
objects in a relative manner, independent of the actual pixel dimensions of the
display or canvas. They are typically defined in a range from 0.0 to 1.0.
Usage: This system is particularly useful for designing responsive interfaces that
can adapt to different screen sizes and resolutions. For example, a point at (0.5,
0.5) in normalized coordinates would be at the center of the screen, regardless
of the screen's resolution.
Calculation: To convert from pixel coordinates to normalized coordinates, you
divide the pixel coordinate by the total number of pixels in that dimension. For
example, if an object is 150 pixels from the left edge of a 1920 pixel wide screen,
its normalized x-coordinate would be 150 / 1920 ≈ 0.0781.
Home Coordinates
Definition: Home coordinates refer to a specific coordinate system that is used
as a reference point in graphical systems. The term can vary in meaning based
on context but often refers to the origin point or default position in a coordinate
system.
Usage: In user interface design and computer graphics, home coordinates might
be used to define a starting point for rendering or a reset position. For example,
in a drawing application, the home coordinate could be the point where the
cursor resets to when a certain command is executed.
Calculation: The exact calculations involving home coordinates depend on their
specific definition in an application. Generally, they might involve resetting object
positions to these coordinates or using them as a base for further
transformations.
Calculations in Practice
● Conversion to Screen Coordinates: When you need to render objects on the
screen, you convert the normalized or home coordinates to screen coordinates
(in pixels). This involves scaling the normalized coordinates by the dimensions of
the rendering surface.
● Example: If an object in a 3D graphics application has a normalized position of
(0.5, 0.5, 0.5), and you're rendering to a screen of 1920x1080 pixels, the
screen position would be calculated by multiplying the normalized coordinates by
the screen dimensions.
● Adaptability and Responsiveness: Using these coordinate systems allows
designs and interfaces to be more adaptable to different screen sizes and
resolutions, enhancing the overall user experience and accessibility.
● User Engagement: They make the interface more lively and engaging.
● Visual Feedback: Provide feedback on user actions, enhancing the interactivity.
● Guiding Attention: Direct the user's attention to important elements or changes
in the interface.
● Enhancing Understanding: Help users understand how to interact with the
interface, especially for complex tasks.
Effects in UI Animation
Squash and Stretch: Adds a sense of weight and flexibility to objects. For
instance, a button might squash when pressed and stretch when released.
Anticipation: Movement in the opposite direction of the main action, preparing
the user for what’s about to happen. For example, a menu might slightly move up
before sliding down off the screen.
Ease-in, Ease-out: This makes the movement more natural by gradually
accelerating at the beginning (ease-in) and slowing down at the end (ease-out).
It's widely used in transitions and movements.
LAB
You might encounter complex scenarios where detecting whether a user's interaction
(like a mouse click) occurs on a particular object is not straightforward. This is
especially true for irregularly shaped objects. Using an off-screen bitmap for hit
detection, also known as "contains()" checks, is a solution to this problem. Let's break
down why this approach is used and how it generally works:
Advantages
● Precision: This method is highly accurate, even for complex shapes.
● Flexibility: It can be used for any shape, regardless of its complexity.
● Performance: While it might seem resource-intensive, modern computing power
generally makes this method efficient, especially for GUIs where the number of
objects is not excessively high.
Implementation Considerations
● Unique Colors: Each shape should have a unique color in the off-screen bitmap
to avoid confusion in hit detection.
● Memory Management: Care should be taken to manage memory usage
effectively, especially if you're dealing with many or large off-screen bitmaps.
● Redrawing: If the shapes change (move, resize, etc.), the off-screen bitmap needs
to be updated to reflect these changes.
______________________
These heuristics, developed by Jakob Nielsen, are widely recognized principles for
designing user-friendly interfaces. Heuristic evaluation, a method for identifying
usability problems in a user interface design, is often based on these principles. Let's
discuss each heuristic and the concept of heuristic evaluation:
Heuristic Evaluation
● Definition: Heuristic evaluation is a usability inspection method for computer
software that helps to identify usability problems in the user interface (UI) design.
It specifically involves evaluators examining the interface and judging its
compliance with recognized usability principles (the “heuristics”).
● Process:
● A small set of evaluators (typically usability experts) examine the
interface.
● They compare it against predefined heuristics (like Nielsen’s) and identify
where the UI does not adhere to these principles.
● The evaluators then report these issues, often with severity ratings, to
inform the design process.
● Advantages:
● Quick and cost-effective compared to user testing.
● Can be conducted without the need for user involvement.
● Helps in identifying glaring usability issues before user testing.
● Limitations:
● May not uncover all usability issues, especially those unique to specific
user populations.
● Depends heavily on the skill and experience of the evaluators.
● Model: The grouping logic would be part of the model. This is where the data
structure for the group and the logic for grouping and ungrouping operations are
implemented. The model would handle the relationships between individual
elements and their groups.
Implementation of Grouping
Architectures for Undo/Redo
Command Pattern: A common design pattern for implementing Undo/Redo is the
Command Pattern, where each action is encapsulated as a command object with
methods for executing the action and undoing it.
Backward Undo
Concept: Each action is recorded in such a way that it can be reversed. This
usually involves storing the action and the information needed to reverse it.
Implementation: Often implemented using the Command Pattern, where each
command knows how to undo itself.
CUT/COPY/PASTE/DRAG/DROP
Functionality:
● Cut and Copy: These functions allow users to remove (cut) or duplicate
(copy) data from one location.
● Paste: This function inserts the cut or copied data at a new location.
● Drag and Drop: This is an intuitive gesture where users click on an object,
drag it to another location, and then release (drop) it there.
Transfer across Same or Similar Applications:
● Easier to implement as the data formats and handling mechanisms are
known and consistent.
● For example, copying and pasting text or objects within the same word
processor or between similar software.
Transfer across Different Apps:
● More complex due to the differences in data formats and expectations
between applications.
● Requires standardization of data formats (like using plain text, HTML, etc.)
and understanding of how different applications handle these formats.
Issues to Address
What Kind of Data Can Be Transferred?
● Text, images, files, proprietary data formats, etc.
● The type of data that can be transferred often depends on the application's
capabilities and the user's needs.
Transfer Mechanism
● Clipboard: A system-wide feature used for cut, copy, and paste operations.
● Drag and Drop APIs: These APIs enable the transfer of data through drag
and drop actions, both within the same application and between different
applications.
● Data Package: When dragging and dropping, data is typically encapsulated
in a package that other applications can interpret.
What to Do with the Transferred Data?
● The receiving application must decide how to handle the incoming data.
This could mean converting the data into a compatible format or deciding
where and how the data should be inserted or displayed.
1. Event-Driven vs. Animation-Driven UI: Imagine you are designing a media player
application. Explain how you would use event-driven and animation-driven approaches
in the UI.
● Event-Driven Approach: This would be used for user interactions with the media
player. For instance, when a user clicks the play button, the event-driven approach
dictates that the media starts playing. Other examples include adjusting the
volume, skipping to a different track, or changing settings. These actions are all
initiated by user events and the UI responds accordingly.
● Animation-Driven Approach: This is important for enhancing the user experience.
For example, when the media is playing, an animated progress bar shows the
current playtime. Smooth transitions and animations when opening menus or
changing screens within the player also create a more visually appealing and
intuitive experience. Animations can also indicate loading or buffering states.
.
2. Selection Techniques: In a data visualization tool, users need to select multiple data
points on a graph. Describe an efficient multiple-selection technique suitable for this
scenario.
Answer: For selecting multiple data points on a graph in a data visualization tool, a
lasso tool combined with modifier keys would be efficient:
● Lasso Tool: Users can click and drag to draw a free-form shape around the data
points they wish to select. All points within this lassoed area get selected.
● Modifier Keys: To add or remove individual data points from the selection, users
could use modifier keys. For instance, holding down the Ctrl key while clicking
adds or removes a data point from the current selection.
3. Deep Copying: Explain a scenario in a graphic design tool where deep copying is
necessary, and describe the potential consequences of using shallow copying instead.
Answer: In a graphic design tool, deep copying becomes necessary when working with
complex objects that contain nested elements. For example, consider a logo design
consisting of multiple layers, each with its own set of properties and sub-elements.
● Necessity of Deep Copying: If the user wants to duplicate this logo, a deep copy
is needed to ensure that all nested elements and their properties are duplicated.
Each layer and its contents need to be independently editable in the copy.
● Consequences of Shallow Copying: If shallow copying was used instead, the
duplicate logo would reference the same nested elements as the original. As a
result, any changes made to the nested elements in the duplicate would also
reflect in the original logo, which is typically not the desired outcome.
Answer: Implementing a clipboard for a rich text editor that supports formatting like
bold and italics involves:
● Storing Rich Text Formats: The clipboard needs to store text along with its
formatting. This could be achieved by using a rich text format like RTF or HTML,
which preserves the text styles.
● Copy/Paste Operations: When a user copies text, the application converts the
selected rich text into the chosen format (e.g., HTML) and stores it in the
clipboard. During the paste operation, the clipboard content is then converted
back into the rich text format used by the text editor.
● Handling External Paste: The editor must also handle cases where text is pasted
from external sources. It should be able to parse the formatting from common
formats like HTML or plain text and apply it within the editor.
Answer: For selecting and interacting with overlapping items in a game's inventory
system:
● Z-Order Management: Assign a Z-order value to each item, where items with
higher Z-order values are considered to be "on top" of items with lower values.
When items overlap, the item with the highest Z-order value under the cursor
should be selected.
● Toggle Selection Method: Implement a mechanism to cycle through overlapping
items under the cursor, allowing the user to toggle between items that are in the
same space. This could be done with repeated clicks or a specific keyboard
shortcut.
● Visual Indicators: Provide visual cues to indicate overlapping items, such as
highlighting edges or displaying an overlap icon, helping users understand that
multiple items are present.
Before Midterm
e. A list of children
a There is only one possible containment hierarchy that could represent the GUI
b. There are many possible containment hierarchies that could represent the GUI
c. There are many possible containment hierarchies, but only if Box and HBox are used
d. There are only two containment hierarchies, one starting with Box and one with HBox
3. Which of the following uses variable intrinsic size to lay out children?
d. a, b, and c
● Explanation: VBox, HBox, BorderPane, and GridPane all use variable intrinsic size
to some extent to lay out their children, taking into account the preferred sizes of
the children.
● Explanation: In JavaFX, the GUI toolkit is responsible for handling user events and
invoking the appropriate event handlers in the controller.
5. For a 2D world that is 1200 in width and 1200 in height, where should a point with
normalized world coordinates (x-0.25, y- 0.5) be drawn in a view that is at normalized
location (left-0.5, top-0.27?
а. 1200,1200
b. -300,600
c. 600,1200
d. 360,600
e. -300, 360
f. 600,300
g. 0,0
h. 300, -300
i. 0, -600
d. Device events, because the events are generated using a pointing device
● Explanation: 'Enter' and 'leave' events are related to the interaction of the user
with the application interface, thus they are application events.
7. Which of the following are correct ways to handle a mouse click event on a JavaFX
button?
a. Calling the button's setOnAction method with a lambda expression as the argument
b. Calling the button's setOnAction method with a method reference as the argument
c. Calling the button's setOnAction method with an index to an event table as the
argument
h. a.b.c only
i. a,b,d,e only
j. f, g only
k. all of a,b,c,d,e,f,g
a. State exactly who would use the system, and what their main characteristics are
b. Specify actual items to enter or manipulate, and where in the sketch each action
should occur
c. Describe a complete job, and state exactly how the user would carry it out
d. Make no assumptions about the interface, but state specific performance constraints
● Options a, b, and d, while important in their own right, are more specific to user
characteristics, interface design, and performance considerations, and do not
fully encompass the holistic view of a task description that option c provides.
a. Handle events and store information about the state of the interaction
d. Interpret user actions and call methods of the model and interaction model
e. Connect widget events to event handlers and set up publish-subscribe
11. The 'design diamond' describes the following tension in the design process:
a. We want to explore many different designs, but this must occur early in the
development cycle
b. We want to explore many different designs, but must remove those that are not
feasible in JavaFX
c. We want to explore many different designs, but not all of these can be made runnable
d. We want to explore many different designs, but we need to end up with only one
design
14. If a user (or simulated user) cannot complete a step during a task walkthrough, what
should the evaluator do?
a. Record the problem, then remove this design from consideration, then start with the
next design
b. Record the problem, then assume the problem is fixed, then move to the next step
c. Identify whether the problem arose from a lack of knowledge, then adjust the persona
to add that knowledge, then move to the next step
d. Ask the user to try the step again, then provide limited assistance to help them
complete the step, then assume the problem is fixed
Section B - Short Answer (the number of marks are specified for each question).
15.[4 marks] For the JavaFX interface defined in the code below, what sequence of
letters (if any) will be printed when the user clicks on the "Click Me" label?
HBox hbox1 = new HBox();
vbox1.getChildren().add (hbox1);
hbox1.getChildren().add(label1);
stage.setScene (scene);
Answer: When the "Click Me" label is clicked, the event processing follows a specific
order: first event filters (top-down from the Scene to the target node), and then event
handlers (bottom-up from the target node to the Scene).
● The hbox1 event handler consumes the event, preventing further propagation of
the event to other handlers. However, event filters are still processed before this
handler gets the event.
Therefore, the sequence when the "Click Me" label is clicked is:
17.[4 marks] State how the Gestalt principle of closure can be used in screen design,
and draw an example UI that illustrates the principle.
18.Why should a Task descriptions state what a user wants to do but net how they do?
● Task descriptions should focus on what the user wants to achieve rather than
prescribing how to do it because this approach encourages a user-centered
design process. By focusing on the user’s goals, designers can explore a wider
range of solutions and innovations to meet those goals, rather than being
constrained by preconceived notions of how the task should be completed.
19. What criteria should be used To decide an a set of core tasks for the design
process?
20.[6 marks] Draw a fully-annotated controller state diagram for the "interactive
creation" interaction technique. In this technique, the user clicks on the background,
drags the mouse to size the shape, and releases the mouse when the shape is the
correct size. On mouse release, the system selects the new shape.