	ブログをはじめるログイン

JavaFXの非同期処理　 [JavaFX]

前置き

前回メモした通り、Progress系のコントロールで進捗状況を逐次確認したい時は、非同期で進捗度合いを更新する必要がある。
JavaFXでは非同期処理用に、javafx.concurrent.Taskクラスが用意されている。 Taskクラスのcallメソッドに、時間が掛かる処理を実装しておき、別スレッドでそのTaskを呼び出す流れ。

Taskクラスには、updateProgressメソッドが用意されており、簡単に進捗度を更新できるようになっている。
これにより、Progressコントロールに非同期処理を実装したTaskクラスをバインドすることで、進捗度合いをリアルタイムでモニタできるようになっている。
Taskクラスは他にも、cancelledメソッドやsucceededメソッドなど、非同期処理を制御するためのメソッドが用意されている。
SwingのSwingWorkerと使い方はほとんど同じだが、処理状況、進捗度合い、処理結果などを保持できるあたりが優秀。

画面設計

初期表示

全てのバーとインジケータを初期化

実行中(Start・Restartボタン)

第1インジケータを不確定モードにする
第2バーを不確定モードにする
非同期処理を開始 or 再開する
他のバーとインジケータで進捗度をモニタする
Start・Restartボタンを非活性にする

停止状態(Stopボタン)

非同期処理を中断する
全てのバーとインジケータに停止時の進捗度を表示する
実行中はStartボタンのテキストをRestartに変更する
Restartボタンを活性化する

完了

全てのバーとインジケータの状態を完了にする
RestartボタンのテキストをStartに変更する

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
      <center>
         <VBox BorderPane.alignment="CENTER">
            <children>
                  <FlowPane hgap="20.0">
                     <children>
                        <ProgressBar fx:id="bar1st" prefWidth="200.0" progress="0.0" />
                        <ProgressIndicator fx:id="ind1st" progress="0.0" />
                     </children>
                     <VBox.margin>
                        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                     </VBox.margin>
                  </FlowPane>
                  <FlowPane hgap="20.0">
                     <children>
                        <ProgressBar fx:id="bar2nd" prefWidth="200.0" progress="0.0" />
                        <ProgressIndicator fx:id="ind2nd" progress="0.0" />
                     </children>
                     <VBox.margin>
                        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                     </VBox.margin>
                  </FlowPane>
                  <FlowPane hgap="20.0">
                     <children>
                        <ProgressBar fx:id="bar3rd" prefWidth="200.0" progress="0.0" />
                        <ProgressIndicator fx:id="ind3rd" progress="0.0" />
                     </children>
                     <VBox.margin>
                        <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                     </VBox.margin>
                  </FlowPane>
            </children>
         </VBox>
      </center>
      <top>
         <FlowPane hgap="20.0" prefWidth="200.0" BorderPane.alignment="CENTER">
            <children>
                  <Button fx:id="btnReset" mnemonicParsing="false" text="Stop">
                     <font>
                        <Font size="30.0" />
                     </font>
                  </Button>
                  <Button fx:id="btnStart" mnemonicParsing="false" onAction="#onStart" text="Start">
                     <font>
                        <Font size="30.0" />
                     </font>
                  </Button>
            </children>
            <BorderPane.margin>
                  <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
            </BorderPane.margin>
         </FlowPane>
      </top>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.concurrent.Task
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.control.Button
import javafx.scene.control.ProgressBar
import javafx.scene.control.ProgressIndicator
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*
import java.util.concurrent.Executors


class FXDemo : Application(), Initializable {

      var prop: Double = 0.0

      @FXML
      lateinit var btnReset: Button

      @FXML
      lateinit var btnStart: Button

      @FXML
      lateinit var bar1st: ProgressBar

      @FXML
      lateinit var bar2nd: ProgressBar

      @FXML
      lateinit var bar3rd: ProgressBar

      @FXML
      lateinit var ind1st: ProgressIndicator

      @FXML
      lateinit var ind2nd: ProgressIndicator

      @FXML
      lateinit var ind3rd: ProgressIndicator

      override fun start(stage: Stage) {
         stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
         stage.title = "FXDemo"
         stage.show()
      }

      override fun initialize(location: URL?, resources: ResourceBundle?) {
      }

