JavaFX Controls

[vsquared]

The following source code demonstrates several JavaFX controls with event handlers:

# Uses Imported mode for py5
import javafx.stage.Stage

global pane

def toggleBtnAction(event):
  global toggleBtn
  if(toggleBtn.getText() == "Off"):
    toggleBtn.setText("On")
  else:
    toggleBtn.setText("Off")

def dialogBtnAction(self):
  global dialog
  dialog.showAndWait()
  
def sliderBtnAction(self):
  global myCircle
  global slider
  myCircle.setRadius(slider.getValue())
  
def colorPickerAction(self):
  global colorPicker
  global label
  global myCircle
  label.setTextFill(colorPicker.getValue())
  myCircle.setFill(colorPicker.getValue())

def datePickerAction(self):
  global datePicker
  value = datePicker.getValue()
  
def listViewListener(self):
  global listView
  label.setText(str(listView.getSelectionModel().getSelectedItem()))
  
def addControls():
  global toggleBtn
  global dialog
  global myCircle
  global slider
  global colorPicker
  global label
  global datePicker
  global listView
  
# Pane
  pane = javafx.scene.layout.Pane()

# Label
  label = javafx.scene.control.Label("Label")
  font = javafx.scene.text.Font.font("Menlo", javafx.scene.text.FontWeight.BOLD, javafx.scene.text.FontPosture.REGULAR, 15)
  label.setFont(font)
  label.setTextFill(javafx.scene.paint.Color.RED)
  label.setTranslateX(60)
  label.setTranslateY(65)
  pane.getChildren().add(label)

# Toggle Button
  toggleBtn = javafx.scene.control.ToggleButton("Off")
  toggleBtn.setLayoutX(390)
  toggleBtn.setLayoutY(140)
  toggleBtn.isSelected() == False
  toggleBtn.setOnAction(toggleBtnAction)
  pane.getChildren().add(toggleBtn)

# Button with Dialog
  dialog = javafx.scene.control.Dialog()
  dialog.setTitle("Error Dialog")
  btnType = javafx.scene.control.ButtonType("Ok")
  dialog.setContentText("Message goes here.")
  dialog.getDialogPane().getButtonTypes().add(btnType)
  btn = javafx.scene.control.Button("Push Me")
  btn.setLayoutX(80)
  btn.setLayoutY(20)
  btn.setOnAction(dialogBtnAction)
  pane.getChildren().add(btn)

# Circle
  myCircle = javafx.scene.shape.Circle(400, 60, 20)
  myCircle.setFill(javafx.scene.paint.Color.GREEN)
  pane.getChildren().add(myCircle)

# Slider
  slider = javafx.scene.control.Slider(1, 50, 10)
  slider.setLayoutX(190)
  slider.setLayoutY(20)
  tooltip1 = javafx.scene.control.Tooltip("Sets radius")
  slider.setTooltip(tooltip1)
  slider.setOnMouseDragged(sliderBtnAction)
  pane.getChildren().add(slider)

# Spinner
  spinner = javafx.scene.control.Spinner(0, 255, 0)
  spinner.setPrefSize(70, 25)
  spinner.setLayoutX(480)
  spinner.setLayoutY(60)
  pane.getChildren().add(spinner)

# ComboBox
  combo = javafx.scene.control.ComboBox()
  combo.setPromptText("Select One")
  myList = combo.getItems()
  myList.add("Java")
  myList.add("C++")
  myList.add("Python")
  myList.add("Processing")
  combo.setLayoutX(560)
  combo.setLayoutY(70)
  pane.getChildren().add(combo)

# ListView
  items = javafx.collections.FXCollections.observableArrayList("Item 1", "Item 2", "Item 3")
  listView = javafx.scene.control.ListView(items)
  listView.setMaxSize(120, 80)
  listView.setLayoutX(60)
  listView.setLayoutY(90)
  listView.getSelectionModel().selectedItemProperty().addListener(listViewListener)
  pane.getChildren().add(listView)

