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に対するスタイルを記述

jython_fx_css

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);
}

以上。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です