yamaken1343’s blog

技術ブログもどき

JavaFXで時間管理タイマーを作る [fxml & css編]

Java JavaFX プログラミング

yamaken1343.hatenablog.jp

見た目があまりにもダサくて使いたくなかったため、fxmlとcssを用いて見た目をいい感じにします。

ネットにある情報がfxmlじゃなくてjavaコードで構造を定義してるものが多くて正直わかりませんでした。英語で探せばよかったかな。

コード

<BorderPane fx:controller="Controller" xmlns:fx="http://javafx.com/fxml">
    <stylesheets>
        <URL value="@labTimer.css"/>
    </stylesheets>
    <top>
        <VBox alignment="CENTER">
            <HBox>
                <Label text="らぼいん"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Label fx:id="nowTimeLabel"/>
            </HBox>
            <HBox>
                <Label fx:id="inDate" text="00/00 00:00:00"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Label fx:id="nowTime" text="00/00 00:00:00"/>
            </HBox>
            <Label text=" "/>
            <Label text="らぼ時間"/>
            <Label fx:id="allTimerLabel"/>
        </VBox>
    </top>
    <center>
        <GridPane alignment="center" hgap="10" vgap="10">
            <Label text="研究時間: " GridPane.rowIndex="0" GridPane.columnIndex="0"/>
            <Label fx:id="childTimerLabel1" GridPane.rowIndex="0" GridPane.columnIndex="1"/>
            <Label text="休憩時間: " GridPane.rowIndex="1" GridPane.columnIndex="0"/>
            <Label fx:id="childTimerLabel2" GridPane.rowIndex="1" GridPane.columnIndex="1"/>
            <Label text="その他時間: " GridPane.rowIndex="2" GridPane.columnIndex="0"/>
            <Label fx:id="childTimerLabel3" GridPane.rowIndex="2" GridPane.columnIndex="1"/>

        </GridPane>
    </center>
    <bottom>
        <VBox alignment="CENTER">
            <Label fx:id="statusLabel" />
            <Label fx:id="mainTimerLabel" />
            <HBox>
                <Region HBox.hgrow="ALWAYS"/>
                <Button fx:id="mainButton" onAction="#mainButtonClick"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Button fx:id="childButton1" text="研究" onAction="#button1Click"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Button fx:id="childButton2" text="休憩" onAction="#button2Click"/>
                <Region HBox.hgrow="ALWAYS"/>
                <Button fx:id="childButton3" text="その他" onAction="#button3Click"/>
                <Region HBox.hgrow="ALWAYS"/>
            </HBox>
        </VBox>
    </bottom>
</BorderPane>

Label#mainTimerLabel{
    -fx-font-size:28pt;
}
Label#allTimerLabel{
    -fx-font-size:28pt;
}

解説

BorderPone

top, left, center, right, bottomの5つの構造をもち、それぞれに配置できる

stylesheets

URLタグでスタイルシートの場所を指定できる。Pone要素の中に書かないとダメっぽい?直書きもだめでした。

HBox, VBox

それぞれ要素を横に並べる、縦に並べるときに使う

Region HBox.hgrow="ALWAYS"

空白の指定。左右均等配置になる。ウィンドウ自体を拡大したらこの部分が伸びる

GridPone

GridPane.hogeIndexに従って格子状に配置できる

CSS

クラス#fx:id｛CSSのタグに-fx-をつけたもの｝で修飾できる

結果

f:id:yamaken1343:20180426122839p:plain

参考

totomo.net

qiita.com