      @FXML
      private fun onStart() {
         btnStart.disableProperty().value = true

         val task = object : Task<Void?>() {

            val max = 100_000_000L

            init {
                  updateProgress(0, max)
            }

            override fun call(): Void? {
                  val begin = max.toDouble() * prop

                  for (i in begin.toInt()..max) {
                     if (isCancelled) break
                     updateProgress(i, max)
                  }
                  return null
            }

            override fun cancelled() {
                  super.cancelled()
                  prop = progress
                  bar1st.progressProperty().unbind()
                  bar2nd.progress = progress
                  bar3rd.progressProperty().unbind()
                  ind1st.progress = progress
                  ind2nd.progressProperty().unbind()
                  ind3rd.progressProperty().unbind()
                  btnStart.disableProperty().value = false
                  btnStart.text = "Restart"
            }

            override fun succeeded() {
                  super.succeeded()
                  bar2nd.progress = progress
                  ind1st.progress = progress
                  btnStart.text = "Start"
            }

            override fun done() {
                  super.done()
                  prop = 0.0
                  btnStart.disableProperty().value = false
            }
         }
         bar1st.progressProperty().bind(task.progressProperty())
         bar2nd.progress = -0.75
         bar3rd.progressProperty().bind(task.progressProperty())
         ind1st.progress = -0.1
         ind2nd.progressProperty().bind(task.progressProperty())
         ind3rd.progressProperty().bind(task.progressProperty())
         Executors.newSingleThreadExecutor().submit(task)
         btnReset.setOnAction { task.cancel() }
      }

      companion object {

         @JvmStatic
         fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
         }
      }
}

実行結果

初期表示

実行中

停止状態

完了

2020-09-26 00:00 nice!(0) コメント(0)

ProgressBar・ProgressIndicator　[JavaFX]

前置き

進捗状況を可視化するためのコントロール。
progressに負の値を設定すると、不確定モードとなる。
progressは1.0を完了状態とし、0.5を50%の状態として表示する。

因みに、何も考えずに使用すると、処理の終了時にゲージが一気に完了状態に切り替わったように表示される。
処理の進捗にあわせてゲージも徐々に上がっていくように見せるには、非同期処理で更新しないとダメ。
非同期処理についてのメモは次回に残す予定。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ProgressBar?>
<?import javafx.scene.control.ProgressIndicator?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
   <center>
      <VBox BorderPane.alignment="CENTER">
         <children>
            <FlowPane hgap="20.0">
               <children>
                  <ProgressBar fx:id="bar1st" prefWidth="200.0" progress="0.0" />
                  <ProgressIndicator fx:id="ind1st" progress="0.0" />
               </children>
               <VBox.margin>
                  <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
               </VBox.margin>
            </FlowPane>
            <FlowPane hgap="20.0">
               <children>
                  <ProgressBar fx:id="bar2nd" prefWidth="200.0" progress="0.0" />
                  <ProgressIndicator fx:id="ind2nd" progress="0.0" />
               </children>
               <VBox.margin>
                  <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
               </VBox.margin>
            </FlowPane>
            <FlowPane hgap="20.0">
               <children>
                  <ProgressBar fx:id="bar3rd" prefWidth="200.0" progress="0.0" />
                  <ProgressIndicator fx:id="ind3rd" progress="0.0" />
               </children>
               <VBox.margin>
                  <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
               </VBox.margin>
            </FlowPane>
         </children>
      </VBox>
   </center>
   <top>
      <FlowPane hgap="20.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <Button mnemonicParsing="false" onAction="#onReset" text="Reset">
               <font>
                  <Font size="30.0" />
               </font>
            </Button>
            <Button mnemonicParsing="false" onAction="#onStart" text="Start">
               <font>
                  <Font size="30.0" />
               </font>
            </Button>
         </children>
         <BorderPane.margin>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
         </BorderPane.margin>
      </FlowPane>
   </top>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.control.ProgressBar
