final

Question 1

GUI

Answer 1

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

Question 2

WIMP

Answer 2

“Windows, Icons, Menus and Pointing device” is 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.

Question 3

Model View Controller (MVC)

Answer 3

*Probably the most quoted design pattern in UI development.
*It is also the most misquoted.
*Create 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.

Question 4

GUI framework

Answer 4

*A 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.
*Usually (but not necessarily) requires the framework user to define subclasses of existing framework classes to make use of, customize, and extend the
framework services.
*Has abstract classes that may contain both abstract and concrete methods.

Question 5

draw the structure of a web graphical user interface

Answer 5

slide 7

Question 6

event source

Answer 6

creates event objects and maintains a list of listeners..

Question 7

event listener

Answer 7

receives and processes event objects (implements an
interface).

Question 8

event interface

Answer 8

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

Question 9

Event object

Answer 9

data passed from the source to the listener.

Question 10

DOM Event Flow

Answer 10

o Capture: from the default view to
the target’s parent.
qEvent listeners must handle
the event before it reaches its target.
o Target: the event object must arrive
at the event object’s event target.
o Bubble: propagates through the
target’s ancestors in reverse order.
qEvent listeners must handle
the event after it reaches its target.

Question 11

Box Model

Answer 11

Determines how elements are positioned within the browser window.
§CSS treats every element as if it were in a box.
§When a bottom margin of one element meets the top margin of another, only the
larger of the two margins shows.
§border: separates the edge of one box from other surrounding boxes.
§margin: the distance between
the border of a box and the box
next to it.
§padding: the space between
the content of the box and its
border.

Question 12

three characteristics of react

Answer 12

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

Question 13

React development steps

Answer 13

*Preparation:
§Mock: start with a mock user interface.
*Development Steps
1. UI structure: break the UI into a component hierarchy.
2. Static version: build a static version in React.
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.

Question 14

User Experience (UX)

Answer 14

Every aspect of the user’s interaction with a product, service, or company that make up the user’s perceptions of the whole. User experience design as a discipline is concerned with all the elements that together make up that interface, including layout, visual design, text, brand, sound, and interaction. UE (Usability Engineering) works to coordinate these elements to allow for the best possible interaction by users.

Question 15

UX process lifecycle

Answer 15

§Understand needs (of users)
§Create design candidates
§Construct prototypes
§Evaluate UX

Question 16

5 usability attributes

Answer 16

§Learnability: “… easy to learn so that the user can rapidly start getting some work done with
the system.”
§Efficiency: “… efficient to use, so that once the user has learned the system, a high level of
productivity is possible.”
§Memorability: “… easy to remember, so that the casual user is able to return to the system
after some period of not having used it , without having to learn everything all over again.”
§Errors: “… a low error rate, so that users make few errors during the use of the system, and
so that if they do make errors they can easily recover from them. Further, catastrophic errors
must not occur.”
§Satisfaction: “… pleasant to use so that users are subjectively satisfied when using it; they
like it.

Question 17

rules for creating react components

Answer 17

*Always start component names with a capital letter:
§React treats components starting with lowercase letters as DOM tags.

Question 18

Hooks

Answer 18

*A Hook is 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
as componentDidMount, componentDidUpdate,
and componentWillUnmount combined.

Question 19

React Design Patterns

Answer 19

A named pair of a problem and solution:
§Effective solutions to common problems.
§We mentioned Model-View-Controller.

Question 20

examples of react design patterns

Answer 20

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

Question 21

MUI

Answer 21

*MUI (previously Material UI) is a React UI library: https://mui.com
*Provides a robust, customizable, and accessible library of foundational and
advanced components:
§MUI core: foundational components
§MUI X: advanced components
§Templates: application templates
§Design kits: components for design tools
*Community edition include MUI core.

Question 22

What is computer graphics?

Answer 22

The science and art of communicating visually via a computer’s display and its interaction devices.

Question 23

Combining models to to produce a representation of a particular view of the
scene:

Answer 23

§Model of objects
§Model of the light
§Geometric model
§Mathematical model

Question 24

Types of Visualization

Answer 24

*Scientific Visualization: the use of interactive visual representations of scientific
data, typically physically based, to amplify cognition.
*Information Visualization: the use of interactive visual representations of
abstract, non-physically based data to amplify cognition.

Question 25

draw and describe the Visualization Stages

Answer 25

slide 25 *The collection and storage of data *Preprocessing / transforming the data into something that is easier to manipulate *Mapping from the selected data to a visual representation *The human perceptual and cognitive system (the perceiver)

Question 26

GUI component

Answer 26

*A GUI component (widget) is an element that displays an information arrangement changeable by the user and provides a single interaction point for a given kind of data. *GUI components are basic visual building blocks which, combined in an application, hold all the data processed by the application and the available interactions on this data. *To appear onscreen, every GUI component must be part of a containment hierarchy. A containment hierarchy is a tree of components that has a top-level container as its root. *A layout manager determines the size and position of the components within a container. *A GUI framework uses computer graphics to display individual GUI components and the overall GUI.

Question 27

Three-color Theory

Answer 27

*Human visual system has two types of sensors. * Rods: monochromatic, night vision. * Cones: * Color sensitive. * Three types of cones. * Only three values (the tristimulus values) are sent to the brain. *Need only match these three values: * Need only three primary colors.

Question 28

Commonly Used Types of Data Visualizations

Answer 28

*Amounts *Distributions *Proportions *x-y relationships *Geospatial data *Uncertainty

Question 29

Homogenous Coordinates

Answer 29

Homogenous coordinates define a point in a plane using three coordinates instead of two.

Question 30

What is SVG?

Answer 30

*SVG is an image that is text-based. *Provides high quality, scalable, graphics on the web. *Has a similar structure to HTML. *Is a DOM object. *Properties can be specified as attributes. *Uses absolute positions.

Question 31

Computer graphics can be viewed from several perspectives:

Answer 31

§Its applications. §The various fields that are involved in the study of graphics. §Some of the tools that make the images produced by graphics so effective. §Some numbers to help understand the scales at which computer graphics works. §The elementary ideas required to develop graphics program.

Question 32

SVG Coordinate System

Answer 32

*A coordinate system or grid system is similar to the one used by HTML5 elements. *The top left corner of the document is considered to be the point (0,0), or point of origin. *Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom. *SVG can use absolute units (ones with a dimensional identifier like "pt" or "cm") and so-called user units, that lack that identifier and are plain numbers.

Question 33

OpenGL

Answer 33

*OpenGL controls whatever hardware you are using, and you use its functions instead of controlling the hardware directly. *It is a collection of routines that the programmer can call along with a model of how the routines work together to produce graphics.

Question 34

draw the webgl pipeline

Answer 34

slide 36

Question 35

Coordinated Multiple Views

Answer 35

*The analysis and assessment of complex, multi-dimensional data is a challenge: §We need multiple perspectives/views of the same data. *The views/plots/charts can be coordinated or articulated within a Coordinated Multiple Views (CMV) tool.

Question 36

D3

Answer 36

*D3: Data-Driven Documents *Created by Mike Bostock in 2011 *D3.js is an open source, lightweight JavaScript library for manipulating web documents and creating custom interactive data based web visualizations, without predefined forms or specific visualization features D3 leverages HTML, SVG, and CSS.

Question 37

Data Binding Functions

Answer 37

*data: binds elements to data. *join: enters/updates/exits elements based on data. *enter: gets the enter selection (data missing elements). *exit: gets the exit selection (elements missing data). *datum: gets or set element data (without joining).

Question 38

Calling data creates three arrays:

Answer 38

§enter(data without corresponding DOM elements). §update(DOM elements mapped to data). §exit(DOM elements now missing data).

Question 39

Layouts

Answer 39

*A layout is a function that modifies a dataset for graphical representation. §A layout encapsulates a strategy for laying out data elements visually, relative to each other. §Examples: histogram, pie chart, stack, Sankey, word cloud. *Layouts take a set of input data, apply an algorithm or heuristic, and output the resulting positions/shapes for a cohesive display of the data. §Layouts typically operate across a collection of data as a whole, rather than individually. *Layouts instances are sometimes functions that can be configured and then applied to a set of data. §Other times, specific methods or event handlers are used for data input and position output..

Question 40

Charts

Answer 40

*A chart refers to any flat layout of data in a graphical manner. *The datapoints, which can be individual values or objects in arrays, may contain categorical, quantitative, topological, or unstructured data. *All charts consist of several graphical elements that are drawn or derived from the dataset being represented. *These graphical elements may be: §Graphical primitives, like circles or rectangles. §More complex, multipart, graphical objects like the boxplot. §Supplemental pieces like axes and labels.

Question 41

D3 and React approaches

Answer 41

§React centric: Use D3 code in render method. §D3 centric: Create a container element in React and put D3 code in componentDidMount and componentDidUpdate. §Hybrid: React for specifying the DOM structure, and D3 for updating style: o Use D3 code in render method to create DOM elements. o Use D3 code in componentDidMount and componentDidUpdate to update style.

Question 42

Web Storage API

Answer 42

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

Question 43

The two mechanisms within Web Storage are as follows:

Answer 43

§sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores). §localStorage does the same thing, but persists even when the browser is closed and reopened. o Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.

Question 44

Complex Visualization

Answer 44

*Using built-in canvas rendering for D3 shapes. *Creating large random datasets of multiple types. *Using canvas drawing in conjunction with SVG to draw large datasets. *Optimizing geospatial, network, and traditional data visualization. *Working with quadtrees to enhance spatial search performance.

Question 45

Canvas versus SVG

Answer 45

*Unlike SVG, canvas does not include a hierarchy of objects (retained mode). §Instead, it uses an immediate mode: o Starts by clearing the context and redrawing everything. *Drawing with canvas produces higher performance, but slightly less crisp graphics. *There are no elements (e.g., ) to attach mouse events, too. §Instead, they are attached to the canvas itself: o The canvas coordinates of the mouse event (pixel) must be mapped to the corresponding drawn element.

Question 46

Hybrid approach

Answer 46

draw interactive elements with SVG and large datasets with canvas.

Question 47

technology stack

Answer 47

The technology stack is a set of frameworks and tools used to develop a software product. This set of frameworks and tools are very specifically chosen to work together in creating a well-functioning software. *MERN (MongoDB, Express, React, Node) *LAMP (Linux, Apache, MySQL, PHP) *MEAN (MongoDB, Express, Angular, Node)

Question 48

MERN Stack

Answer 48

