JavaFXのサードパーティ「JFXtras」を触ってみる! #javafx

この記事は「JavaFX Advent Calendar 2013」の22日目の記事となります。

昨日はもじゃ変さん(@razon)による「JavaFX 8 on Scala - SHI-Zone」でした。
明日は@tikeminさんです!宜しくお願いします。

JFXtrasとは?

JavaFXでは標準で様々な画面コンポーネントが揃っていますが、企業やコミュニティのオープンソースによるサードパーティコンポーネントも色々あるようです。情報として最新状態か不明ですが、Oracleさんのページに「JavaFX Third Party Tools and Utilities」があって、画面コントロール系としては

などが挙げられていました。今回この中から、JFXtrasを少しだけ触ってみました。
http://jfxtras.org/

なぜJSXtrasに興味を持ったかというと…

  1. ShelfViewを使ってみたかった
  2. 関わっているメンバーがすごそう

の2つでした(^^;

後者は、パッと見てわかったのはStephen ChinさんとJim Weaverさんだけなのですが、今年JJUGの勉強会やJavaOneに行っていなかったら、こうした方々の名前すら気にも止めなかったと思います…(^^;

で、いざ使ってみたら経緯がわからないのですが、ShelfViewはなくなっているようで…ちょっと残念でした。

JFXtrasについては、日本でも少し前ですがブログ書かれてる方がいらっしゃって、そちらでプロジェクトの解説等が翻訳された形になっていますので、参考にして頂くほうが良いかと思います。

JFXtras 2プロジェクトとは?

サンプルを触ってみる

jfxtras-ensembleというサンプル集のようなものがあって、GitHubからダウンロードして手元でビルド・実行してみたら、こんな感じでした。

f:id:kikutaro777:20131222053205j:plain

が、自分の設定が悪いのか触るとエラーに…(^^;

あと、Java 8を入れていれば「FXTras 8.0 Samples」を見れるよ、と書いてあったので試してみました。こちらは問題なく動かせました。

f:id:kikutaro777:20131222102950j:plain

上記はタイムスケジュールとか作るようなサンプルですね。あと放射状の(Radial)メニューとか

f:id:kikutaro777:20131222103359j:plain

ちょっと触るだけでも面白いので、JDK8を入れてる方は是非触ってみてください。
以下サイト真ん中あたりの「Try It!」からjar落として、JDK8で以下実行するだけです。
http://jfxtras.org/

java -jar jfxtras-labs-samples-8.0-r1-SNAPSHOT-shadow.jar

実際に使ってみる

で、もともとネタにしようとしていたShelfViewなるものがないので、どうしよう…と思ったのですが、とりあえず動かしてみることに。

サイトみるとUse It!のところでMavenのセントラルリポジトリにjfxtras-labsがあるとのことでしたが、バージョンが古い2.2-r5までは置いてあるのですが、2.2-r6-SNAPSHOTと8.0-r1-SNAPSHOTは候補に出てきませんでした。一応セントラルの検索ページみてみたのですが、やはりなさそうな。。

f:id:kikutaro777:20131222105002j:plain

とりあえずjarは落とせるので「jfxtras-labs-8.0-8.0-r1-20130906.112928-11.jar」を適当なフォルダに落として、Mavenを使わない流れでNetBeansプロジェクトを作りました。
で、手動でjarを参照設定します。

f:id:kikutaro777:20131222105217j:plain

f:id:kikutaro777:20131222105240j:plain

FXMLファイルを開いてコード補完みると

f:id:kikutaro777:20131222105329j:plain

と出て、一瞬「あれ、コンポーネントみえないのかな…」と思いますが、右下コメントにあるように「Ctrl+Space」を押すと、JFXtras labで定義されているコンポーネントがみえるようになりました。

AgendaとかBatteryとか(^^)見慣れないコンポーネントがぞろぞろ。

f:id:kikutaro777:20131222105617j:plain

とりあえず、何かおいてみます。わかりやすそうなClockを選択。コード補完も普通に効きます。

f:id:kikutaro777:20131222111658j:plain

実行すると

f:id:kikutaro777:20131222111725j:plain

時計ですねw

他にもTrafficLightというコンポーネントがあって、属性をみたらgreenOnとかredOnとかyellowOnとか…(^^)大体想像つきますね。

さらにgreenBlinking、redBlinking、yellowBlinkingとあるので、まさかー、と思ってgreenに両方trueを指定してみました。

属性もちゃんとみえますね。
f:id:kikutaro777:20131222111634j:plain

f:id:kikutaro777:20131222111955g:plain

実行すると以下のような画面に(^^)

カスタムコンポーネントで自分でもこういう部品が作れるの?と思うと何かちょっとワクワクしますね。

残念ながら上記FXMLをSceneBuilderで開くと

f:id:kikutaro777:20131222112228j:plain

とエラーになってしまいました。クラスパス設定でうまくできるのかも?、ですが、単純にJar指定しただけではダメだったので今回はちょっと諦めます。

堀北真希さん with JFXtras

最後はやっぱり堀北さんで何か作りたい(※この理由は最後に補足)、ということで、Windowというコンポーネントを使って遊んでみました。

FXMLでWindowをAnchorPaneのchildren内に定義します。id名を付けておいて後でプログラムから触りやすいようにしておきます。

<children>
    <jfxtras.labs.scene.control.window.Window fx:id="beautifulWindow" title="きれいな堀北真希さん" prefWidth="400" prefHeight="300" />
</children>

Controllerのプログラムで

@FXML
private Window beautifulWindow;

@Override
public void initialize(URL url, ResourceBundle rb) {
    //綺麗な堀北さんの写真を指定
    Path imagePath = Paths.get("D:\\photo\\horikita\\beautiful.jpg");
    ImageView image = new ImageView(imagePath.toUri().toString());
    
    //タイトルバーの右側に閉じるボタンつける   
    beautifulWindow.getRightIcons().add(new CloseIcon(beautifulWindow));

    //Window内はBorderPaneにしてCenterへ写真配置
    BorderPane windowPane = new BorderPane();
    beautifulWindow.getContentPane().getChildren().add(windowPane);
    windowPane.setCenter(image);
}

こんな感じでWindow内に写真を置いたりします。同じようなWindowをいくつか用意して、ついでにClockコンポーネントをつけて実行すると。
美人時計ならぬ、マイ堀北さん時計…とか(^^; Windowコンポは自由に移動できるので、配置も自由に変えられます。

f:id:kikutaro777:20131222114804j:plain

Windowコンポでは閉じるボタンを左にするか右にするか(綺麗な堀北さんは右に、舞台宣伝のは左につけてます)等、細かく設定できるので便利そうです。

また、タイトルバーのボタンでRotateIconをつけると、Windowがグルっと回転したりw

f:id:kikutaro777:20131222115147j:plain

まだまだJavaFX標準機能の理解を深めないといけない自分ですが、こんな感じでちょっと脱線して面白いライブラリをみつけたりして遊ぶのもいい感じです(^^)

補足

ということで、今年の夏から始めたJavaFX、仕事で利用しているわけではなく遊びでやっているので中々上達しませんが…楽しいです(^^)
堀北真希さんを絡めた理由は少し前にJavaFX勉強会でLTさせて頂いた以下の資料を参照下さい。

JavaFX勉強会で堀北真希さんのLTをしてしまいました… #javafx_ja

今日はGlassFish勉強会とJavaFX勉強会が同日に平行開催されました。

GlassFish勉強会に登録していたのですが、後半で抜け出してJavaFX勉強会でLTをさせて頂きました(^^;

LTきっかけ

さくらばさんからJavaFX勉強会でお話しませんか、とお声かけ頂きました(>_<)

こんな光栄な機会を断るわけにいかない!ということで、技術的な内容が全くないLTでしたが、JavaFXに興味があるけど実際に触ったことがない方をターゲットに(ってJavaFX勉強会には、そんな人いないんじゃないかと思いつつ…汗)した発表をさせて頂きました。


発表資料

発表資料はアップしました。

堀北真希さんのことばかりで本当に恐縮です…

デモ動画

上記資料にもリンクで貼ってますが、ここでも載せておきます。
アプリケーションを作成したときのブログも入れときますが、作った時点からは色々といじって非同期にしたりとかしてますが、その辺りはどこかで機会あればまとめます(^^;

MakiMakiImageViewer

上記動画の後半はStageStyleでTRANSPARENTを指定したもので、アプリ上段の枠が消えただけなのですが、なんかビューアっぽい感じになってるかと(^^)これも作った後、さくらばさんからアドバイスもらったものです。

作ったときのブログ
堀北真希さん誕生日を祝ってJavaFXで画像ビューアを作ってみる
StageStyleを指定してみる

ここから始めるJavaFX

自分はJJUGで今年の8月に行われたJavaFXハンズオンの資料を参考にして、初めてJavaFXを触りました。

このハンズオンで、SceneBuilderやプログラム作成の基本的な流れはわかるので、あとは自分で作りたいものを作ればいいのかなと。

JavaFXハンズオンにお家でChallenge!

感想

堀北真希エバンジェリストになりたい…(*´Д`)

SendGridFX : JavaFX meets SendGrid ! #JavaFX #SendGrid

I'm new to JavaFX and want to make something interesting.

A month ago I signed up SendGrid, because my old colleague @nakansuke starts to new business with SendGrid company.
He advised me that there is a good Java wrapper library of SendGrid WebAPI, it's sendgrid4j.
http://oss.flect.co.jp/libs/en/sendgrid4j.html

Exactly, it's good and easy to use SendGrid WebAPI.

Today I was having fun with JavaFX and SendGrid.
My simple idea is sending HTML mail with HTMLEditor on JavaFX.

This is my simple application.
I only use Label, TextField, Button and HTMLEditor.

f:id:kikutaro777:20131025233829j:plain

Only input sending e-mail address and subject and contents of mail by HTML.

f:id:kikutaro777:20131025234142j:plain

HTMLEditor component on JavaFX is good to write HTML.

I sent this mail to my web-mail of Yahoo, so checked it.

I think JavaFX programmer might say "Hey guy, why don't you check your web mail by WebView?" Yeah, that's true. I did it :)

This is my JavaFX application includes WebView.
Yes! I got the mail!
f:id:kikutaro777:20131025234414j:plain

I opened it and saw HTML mail.

f:id:kikutaro777:20131025235010j:plain

Of course, it's same looking of HTMLEditor :)

I show my code of JavaFX Controller class. It's very simple.

package jp.co.hoge.sendgridfx;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.web.HTMLEditor;
import jp.co.flect.sendgrid.SendGridClient;
import jp.co.flect.sendgrid.SendGridException;
import jp.co.flect.sendgrid.model.WebMail;

public class SendGridFXController implements Initializable {
    
    //SMTP authentication info of SendGrid
    private static final String SMTP_AUTH_USER = "blah-blah-blah";
    private static final String SMTP_AUTH_PWD  = "blah-blah-blah";
    
    //Mail from info
    private static final String MAIL_FROM = "kiku@test.com";
    private static final String MAIL_FROM_NAME = "Test from Kiku";
    
    SendGridClient client;
    
    @FXML
    private HTMLEditor editor;
    
    @FXML
    private TextField textTo;
    
    @FXML
    private TextField textTitle;
    
    @FXML
    private Label message;
    
    @FXML
    private void sendButtonAction(ActionEvent event) {
        try {
            WebMail mail = new WebMail();
            
            //setting mail from
            mail.setFrom(MAIL_FROM);
            mail.setFromName(MAIL_FROM_NAME);
            
            //setting mail to
            mail.setTo(textTo.getText());
            
            //setting mail subject
            mail.setSubject(textTitle.getText());
            
            //setting HTML content
            mail.setHtml(editor.getHtmlText());
            
            //sending mail
            client.mail(mail);
            
            message.setText("Sending mail is success.");
        } catch (IOException | SendGridException ex) {
            message.setText("Sending mail is failed.");
        }
    }
    
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        client = new SendGridClient(SMTP_AUTH_USER, SMTP_AUTH_PWD);
    }    
}

We can use sendgrid4j by maven.

Here is pom.xml.
Repository setting of sendgrid4j.

<repositories>
    <repository>
        <id>jp.co.flect</id>
        <name>FLECT maven repository</name>
        <url>http://flect.github.io/maven-repo/</url>
    </repository>
</repositories>

Dependency is here.

<dependencies>
    <dependency>
        <groupId>jp.co.flect</groupId>
        <artifactId>sendgrid4j</artifactId>
        <version>0.9.1</version>
    </dependency>
</dependencies>

That's it :)

にほんブログ村 IT技術ブログへ
にほんブログ村
にほんブログ村 IT技術ブログ Javaへ
にほんブログ村
QLOOKアクセス解析