JavaFX2の練習1

　JavaFX2のCSS意味わかんない。そもそも、そんなCSS得意でもないのに、普通のHTML用のCSSともなーんか全然違ってマジブッコロ。JavaFXのCSSのページまじ意味わからねーし。それぐらいならSwingでゴリるわ。とか思ってたのでJavaFX2手を出していませんでしたが、日本語記事は全然見つけられなかったけど、英語記事だとわかりやすいのがいくつか見つかってきたので色々試したことを雑記していこうと思います。たまったらそのうちまとめる。

ラベルで簡単なCSSの練習

　JavaFX Scene Builderを使ってCSSの記述の練習をしていこうと思います。
　今日はフォントの設定と、背景と、ラベルの画像の指定について。
　まずは、とりあえず、Labelを貼り付けます。StyleClassの項目の[+]を押して、testclassという名前のクラスを追加しておきました。




　次に、デスクトップにtest.cssというファイルを作成しました。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-padding:10px;
}

　StyleSheetsの項目の+から、この作成したファイルを読み込むよう設定します。するとこうなりました。




　ちょっと、悪戯して、Builderの方でラベルのボックスサイズを変えます。

　文字列をセンタリングしたいです。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    /* text-alignmentじゃ、文字列はセンタリングされなかった
    -fx-text-alignment:center;*/
    -fx-alignment:center;
}

　理由は知りませんが、text-alignmentじゃ、センタリングされませんでした。このCSSは何の意味があるのか、今の私にはまだわかりません。

　とりあえず、alignmentでセンタリングできました。




　背景色を指定してみます。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc;
}

　JavaFXには背景にレイヤーという概念があるみたいです。次の様に複数の背景を指定できます。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
}

　すると、こうなります。



　現在は二つのレイヤーの大きさが同じなので、一番上の#cffだけが見えてる状態らしいです。background-insetsで、背景のマージン的なものを設定します。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
    -fx-background-insets: 0 ,1 3 20 3;
}

　一つ目のレイヤーはinsetsはすべて0で、上のレイヤーは上1px、左3px、下20px、右3pxになっています。




　さらに、背景は各レイヤーについて角丸を適応できます。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
    -fx-background-insets: 0 ,1 3 20 3;
    -fx-background-radius:0 , 0 0 20px 20px;
}

　おっしゃおっしゃ、背景についてはだいぶ理解した。次は、テキストにアンダーラインを入れてみる。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
    -fx-background-insets: 0 ,1 3 20 3;
    -fx-background-radius:0 , 0 0 20px 20px;
    -fx-underline:true;
}

　できたできた。


　ラベルには、どうやら文字列の前に画像を挿入する機能があるらしい。graphicで指定できる。とりあえず、はてなさんのアイコンを突っ込んでみた。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
    -fx-background-insets: 0 ,1 3 20 3;
    -fx-background-radius:0 , 0 0 20px 20px;
    -fx-underline:true;
    -fx-graphic:url("http://www.hatena.ne.jp/images/portal/logo-portal-top2@2x.png");
}

　おぉ、挿入された………けど、はてなさん、でかすぎです。文字が見切れてます。なので、文字を折り返しさせます。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
    -fx-background-insets: 0 ,1 3 20 3;
    -fx-background-radius:0 , 0 0 20px 20px;
    -fx-underline:true;
    -fx-graphic:url("http://www.hatena.ne.jp/images/portal/logo-portal-top2@2x.png");
    -fx-wrap-text:true;
}

　ほむほむ。でも、なんかあれだね。はてなさんを左じゃなくて、上に持って行きたい。

.testclass{
    -fx-font:italic bold 14px 'Arial','MS P明朝',serif;
    -fx-alignment:center;
    -fx-background-color:#9cc,#cff;
    -fx-background-insets: 0 ,1 3 20 3;
    -fx-background-radius:0 , 0 0 20px 20px;
    -fx-underline:true;
    -fx-graphic:url("http://www.hatena.ne.jp/images/portal/logo-portal-top2@2x.png");
    -fx-wrap-text:true;
    -fx-content-display:top;
}

　うん、上に来た。


　今日の所はこんな所かなー。次はボタンかなー。

FXML試してみた

お久しぶりです。卒論で死にかけていますがひとまず息はしています。

さて、JavaFXが出てから結構立ったのでそろそろ私も弄ってみようと、FXMLというXML文書でGUIを構成する機能を試してみましたところ、謎の挙動を示したのでここで報告しておこうと思います。

"Getting Started with FXML"にあるSign inの画面とほぼ作ろうとしている物は同じです。ただ、画像を用意するのが面倒だったので、端折ってGridPane部分だけ作っています。

まずはJavaFXを起動するApplicationを拡張したクラス。

package fx;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.*;
import javafx.stage.Stage;

public class FXTest extends Application{
	public void start(Stage stage) throws Exception {
		stage.setTitle("FMLX Test");
		Parent root = FXMLLoader.load(FXTest.class.getResource("login.fxml"));
		Scene scene = new Scene(root);
		stage.setScene(scene);
		stage.show();
	}
	public static void main(String[] args) {
		launch(args);
	}
}

FXMLLoderでclassファイルの場所にあるlogin.fxmlを読み込んでシーンにするだけです。
次に、先にコントローラーにあたるLogin.javaを示します。

package fx;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.*;
public class Login {
	@FXML TextField usnameField;
	@FXML PasswordField passwordField;
	@FXML protected void loginAction(ActionEvent a){
		System.out.println(usnameField.getText()+ "  " + passwordField.getText());
	}
}

ユーザー名とパスワードを表示するだけです。

最後に問題のlogin.fxmlです。

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

<?import javafx.scene.layout.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.*?>
<?import javafx.scene.image.*?>

<GridPane fx:controller="fx.Login" alignment="top_center" hgap="8" vgap="8" style="-fx-padding: 40 0 0 0;" xmlns:fx="http://javafx.com/fxml">
	<children>
	
<!--	<Label text="dummy text"  GridPane.columnIndex="1" GridPane.rowIndex="0"/>  -->
	
		<Label text="log in:"  
			style="-fx-font:normal 15 Tahoma;"
			GridPane.columnIndex="0" GridPane.rowIndex="0"/>
		
		<Label text="name" 
			style="-fx-font:normal 10 Tahoma;"
			GridPane.columnIndex="0" GridPane.rowIndex="1"/>
		
		<TextField fx:id="usnameField"  GridPane.columnIndex="1" GridPane.rowIndex="1"/>
		
		<Label text="password" 
			style="-fx-font:normal 10 Tahoma;"
			GridPane.columnIndex="0" GridPane.rowIndex="2"/>
		
		<PasswordField fx:id="passwordField" style="" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
		
		<Button text="submit" style="" onAction="#loginAction" GridPane.columnIndex="1" GridPane.rowIndex="3"/>
	</children>
</GridPane>

ほぼ"Example 8"の丸パクリですね。

まず、これで実行するとこうなります。

styleでフォントサイズをlog inは15に、その他は10にしているのに差がありません。

次にコメントアウトしていたダミーラベルを表示させてみます。
このダミーラベルはstyleが設定されていません。

きちんと文字の大きさに差が出ました。

これってどういうことなんでしょうか？