# TabPane
  tabPane = javafx.scene.control.TabPane()
  tabPane.setLayoutX(30)
  tabPane.setLayoutY(190)
  tab1 = javafx.scene.control.Tab("Tab 1")
  tab2 = javafx.scene.control.Tab("Tab 2")
  tab3 = javafx.scene.control.Tab("Tab 3")
  tab1.setContent(javafx.scene.shape.Rectangle(200, 100, javafx.scene.paint.Color.BLUE))
  tab2.setContent(javafx.scene.shape.Rectangle(200, 100, javafx.scene.paint.Color.RED))
  tab3.setContent(javafx.scene.shape.Rectangle(200, 100, javafx.scene.paint.Color.GREEN))
  tabPane.getTabs().addAll(tab1, tab2, tab3)
  pane.getChildren().add(tabPane)
  
# TextArea
  txtArea = javafx.scene.control.TextArea()
  txtArea.setLayoutX(250)
  txtArea.setLayoutY(190)
  txtArea.setMaxSize(180, 130)
  pane.getChildren().add(txtArea)

# RadioButton Group
  radioPane = javafx.scene.layout.TilePane(15, 15)
  group = javafx.scene.control.ToggleGroup()
  radio1 = javafx.scene.control.RadioButton("A")
  radio1.setToggleGroup(group)
  radio1.setSelected(True)
  radio2 = javafx.scene.control.RadioButton("B")
  radio2.setToggleGroup(group)
  radio3 = javafx.scene.control.RadioButton("C")
  radio3.setToggleGroup(group)
  radioPane.getChildren().addAll(radio1, radio2, radio3)
  radioPane.setLayoutX(200)
  radioPane.setLayoutY(120)
  pane.getChildren().add(radioPane)

# CheckBox
  cBox = javafx.scene.control.CheckBox("Checkbox")
  cBox.setIndeterminate(False)
  cBox.setLayoutX(200)
  cBox.setLayoutY(90)
  pane.getChildren().add(cBox)

# TextField
  txtFld = javafx.scene.control.TextField()
  txtFld.setLayoutX(200)
  txtFld.setLayoutY(150)
  pane.getChildren().add(txtFld)

# MenuBar 
  menu = javafx.scene.control.Menu("File")
  menuItem1 = javafx.scene.control.MenuItem("Open")
  menuItem2 = javafx.scene.control.MenuItem("Save")
  menu.getItems().addAll(menuItem1, menuItem2)
  menuBar = javafx.scene.control.MenuBar()
  menuBar.getMenus().add(menu)
  pane.getChildren().add(menuBar)

# ToolBar 
  toolBar = javafx.scene.control.ToolBar()
  openBtn = javafx.scene.control.Button("Build")
  saveBtn = javafx.scene.control.Button("Run")
  toolBar.getItems().addAll(openBtn, saveBtn)
  toolBar.setLayoutX(450)
  tbarTip = javafx.scene.control.Tooltip("ToolBar")
  toolBar.setTooltip(tbarTip)
  pane.getChildren().add(toolBar)

# ProgressBar
  pBar = javafx.scene.control.ProgressBar()
  pBar.setLayoutX(560)
  pBar.setLayoutY(20)
  pane.getChildren().add(pBar)

# TreeView 
  rootItem = javafx.scene.control.TreeItem("Pets")
  dogItem = javafx.scene.control.TreeItem("Dogs")
  dogItem.getChildren().add(javafx.scene.control.TreeItem("Poodle"))
  dogItem.getChildren().add(javafx.scene.control.TreeItem("Collie"))
  dogItem.getChildren().add(javafx.scene.control.TreeItem("Bulldog"))
  rootItem.getChildren().add(dogItem)

  catItem = javafx.scene.control.TreeItem("Cats")
  catItem.getChildren().add(javafx.scene.control.TreeItem("Siamese"))
  catItem.getChildren().add(javafx.scene.control.TreeItem("Ragdoll"))
  catItem.getChildren().add(javafx.scene.control.TreeItem("Persian"))
  rootItem.getChildren().add(catItem)

  treeView = javafx.scene.control.TreeView()
  treeView.setRoot(rootItem)
  treeView.setLayoutX(460)
  treeView.setLayoutY(110)
  treeView.setMaxSize(140, 230)
  treeView.setShowRoot(True)
  pane.getChildren().add(treeView)

