Jython で JavaFX CSSを使う
作成した入力フォーム のデザインをCSSで設定する。
Fancy Forms with JavaFX CSS
- form_css.py、form_css.css、bacground.jpg を同じフォルダに置く
- scene.getStylesheets().add([CSSファイルのURL]) を実行
- IDを指定して、スタイルを適用する場合、オブジェクト.setId([オブジェクトのID]) でオブジェクトにIDを設定し、CSSで、IDに対するスタイルを記述
form_css.py
# -*- coding: utf-8 -*- from java.lang import String from javafx.application import Application from javafx.event import EventHandler from javafx.geometry import Insets, Pos from javafx.scene import Scene from javafx.scene.control import Button, Label, TextField, PasswordField from javafx.scene.layout import GridPane, HBox from javafx.scene.text import Text import os class SiginHandler(EventHandler): def __init__(self): self.actiontarget = None def handle(self, event): self.actiontarget.setText(u"サイイインボタンが押されました") class FormCssFx(Application): ''' http://docs.oracle.com/javafx/2/get_started/form.htm ''' def main(self): # パラメータに配列を渡せない!? super(FormCssFx, self).launch(self.getClass(), String("")) def start(self, primaryStage): primaryStage.setTitle("JavaFX Welcome") grid = GridPane() grid.setHgap(10) grid.setVgap(10) grid.setPadding(Insets(25,25,25,25)) scene = Scene(grid,360,275) primaryStage.setScene(scene) scenetitle = Text(u"ようこそ") scenetitle.setId("welcome-text"); grid.add(scenetitle, 0, 0, 2, 1) userName = Label(u"ユーザー名:") grid.add(userName, 0, 1) userTextField = TextField() grid.add(userTextField, 1, 1) pw = Label(u"パスワード:") grid.add(pw, 0, 2) pwBox = PasswordField() grid.add(pwBox, 1, 2) actiontarget = Text() actiontarget.setId("actiontarget"); grid.add(actiontarget, 1, 6) btn = Button(u"サインイン") hbBtn = HBox(10) hbBtn.setAlignment(Pos.BOTTOM_RIGHT) hbBtn.getChildren().add(btn) hdr = SiginHandler() hdr.actiontarget = actiontarget btn.setOnAction(hdr) grid.add(hbBtn, 1, 4) cssurl = "file:///" + os.path.join(os.path.dirname(__file__),r'form_css.css') scene.getStylesheets().add(cssurl) primaryStage.show() if __name__ == '__main__': h = FormCssFx() h.main()
form_css.css
/* 背景画像*/ .root { -fx-background-image: url("background.jpg"); } /* ラベルのエフェクト */ .label { -fx-font-size: 16px; -fx-font-weight: bold; -fx-font-family: "Meiryo"; -fx-text-fill: #333333; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } /* テキストのエフェクト */ #welcome-text { -fx-font-size: 28px; -fx-font-weight: bold; -fx-font-family: "Meiryo"; -fx-fill: #818181; -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 ); } #actiontarget { -fx-fill: FIREBRICK; -fx-font-size: 16px; -fx-font-weight: bold; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } /* ボタンに影をおとす */ .button { -fx-text-fill: white; -fx-font-family: "Arial Narrow"; -fx-font-size: 16px; -fx-font-weight: bold; -fx-background-color: linear-gradient(#61a2b1, #2A5058); -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); } /* ボタンのホバースタイル*/ .button:hover { -fx-background-color: linear-gradient(#2A5058, #61a2b1); }
以上。