Midterm I Flashcards
What type of GUI object is the root of a containment hierarchy?
Container
A GUI object can act as a listener to only one event source.
FALSE
Each GUI component instance can be contained only once in a containment hierarchy.
TRUE
All events in the event queue must be processed.
FALSE
GUI frameworks hide large chunks of the control flow of the program
TRUE
What is a graphical user interface?
A graphical user interface is a computer display format that allows the user to select commands, call up files, start programs, and do other routine tasks by using a mouse to point to pictorial symbols (icons) or lists of menu choices on the screen as opposed to having to type in text commands.
What is a semantic event?
everything other than low-level events. Examples of semantic events include action and item events.
A semantic event might be triggered by user input;
expresses what the user is doing, such as “clicking that button”
defined at a higher-level to encapsulate the semantics of a user interface component’s model
Provide a definition for GUI framework
framework: cohesive set of interfaces and classes that collaborate to provide services for the core,
unvarying part of a logical subsystem. contains concrete (and especially) abstract classes that define interfaces to conform to., object interactions to participate in, and other invariants.
GUI framework: uses computer graphics to display individual gui components and the overall GUI
What is MVC?
- a pattern used for UI development
- creates a clear division between domain objects (model) that model the real world and presentation objects that are the GUI elements visible on the screen
- domain objects should be completely self contained and work without reference to the presentation, they should also be able to support multiple presentations, possibly simultaneously
what does model do?
- encapsulates data specific to the application
- responds to state queries
- exposes application functionality by defining computation and logic to process data
- notifies view of changes
what does controller do?
- acts as an intermediary between one or more view objects and one or more model objects
- defines application behavior
- maps user actions to model updates
- selects view for response
- one for each functionality
- invokes state change to model
- sends view selection to view
what does view do?
- renders the models
- what users can see
- requests updates from models
- responds to user actions by sending user gestures to controller
- allows contoller to select view
HTML5 is…
a markup language for web pages
What does javascript do?
- Read elements from documents, write new elements and text into documents, manipulate or move text
- reacts to events (clicking a button)
- determines the user’s screen size, date/time, etc
What is the DOM?
document object model
- represents the web page loaded into the browser using a series of objects
- main object is the document object, which contains child objects
- specifies document interface
What is React?
a declarative, efficient, and flexible JavaScript library for building user interfaces
What is D3?
a JavaScript library for manipulating documents based on data
GUI
“Graphical User Interface” is a computer display format that allows the user to select commands, call up files, start programs, and do other routine tasks by using a mouse to point to pictorial symbols (icons) or lists of menu choices on the screen as opposed to having to type in text commands
WIMP
“Windows, Icons, Menus and Pointing device”
style of user interaction with a graphical user interface that allows a user to interact with the computer through the means of a pointing device such as a mouse to select words from drop down menus or images such as icons on the display screen that represent commands for movement, activation or some other action
what is a gui component?
- an element that displays an information arrangement changeable by the user
- provides a single interaction point for a given kind of data
containment hierarchy
tree of components that has a top-level
container as its root
how do components of the MVC interact?
the view recognizes a gui action»_space; the view calls the appropriate method on the controller»_space; the controller accesses the model (possibly updating it)»_space; if the model is altered it notifies interested listeners of the change (view)
what is the model-view separation principle?
Model (domain) objects should not have direct knowledge of view (GUI) objects, at least as view objects
- allow separate development of the model and UI layers
what are the types of containers?
- top level: at least one of these must be present in an app
- general-purpose: used in most applications
- special-purpose: play specific roles in the UI
what are the kinds of gui components? (4)
basic controls
interactive displays of highly formatted information
uneditable information displays
containers
draw and describe the main event loops
initialization»_space; get next event from queue»_space; process event»_space; are we done yet? (» either get next event or clean up and exit)
what are events used for?
they propagate and deliver information about input devices, windows, and semantics actions to the GUI components
they change property values within GUI
what are listener objects?
they receive and process event objects
listen to a source object
handle and process events with methods
interface
list of methods implemented by the listener and invoked by the source with the event object as a parameter
event object
data passed from the source to the listener
source
creates event objects and maintains a list of listeners
what are the 2 event types
low-level
semantic
low-level events
represent window-system occurrences or low-level input
mouse and key events both of which result
directly from user input
semantic events
anything that isnt low level
include action and item events
express what the user is doing (clicking that button)
what can trigger events?
- user gestures
- modification of a web page
- network requests made by a web page
what is a design pattern?
the event system is a design pattern
- named pair of problem and its solution
- the pattern starts with an agreement over a kind of event and the name string used for the event, the type of the data structure used to represent the key properties of that event, and the javascript object which will emit that event
how are patterns implemented?
defining a java script function which takes as an argument the data structure which was agreed upon
Registering the function using the name String with the object which will emit the event
what does the DOM event model consist of?
- the DOM event flow (describes flow of events in a tree-based structure)
- set of interfaces to access contextual information on events and to register event listeners.
what are the goals of DOM events?
The design of an event system which allows registration of event listeners and describes event flow through a tree structure.
Provide a common subset of the current event systems used in DOM Level 0 browsers.
how are events propagated?
when events happen to an HTML element, the element checks for event handlers, the element calls them and sends any references that are present
what is event capturing
starts with the outer most element of the DOM and works inwards to the HTML element the event took place on and then out again
what is event bubbling
it begins by checking the target of the event for any attached event handlers, then bubbles up through each respective parent element until it reaches the HTML element
what are the 3 phases of the DOM event flow
capture: taking the event object from default view to the target’s parent
target: the event object must arrive at the event object’s event target
bubble: propagates through the target’s ancestors in reverse order.
what are event types
- standard events: defined in official Web specifications and should be common
across browsers. - nonstandard events: not defined in official Web specifications and supported only by some browsers
- browser events: never exposed to web content and can only be used in the specific browser content context
- add-on-specific events
- developer tool-specific events
what are the 3 characteristics of react?
- declarative
- component based
- learn once, write anywhere
declarative
- design simple views for each state in the application
- React updates & renders the component if its data changes
component based
- Encapsulated components that manage their own state.
- Composition of components to make complex UIs.
learn once, write anywhere
- No assumptions about the rest of technology stack.
- Rendering on server using Node.
- React Native for mobile applications.
what is the component lifecycle?
mounting: mount components with constructor and render (render phase), React updates DOM and refs and componentDidMount is invoked (commit phase)
updating: will update states on components and rerender (render phase), React updates DOM and refs and componentDidUpdate is invoked (commit phase)
unmounting: componentWillUnmount() is invoked for cleanup before a component is unmounted and destroyed
5 steps to mocking an interface
- UI structure: break the UI into a component hierarchy.
- Static version: build a static version in React (no intreactivity).
- Minimal UI state: identify the minimal and complete representation of UI state
- State implementation: identify where the state should live.
- Inverse data flow: add inverse data flow.
what should be a component
something that should ideally only do one thing
what are the 2 versions of the data model?
- props (get passed to the component)
- state (managed within the component)
how are components created?
write a javascript function or use an ES6 class
component names begin with a capital letter
components must never modify their own props
TRUE
elements
smallest building blocks of React apps
describes what is seen on the screen
React elements are immutable
TRUE, Once a React element is created, its children or attributes cannot be changed.
parent and child components can know if a certain component is stateful or stateless
FALSE
state is local or encapsulated
TRUE, It is not accessible to any component other than the one that owns and sets it
state management
a state “lives” in some component and that component alone can change it
what are the 4 UX components
usability
usefulness
emotional impact
meaningfulness
what is the lifecycle of the UX process
A cycle of the life of a UX design
From inception to deployment (and beyond)
- Understand needs (of users)
- Create design candidates
- Construct prototypes
- Evaluate UX
usability
assessed by learnability, efficiency, memorability, errors, and satisfaction
can be evaluated by heuristics and above attributes
10 principles of usability heuristics
- visibility of system status
- match between system and the real world
- user control and freedom
- consistency and standards
- error prevention
- recognition rather than recall
- flexibility and efficiency of use
- aesthetic and minimal design
- help users recognize, diagnose, and recover from errors
- help and documentation
accessibility
assistive technologies exist to enable people with permanent or temporary disabilities to use the computer
examples of accessibility
voice interfaces, screen readers, alternate input
devices
human computer interaction
Studies the design and use of computer technology, focused on the interfaces between people (users) and computers.
goals of HCI
- research
- Providing tools, techniques, and knowledge for system implementers
- Raising the computer consciousness of the general public
5 human factors central to community evaluation
time to learn
speed of performance
rate of errors by users
retention over time
subjective satisfaction
universal usability
the ultimate goal: addressing the needs of all users
anyone can use it
guidelines
Low-level focused advice about good practices and cautions against dangers
principles
Mid-level strategies or rules to analyze and compare design alternatives
theories
High-level widely applicable frameworks to draw on during design and evaluation, as well as to support communication and teaching
8 golden rules of interface design
•Strive for consistency
•Cater to universal usability
•Offer informative feedback
•Design dialogs to yield closure
•Prevent errors
•Permit easy reversal of actions
•Keep users in control
•Reduce short-term memory load
properties of descriptive theories
§ Explanatory
§ Prescriptive
§ Predictive
properties of human capacity theories
§ Motor task
§ Perceptual
§ Cognitive
norman’s 7 stages of action
§Forming the goal
§Forming the intention
§Specifying the action
§Executing the action
§Perceiving the system state
§Interpreting the system state
§Evaluating the outcome
gulf of execution
Mismatch between the user’s intentions and the allowable actions
gulf of evaluation
Mismatch between the system’s representation and the user’s expectations
hooks
special function that lets you “hook into” React features useState is a Hook that lets you add React state to function components
useEffect is a Hook that can be viewed
mui components
work in isolation
§They are self-supporting, and will only
inject the styles they need to display.
§They don’t rely on any global style-sheets.
§Styled engine
examples of react design patterns
§Factory: An interface for creating a singleobject, but let subclasses decide which class to instantiate.
§Façade: A unified interface to a set of interfaces in a subsystem.
§Iterator: Accessing the elements of an aggregate object sequentially without exposing its underlying representation.
§Monitor: An object whose methods are subject to mutual exclusion.
antipatterns
A commonly-used pattern of action that, despite on the surface being an appropriate and effective response to a problem, has significant negative outcomes.
examples of antipatterns
§God Object: an object that references a large number of distinct types, has too many unrelated or uncategorized methods, or some combination of both.
§Death by Planning: too much planning.
§Intellectual Violence: intimidation through use of jargon or arcane technology.
§Smoke and Mirrors: excessive use of demos and prototypes by salespeople.
layout components
primary concern is helping to arrange other components created on the page.
other components shouldn’t know or care where it is that they’re actually being displayed on the page
Split-screen
Modal
container components
take care of all of the data loading and other data
management for their child components
take that logic out into the container and the container then takes care of loading that data and passes it automatically to the children components
uncontrolled components
keeps track of all its own internal state and really the
only time the data gets out of that component is when some event occurs
keeps track of its own state
controlled components
have their parent takes care of keeping track of the state
and that state is then usually passed through to a controlled component as a prop
The state of the component is passed through as props.
controlled relies on data from another component
higher-order components
components that instead of just returning JSX, they return another component
custom hooks
combine basic hooks to provide extra hooks
share complex behavior between several different components
functional languages
based on mathematical functions
key idea: do everything by composing functions:
§No mutable state.
§No side effects.
MUI
material UI
library of React UI components that implements Google’s Material Design
2 phases of react component
render and commit
3 components of the box model
margin
padding
content
what are the lifecycle methods?
mounting:
constructor
getDerivedStateFromProps
render
componentDidMount
updating:
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate
unmounting:
componentWillUnmount()
error handling:
getDerivedStateFromError
componentDidCatch
key idea of functional languages
do everything by composing functions so there is no mutable state or side effects
reference forwarding
components take a ref they receive, and pass it further down (forward it to a child)
infrastructure of a web gui is a combination of…
user input, html5, dom, display
relationship between react element and component
elements are building blocks of components
