JavaFX 簡単 NetBeans6.5 で My Application を作成 その５
前回は、ボタンクリックのアクションによって、フリッカー画像の表示切り替えするアプリケーションの作成について、投稿いたしました。今回は、作成したアプリケーションを、 Applet として Web に公開する方法について、執筆して行きたいと思います。
もうアプリケーションの作成を始めていて、既にお気づきの方も、いらっしゃるとは思いますが、備忘録的に・・・。 NetBeans で、 JavaFX プロジェクトを作成すると、 auto-rebuild がオンになっているので、ファイルを更新する度に、 build プロセスが実行されます。さて build されると、その成果物として、何が出力されるのか？ 早速確認してみましょう。 NetBeans 左側ペインの、 "ファイル"タブをクリックし、該当するプロジェクトを展開し、その配下にある dist を展開してみます。
![[写真]](http://www3.atword.jp/jacksparrow/files/2009/02/its-very-easy-to-create-my-javafx-application-with-netbeans65-part5-1.jpg)
出力されたリソースは、 MyFlickr.html, MyFlickr.jar, MyFlickr.jnlp, MyFlickr_browser.jnlp の４つ、 Web 上に、 Applet として公開したい場合は、 MyFlickr.html に、自動生成された Java Applet を呼び出す為の、 JavaScript コードを、 html ファイルに実装することと、 html ファイルが格納されているカレントに、 MyFlickr_browser.jnlp と、 MyFlickr.jar を配備すれば、完了です。前回書き忘れましたが、自動生成された jnlp を、そのまま利用できる訳ではないので、注意が必要です。それではコードを見てみましょう。
<?xml version="1.0" encoding="UTF-8"?>上記コード中、赤太字で表記した部分、このままでは、 web 上存在しない URI となってしまうので、配備先の URI を、以下の様に修正する必要があります。
<jnlp spec="1.0+" codebase="file:/$NetBeansProjectsHome/MyFlickr/dist/" href="MyFlickr_browser.jnlp">
<information>
<title>MyFlickr</title>
<vendor>Captain Jack Sparrow</vendor>
<homepage href=""/>
<description>MyFlickr</description>
<offline-allowed/>
<shortcut>
<desktop/>
</shortcut>
</information>
<resources>
<j2se version="1.5+"/>
<extension name="JavaFX Runtime" href="http://dl.javafx.com/javafx-rt.jnlp"/>
<jar href="MyFlickr.jar" main="true"/>
</resources>
<applet-desc name="MyFlickr" main-class="com.sun.javafx.runtime.adapter.Applet" width="550" height="446">
<param name="MainJavaFXScript" value="myflickr.StoneBurg">
</applet-desc>
</jnlp>
<jnlp spec="1.0+" codebase="http://My JNLP URI/" href="MyFlickr_browser.jnlp">修正が完了したら、 html, jar, jnlp ファイルを、自分が公開する web サーバーの配備先へ、アップロードします。これで公開は完了となります。（因に私は、 MyFlickr.html ファイルを、 index.html に変更して公開しました。）
配備が完了したら、早速 Web ブラウザーを使って、アクセスして見ましょう。と言いたいところなのですが、私の環境は Mac OS X なので、未だ Java Quick Starter が入っていない・・・ (T_T)
已む無く↓
![[写真]](http://www3.atword.jp/jacksparrow/files/2009/02/error4-600x450.jpg)
ここから先は、 Windows XP の FireFox3 にて、動作確認します。 Web ブラウザーを開いて、配備先の URL を入力して画面を表示します。画面が表示された後、 alt キーを押しながら、画像パネルをクリックして、ブラウザーからはがしてみましょう。動作確認を行った結果は、以下のスクリーンキャストの通りです。
因に今回作成した JavaFX Applet は、こちらで、ご試しになれます。どうぞご覧下さい。（ 7 枚の画像ファイルを、 flickr からロードする為、表示にやや時間がかかります・・・σ(^_^;)ｱｾ）
如何でしたでしょうか？ NetBeans を利用すると、とても簡単にアプリケーションの作成と、 Web への配備ができてしまいますね。何か気が利いたアプリケーションなど作成した後、 Vector などに登録せずとも、自分の Web サイト上に、簡単に配布できるのが良いですね (*｀д´)b goo♪ 皆さんも是非トライしてみて下さい。
Comments
Comment from yone098
Date: 2009 年 2 月 18 日, 2:14 AM
JavaFXは日本からどんどんアプリを作って公開して
盛り上げていけたらいいですね。
近々、JavaFXで作って発表したプレゼンツール公開しようと思います。
http://d.hatena.ne.jp/yone098/20090208/1234020946
Comment from jacksparrow
Date: 2009 年 2 月 18 日, 1:33 PM
> yone098 さん
コメントありがとうございます！
是非プレゼンツール、拝見させてください。楽しみにしてます。 (*｀д´)b goo♪
Pingback from jacksparrow » 日 JavaFX 簡単 NetBeans6.5 で My Application を作成 その７
Date: 2009 年 2 月 22 日, 11:10 PM
[...] 前回は、マウスポインターを動かすイベントを利用して、画像をマウスで動かす簡単なアプリケーションを作成しました。その時利用した Mouse イベントと、 bind の関係に関して、あまり詳述していなかった反省もあったので、今回はその bind と、マウスイベントにフォーカスして、執筆して行きたいと思います。 さて前回より出てきました "bind" 、一体何の為に利用するもの ｢(ﾟ～ﾟo) ? と、まだ知らない方もいるのではないかと思うので、簡単にご説明させて頂きます。 "bind" は、マウスをクリックしたり、マウスを動かしたりした時に発生したイベントと、同期する形で、画面に表示された各アイテムが持っている、表示座標や色等を格納しているエレメントの値を、変更させると言うものです。例えば前回の「その５」では、マウスポインターを動かした時のイベントに合わせて、マウスポインターから送られて行きた位置情報（横方向と縦方向）を、 ImageView の表示座標を指定する x, y に適用させると言うことをやっています。因にマウスイベントについて、私が今現在把握しているものは、以下８つになります。（これは NetBeans のパレットで確認することもできます。） イベント名内容 onMouseMoved : JavaFX アプリケーションで表示しているエレメント上で、マウスポインターを動かした時に発生するイベント onMouseEntered : JavaFX アプリケーションで表示しているエレメントに、マウスポインターをのせた時に発生するイベント onMouseExited : JavaFX アプリケーションで表示しているエレメントから、マウスポインターがはずれた時に発生するイベント onMouseClicked : JavaFX アプリケーションで表示しているエレメントに対して、マウスクリックした時に発生するイベント onMousePressed : JavaFX アプリケーションで表示しているエレメントに対して、マウスの左ボタンを押している時に発生するイベント onMouseReleased : JavaFX アプリケーションで表示しているエレメントに対して、マウスの左ボタンを離した時に発生するイベント onMouseDragged : JavaFX アプリケーションで表示しているエレメントに対して、マウスドラッグした時に発生するイベント onMouseWheelMoved : JavaFX アプリケーションで表示しているエレメントに対して、マウスホイールを動かした時に発生するイベント 以上になります。今回は、 onMouseClicked と、 bind の２つの機能を利用して、その５を投稿した時に作成したアプリケーションを改造し、写真をクリックすると、表示している写真を切り替えるアプリケーションを作成して行きます。 まず最初に、画面からボタンをはずし、 Stage のサイズを写真サイズの 500 × 375 に合わせる形で width, height の値をそれぞれ変更します。コードは以下のとおり : Stage { title: "My Favor Hamburg" width: 500 height: 397 scene: Scene { fill: Color.BLACK content: [ imageView ] } }次に、 変数 imageView の初期化値、 ImageView のネストに、パレットから onMouseClicked を、以下のスクリーンショットのように、ドラッグアンドドロップします。 展開されたコードに対して、 SwingButton のアクションで実装していたコードを追記します。追記したコードは以下のとおり : onMouseClicked: function( e: MouseEvent ):Void { index++; if(index > 6) { index = 0; } }次に、 image: imageList[index] としていた部分を、マウスクリックイベントによって、内容を変更する様にする為、 bind を追記します。追記したコードは以下のとおり : image: bind imageList[index];以上で実装作業は完了です。早速動かしてみましょう。動作した結果は、以下のスクリーンキャストの通りです。 今回のアプリケーションも、例によって例のごとく、 Web 上にアップしてあります。コマンドラインからお試し頂くには以下のコマンドを、プロンプトから入力して実行してください。 javaws http://www7.atpages.jp/torutuga/javafx/OnMouseClicked.jnlpブラウザから見る場合はこちらです。 如何でしたでしょうか？ 非常に簡単ですね！ 皆さんも是非お試し下さい。 [...]
Pingback from jacksparrow » JavaFX 簡単 NetBeans6.5 で My Application を作成 その１０
Date: 2009 年 3 月 6 日, 9:49 PM
[...] まずは描画するイメージ部分、その５のトピックにて、 Image のエレメント、 "url" には、 bind [...]
Write a comment