# ColorPicker
  colorPicker = javafx.scene.control.ColorPicker()
  colorPicker.setLayoutX(200)
  colorPicker.setLayoutY(50)
  colorPicker.setValue(javafx.scene.paint.Color.GREEN)
  colorPicker.setOnAction(colorPickerAction) 
  pane.getChildren().add(colorPicker)

# DatePicker
  datePicker = javafx.scene.control.DatePicker()
  datePicker.setLayoutX(30)
  datePicker.setLayoutY(350)
  datePicker.setOnAction(datePickerAction) 
  pane.getChildren().add(datePicker)

# Line Chart
  xAxis = javafx.scene.chart.NumberAxis()
  xAxis.setLabel("No. of months")
  yAxis = javafx.scene.chart.NumberAxis()
  yAxis.setLabel("Dollars Per Dozen")
  lineChart = javafx.scene.chart.LineChart(xAxis, yAxis)
  dataSeries1 = javafx.scene.chart.XYChart.Series()
  dataSeries1.setName("2024")
  dataSeries1.getData().add(javafx.scene.chart.XYChart.Data( 1, 2))
  dataSeries1.getData().add(javafx.scene.chart.XYChart.Data( 2, 3))
  dataSeries1.getData().add(javafx.scene.chart.XYChart.Data(3, 4))
  dataSeries1.getData().add(javafx.scene.chart.XYChart.Data(4, 5))
  dataSeries1.getData().add(javafx.scene.chart.XYChart.Data(5, 6))
  dataSeries1.getData().add(javafx.scene.chart.XYChart.Data(6, 6))
  lineChart.getData().add(dataSeries1)
  lineChart.setTitle("Price of Eggs")
  lineChart.setLayoutX(280)
  lineChart.setLayoutY(350)
  lineChart.setMaxSize(320, 240)
  pane.getChildren().add(lineChart)
  
  return pane

def settings():
  size(1, 1, FX2D)
  
def setup():  
  stage = javafx.stage.Stage()
  stage.setTitle("JavaFX Controls")
  pane = addControls()
  scene = javafx.scene.Scene(pane, 700, 600)
  stage.setScene(scene)
  stage.show()

Output:

[villares]

@vsquared I find this fascinating and I understand 10% of it at most!

Could you wrap this onto something beginners could use alongside a "normal" py5 sketch drawing canvas?

My naive ideas would be some functions one could call to build a window with controls one could use alongside the "main" sketch window. Or, even with the main sketch inside the JavaFX window, could you make some wrapper functions/objects to reduce the boilerplate and need to know so much advanced stuff?

Thinking how easy it was back in the day to use ControlP5 on Processing Java...

[hx2A]

I find this fascinating and I understand 10% of it at most!

Same here! Ironically I know little about gui programming.

Thinking how easy it was back in the day to use ControlP5 on Processing Java...

I love ControlP5 and if there was a way to get it to work with py5, I'd be thrilled.

[vsquared]

I love ControlP5 and if there was a way to get it to work with py5, I'd be thrilled.
Here you go; stick controlP5.jar in your jars folder and have at it.

# Uses Imported mode for py5
from controlP5 import *

def settings():
    size(400,400)
    
def setup():
    println(ControlP5)

[vsquared]

could you make some wrapper functions/objects to reduce the boilerplate
You mean something like this; the user would still have to edit the event handler to get the button to do what they wanted it to do. How old are your students?

import javafx.stage.Stage

def myBtnAction(event):
  print("btn hit.")
  
def button(title,x,y,w,h):
  global pane
  btn = javafx.scene.control.Button(title)
  btn.setLayoutX(x)
  btn.setLayoutY(y)
  btn.setPrefSize(w,h)
  btn.setOnAction(myBtnAction)
  pane.getChildren().add(btn)

def settings():
  size(1,1,FX2D)

def setup():
  global pane
  stage = javafx.stage.Stage()
  stage.setTitle("JavaFX Controls")
  pane = javafx.scene.layout.Pane()
  button("btn",60,60,60,30)
  scene = javafx.scene.Scene(pane, 200, 200)
  stage.setScene(scene)
  stage.show()