Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

GUI > Midterm I > Flashcards

Midterm I Flashcards

1
Q

What type of GUI object is the root of a containment hierarchy?

A

Container

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

A GUI object can act as a listener to only one event source.

A

FALSE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Each GUI component instance can be contained only once in a containment hierarchy.

A

TRUE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

All events in the event queue must be processed.

A

FALSE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

GUI frameworks hide large chunks of the control flow of the program

A

TRUE

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is a graphical user interface?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is a semantic event?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Provide a definition for GUI framework

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is MVC?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

what does model do?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

what does controller do?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

what does view do?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

HTML5 is…

A

a markup language for web pages

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What does javascript do?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the DOM?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is React?

A

a declarative, efficient, and flexible JavaScript library for building user interfaces

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is D3?

A

a JavaScript library for manipulating documents based on data

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

GUI

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

WIMP

A

“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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

what is a gui component?

A
  • an element that displays an information arrangement changeable by the user
  • provides a single interaction point for a given kind of data
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

containment hierarchy

A

tree of components that has a top-level
container as its root

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

how do components of the MVC interact?

A

the view recognizes a gui action&raquo_space; the view calls the appropriate method on the controller&raquo_space; the controller accesses the model (possibly updating it)&raquo_space; if the model is altered it notifies interested listeners of the change (view)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

what is the model-view separation principle?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

what are the types of containers?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

what are the kinds of gui components? (4)

A

basic controls
interactive displays of highly formatted information
uneditable information displays
containers

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

draw and describe the main event loops

A

initialization&raquo_space; get next event from queue&raquo_space; process event&raquo_space; are we done yet? (» either get next event or clean up and exit)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

what are events used for?

A

they propagate and deliver information about input devices, windows, and semantics actions to the GUI components
they change property values within GUI

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

what are listener objects?

A

they receive and process event objects
listen to a source object
handle and process events with methods

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

interface

A

list of methods implemented by the listener and invoked by the source with the event object as a parameter

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

event object

A

data passed from the source to the listener

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

source

A

creates event objects and maintains a list of listeners

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

what are the 2 event types

A

low-level
semantic

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

low-level events

A

represent window-system occurrences or low-level input
mouse and key events both of which result
directly from user input

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

semantic events

A

anything that isnt low level
include action and item events
express what the user is doing (clicking that button)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

what can trigger events?

A
  • user gestures
  • modification of a web page
  • network requests made by a web page
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

what is a design pattern?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

how are patterns implemented?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

what does the DOM event model consist of?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

what are the goals of DOM events?

A

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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

how are events propagated?

A

when events happen to an HTML element, the element checks for event handlers, the element calls them and sends any references that are present

41
Q

what is event capturing

A

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

42
Q

what is event bubbling

A

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

43
Q

what are the 3 phases of the DOM event flow

A

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.

44
Q

what are event types

A
  • 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
45
Q

what are the 3 characteristics of react?

A
  • declarative
  • component based
  • learn once, write anywhere
46
Q

declarative

A
  • design simple views for each state in the application
  • React updates & renders the component if its data changes
47
Q

component based

A
  • Encapsulated components that manage their own state.
  • Composition of components to make complex UIs.
48
Q

learn once, write anywhere

A
  • No assumptions about the rest of technology stack.
  • Rendering on server using Node.
  • React Native for mobile applications.
49
Q

what is the component lifecycle?

A

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

50
Q

5 steps to mocking an interface

A
  1. UI structure: break the UI into a component hierarchy.
  2. Static version: build a static version in React (no intreactivity).
  3. Minimal UI state: identify the minimal and complete representation of UI state
  4. State implementation: identify where the state should live.
  5. Inverse data flow: add inverse data flow.
51
Q

what should be a component

A

something that should ideally only do one thing

52
Q

what are the 2 versions of the data model?

A
  • props (get passed to the component)
  • state (managed within the component)
53
Q

how are components created?

A

write a javascript function or use an ES6 class
component names begin with a capital letter

54
Q

components must never modify their own props

A

TRUE

55
Q

