2-2 JavaFX

GUI Toolkits

OS includes basic IO and window management supports.
But we often want higher level of abstraction - or more capablilities - than what OS is providing us with.

Programming language does not provide this higher level of abstraction :/

Toolkit is set of classes/components for building applications provided by multiple sources.

Low-level toolkits:

• its closely coupled to the underlying operating system.
• ex) win32, Xlib, AWT, etc.
• we don't use them too much anymore

High-level toolkits:

• sits above the operating system.
• often provided by a third-party, not OS vender
• ex) Qt, Gtk+, wxWidgets, Swing, JavaFX, etc.

What does it give us?

• Output
  • Drawing graphics
  • animation
  • video, sound playback
• Input
  • standard input - keyboard, mouse
  • camera, sensors, etc.

Also they often provide widgets that can be reused in any application

How do you use it?

Imperative Style

• code is used to manually construct the view
• instantiate classes and set fields/properties
• virtually every programming environment offers something like this
• tedious to build a complex UI
• requires programming knowledge to modify UI

Declarative Style

• uses tool to build the UI
• XML, JSON is used to represent UI

---

Kotlin GUI Toolkits

• JavaFX
  • opensource project
• TornadoFX
  • Kotlin wrapper around JavaFX, but its not as well maintained as JavaFX
• Jetpack Compose
  • supported by google

Add JavaFX to a Project by modifying build.config file

---

JavaFx imposes a workflow

import javafx.application.Application
import javafx.stage.Stage

class Stages: Application(){
  override fun init(){              // [1]: init() - optional
    super.init();
    println("init")
  }
  override fun start(stage: Stage){ // [2]: required
    println("start")
  }
  override fun stop(){              // [3]: stop() - optional
    super.stop()
    pprintln("stop")
  }
}

Hello JavaFX!

import javafx.application.Application
import javafx.scene.Scene
import javafx.scene.control.Label
import javafx.scene.layout.StackPane
import javafx.stage.Stage

class HelloFX : Application() {

  override fun start(stage: Stage) {
    // create a text label and add it to the scene
    val label = Label("Hello JavaFX")
    val scene = Scene(StackPane(label), 320.0, 240.0)
    
    // setup and show the stage (window)
    stage.title = "HelloFX"
    stage.scene = scene
    stage.show()
  }
}

objects on the screan is represented as a hierarchy of screan elements.

---

Stages and Scenes

• Stage is a main window
• Scene is a scene-graph that is being displayed
  • every scene is a Node

Stage

java.lang.Object - javafx.stage.Window - javafx.stage.Stage

• Automatically created by the platform
• its the top-level container, representing application window

Scene

java.lang.Object - javafx.scene.Scene

• Container for the content.
• Must specify the root Note for the scene graph

Nodes

java.lang.Object - javafx.scene.Node

• Actual things that are displayed
• Widgets are one of them
• Root Nodes
  • layouts and containers to clip scene's width and heights
• Leaf Nodes
  • shapes, control interface, etc.