MERN stack is a web development framework consisting of MongoDB, Express, React, and Node as its working components §MongoDB: A document-oriented, No-SQL database used to store the application data (https://www.mongodb.com). §Node: The JavaScript runtime environment used to run JavaScript on a machine rather than in a browser. §Express: A framework layered on top of Node, used to build the backend of a site (web server) using Node functions and structures. §React: A GUI framework used to build the user interface of the single page web application.

Question 49

MongoDB

Answer 49

*A document database: §A record in MongoDB is a document, which is a data structure composed of field and value pairs. §MongoDB documents are similar to JSON objects. §MongoDB stores documents in collections. §The values of fields may include other documents, arrays, and arrays of documents. *The advantages of using documents are: §Documents (i.e., objects) correspond to native data types in many programming languages. §Embedded documents and arrays reduce need for expensive joins. §Dynamic schema supports fluent polymorphism.

Question 50

Express Middleware

Answer 50

*Middleware functions have access to the request object (req), the response object (res), and the next function in theapplication’s request-response cycle. §The next function is a function in the Express router which, when invoked, executes the middleware succeeding the current middleware. *Middleware functions can perform the following tasks: §Execute any code. §Make changes to the request and the response objects. §End the request-response cycle. §Call the next middleware in the stack.

Question 51

HTTP

Answer 51

*The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers. *HTTP works as a request-response protocol between a client and server. *The two most common HTTP methods are: GET and POST: §GET is used to request data from a specified resource. §POST is used to send data to a server to create/update a resource.

Question 52

React Native provides a number of built-in Core Components to use in app:

Answer 52

§Basic Components §User Interface §List Views §iOS-specific §Android-specific §Others

Question 53

Styling

Answer 53

*Styling is done using JavaScript. *All of the core components accept a prop named style. *The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g., backgroundColor. *The style prop can be a plain JavaScript object: §It can also be an array of styles: §The last style in the array has precedence, can be used to inherit styles.

Question 54

Flex Layout

Answer 54

A component can specify the layout of its children using the Flexbox algorithm: §Designed to provide a consistent layout on different screen sizes. §Normally a combination of flexDirection, alignItems, and justifyContent.

Question 55

Interactions

Answer 55

*Users interact with mobile apps mainly through touch. *They can use a combination of gestures, such as tapping on a button, scrolling a list, or zooming on a map. *React Native provides components to handle all sorts of common gestures, as well as a comprehensive gesture responder system to allow for more advanced gesture recognition.

Question 56

iOS

Answer 56

*The iOS (iOS 16.1) system is based on the same technologies used by Mac OS X, namely the Mach kernel and BSD interfaces. *iOS apps run in a UNIX-based system and have full support for threads, sockets, and many of the other technologies typically available at that level. However, there are places where the behavior of iOS differs from that of Mac OS X. *To manage program memory, iOS uses essentially the same virtual memory system found in Mac OS X. §Each program still has its own virtual address space, but unlike Mac OS X, the amount of usable virtual memory is constrained by the amount of physical memory available. *For security reasons, iOS places each app (including its preferences and data) in a sandbox at install time.

Question 57

Sandbox

Answer 57

*A sandbox is a set of fine-grained controls that limit the app’s access to files, preferences, network resources, hardware, etc. *As part of the sandboxing process, the system installs each app in its own sandbox directory, which acts as the home for the app and its data. *To help apps organize their data, each sandbox directory contains several well- known subdirectories for placing files.

Question 58

Delegation

Answer 58

this design pattern facilitates the transfer information and data from one object to another.

Question 59

Target-action:

Answer 59

this design pattern translates user interactions with buttons and controls into code that your app can execute.

Question 60

Block objects:

Answer 60

use blocks to implement callbacks and asynchronous code.

Question 61

Sandboxing

Answer 61

all iOS apps are placed in sandboxes to protect the system and other apps. §The structure of the sandbox affects the placement of your app’s files and has implications for data backups and some app-related features.

Question 62

view

Answer 62

*A view is an object that draws itself within a rectangular area of a window and that can respond to user actions such as finger taps or mouse clicks. *A view draws a visual representation of itself and presents a surface that responds to touches and input from devices.

Question 63

Android

Answer 63

Android is a software stack for mobile devices (Android 13) that includes an operating system, middleware and key applications: §Application framework for reuse and replacement of components. §Dalvik virtual machine optimized for mobile devices. §Integrated browser based on the open source WebKit engine. §Optimized graphics powered by a custom 2D graphics library; 3D graphics based on the OpenGL ES. §SQLite for structured data storage. §Media support for common audio, video, and still image formats (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, GIF). §GSM Telephony (hardware dependent). §Bluetooth, EDGE, 3G, and WiFi (hardware dependent). §Camera, GPS, compass, and accelerometer (hardware dependent). §Rich development environment.

Question 64

Application

Answer 64

*Android applications are written in Java. *The Android SDK tools compile the code, along with any data and resource files, into an Android package, an archive file with an .apk suffix. *Once installed on a device, each Android application lives in its own security sandbox: §The Android operating system is a multi-user Linux system in which each application is a different user. §By default, the system assigns each application a unique Linux user ID. The system sets permissions for all the files in an application so that only the user ID assigned to that application can access them. §Each process has its own virtual machine (VM), so an application's code runs in isolation from other applications. §By default, every application runs in its own Linux process.

Question 65

draw the process of compiling and running android projects

Answer 65

slide 70

Question 66

Application Components

Answer 66

Application components are the essential building blocks of an Android application. §Each component is a different point through which the system can enter your application.

Question 67

4 types of application components

Answer 67

§Activity: represents a single screen with a user interface. The activities can work together to form a cohesive user experience in the email application,but each one is independent of the others. §Service: a component that runs in the background to perform long-running operations or to perform work for remote processes. A service does not provide a user interface. §ContentProvider: manages a shared set of application data. §BroadcastReceiver: a component that responds to system-wide broadcast

Question 68

JavaFX

Answer 68

*JavaFX is an open source, next generation client application platform for desktop, mobile and embedded systems built on Java. *It is a collaborative effort by many individuals and companies with the goal of producing a modern, efficient, and fully featured toolkit for developing rich client applications.

Question 69

A basic JavaFX application has classes from 3 packages:

Answer 69

§javafx.application: the application life-cycle classes. §javafx.stage: the top-level container classes for the content. §javafx.scene: the core set of base classes for the content.

Question 70

application content

Answer 70

a scene graph is a tree data structure, most commonly found in graphical applications and libraries such as vector editing tools, 3D libraries, and video games.

Question 71

JavaFX scene graph

Answer 71

a retained mode API: maintains an internal model of all graphical objects. §It always knows what objects to display, what areas of the screen need repainting, and how to render it all in the most efficient way. §Use the scene graph API instead of invoking primitive drawing methods directly: the system automatically handles the rendering. o Significantly reduces the amount of application code.

Question 72

Qt

Answer 72

*Qt is a cross-platform application and UI framework. *It an be used to write web-enabled applications once and deploy them across desktop, mobile and embedded operating systems without rewriting the source code. *A C++ framework for high performance cross-platform software development. *Provides a rich set of standard widgets that can be used to create graphical user interfaces for applications. *Layout managers are used to arrange and resize widgets to suit the user’s screen, language and fonts.

Question 73

Qt Components

Answer 73

*Qt Framework: intuitive APIs for C++ and CSS/JavaScript- like programming with Qt Quick for rapid UI creation. *Qt Creator IDE: powerful cross-platform integrated development environment, including UI designer tools and on-device debugging. *Tools and toolchains: internationalization support, embedded toolchains and more.

Question 74

Qt Ready-made models:

Answer 74

§QStringListModel: stores a simple list of QString items. §QStandardItemModel: manages more complex tree structures of items, each of which can contain arbitrary data. §QFileSystemModel: provides information about files and directories in the local filing system. §QSqlQueryModel, QSqlTableModel, and QSqlRelationalTableModel: used to access databases.

Question 75

Signals and Slots

Answer 75

*The signals and slots mechanism is a central feature of Qt and probably the part that differs most from the features provided by other frameworks. §Signals and slots make it easy to implement the Observer pattern. *Widgets emit signals when events occur. *Connect to a signal by creating a function (a “slot”) and calling the connect function to relate the signal to the slot. §Connections can be added or removed at any time. §They can be made between objects in different threads.

Question 76

Linking

Answer 76

*Linking helps us show how a point, or set of points, behaves in each of the views. *This is accomplished by selecting/highlighting/emphasizing these points: §For example, the selected points could be drawn as a filled circle while the remaining points could be drawn as unfilled circles. §A typical application of this would be to show how an outlier shows up in each of the individual pairwise plots.

Question 77

Brushing

Answer 77

*Brushing means selecting a subset of the data points with an input device (interactions technique). *Brushing extends the concept of linking a bit further. *The points to be highlighted are interactively selected (e.g., by a mouse) and all views are dynamically updated (ideally in real time): *Selecting a region of points in one view results in those points reflected in the other views.

Question 78

most common approach to visualizing amounts

Answer 78

bars

Question 79

x-yRelationships

Answer 79

*Scatterplot: shows one quantitative variable relative to another. *Bubble chart: dot size represents the third variable. *Paired scatterplot: the variables along the xand yaxes are measured in the same units. *Slopegraph: paired points connected by straight lines.

Question 80

Proportions

Answer 80

*Pie chart: emphasizes that the individual parts add up to a whole and highlight simple fractions. *Bars: easily compared in side-by-side bars. *Stacked bars: useful when comparing multiple sets of proportions.

Question 81

Selection

Answer 81

*The selection is cumulative and includes multiple points. §Maintain a list of selected points/cells/columns. §Selection is synced and works in all views. *Table: §Clicking on a table cells selects the corresponding row and data point. *BarChart: §Clicking on a bar selects the corresponding data point. *PieChart: §Clicking on a slice selects the corresponding data point. *ScatterPlot: §Clicking on a point selects the corresponding data point. *Alternatively, instead of mouse click you can use rubberbanding.

Question 82

Rubber Banding

Answer 82

*A technique used for displaying the segments, rectangles (and other primitives) that change as they are manipulated interactively. *Line segment: §Press the mouse button to specify the location of the start point of the segment. §Move the mouse and the current location of the mouse is the end point of the segment. §Release the mouse to remove the line segment. *Rectangle: * Press the mouse button to specify the location of the start point of a diagonal of the rectangle. * Move the mouse and the current location of the mouse is the end point of the diagonal of the rectangle. * Release the mouse to remove the rectangle.

Question 83

Scene Class

Answer 83

*The container for all content in a scene graph:§If the root is a Group, the contents of the scene graph will be clipped by the scene's width and height and changes to the scene's size (if user resizes the stage) will not alter the layout of the scene graph. §If the root is a resizable node (layout Region or Control) then the root's size will track the scene's size, causing the contents to be relayed out as necessary. *The scene's size may be initialized by the application during construction: §If no size is specified, the scene will automatically compute its initial size based on the preferred size of its content. §If only one dimension is specified, the other dimension is computed using the specified dimension, respecting content bias of a root. *A default headlight will be added to a scene that contains one or more Shape3D nodes, but no light nodes. §This light source is a Color.WHITE PointLight placed at the camera position. *Scene objects must be constructed and modified on the JavaFX Application Thread.

Question 84

Node Class

Answer 84

*Each node in the scene graph can be given a unique id, much like the “id” attribute of an HTML tag (make it unique). §The id can also be used identify nodes for applying styles. *Defines a traditional computer graphics “local” coordinate system in which the x axis increases to the right and the y axis increases downwards. *Any Node can have transformations applied to it: translation, rotation, scaling, or shearing.§Local to scene transformation: from the local coordinate space of this Node into the coordinate space of its Scene. §Scene to local transformation: from the coordinate space of the Scene into the local coordinate space of this Node. *CSS: The Node class contains id, styleClass, and style variables that are used in styling this node from CSS.§The id and styleClass variables are used in CSS style sheets to identify nodes to which styles should be applied. §The style variable contains style properties and values applied directly to this node.

Question 85

Built-In Layouts

Answer 85

*AnchorPane: allows the edges of child nodes to be anchored to an offset from the anchor pane's edges. *BorderPane: lays out children in top, left, right, bottom, and center positions. *FlowPane: lays out its children in a flow that wraps at the flowpane's boundary. *GridPane: lays out its children within a flexible grid of rows and columns. *HBox: lays out its children in a single horizontal row. *StackPane: lays out its children in a back-to-front stack. *TilePane: lays out its children in a grid of uniformly sized “tiles”. *VBox: lays out its children in a single vertical column.

Question 86

Collections

Answer 86

*Collections of items can presented to a user using several types of UI controls: §An observable collection from the model is assigned to a UI control object using the setItems method. *The user can select one or more items from the collections. *The information about the selected items from the collection is stored in a selection model: o Single selection: at most one item can be selected. o Multiple selection: More than one item can be selected. qCan be configured using a selection mode (single/multiple selection). qWhich item has focus (e.g., receives keyboard input). *The information about the item that has focus (input) is stored in a focus model.

Question 87

The SelectionModel Class

Answer 87

*It is an abstract class used by UI controls to provide a consistent API for maintaining selection. *It has two properties: §selectedIndex: the currently selected index value in the selection model. §selectedItem: the currently selected item in the selection model. *Two sub-classes: §SingleSelectionModel: enforces the requirement that only a single index be selected at any given time (e.g., ChoiceBox). §MultipleSelectionModel: an abstract class that extends SelectionModel to add API to support multiple selection. o SelectionMode: An enumeration used to specify how many items may be selected, SINGLE or MULTIPLE.

Question 88

The FocusModel Class

Answer 88

*The abstract base class for FocusModel implementations. *It has two properties: §focusedIndex: the index of the current item in the FocusModel which has the focus. §focusedItem: the current item in the FocusModel which has the focus. *A sub-class: §TableFocusModel: The abstract base class for FocusModel implementations that are used within table-like controls