elements

A

smallest building blocks of React apps
describes what is seen on the screen

56
Q

React elements are immutable

A

TRUE, Once a React element is created, its children or attributes cannot be changed.

57
Q

parent and child components can know if a certain component is stateful or stateless

A

FALSE

58
Q

state is local or encapsulated

A

TRUE, It is not accessible to any component other than the one that owns and sets it

59
Q

state management

A

a state “lives” in some component and that component alone can change it

60
Q

what are the 4 UX components

A

usability
usefulness
emotional impact
meaningfulness

61
Q

what is the lifecycle of the UX process

A

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
62
Q

usability

A

assessed by learnability, efficiency, memorability, errors, and satisfaction

can be evaluated by heuristics and above attributes

63
Q

10 principles of usability heuristics

A
  • 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
64
Q

accessibility

A

assistive technologies exist to enable people with permanent or temporary disabilities to use the computer

65
Q

examples of accessibility

A

voice interfaces, screen readers, alternate input
devices

66
Q

human computer interaction

A

Studies the design and use of computer technology, focused on the interfaces between people (users) and computers.

67
Q

goals of HCI

A
  • research
  • Providing tools, techniques, and knowledge for system implementers
  • Raising the computer consciousness of the general public
68
Q

5 human factors central to community evaluation

A

time to learn
speed of performance
rate of errors by users
retention over time
subjective satisfaction

69
Q

universal usability

A

the ultimate goal: addressing the needs of all users
anyone can use it

70
Q

guidelines

A

Low-level focused advice about good practices and cautions against dangers

71
Q

principles

A

Mid-level strategies or rules to analyze and compare design alternatives

72
Q

theories

A

High-level widely applicable frameworks to draw on during design and evaluation, as well as to support communication and teaching

73
Q

8 golden rules of interface design

A

•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

74
Q

properties of descriptive theories

A

§ Explanatory
§ Prescriptive
§ Predictive

75
Q

properties of human capacity theories

A

§ Motor task
§ Perceptual
§ Cognitive

76
Q

norman’s 7 stages of action

A

§Forming the goal
§Forming the intention
§Specifying the action
§Executing the action
§Perceiving the system state
§Interpreting the system state
§Evaluating the outcome

77
Q

gulf of execution

A

Mismatch between the user’s intentions and the allowable actions

78
Q

gulf of evaluation

A

Mismatch between the system’s representation and the user’s expectations

79
Q

hooks

A

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

80
Q

mui components

A

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

81
Q

examples of react design patterns

A

§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.

82
Q

antipatterns

A

A commonly-used pattern of action that, despite on the surface being an appropriate and effective response to a problem, has significant negative outcomes.

83
Q

examples of antipatterns

A

§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.

84
Q

layout components

A

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

85
Q

container components

A

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

86
Q

uncontrolled components

A

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

87
Q

controlled components

A

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

88
Q

higher-order components

A

components that instead of just returning JSX, they return another component

89
Q

custom hooks

A

combine basic hooks to provide extra hooks
share complex behavior between several different components

90
Q

functional languages

A

based on mathematical functions
key idea: do everything by composing functions:
§No mutable state.
§No side effects.

91
Q

MUI

A

material UI
library of React UI components that implements Google’s Material Design

92
Q

2 phases of react component

A

render and commit

93
Q

3 components of the box model

A

margin
padding
content

94
Q

what are the lifecycle methods?

A

mounting:
constructor
getDerivedStateFromProps
render
componentDidMount

updating:
shouldComponentUpdate
getSnapshotBeforeUpdate
componentDidUpdate

unmounting:
componentWillUnmount()

error handling:
getDerivedStateFromError
componentDidCatch

95
Q

key idea of functional languages

A

do everything by composing functions so there is no mutable state or side effects

96
Q

reference forwarding

A

components take a ref they receive, and pass it further down (forward it to a child)

97
Q

infrastructure of a web gui is a combination of…

A

user input, html5, dom, display

98
Q

relationship between react element and component

A

elements are building blocks of components

GUI (3 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions