Widgets Logical devices Widgets & Toolkits Toolkit Design - PowerPoint PPT Presentation

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 Original (8): buttons, menu, radio buttons, checkbox, slider, textbox, scrollbar, spinner Macintosh System 5, circa 1987 3

Widget Toolkits  Packaged in GUI toolkits  Widget toolkits vary in presentation, but all include “standard” widgets. Gtk+ (Linux, C++) Qt (Windows, C++) MFC (Windows, C++) 4

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 More than 8. Includes many specialized widgets (e.g. password field). https://docs.oracle.com/javafx/2/ui_controls/overview.htm 6

What do widgets do? All widgets perform the following tasks (in different ways). 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. 7

Logical Input Devices 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 8

Logical Input Devices vs. Widgets 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 10

Logical Button Device (Button and Menu widgets) Support simple interaction, with a single fixed action; broadcasts an event when ”activated” by a user. Button widget (e.g. JButton) State: None Event: Pushed Properties: Enabled, Colour, Font Menu widget (e.g. JMenuItem) State: None Event: Pushed Properties: Enabled, Colour, Font 11

Logical Number Device (Slider and Spinner widgets) 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 number Event: Changed Properties: Range, Step Slider widget (e.g. JProgress) State: Real number Event: Changed Properties: Range, Step Spinner widget (e.g. JSpinner) State: Real number Event: Changed Properties: Range, Step 12

Logical Boolean Device (Checkbox and RadioButton widgets) 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 group Event: changed event Properties: label, size, visible, enabled RadioButton widget (JRadioButton) State: true/false, allow single in a group Event: changed event Properties: label, size, visible, enabled 13

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: string Events: changed, selection, insertion Properties: formatters (numeric, phone number, regex, …) Password (e.g. PasswordField) State: string Events: 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 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 2 1 3 5 4 6 25

3/ Customization How do we customize widget behaviour and appearance? Expose properties for user to modify 1. • e.g. change colour , font, orientation, text formatter, … Factor out behaviour (i.e. plug-in behaviour) 2. • Swing’s UIManager for changing look and feel • LayoutManager allows custom layouts Expose class hierarchy that promotes customization 3. • Button extends ButtonBase (base of Button, MenuItem …) • Contains a Button Model to support state information • Contains Controller methods to fireActionPerformed 26

Data Transfer Widgets  GUI architectures require a mechanism to Drag-drop is move data between application windows. expected with direct  Ideally, something that aligns well with direct- manipulation manipulation principles interfaces - e.g. select data, drag-to-move it elsewhere  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

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 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 data in several data formats. javafx.scene.input.DataFormat Data format identifier used as means of identifying the data stored on a clipboard/dragboard. 30

Copying Data to the Clipboard Get a reference to the system clipboard. 1. Create a clipboard content instance to hold the data (it’s a map, 2. with each named method storing a particular representation of data). You should put LOTS of Store the content on the clipboard. 3. different formats on the clipboard. 31