import javafx.scene.control.ProgressIndicator
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var bar1st: ProgressBar

    @FXML
    lateinit var bar2nd: ProgressBar

    @FXML
    lateinit var bar3rd: ProgressBar

    @FXML
    lateinit var ind1st: ProgressIndicator

    @FXML
    lateinit var ind2nd: ProgressIndicator

    @FXML
    lateinit var ind3rd: ProgressIndicator

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
    }

    @FXML
    private fun onReset() {
        bar1st.progress = 0.0
        bar2nd.progress = 0.0
        bar3rd.progress = 0.0
        ind1st.progress = 0.0
        ind2nd.progress = 0.0
        ind3rd.progress = 0.0
    }

    @FXML
    private fun onStart() {
        bar1st.progress = -0.33
        bar2nd.progress = 0.75
        bar3rd.progress = 1.0
        ind1st.progress = -0.1
        ind2nd.progress = 0.75
        ind3rd.progress = 1.0
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}

実行結果

2020-09-25 00:00 nice!(0) コメント(0)

バブルチャートを使う　 [JavaFX]

前置き

JavaFXでバブルチャート表示させる。
前回の散布図と使い方はほとんど一緒。ただし、データの強弱を表現できる。

ポイントは、X軸に NumberAxis を指定する必要があること。
データの第3引数に半径を指定すると、データの強弱を表現できるようになる。
半径を指定しなかった場合には、散布図とほぼ同じ使い方になる。
今回は、半径を5段階でランダムに指定している。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.BubbleChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <center>
        <BubbleChart fx:id="chtExample" BorderPane.alignment="CENTER">
        <xAxis>
            <NumberAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
            <NumberAxis side="LEFT" />
        </yAxis>
        </BubbleChart>
    </center>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.collections.FXCollections.observableArrayList
import javafx.collections.ObservableList
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.chart.BubbleChart
import javafx.scene.chart.NumberAxis
import javafx.scene.chart.XYChart
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var chtExample: BubbleChart<Number, Number>

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
        chtExample.title = "Bubble Chart Sample"
        chtExample.data.addAll(dataFactory(3, 100))
        chtExample.xAxis.label = "週目"
        val y: NumberAxis = chtExample.yAxis as NumberAxis
        y.label = "売上"
        y.isAutoRanging = false
        y.lowerBound = 50.0
        y.upperBound = 105.0
    }

    private fun dataFactory(create: Int, days: Int): ObservableList<XYChart.Series<Number, Number>> {
        val list = observableArrayList<XYChart.Series<Number, Number>>()

        for (i in 0 until create) {
            val series = XYChart.Series<Number, Number>()
            series.name = String.format("会社%d", i + 1)

            for (j in 0 until days) {
                val buf = Random().nextDouble() * 100
                if (55 < buf) series.data.add(XYChart.Data(j + 1, buf, Random().nextInt(5)))
            }
            list.add(series)
        }
        return list
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}

実行結果

データに半径を指定しなかった場合

データに半径を指定した場合

2020-09-18 00:00 nice!(0) コメント(0)

散布図を使う　 [JavaFX]

前置き

JavaFXで散布図を表示させる。
ある集団に於けるデータの分布を視覚化するのに適したグラフ。

季節とアイスの売上の相関
学年と身長の相関
地域と降水確率の相関
etc...

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.chart.ScatterChart?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <center>
        <ScatterChart fx:id="chtExample" BorderPane.alignment="CENTER">
        <xAxis>
            <CategoryAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
            <NumberAxis side="LEFT" />
        </yAxis>
        </ScatterChart>
    </center>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.collections.FXCollections.observableArrayList
import javafx.collections.ObservableList
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.chart.NumberAxis
import javafx.scene.chart.ScatterChart
import javafx.scene.chart.XYChart
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.text.SimpleDateFormat
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var chtExample: ScatterChart<String, Number>

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
        chtExample.title = "Scatter Chart Sample"
        chtExample.data.addAll(dataFactory(3, 100))
        chtExample.xAxis.label = "期間"
        val y: NumberAxis = chtExample.yAxis as NumberAxis
        y.label = "売上"
        y.isAutoRanging = false
        y.lowerBound = 50.0
        y.upperBound = 105.0
    }

    private fun dataFactory(create: Int, days: Int): ObservableList<XYChart.Series<String, Number>> {
        val list = observableArrayList<XYChart.Series<String, Number>>()
        val fmt = SimpleDateFormat("MM-dd")

        for (i in 0 until create) {
            val cal = Calendar.getInstance()
            val series = XYChart.Series<String, Number>()
            series.name = String.format("会社%d", i + 1)
            println(series.name)

            for (j in 0 until days) {
                cal.add(Calendar.DAY_OF_MONTH, j)
                val buf = Random().nextDouble() * 100
                if (55 < buf) series.data.add(XYChart.Data(fmt.format(cal.time), buf))
            }
            list.add(series)
        }
        return list
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}

