Widgets Logical devices

Widgets & Toolkits

Toolkit Design

JavaFX Widgets

Clipboard & DragDrop

1

User Interface Widget

§ Widget is a generic name for parts of an interface that have their own behavior (e.g. buttons, drop-down menus, spinners, file dialog boxes, progress bars, slider).

§ They are also called components, or controls

§ They perform three essential functions:- capture user input- provide user feedback- send events to notify others that they have been activated

Widget from Wow Wow Wubbzy

2

Early User Interface Widgets

3Macintosh System 5, circa 1987

Original (8): buttons, menu, radio buttons, checkbox, slider, textbox, scrollbar, spinner

Widget Toolkits

4

§ Packaged in GUI toolkits

§ Widget toolkits vary in presentation, but all include “standard” widgets.

Gtk+ (Linux, C++)

Qt (Windows, C++)

MFC (Windows, C++)

Widget Toolkits

Also called widget libraries or GUI toolkits or GUI APIs

§ Defines a set of common GUI components for programmers- Examples: buttons, drop-down menus, sliders, progress bars, lists,

scrollbars, tab panes, file selection dialogs, etc.

Low-Level Toolkits

§ Integrated with the operating system- e.g. Cocoa with macOS, Windows API with Windows (graphics integrated

with kernel until 2006)

High-Level Toolkits

§ Higher-level of abstraction, not integrated with the operating system- e.g. Qt (C++), MFC (C++ Windows), Gtk+ (C, Python), wxWidgets (C++),

Swing (Java), Cocoa (ObjC, Swift), Tk (C)

5

Java FX Widgets

6https://docs.oracle.com/javafx/2/ui_controls/overview.htm

More than 8. Includes many specialized widgets (e.g. password field).

What do widgets do?

7

1. Handle user input• Capture user input in various forms• The type of input varies with the widget

2. Generate events• They generate events (i.e. messages) that can be sent to other parts

of your application to indicate that the user has done something

3. Provide feedback• Provide user feedback indicating that they have been activated

(whatever that means for that particular widget)

4. Maintain state• They may have state, or data that they retain and control, that can

represent state to the user.

All widgets perform the following tasks (in different ways).

Logical Input Devices

8

A way to describe widgets based on their function (and not just appearance)

§ A logical device is a grouping of widgets based on a common functionality- e.g. logical button devices generate “pushed” event

A widget is a specific instance of a logical device- e.g. a push button is a type of logical button device that looks like a button

Logical Input Devices vs. Widgets

10

Logical input devices describe the underlying functionality (i.e. the type of input or interaction that they support). This includes state and events.

• State: what data does the widget need to store? • e.g. textbox holds a string, slider holds min/max/current value.

• Events: what messages does the widget generate when activated?• e.g. buttons generate “pressed” event; slider generates ”changed”

Widgets are implementations of logical input devices, and define the appearance. They add properties to logical input devices.

• Properties: flags that are used to settings or how the widget is presented; some of these are standard, while others are specific to a widget.• Common properties: position (x,y), size (width, height), color• Custom properties: specific to a logical device e.g. range for slider

Logical Button Device (Button and Menu widgets)

11

Support simple interaction, with a single fixed action; broadcasts an event when ”activated” by a user.

Button widget (e.g. JButton)State: NoneEvent: PushedProperties: Enabled, Colour, Font

Menu widget (e.g. JMenuItem)State: NoneEvent: PushedProperties: Enabled, Colour, Font

Logical Number Device (Slider and Spinner widgets)

12

Capture a real number from a specified range. Supports validation (e.g. positive numbers only), and representation of the selected value. Broadcasts changes to state.

Slider widget (e.g. JSlider)State: Real numberEvent: ChangedProperties: Range, Step

Slider widget (e.g. JProgress)State: Real numberEvent: ChangedProperties: Range, Step

Spinner widget (e.g. JSpinner)State: Real numberEvent: ChangedProperties: Range, Step

Logical Boolean Device (Checkbox and RadioButton widgets)

13

Represents a boolean value, or state change, and displays the current state. Broadcasts changes to state.

Checkbox widget (JCheckBox)State: true/false, allow multiples in a groupEvent: changed eventProperties: label, size, visible, enabled

RadioButton widget (JRadioButton)State: true/false, allow single in a groupEvent: changed eventProperties: label, size, visible, enabled

“Radio Button”

14

Specialized Widgets Label widget (e.g. Label, ImageView)State: [non-interactive]

Events: [none]Properties: label, size, visible, enabled

Text widget (e.g. TextField, TextArea)

State: stringEvents: changed, selection, insertion

Properties: formatters (numeric, phone number, regex, …)

Password (e.g. PasswordField)

State: stringEvents: changed, selection, insertion

Properties: password policies

15

Container Widgets

§ Panel (e.g. Pane, Form, Toolbar)- arrangement of widgets

§ Tab- choice between arrangements of widgets

16

Container Widgets

§ Menu- hierarchical list of (usually) buttons

§ Choice from a List- list of boolean widgets - e.g. drop-down, combo-box, radio

