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

▶
widgets
SMART_READER_LITE
LIVE PREVIEW

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

Oct 20, 2023 288 likes •556 views

Widgets Logical devices Widgets & Toolkits Toolkit Design JavaFX Widgets 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

slide-1
SLIDE 1

Widgets

Logical devices Widgets & Toolkits Toolkit Design JavaFX Widgets

1

slide-2
SLIDE 2

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

slide-3
SLIDE 3

Early User Interface Widgets

3

Macintosh System 5, circa 1987

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

slide-4
SLIDE 4

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++)

slide-5
SLIDE 5

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 (“Heavyweight”)

§ Integrated with the operating system

  • e.g. Cocoa with macOS, Windows API with Windows (graphics

integrated with kernel until 2006) High-Level Toolkits (“Lightweight”)

§ 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

slide-6
SLIDE 6

Java FX Widgets

6

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

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

slide-7
SLIDE 7

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
  • f 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).

slide-8
SLIDE 8

Logical Input Devices

8

Logical == describe widgets based on their function (not 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

slide-9
SLIDE 9

Logical Input Devices vs. Widgets

10

Logical input devices describe the underlying functionality (i.e. the type

  • f 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 determine how the widget is presented.

Properties may be general (e.g. position) or specific (e.g. value)

  • Common properties: position (x,y), size (width, height), color
  • Custom properties: specific to a logical device e.g. range for slider
slide-10
SLIDE 10

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: None Event: Pushed Properties: Enabled, Colour, Font Menu widget (e.g. JMenuItem) State: None Event: Pushed Properties: Enabled, Colour, Font

slide-11
SLIDE 11

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

slide-12
SLIDE 12

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

slide-13
SLIDE 13

“Radio Button”

14

slide-14
SLIDE 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: 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

slide-15
SLIDE 15

Container Widgets

§ Panel (e.g. Pane, Form, Toolbar)

  • arrangement of widgets

§ Tab

  • choice between arrangements of

widgets

16

slide-16
SLIDE 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

slide-17
SLIDE 17

Special Value Widgets

§ colour/file/date/time pickers

18

slide-18
SLIDE 18

JavaFX Widget Classes

slide-19
SLIDE 19

Widget Classes

20

MenuBar MenuButton Pagination PasswordField PopupControl ProgressBar ProgressIndicator RadioButton ScrollBar ScrollPane Separator Slider Spinner SplitPane TableView TabPane TextInputControl ToggleButton ToolBar Tooltip TreeTableView TreeView Accordion Button ButtonBar Cell CheckBox Choice ComboBox DatePicker HTMLEditor Hyperlink Label ListView

slide-20
SLIDE 20

Widget Demos

21

slide-21
SLIDE 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

slide-22
SLIDE 22

1/ Completeness

§ All you really need are:

  • Button
  • Slider
  • Pulldown menu
  • Check box
  • Radio button
  • Text field
  • Spinner

23

slide-23
SLIDE 23

Widget Choice

§ Use a common look and feel § Use widgets appropriately

24

slide-24
SLIDE 24

2/ Consistency: Name that Look

25

1 2 3 4 5 6

slide-25
SLIDE 25

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