実行結果

2020-09-17 00:00 nice!(0) コメント(0)

円グラフを使う　 [JavaFX]

前置き

JavaFXで円グラフを表示させる。
ある集団に於ける構成比を表わすのに適したグラフ。

他のグラフと比較すると、直感的に扱えるシンプルな作りになっている。
今回は、凡例の位置を左側に変更したり、プロット開始位置を変更したりしている。
プロット開始位置のデフォルトは3時の位置から始まり、変更する場合は startAngle で角度を指定する。90を指定した場合は反時計回りに90度回転する。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.PieChart?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <center>
        <PieChart fx:id="chtExample" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.geometry.Side
import javafx.scene.Scene
import javafx.scene.chart.PieChart
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var chtExample: PieChart

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
        chtExample.title = "Pie Chart Sample"
        chtExample.data.add(PieChart.Data("C/C++", 136.0))
        chtExample.data.add(PieChart.Data("Python", 127.0))
        chtExample.data.add(PieChart.Data("JavaScript", 110.0))
        chtExample.data.add(PieChart.Data("SQL", 106.0))
        chtExample.data.add(PieChart.Data("C#", 96.0))
        chtExample.data.add(PieChart.Data("Java", 94.0))
        chtExample.data.add(PieChart.Data("VBA", 91.0))
        chtExample.data.add(PieChart.Data("etc", 356.0))
        chtExample.legendSide = Side.LEFT // 凡例を左側に
        chtExample.startAngle = 90.0      // プロット開始位置を変更
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}

実行結果

2020-09-16 00:00 nice!(0) コメント(0)

折れ線グラフを使う　 [JavaFX]

前置き

JavaFXで折れ線グラフを表示させる。
時系列でデータの推移を観測する時などに適したグラフ。

今回のポイントは、折れ線グラフのY軸を NumberAxis クラスで取得し、プロット範囲を指定している所。この時 isAutoRanging をfalseに設定し、プロット範囲の自動設定をOFFにしておかないと、手動設定の指定が有効にならないことに注意。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <center>
        <LineChart fx:id="chtExample" BorderPane.alignment="CENTER">
        <xAxis>
            <CategoryAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
            <NumberAxis side="LEFT" />
        </yAxis>
        </LineChart>
    </center>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.chart.BarChart