button group, split button

17

Special Value Widgets

§ colour/file/date/time pickers

18

JavaFX Widget Classes

Widget Classes

20

MenuBarMenuButtonPaginationPasswordFieldPopupControlProgressBarProgressIndicatorRadioButtonScrollBarScrollPaneSeparatorSlider

SpinnerSplitPaneTableViewTabPaneTextInputControlToggleButtonToolBarTooltipTreeTableViewTreeView

AccordionButtonButtonBarCellCheckBoxChoiceComboBoxDatePickerHTMLEditorHyperlinkLabelListView

Widget Demos

21

Widget Toolkit Design Goals

What widgets features are desirable in a widget toolkit?

1. Completeness• GUI designers have everything they need

2. Consistency• Behaviour is consistent across components

3. Customizability• Developer can reasonably extend functionality to meet particular needs of

application

Meeting these requirements encourages reuse.

22

1/ Completeness

§ All you really need are:- Button- Slider- Pulldown menu- Check box- Radio button- Text field- Spinner

23

Widget Choice

§ Use a common look and feel

§ Use widgets appropriately

24

2/ Consistency: Name that Look

25

1 23

4 5 6

3/ Customization

26

How do we customize widget behaviour and appearance?

1. Expose properties for user to modify• e.g. change colour, font, orientation, text formatter, …

2. Factor out behaviour (i.e. plug-in behaviour)• Swing’s UIManager for changing look and feel• LayoutManager allows custom layouts

3. Expose class hierarchy that promotes customization• Button extends ButtonBase (base of Button, MenuItem…)• Contains a Button Model to support state information• Contains Controller methods to fireActionPerformed

Data Transfer Widgets

§ Two primary methods evolved to enable “user-interface level data transfer” - Clipboard: copy, cut, paste operations to a system-wide storage area

(’clipboard’) that is used to transfer data.- Drag-and-drop: drag data directly from one view/application window to

another.

§ They are different mechanisms that attempt to address some of the same problems (and there’s overlap in implementations).

27

§ GUI architectures require a mechanism to move data between application windows.

§ Ideally, something that aligns well with direct-manipulation principles- e.g. select data, drag-to-move it elsewhere

Drag-drop is expected with

direct manipulation interfaces

Clipboard Transfer

§ We want to copy-paste data between applications, so the clipboard need to be managed at the system level.

§ Data transfer method using a generic data buffer- Copy/Cut data from document to clipboard- Paste data from clipboard to document

§ Issues that arise- Is access to clipboard contents a potential security risk?- How to you handle different data, and different formats, between

applications? e.g. text, image, data table, HTML, SVG. 28

Clipboard Supported Data Formats

Sender and Receiver negotiate the data format

§ When data is placed on clipboard (cut/copy), the sender indicates the data formats that it can support

§ When data is retrieved (paste) by the receiver, it can request a list of supported formats and then specifically request the data in a supported format.

All requests are routed through the system clipboard!

There are a wide variety of formats that are handled this way:

§ Formatted text like HTML, RTF, MS Office, …

§ Vector-based drawing? (SVG, Illustrator, …)

§ Images in different file formats (JPG, PNG, TIF, …)

§ PostScript/PDF drawings?

§ Tables? Charts? Grouped objects? Filters?

§ Proprietary graphics formats? (Photoshop layers)

§ 3D meshes? Video?

29

JavaFX Classes

30

javafx.scene.input.Clipboard

Represents an operating system clipboard, on which data may be placed during, for example, cut, copy, and paste operations.

javafx.scene.input.ClipboardContent

Data container for Clipboard data. It can hold multiple data in several data formats.

javafx.scene.input.DataFormat

Data format identifier used as means of identifying the data stored on a clipboard/dragboard.

Copying Data to the Clipboard

31

1. Get a reference to the system clipboard.

2. Create a clipboard content instance to hold the data (it’s a map, with each named method storing a particular representation of data).

3. Store the content on the clipboard. You should put LOTS of different formats on the

clipboard.

Pasting Data from the Clipboard

32

1. Get a reference to the system clipboard.

2. If your desired format exists on the clipboard, fetch the data directly.

3. You can also fetch and iterate through the list of data formats (e.g. HTML, IMAGE) and then decide which one to fetch.

Interacting with the System Clipboard

33

ClipboardDemo.java

Drag-and-Drop

34

§ User clicks-and-drags the source window- Mouse drag listener needs to be setup to start the drag operation

§ User drops on the destination window- Receiving node checks if the data is valid (i.e. can it handle this format)- If so, receiving node initiates transfer

1. Initiate sending data from source

35

§ Any node in JavaFX can send and receive drag-and-drop data from another application.- Handle the mouse drag event where the operation is initated- Use the event’s dragBoard class to store data temporarily

2. Target checks if operation is valid

36

§ Use onDragOver handler to check if the operation is valid and set status- Node then provides feedback to the user indicating if this is a valid

operation or not!

3. Target accepts data transfer

37

§ Copy the data from the DragBoard (and do something with it)

§ Mark drop as completed for source node.