ブログトップ 記事一覧 ログイン 無料ブログ開設

プログラムdeタマゴ

2013/02/06

JavaFX2の練習1

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

ラベルで簡単なCSSの練習

 JavaFX Scene Builderを使ってCSSの記述の練習をしていこうと思います。

 今日はフォントの設定と、背景と、ラベルの画像の指定について。

 まずは、とりあえず、Labelを貼り付けます。StyleClassの項目の[+]を押して、testclassという名前のクラスを追加しておきました。

f:id:nodamushi:20130206102503p:image:w360



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

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

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

f:id:nodamushi:20130206102504j:image:w360



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

f:id:nodamushi:20130206102505j:image:w360

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

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

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

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

f:id:nodamushi:20130206102507j:image:w360



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

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

f:id:nodamushi:20130206102508j:image:w360



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

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

 すると、こうなります。

f:id:nodamushi:20130206102509j:image:w360


 現在は二つのレイヤーの大きさが同じなので、一番上の#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になっています。

f:id:nodamushi:20130206102511j:image:w360



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

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

f:id:nodamushi:20130206102512j:image:w360



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

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

f:id:nodamushi:20130206112301j:image:w360

 できたできた。

 ラベルには、どうやら文字列の前に画像を挿入する機能があるらしい。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");
}

f:id:nodamushi:20130206112300j:image:w360

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

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

f:id:nodamushi:20130206112259j:image:w360

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

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

f:id:nodamushi:20130206112258j:image:w360

 うん、上に来た。

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

skrbskrb 2013/02/06 14:38 JavaFXのCSSの-fx-alignmentなどの特性は、対象としているノードのプロパティ名に対応しています。
LabelクラスにはtextAlignmentというプロパティはなくて、alignmentというプロパティになるので、CSSも-fx-alignmentになっています。

ついでですが、Scene Builder 1.1にはCSS Analyzerという機能があって、どのようなCSSを使えるか、その値はどうなっているかを見ることができますよ。SBのメニューバーの[表示]-[CSSパネルの表示]でCSS Analyzerが表示されます。

nodamushinodamushi 2013/02/08 07:33 CSS表示機能非常に便利です。教えて下さってありがとうございます。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/nodamushi/20130206/1360117697