import javafx.scene.chart.LineChart
import javafx.scene.chart.NumberAxis
import javafx.scene.chart.XYChart
import javafx.scene.chart.XYChart.Series
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var chtExample: LineChart<String, Number>

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
        val student1 = Series<String, Number>()
        student1.name = "生徒A"
        student1.data.add(XYChart.Data("４月", 67))
        student1.data.add(XYChart.Data("５月", 69))
        student1.data.add(XYChart.Data("６月", 62))
        student1.data.add(XYChart.Data("７月", 67))
        student1.data.add(XYChart.Data("８月", 69))
        student1.data.add(XYChart.Data("９月", 65))
        student1.data.add(XYChart.Data("１０月", 65))
        student1.data.add(XYChart.Data("１１月", 69))
        student1.data.add(XYChart.Data("１２月", 72))
        student1.data.add(XYChart.Data("１月", 68))
        student1.data.add(XYChart.Data("２月", 72))
        student1.data.add(XYChart.Data("３月", 72))

        val student2 = Series<String, Number>()
        student2.name = "生徒B"
        student2.data.add(XYChart.Data("４月", 61))
        student2.data.add(XYChart.Data("５月", 61))
        student2.data.add(XYChart.Data("６月", 59))
        student2.data.add(XYChart.Data("７月", 62))
        student2.data.add(XYChart.Data("８月", 61))
        student2.data.add(XYChart.Data("９月", 61))
        student2.data.add(XYChart.Data("１０月", 64))
        student2.data.add(XYChart.Data("１１月", 65))
        student2.data.add(XYChart.Data("１２月", 64))
        student2.data.add(XYChart.Data("１月", 67))
        student2.data.add(XYChart.Data("２月", 67))
        student2.data.add(XYChart.Data("３月", 66))

        val student3 = Series<String, Number>()
        student3.name = "生徒C"
        student3.data.add(XYChart.Data("４月", 62))
        student3.data.add(XYChart.Data("５月", 57))
        student3.data.add(XYChart.Data("６月", 57))
        student3.data.add(XYChart.Data("７月", 60))
        student3.data.add(XYChart.Data("８月", 65))
        student3.data.add(XYChart.Data("９月", 60))
        student3.data.add(XYChart.Data("１０月", 63))
        student3.data.add(XYChart.Data("１１月", 65))
        student3.data.add(XYChart.Data("１２月", 62))
        student3.data.add(XYChart.Data("１月", 67))
        student3.data.add(XYChart.Data("２月", 65))
        student3.data.add(XYChart.Data("３月", 65))

        val student4 = Series<String, Number>()
        student4.name = "生徒D"
        student4.data.add(XYChart.Data("４月", 59))
        student4.data.add(XYChart.Data("５月", 58))
        student4.data.add(XYChart.Data("６月", 60))
        student4.data.add(XYChart.Data("７月", 61))
        student4.data.add(XYChart.Data("８月", 65))
        student4.data.add(XYChart.Data("９月", 65))
        student4.data.add(XYChart.Data("１０月", 62))
        student4.data.add(XYChart.Data("１１月", 61))
        student4.data.add(XYChart.Data("１２月", 65))
        student4.data.add(XYChart.Data("１月", 65))
        student4.data.add(XYChart.Data("２月", 67))
        student4.data.add(XYChart.Data("３月", 65))

        chtExample.title = "Line Chart Sample"
        chtExample.xAxis.label = "月"
        val y: NumberAxis = chtExample.yAxis as NumberAxis
        y.label = "偏差値"
        y.isAutoRanging = false // 自動範囲設定をOFFにする
        y.upperBound = 75.0     // Y軸の最大範囲を75に設定
        y.lowerBound = 55.0     // Y軸の最小範囲を55に設定
        chtExample.data.addAll(student1, student2, student3, student4)
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}

実行結果

2020-09-15 00:00 nice!(0) コメント(0)

棒グラフを使う　 [JavaFX]

前置き

JavaFXで棒グラフを表示させる。
X軸とY軸を反転させると横棒グラフを表示させることも可能。(未確認)
あと、積上げ棒グラフも表現できる(当然、未確認)ので、用途に合わせて選択できる。

スキルの幅を少し拡張したかったので、今回からKotlinで実装している。
Kotlinの文法等は、他の入門サイト等で十分補完可能なので割愛。
JavaからKotlinに移行するにあたり、ハマった箇所をメモしておく。

@FXMLで読み込むコントロールは lateinit var で宣言しておく
initializeメソッドの引数はnull考慮にしておく
launchメソッドの引数に自クラスを指定しておく

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <center>
        <BarChart fx:id="chtExample" BorderPane.alignment="CENTER">
        <xAxis>
            <CategoryAxis side="BOTTOM" />
        </xAxis>
        <yAxis>
            <NumberAxis side="LEFT" />
        </yAxis>
        </BarChart>
    </center>
</BorderPane>

FXDemo.kt

package jp.ne.yonem

import javafx.application.Application
import javafx.fxml.FXML
import javafx.fxml.FXMLLoader
import javafx.fxml.Initializable
import javafx.scene.Scene
import javafx.scene.chart.BarChart
import javafx.scene.chart.XYChart
import javafx.scene.chart.XYChart.Series
import javafx.scene.layout.BorderPane
import javafx.stage.Stage
import java.net.URL
import java.util.*

class FXDemo : Application(), Initializable {

    @FXML
    lateinit var chtExample: BarChart<String, Number>

    override fun start(stage: Stage) {
        stage.scene = Scene(FXMLLoader.load<BorderPane>(javaClass.getResource("FXDemo.fxml")))
        stage.title = "FXDemo"
        stage.show()
    }

