3-1 Widgets

Wigets & Toolkits

User Interface Widget

An interface that have their own behavior - buttons, drop-downs, spinners, etc.

Also called components, controls, UI elements, etc.

Widget Toolkits are also called widget libraries / GUI toolkits / GUI APIs

What do they do?

1. Handle user input
2. Generate events
   • message that can be sent to other part of the app
3. Provide feedback
4. Maintain state

---

Logical Input Device

logical device describes functionality of the device rather than its appearance. So if same feature has been implemented using both drop-down and buttons, it would be considered to be same input device.

Widgets are implementations of logical input device. So even if they two widgets are functionally the same, if they look different, they are different widgets.

Logical devices

• buttons
• numarical input device
• radio buttons
• ...

---

Properties

Visual or behavioural characteristics of widgets such as width, position, visibility, interactivity, listeners, etc.

It can be binded to one another so that one changes, another property changes accordingly.

Property binding is unidirectional - So if one changes the ather gets effected, but not visa versa
But JavaFX supports bindBidirectional.

label1.textProperty().bind(text1.textProperty());
text1.textProperty() .bindBidirectional(text2.textProperty());

---

Data Transfer

clipboard transfer

We want copy-paste data between application but keep each application unknown from one another. So there is a cliboard that has special permission from OS to allow access across applications to mediate data transfer.

There are number of data formates that the clipboard supports, and it is the sender and receivers job to copy and paste data approperiate for their application.

drag and drop

use listener mechanism.
it goes validation process for data formates from both dragged side and dropped side. And if the formate is valid from both sides, it transfers the data.

Any node in JavaFX can handle drag and drop
There are 3 steps

// 1. drag detected
source.onDragDetected = EventHandler { event ->
  // allow any transfer mode (i.e. COPY or MOVE)
  val db = source.startDragAndDrop(*TransferMode.ANY)
  
  // put a string on dragboard */
  val content = ClipboardContent()
  content.putString(source.text)
  db.setContent(content)
  event.consume()
}

// 2. drag over - from target object
target.onDragOver = EventHandler { event ->
  // accept it only if it is not dragged from the same node
  // and if it has a string data
  if (event.gestureSource !== target && event.dragboard.hasString()) {
  /* allow for both copying and moving, whatever user chooses */
    event.acceptTransferModes(*TransferMode.COPY_OR_MOVE)
  }
  event.consume()
}

// 3. drag dropped - from target object
target.onDragDropped = EventHandler { event ->
  // if there is a string data on dragboard, read it and use it
  val db = event.dragboard
  var success = false
  if (db.hasString()) {
    target.text = db.string
    success = true
  }
  // let the source know if successful
  event.isDropCompleted = success
  event.consume()
}

---

Widget Toolkit Design Goal

what widgets features are desirable?
1. completeness - does it provide everything they need to build app
2. consistency - does it behaves consistent across components
3. Customizability - can you reasonably extend functionality to meet particular needs