JavaFX」カテゴリーアーカイブ

JavaFXとWebsocketを連携してみる(On Glassfish4.0) その1

サーバサイドはいつものようにGlassfish 4.0。まずは寺田さんのブログを見つつメッセージ送信用のページで入れたメッセージが表示されるようにするとこまで持っていく。(元のブログのようにツイッターを見に行きはしないで、index.htmlで入れたものが表示されるようにする。)

サーバ用のエンドポイント(ws://localhost:8080/first/hello/)

package jp.co.epea.first;

import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/hello/")
public class HelloWorld {

    static Set<Session> sessions = Collections
            .synchronizedSet(new HashSet<Session>());

    @OnMessage
    public void onMessage(String message) {
        System.out.println("message[" + message + "]");

        for (Session s : sessions) {
            s.getAsyncRemote().sendText(message);
        }
    }

    @OnOpen
    public void open(Session sess) {
        System.out.println("開始します:" + sess.getId());
        sessions.add(sess);
    }

    @OnClose
    public void close(Session sess) {
        System.out.println("終了します:" + sess.getId());
        sessions.remove(sess);
    }

    @OnError
    public void error(Session sess,Throwable t) {
        System.out.println("エラーです:" + sess.getId());
        t.printStackTrace();
    }
}

メッセージ送信用のページ(http://localhost:8080/first/index.html)

<!DOCTYPE html>
<html>
    <head>
        <title>WebSocketテスト</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script type="text/javascript">
            var socket;
            $(document).ready(function(){
                var host="ws://localhost:8080/first/hello/";
                socket = new WebSocket(host);

                socket.onmessage = function(message){
                    $('#log').append(message.data + "<br/>");
                }

                $('#send').click(function(){
                    var text = $('#msg').val();
                    socket.send(text);
                    $('#msg').val('');
                })

            });
        </script>        
    </head>
    <body>
        <h1>WebSocketテスト</h1>
        <div id="log">
        </div>
        <input id="msg" type="text"/>
        <button id="send">送信</button>
    </body>
</html>

 

クライアントサイドの作成の流れは

  1. MavanプロジェクトとしてJavaFXを作成(前回ブログ)
  2. 足りない依存関係を追加
  3. 寺田さんのブログのクライアントサイドプログラムをコピペ
  4. とりあえず動くようになるために最低限の修正を加える

(手順1と3は省略)

2.足りない依存関係を追加

tyrus-clientとtyrus-container-grizzlyはこちらのブログを参考にしたときに「Grizzly 関連の jar」の今版として使えそうなので試したところいけたっぽいので持ってきた。(ユーザガイド)

    <dependencies>
        <dependency>
            <groupId>com.oracle</groupId>
            <artifactId>javafx</artifactId>
            <version>2.0</version>
            <scope>system</scope>
            <systemPath>C:\dev\pleiades43\java\7\lib/jfxrt.jar</systemPath>
        </dependency>
        <dependency>
            <groupId>org.glassfish.tyrus</groupId>
            <artifactId>tyrus-client</artifactId>
            <version>1.1</version>
            <scope>compile</scope>
        </dependency>
        <dependency>
            <groupId>org.glassfish.tyrus</groupId>
            <artifactId>tyrus-container-grizzly</artifactId>
            <version>1.1</version>
            <scope>compile</scope>
        </dependency>
    </dependencies>

 

4.とりあえず動くようになるために最低限の修正を加える

TwitterClientのアノテーションを@ClientEndpoint、@OnOpen、@OnMessage、@OnCloseに変更。

SampleController.javaのURLを修正。

ClientEndpointConfigurationの行をコメントアウト。

URI clientURI = new URI("ws://localhost:8080/first/hello/");
//ClientEndpointConfiguration clientConfig = new DefaultClientConfiguration();

 

動作確認

サーバを起動する。

JavaFXを起動する。

a

start timelineボタンをクリックしてサーバと接続

(コンソールメッセージ)
Connection had opened.

 

index.htmlからメッセージを送信

b

 

JavaFX側に表示される

c

 

一応これで動作しているようなのでこいつを基点に触っていくことにする。

(JavaFX側をXボタンで閉じたときにOncloseが呼ばれてないっぽいけど、実装的にそういう動きになるのか環境がおかしいのか。。。。。)

2013/11/03追記

子の実装ではJavaFXのTableViewを使用することで、WebSocket側のスレッドによる変更がJavaFXのスレッドに通知されている。(オブザーバ)

桜庭さんに伺ったところ、「(GUIはそっちのスレッドから動かすのが基本なので)きちんと動かないことあるかもよ」とのことでした。

他の日記ではLabelで同期しようとした場合にPlatform.runLaterでJavaFXのスレッドに処理を戻しているけど、そちらの方法が基本とのことでした。

 

JavaFXのMaven(M2E)設定(Eclipse 4.3 Kepler)

Eclipse4.3(実際に使っているのはPleiades all in one)にてM2Eを使ってJavaFXをMavenプロジェクトとして動かすまでのメモ。

新規->その他->Maven->Mavenプロジェクトから次へ次へといってアーキタイプの選択を開く

以前入れたリモートレポジトリに入っているorg.codehaus.mojo.archetypesのjavafxを選択

注:JavaFXのアーキタイプは何種類かあるようでディレクトリ構造は、JavaFX用アークテクとタイプの中でも結構ばらついている。なのでスタンダードな構造はきちんと調べた方がいいかも。

a

 

任意の名前をつけてプロジェクトを作成。

そのままだとJavaFX用のJarをMavenが見えていないので「FXML を型に解決できません」とか「インポートされた javafx は見つかりません」とかで怒られる。

pom.xml(プロジェクト直下ある)にjarのパスを依存関係に追加してやって「Maven->プロジェクトの更新」とやってやると動くようになる。(今のとこ無難に動いている模様。)

追加した内容

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>jp.co.epea</groupId>
    <artifactId>firstfxclient</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>firstfxclient</name>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <mainClass>jp.co.epea.firstfxclient.MainApp</mainClass>
    </properties>

    <organization>
        <!-- Used as the 'Vendor' for JNLP generation -->
        <name>Your Organisation</name>
    </organization>

    <dependencies> <-アーキタイプによってはすでにあるので注意(dependencyタグだけでよい)
        <dependency>
            <groupId>com.oracle</groupId>
            <artifactId>javafx</artifactId>
            <version>2.0</version>
            <scope>system</scope>
            <systemPath>C:\dev\pleiades43\java\7\lib/jfxrt.jar</systemPath> <-パスは実際にある場所
        </dependency>
    </dependencies>
    <build>

(8/5追記)

パスの外部化と、参考サイトへのリンク記事追加

(12/15追記)

実行可能Jarの作り方リンク

 

Eclipse 4.3(Kepler)ベースでJavaFXの開発環境構築

ベースはPleiades All in OneのEclipse4.3 ultimate。

JavaFX開発用プラグインのe(fx)clipseを以下のupdateサイトからインストール。

http://www.efxclipse.org/p2-repos/releases/latest/

何をインストールするか聞かれたけど、とりあえず全部選択した。

OracleのサイトからScene Builder(バージョンは1.0)のインストーラを落としてきてインストール。

 

Eclipse上からScene Builderを開けるようにするため、「Eclipseのウィンドウ->設定->JavaFX」にてシーンビルダーのインストールパスを指定。

自分の場合はC:\Program Files\Oracle\JavaFX Scene Builder 1.0\bin\scenebuilder.exe

 

この段階でエクリプスを再起動したら

新規->JavaFXから作成できるようになっているはず。

(New FX DocumentがfxmlでJavafx main classがメインクラス。)

 

JavaFX 2で始めるGUI開発の第2回までのソースを軽く追った範囲では大体問題なく動く模様。

ただし、Scene Builder上でイベント処理(リンク先の図10)を指定しようとしたときに、候補選択が効かなかったため手動で打ち込んだ。(Scene Builderのバージョンとかそちら側の問題かもしれないが調べられていない。 -> 他のものを触っているときにはScene Builderの1.0でも候補選択が有効だった。少なくともバージョンの問題ではない。)

a

(本来なら赤枠のエリアに選択肢が出てくるとのこと。)

JavaFXエラーパターン(FXMLLoaderのファイル名誤り)

FXMLLoader.load(getClass().getResource(“間違ったファイル名“));

としたときのエラーメッセージはロケーションが必須と若干意味が違うものが表示される。

Exception in Application start method
Exception in thread "main" java.lang.RuntimeException: Exception in Application start method
    at com.sun.javafx.application.LauncherImpl.launchApplication1(LauncherImpl.java:403)
    at com.sun.javafx.application.LauncherImpl.access$000(LauncherImpl.java:47)
    at com.sun.javafx.application.LauncherImpl$1.run(LauncherImpl.java:115)
    at java.lang.Thread.run(Thread.java:724)
Caused by: java.lang.NullPointerException: Location is required. <-ぱっと見わからない
    at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2739)

(中略)
  at jp.co.epea.firstclient.test3.TestLoginFXML.start(TestLoginFXML.java:15)

 

FXMLLoaderの中身見るとクラスローダーで探せないからURLがnullで渡されいってこのメッセージになっているらしい。

public static <T> T load(URL paramURL)
    throws IOException
  {
    return load(paramURL, null);
  }

->
if (paramURL == null) {
      throw new NullPointerException("Location is required.");
    }

JavaFXエラーパターン(Stage#setSceneの漏れ)

ITProのJavaFXサンプルを写経しつつ少しずつエラーを起こしてみる。

LoginDemoクラスにあるstage.setScene(scene);をコメントアウトしてみる。

        public void start(Stage stage) {
            stage.setTitle("Login Demo");

            AnchorPane root = new AnchorPane();
            Scene scene = new Scene(root);
            //stage.setScene(scene);  <-ここのコメントアウト

 

外枠部分だけ表示されて中が透明(背景がそのまま見える)な状態で表示されて枠ごと動かすとメモリがいっぱいいっぱいの時のような表示になる。

(枠の中に背景=Eclipseの画面が表示されている状態)

a

 

(ドラッグして表示が乱れている状態)

b

sceneに対して他のメソッドもコールしていなければEclipse上で”ローカル変数 scene の値は使用されていません”といわれるから多分気づく。ただ、メソッド呼んでいると警告出ないのでその時に事象を知らなかったら環境回りを疑いそう。

 

ちなみに、VBoxとかのコメントアウトはそのコンポーネント部分が表示されないだけなので切り分けは多分付く。

VBox vbox = new VBox();
//root.getChildren().add(vbox);

(コンポーネントが表示されていない状態)
c

 

 

 

JavaFXエラーパターン(fxmlのimport漏れ)

JavaFXのimport文がもれていると以下のようなエラー

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

<?import javafx.scene.control.Label?> <-これがあるべきなのに書かれていない
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefWidth="100" prefHeight="40" xmlns:fx="http://javafx.com/fxml">
    <children>
        <Label text="Hello, World!" />
    </children>
</AnchorPane>

クラスを実行しようとすると項目名が不正な旨のエラーが発生する。

エラーになった行(ハローワールド)と項目名がでるのでそのインポート文を見直せばOK。

エラーログ

Label is not a valid type.
/C:/dev/pleiades43/workspace/firstclient/bin/jp/co/epea/firstclient/Hello.fxml:7
  at javafx.fxml.FXMLLoader.createElement(FXMLLoader.java:2381)
  at javafx.fxml.FXMLLoader.processStartElement(FXMLLoader.java:2311)
  at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2131)

ちなみにScene Builderだと下のようにラベルが表示されない。コンポーネント1種類だけのっていない場合は実行するまで気付かないかもしれない。

a

 

 

スペルミスの場合(クラスパスが通っていない場合も同じだと思う)

エラーログ

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

<?import javafx.scene.control.Label2?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefWidth="100" prefHeight="40" xmlns:fx="http://javafx.com/fxml">
    <children>
        <Label2 text="Hello, World!" />
    </children>
</AnchorPane>

java.lang.ClassNotFoundException: javafx.scene.control.Label2
/C:/dev/pleiades43/workspace/firstclient/bin/jp/co/epea/firstclient/Hello.fxml
  at javafx.fxml.FXMLLoader.importClass(FXMLLoader.java:2455)
  at javafx.fxml.FXMLLoader.processImport(FXMLLoader.java:2299)

Scene Builderで開こうとするとClassNotFoundExceptionで怒られるのでこっちは多分気づく。

b

ファイル'C:\dev\pleiades43\workspace\firstclient\src\jp\co\epea\firstclient\Hello.fxml'のロード中にエラーが発生しました。
C:\dev\pleiades43\workspace\firstclient\src\jp\co\epea\firstclient\Hello.fxml:0: error: 
    java.lang.ClassNotFoundException: javafx.scene.layout.Label2