    override fun initialize(location: URL?, resources: ResourceBundle?) {
        val student1 = Series<String, Number>()
        student1.name = "生徒A"
        student1.data.add(XYChart.Data("国語", 79))
        student1.data.add(XYChart.Data("数学", 71))
        student1.data.add(XYChart.Data("理科", 68))
        student1.data.add(XYChart.Data("英語", 40))

        val student2 = Series<String, Number>()
        student2.name = "生徒B"
        student2.data.add(XYChart.Data("国語", 49))
        student2.data.add(XYChart.Data("数学", 35))
        student2.data.add(XYChart.Data("理科", 80))
        student2.data.add(XYChart.Data("英語", 43))

        val student3 = Series<String, Number>()
        student3.name = "生徒C"
        student3.data.add(XYChart.Data("国語", 43))
        student3.data.add(XYChart.Data("数学", 61))
        student3.data.add(XYChart.Data("理科", 59))
        student3.data.add(XYChart.Data("英語", 80))

        val student4 = Series<String, Number>()
        student4.name = "生徒D"
        student4.data.add(XYChart.Data("国語", 80))
        student4.data.add(XYChart.Data("数学", 60))
        student4.data.add(XYChart.Data("理科", 77))
        student4.data.add(XYChart.Data("英語", 71))

        chtExample.title = "Bar Chart Sample"
        chtExample.xAxis.label = "教科"
        chtExample.yAxis.label = "得点"
        chtExample.data.addAll(student1, student2, student3, student4)
        chtExample.categoryGap = 80.0 // カテゴリ同士の間隔を設定
        chtExample.barGap = 10.0      // バー同士の間隔を設定
    }

    companion object {

        @JvmStatic
        fun main(args: Array<String>) {
            launch(FXDemo::class.java, *args)
        }
    }
}

実行結果

2020-09-14 00:00 nice!(0) コメント(0)

JavaFXでダイアログ表示　 [JavaFX]

前置き

バージョン:JavaFX 8u40 から導入されたコントロール。
それまではダイアログは自炊するか、SwingのJOptionPaneで各種ダイアログを呼び出すしかなかった。
いやいや。。。GUIアプリケーションなのに、こんな高頻度で使用するコントロールを初期装備してないなんて有り得ないから(;^ω^)
タイトル、ヘッダテキスト、コンテントテキスト、ボタン等々の細かい設定ができるのはSwingと同じ。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.control.ChoiceBox?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="20.0" BorderPane.alignment="CENTER">
            <children>
            <ChoiceBox fx:id="chcType" prefWidth="150.0" />
            <Button fx:id="btnSelect" mnemonicParsing="false" onAction="#onDialog" text="ダイアログ表示" />
            <CheckBox fx:id="chkSwing" mnemonicParsing="false" text="Swing" />
            </children>
            <padding>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
            </padding>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import javax.swing.*;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    ChoiceBox<Alert.AlertType> chcType;

    @FXML
    CheckBox chkSwing;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        ObservableList<Alert.AlertType> types = FXCollections.observableArrayList();
        types.add(Alert.AlertType.INFORMATION);
        types.add(Alert.AlertType.WARNING);
        types.add(Alert.AlertType.ERROR);
        types.add(Alert.AlertType.CONFIRMATION);
        chcType.getItems().addAll(types);
        chcType.getSelectionModel().select(0);
    }

    @FXML
    private void onDialog() {

        if (chkSwing.isSelected()) {
            JOptionPane.showMessageDialog(null, "Swing のダイアログだよ");
            taOutput.appendText("Swing のダイアログを選択しました\n");

        } else {
            Alert alert = new Alert(chcType.getValue());
            alert.setHeaderText("JavaFX のダイアログだよ");
            taOutput.appendText(String.format(
                    "%s ダイアログを表示し、%s を選択しました%n", chcType.getValue(), alert.showAndWait()));
        }
    }
}

2020-09-08 00:00 nice!(0) コメント(0)

FileChooser・DirectoryChooser　[JavaFX]

前置き

