widgets - scs | uwcs349/w20/slides/12.widgets.pdfjavafx classes 30 javafx.scene.input.clipboard...
TRANSCRIPT
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.