ディレクトリやファイルを選択するダイアログを表示するためのコントロール。
showSaveDialogでファイル保存用のダイアログを表示することも可能。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="20.0" BorderPane.alignment="CENTER">
            <children>
            <TextField fx:id="txtDir" editable="false" minWidth="350.0" />
            <Button fx:id="btnSelect1" mnemonicParsing="false" onAction="#onSelectDir" text="フォルダー選択" />
            <TextField fx:id="txtFile" editable="false" minWidth="160.0" />
            <Button fx:id="btnSelect" mnemonicParsing="false" onAction="#onSelectFile" text="ファイル選択" />
            </children>
            <padding>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
            </padding>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.stage.DirectoryChooser;
import javafx.stage.FileChooser;
import javafx.stage.Stage;

import java.io.File;
import java.io.IOException;
import java.net.URL;
import java.util.List;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    TextField txtDir;

    @FXML
    TextField txtFile;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
    }

    @FXML
    private void onSelectFile() {
        FileChooser chooser = new FileChooser();
        chooser.setInitialDirectory(txtDir.getText().isEmpty() ? null : new File(txtDir.getText()));
        List<File> selected = chooser.showOpenMultipleDialog(null);

        if (selected == null) {
            return;
        }
        File file = selected.get(0);
        txtDir.setText(file.getParentFile().getAbsolutePath());

        if (1 < selected.size()) {
            txtFile.setText("ファイルが複数選択されました");
            selected.forEach(i -> taOutput.appendText(String.format("%s%n", i.getName())));

        } else {
            txtFile.setText(file.getName());
            taOutput.appendText(String.format("%s%n", file.getName()));
        }
    }

    @FXML
    private void onSelectDir() {
        DirectoryChooser chooser = new DirectoryChooser();
        chooser.setInitialDirectory(txtDir.getText().isEmpty() ? null : new File(txtDir.getText()));
        File selected = chooser.showDialog(null);

        if (selected == null) {
            return;
        }
        txtDir.setText(selected.getAbsolutePath());
        txtFile.setText("");
        taOutput.appendText(String.format("%s%n", selected.getAbsolutePath()));
    }
}

2020-09-07 00:00 nice!(0) コメント(0)

DatePicker　[JavaFX]

前置き

日付をカレンダーから指定できる。意外と便利。

実装

FXDemo.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.FlowPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="800.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.ne.yonem.FXDemo">
    <top>
        <FlowPane hgap="20.0" BorderPane.alignment="CENTER">
            <children>
            <Label text="支払日" />
            <DatePicker fx:id="dpPayment" />
            <Button fx:id="btnSelect" mnemonicParsing="false" onAction="#onSelect" text="選択" />
            </children>
            <padding>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
            </padding>
        </FlowPane>
    </top>
    <center>
        <TextArea fx:id="taOutput" editable="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

FXDemo.java

package jp.ne.yonem;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Scene;
import javafx.scene.control.DatePicker;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

import java.io.IOException;
import java.net.URL;
import java.time.LocalDate;
import java.util.ResourceBundle;

public class FXDemo extends Application implements Initializable {

    @FXML
    DatePicker dpPayment;

    @FXML
    TextArea taOutput;

    @Override
    public void start(Stage stage) throws IOException {
        BorderPane pane = FXMLLoader.load(getClass().getResource("FXDemo.fxml"));
        stage.setScene(new Scene(pane));
        stage.setTitle("FXDemo");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        dpPayment.setValue(LocalDate.now());
    }

    @FXML
    private void onSelect() {
        LocalDate date = dpPayment.getValue();

        if (date != null) {
            taOutput.appendText(String.format("支払日は %s です%n", date.toString()));
        }
    }
}

2020-09-06 00:00 nice!(0) コメント(0)

前の10件 | - JavaFX ブログトップ

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

RSS1.0 | RSS2.0

前置き

画面設計

実装

実行結果

前置き

実装

実行結果

前置き

実装

実行結果

データに半径を指定しなかった場合

データに半径を指定した場合

前置き

実装

実行結果

前置き

実装

実行結果

前置き

実装

実行結果

前置き

実装

実行結果

前置き

実装

前置き

実装

前置き

実装

yonem さん

yonem さんの記事をnice!と思った人 (全0人)

カレンダー

月別表示

最新記事一覧

マイカテゴリー

yonem さんがnice!と思った記事

yonem さんがコメントした記事

最近のコメント

最近トラックバックされた記事

読んでいるブログ(RSS)

検索ボックス