皆さんはオープンな Web を活用して RIA (Rich Internet Application) を作ろうとしている Java™ 開発者でしょうか?そうであるなら幸運です。JavaFX の力を借りれば、Java プラットフォームを活用して RIA を作成することができます。この記事では JavaFX を使ってマッシュアップを作成する方法を学びます。まずは JavaFX を利用して Flickr のような人気の Web サービスに接続する方法と対話型のユーザー・インターフェースを作成する方法を学びます。それらを学びながら、JavaFX がクライアント・サイドの開発にもたらす新機能の概要を理解しましょう。

Michael Galpin, Software architect, eBay

Galpin Michael photoMichael Galpin は 90年代後半から Web アプリケーションの開発に従事しています。彼は California Institute of Technology で数学の学位を取得しており、現在は、カリフォルニア州サンノゼにある eBay にアーキテクトとして勤務しています。



2009年 2月 10日

はじめに

この記事では JavaFX を使って RIA (Rich Internet Application) を作成します。JavaFX は RIA を作成するための単なる新技術であるだけでなく、新しいプログラミング言語でもあります。JavaFX は Java 言語の多くの要素を利用しており、実行するのも Java 仮想マシン上で行われます。JavaFX アプリケーションを作成するために Java プログラマーのエキスパートである必要はありませんが、Java をよく理解していると役立ちます。この記事では JavaFX SDK バージョン 1.0 を使用してコードを作成しており、その内容を実践するには JavaFX SDK と Java Development Kit が必要になります。また、コードのコンパイルと実行には JDK 1.6.0_07 を使用しました。ダウンロードのためのリンクに関しては「ダウンロード」セクションを参照してください。

JavaFX モデル

典型的なマッシュアップ・アプリケーションを作成しながら JavaFX について学びましょう。このアプリケーションは人気の写真共有サイトである Flickr の Web サービスを使用します。Flickr を検索して写真を見つけ、それらの写真を JavaFX アプリケーションに表示します。まず、Flickr Web サービスから得られるデータを JavaFX を使ってモデリングします。

JavaFX でモデリングする

Flickr は RESTful な Web サービスを提供しており、このサービスは (JavaFX コードを含めて) 任意のコードから呼び出すことができます。Flickr のサービスを呼び出すためには API キーが必要ですが、このキーは Flickr から無料で入手することができます。Flickr からのレスポンスのフォーマットは指定が可能です。デフォルトは XML であり、このアプリケーションでも XML を使用します。出力の例をリスト 1 に示します。

リスト 1. Flickr からの XML 出力の例
<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="132147" perpage="6" total="792880">
     <photo id="3196302982" owner="14994333@N08" secret="7c4e209fe9" 
server="3536" farm="4" title="Pond" ispublic="1" isfriend="0" isfamily="0" />
     <photo id="3196288734" owner="19764560@N00" secret="5142dd0a2d" server="3514" 
farm="4" title="Pull In Case Of Fire" ispublic="1" isfriend="0" isfamily="0" />
     <photo id="3195451611" owner="25304693@N00" secret="4ef1d2b63d" server="3528" 
farm="4" title="Domein Nieuwenhoven" ispublic="1" isfriend="0" isfamily="0" />
     <photo id="3196281786" owner="51865294@N00" secret="bed01bff0c" server="3403" 
farm="4" title="Uitdam skyline" ispublic="1" isfriend="0" isfamily="0" />
     <photo id="3196281752" owner="27734999@N03" secret="a81c2e53a5" server="3301" 
farm="4" title="IMG_7642" ispublic="1" isfriend="0" isfamily="0" />
     <photo id="3196281596" owner="51865294@N00" secret="c0f18f3aef" server="3510" 
farm="4" title="Warm scene on a cold day" ispublic="1" isfriend="0" isfamily="0" />
</photos>
</rsp>

リスト 1 を見るとわかるように、それぞれの写真には id、secret、server、farm、title といった重要な属性があります。これらのうち最初の 4 つの属性が画像の URL を作成するために必要です。このオブジェクトは JavaFX を使って簡単にモデリングすることができます (リスト 2)。

リスト 2. Flickr の画像の JavaFX でのモデル
public class FlickrImage{
    var id:String;
    var secret:String;
    var server:String;
    var farm:String;
    var title:String;

    public function getUrl():String{
        "http://farm{farm}.static.flickr.com/{server}/{id}_{secret}.jpg"
    }
}

この簡単なクラスでは、JavaFX の構文の特徴がいくつか明らかにされています。var というキーワードは、JavaFX のインスタンス変数を記述するために使われます。後で説明するように、クラス宣言の中の各 var は、そのクラスのインスタンスを作成する際に名前付きパラメーターになります。そして JavaFX の型付けは静的であり、型が変数名の接尾辞として宣言されていることにも注目してください。

またこのクラスには getUrl という 1 つのメソッドがあります。JavaFX ではメソッドが関数として宣言され、メソッドの型付けも静的です。JavaFX には return キーワードがあり、その名前どおりの動作をしますが、このキーワードはオプションです。そのため return キーワードがないリスト 2 の場合には、この関数の最後の行、つまりストリング表現が返されます。JavaFX では中括弧を使って表現されたストリングのプレースホルダーにインスタンス変数が挿入されます。この型付けが静的であることに注目してください。つまり上記の例で「secret」のスペルを間違えたり、あるいは存在しないメソッドを呼び出したりすると、コンパイル時にエラーになります。

リスト 2 では、var にアクセス制御修飾子が付いていないことに注目してください。デフォルトで JavaFX のスクリプトは private なので、他のクラスから var にアクセスすることはできません。唯一のメソッドは public と宣言されているので、他のクラスはこのメソッドを利用することができます。これで Flickr から得られる画像をモデリングするためのクラスが完成したので、あとはこれらのクラスに入れるデータを得るための手段が必要なだけです。そのためには Flickr の Web サービスを呼び出す必要があります。

Web サービスを呼び出す

JavaFX アプリケーションは Web サービスをリモートから呼び出すことができます。javafx.io.http パッケージには Web サービスを非同期で呼び出すためのクラスが含まれています。これらのクラスは Web サービスを呼び出すために Java のネットワーク・スタックを利用しますが、この点は Web ブラウザーを利用してリモート呼び出しを行う他の RIA 技術と JavaFX との重要な違いです。下記リスト 3 に示すのは、そうした JavaFX のサンプル・アプリケーションであり、Flickr の Web サービスにアクセスしてデータを取得するアプリケーションのモデルです。

リスト 3. データにアクセスするコードを持つモデル
var pics:FlickrImage[] = [];

public class Model {
    public var tag:String;
    public var onSuccess: function(FlickrImage[]):Void;

    public function searchFlickr(){
        delete pics;
        var url=
            
"http://api.flickr.com/services/rest/?method=flickr.photos.
search&per_page=6&api_key={API_KEY}&tags={tag}";
        var req = HttpRequest{
            location : url
            onInput: function(stream:InputStream){
                parser.input = stream;
                parser.parse();
                onSuccess(images);
            }
        }
        req.enqueue();
    }
    
    def API_KEY = "Put Your API Key Here";
    var images:FlickrImage[] = bind pics;
}

このコードには JavaFX 言語の重要機能がさらにいくつか示されています。Model クラスには 2 つの public な var があります。そのうちの 1 つは tag という単純なストリングです。このタグが Flickr への検索クエリーに使われます。もう一方の public な var である onSuccess は関数です。関数は JavaFX ではファーストクラス・オブジェクトです。onSuccess の宣言では、これが関数であり、この関数が入力パラメーターとして FlickrImage オブジェクトの配列を取り、何も返さない (Void) ことを表しています。このパラメーターに渡されるすべての関数はこのシグニチャーに従う必要があり、シグニチャーが一致しないとコンパイル・エラーが発生します。

この 2 の public な var は、どちらも searchFlickr という public な関数の中で使われます。ここでは HttpRequest クラスを使って Flickr Web サービスを呼び出します。HttpRequest のインスタンスを作成するための構文に注目してください。これは JavaFX の宣言型構文です。この場合には 2 つの名前付きパラメーターを HttpRequest のコンストラクターに渡しています。1 つのパラメーターは location というストリングであり、もう 1 つは onInput という関数です。パラメーターの名前と値のペアは name : value と表現されます。そこで、onInput パラメーターの場合には匿名関数を作成しています。JavaFX では型付けが静的であるため、onInput が関数を引数に取ること、そしてその関数が唯一の入力パラメーターとして java.io.InputStream を取り、戻り型が Void だということがわかります。上記のリスト 3onInput メソッドは parser オブジェクトに InputStream を渡してから onSuccessメソッドを呼び出し、この onSuccessメソッドが Model インスタンスに渡されます。最後に、HttpRequest を作成した後、HttpRequest の enqueue メソッドを呼び出します。こうすることで JavaFX ランタイムに対して、空きスレッドが得られ次第 enqueue メソッドを呼び出すように指示されます。アプリケーションのメイン・スレッドを使ってリモート呼び出しを行ってはいけません (リモート・サーバーで応答を待つ間アプリケーションが応答しなくなります)。

Model クラスと searchFlickr メソッドの中には、まだ触れていない内容がいくつかあることにお気づきかと思います。パーサー・コードの説明に入る前に、それらを説明しておきます。Model クラスには images という FlickrImage オブジェクトの配列 (シーケンス) があります。これらのオブジェクトは pics というスクリプト・レベルの配列にバインドされています。データ・バインディングは JavaFX の重要な一部であり、データ・バインディングによって 1 つのオブジェクトの変更が他のオブジェクトへと伝播します。この場合には、pics に対するすべての変更は images に伝播します。searchFlickr メソッドの一番最初の行では JavaFX のキーワード delete を使って pics シーケンスからデータをクリアーしています。最後に、def API_KEY と宣言しているところに注目してください。こうすることで API_KEY を定数にしています。これで Model クラスのすべてを説明したので、今度は Flickr から返ってくるデータの構文解析方法に移りましょう。

JavaFX での XML の構文解析

先ほどリスト 3 で、parser が参照されていること、そして java.io.InputStream が parser に渡されていることがわかりました。Java のコア・クラスを JavaFX と混在させることは極めて一般的なことです。この場合は InputStreamjavafx.data.pull.PullParser に渡しています。これは Java の StAX パーサーと似ています。javafx.data.pull.PullParser を使うと (SAX スタイルの構文解析と同様に) パーサーからイベントのストリームを受信することができますが、必要なイベントのみを「pull」することでイベントのフローを制御することができます。JavaFX の PullParser は、(Web サービスで最も一般的な 2 つのフォーマットである) XML データと JSON データの両方に対して同じように有効に動作します。そのため、JavaFX はこの記事で作成するようなマッシュアップに非常に適したものになっています。リスト 4 は Flickr から取得した XML を構文解析するためのコードを示しています。

リスト 4. JavaFX で XML を構文解析する
def ID = QName {
    name : "id"
}
def SECRET = QName{
    name : "secret"
}
def SERVER = QName{
    name : "server"
}
def FARM = QName{
    name : "farm"
}
def TITLE = QName{
    name : "title"
}

def parser = PullParser{
    documentType : PullParser.XML
    onEvent : function(event:Event){
        if (event.type == PullParser.START_ELEMENT){
            if (event.qname.name.equals("photo")){
                var image = FlickrImage{
                    id : event.getAttributeValue(ID)
                    secret : event.getAttributeValue(SECRET)
                    server : event.getAttributeValue(SERVER)
                    farm : event.getAttributeValue(FARM)
                    title : event.getAttributeValue(TITLE)
                }
                insert image into pics;
            }
        }
    }
}

リスト 4 のコードを見て最初に気付くことは、いくつかの QName オブジェクトを定義していることです。これらは XML における修飾名であり、Flickr から返される XML の中にある属性の修飾名を表しています。ご想像のとおり、JavaFX の QName クラスを使うと、名前を指定する際に名前空間と接頭辞を使うことができます。Flickr の XML (リスト 1) では名前空間を使わないので、リスト 4 の場合、必要なものは QNames に対する単純な名前のみです。

PullParser インスタンスは JavaFX の宣言構文を使って作成されます。これはおなじみのはずです。リスト 4 では単純に、documentType プロパティーを設定することで XML を構文解析しています。次に onEvent プロパティーに匿名関数 (クロージャー) を渡しています。単純に START_ELEMENT イベントを探し、この要素が “photo” であれば、その属性からデータを抽出し、そのデータを使って新しい FlickrImage インスタンスを作成します。このインスタンスは pics シーケンスに追加する必要がありますが、この処理を JavaFX の予約語である insert を使って行っていることに注目してください。insert は必ずシーケンスの最後に追加されます。最後に、すべての QNamesPullParser が def (つまり定数) で定義されていることに気付くと思います。これらも var (つまり変数) にすることはできますが、def とした方が適切です。これは Java で final と宣言することと似ています。

これで、データを処理するコードをすべて調べました。リモート Web サービスを呼び出す方法と、その Web サービスが返す XML を構文解析する方法を理解できたのではないでしょうか。今度は JavaFX がより適している、もっと華やかなユーザー・インターフェース・コードに移りましょう。


JavaFX による素晴らしい UI

2007年の JavaOne で JavaFX が最初に紹介されたとき、JavaFX はリッチなユーザー・エクスペリエンスを作るための技術と宣伝されました。JavaFX がもたらす UI の側面は常に強調されてきたため、UI の面で JavaFX が非常に優れていることは驚くにはあたりません。では、この記事のマッシュアップのユーザー・インターフェースを調べてみましょう。最初に、JavaFX のいくつかのコア・クラスを継承することがどれほど容易であるかを調べてみます。

JavaFX を継承する

このアプリケーションは Flickr の画像を表示する必要があるため、JavaFX の Image クラスと ImageView クラスが必要です。このワークフローは次のように単純です。FlickrImage オブジェクトを使って画像の URL を計算し、その URL を使って Image インスタンスを作成し、さらにその Image を使って ImageView オブジェクトを作成します。すると ImageView オブジェクトを (後ほど説明する) Scene に追加することができます。では、このロジックを新しいクラスでカプセル化しましょう (リスト 5)。

リスト 5. FlickrView
public class FlickrView extends ImageView{
    public var flickrImage:FlickrImage;
    init {
        this.image = Image { 
            url : flickrImage.getUrl()
        }
    }
}

これを見るとわかるように、FlickrView クラスは ImageView のサブクラスです。FlickrView クラスは flickrImage という新しい変数を追加しています。init メソッドは Java のコンストラクターに似ています。init メソッドはすべての変数が呼び出し側によって設定された直後に呼び出されます。この場合には init メソッドは FlickrImage インスタンスを使って Image インスタンスを作成しています (FlickrImage によって計算される URL を使っています)。JavaFX でのサブクラス化は単純であり、Java の場合とまったく同様です。コンストラクターも init ブロックを使えば簡単です。この FlickrView を使うと Flickr の画像を容易に表示することができます。これでユーザー・インターフェースの残り部分を作成する準備が整いました。

ユーザー・インターフェースを作成する

ここまで、新しいオブジェクトを作成するために JavaFX の宣言型の構文が多くの場所で使われるのを見てきました。この宣言型の構文は、開発者にとってとても都合がよいかもしれません。JavaScript プログラミングを大量に行ってきた人には、このスタイルのプログラミングはおなじみのはずであり、ユーザー・インターフェースを作成する際にこのスタイルの本領が発揮されます。このアプリケーションのメインのユーザー・インターフェースをリスト 6 に示します。

リスト 6. ユーザー・インターフェースのコード
Stage {
    title: "FlickrFX"
    width: 500
    height: 500
    scene: Scene {
        fill: LinearGradient {
            startX: 0.0, startY: 0.0, endX: 0.0, endY: 1.0
            proportional: true
            stops: [ Stop { offset: 0.0 color: Color.ORANGE },
                     Stop { offset: 1.0 color: Color.BLUE } ]
        }
        content: VBox{
            spacing : 50
            content : [
                HBox {
                    spacing : 20
                    content : bind topRow
                },
                HBox{
                    spacing : 10
                    content : [
                        Text {
                            font: Font {
                                size: 24
                            }
                            x: 10,
                            y: 30
                            content: "Tag"
                        },
                        input,
                        SwingButton {
                            text: "Search"
                            action: function() {
                                var model = Model {
                                   tag : input.text
                                   onSuccess : displayImages
                                }
                                model.searchFlickr();
                            }
                        }
                    ]

                },
                HBox {
                    spacing : 20
                    content : bind bottomRow
                }
            ]
        }
    }
}

リスト 6 のコードを見ると最初は圧倒されるかもしれませんが、実際は非常に単純なのです。それでは先頭から見てみましょう。Stage はこの場合、アプリケーションを表示するためのメインのウィンドウです。このコードは新しい javafx.stage.Stage インスタンスを作成します。まず、Stage インスタンスの変数 title に “FlickrFX” を設定し、変数 height と width にはいずれも 500 を設定します。ここで実行を停止すると、このアプリケーションの表示は図 1 のようになります。

図 1. 骨格のみの JavaFX アプリケーション
骨格のみの JavaFX アプリケーション

このアプリケーションはあまり面白いものではありませんが、これを見ると感覚はつかめるはずです。このコードは次に Stage インスタンスの変数 scene の設定をします (scene には javafx.scene.Scene クラスの新しいインスタンスを設定します)。Scene インスタンスで最初に行うことは、背景を塗りつぶすことです。この場合にはグラデーションをつけて塗りつぶします (そのために Scene インスタンスの変数 fill に javafx.scene.paint.LinearGradient の新しいインスタンスを設定します)。このグラデーションによって、最上部がオレンジで始まり、最下部が青で終わります。LinearGradient の startX、startY、endX、endY によってグラデーションの開始位置と終了位置が決まります。このグラデーションでは startX と endX は同じ値ですが、startY が 0.0 なのに対し、endY が 1.0 なので、色は垂直方向に変化します。最後に、LinearGradient の変数 stops に javafx.scene.paint.Stop オブジェクトの配列を設定します。こうしてオレンジと青の開始点が設定されます。グラデーションのコードが用意できると、アプリケーションの表示は図 2 のようになります。

図 2. 骨格のみのアプリケーションに色のグラデーションをつけたもの
骨格のみのアプリケーションに色のグラデーションをつけたもの

これで、少なくとも色がつきました。Scene インスタンスに対して他に設定するものは、Scene インスタンスの変数 content のみです。この変数には javafx.scene.Node オブジェクトを設定します。JavaFX では Node は抽象クラスであり、すべてのグラフィック・オブジェクトの基底クラスです。この場合は javafx.scene.layout.VBox インスタンスを作成します。VBox はコンテナーであり、コンテナーの内容を縦方向に最上部から最下部へとレイアウトします。ここでは変数 spacing を 50 に設定しているので、VBox に含まれる各オブジェクトは 50 ピクセルの間隔を置いて配置されます。

オブジェクトを VBox に追加するためには、VBox の変数 content に設定された Nodes のシーケンスの中にオブジェクトを追加します。この場合は 3 つの javafx.scene.layout.HBox インスタンスを作成します。HBox は名前からわかるように VBox と似ていますが、コンテナーの内容を水平方向に左から右へとレイアウトします。したがって 1 つの VBox の中に 3 つの HBox インスタンスを重ねることで柔軟なグリッドが得られます。

最上部と最下部の HBox インスタンスは別の 2 つのスクリプト変数 (topRow と bottomRow) にバインドされます。この場合にも JavaFX の強力なバインド構成体が使われています。topRow または bottomRow が変更されると必ず HBox インスタンスが変更され、ユーザー・インターフェースの該当部分が更新されます。では topRow と bottomRow には何を配置するのでしょう。そのコードをリスト 7 に示します。

リスト 7. グリッドの最上部の行と最下部の行
def LOGO = Image {
    url: "http://lh3.ggpht.com/_XmwdENwf53s/SW06N4aWEDI/AAAAAAAAAgo/
nXzkz7IBEnk/javafx.png"
}

var topRow = for (i in [1..3]) {
    ImageView{
        image: LOGO
        fitWidth : 150
        fitHeight : 150
        preserveRatio: true
        smooth: true
        cache: true
    }
}
var bottomRow = for (i in [1..3]) {
    ImageView{
        image: LOGO
        fitWidth : 150
        fitHeight : 150
        preserveRatio: true
        smooth: true
        cache: true
    }
}

ここでは JavaFX のもう 1 つの便利な機能を使っています。変数 topRow と bottomRow はループ式 (厳密には list comprehension (リストの内包表記)) を使って作成されています。これは JavaFX の便利な機能です。これと等価な Java コードは冗長なだけではなく、そのコードが何をしているのかがあまり明確ではありません。この場合は JavaFX の構文のおかげで、ImageView インスタンスのシーケンスを作成していること、そして各 ImageView インスタンスが LOGO という固定の Image インスタンスを使っていることが明確にわかります。

これでグリッドの最上部と最下部の行はわかりましたが、中間の行はどうなのでしょう。リスト 6 から、中間の行が「Tag」という表示のラベル (javafx.scene.text.Text のインスタンス) と、ボタンを作成することがわかります。このボタンは実は javafx.ext.swing.SwingButton のインスタンスです。JavaFX は Swing のオブジェクトの多くを活用していますが、JavaFX の便利な構文のおかげで、それらのオブジェクトを手軽に使うことができます。このボタンには「Search」と表示され、このボタンの変数 action はクロージャーに設定されています。これについては次のセクションで詳しく説明します。最後に、中間の行は input という別のスクリプト変数も参照しています。この変数は明示的に作成されるため、コードの他の部分 (つまりボタンの action クロージャーの中で) から参照することができます。この input 変数のコードの全体はリスト 8 のようになります。

リスト 8. iput コントロール
def input = SwingTextField {
    columns: 10
    editable: true
}

ボタンと同様、input も Swing ベースのコントロールです。この場合 input は javafx.ext.swing.SwingTextField のインスタンスです。これもまた def で定義されており、変化させることはできないので注意してください。これですべてのコントロールが用意できたので、このアプリケーションがどのように表示されるかを見てみましょう (図 3)。

図 3. 最初の UI が完成した様子
最初の UI が完成した様子

これですべての UI 要素が用意できました。このビューを、先ほど作成したモデルに接続することができます。そのためには制御用のコードが多少必要になります。このコードによってすべてを連結し、この RIA を対話型にします。


すべてを連結する: JavaFX での制御

先ほどのリスト 6 で、変数 action がインライン関数に設定されたボタンがありました。このボタンを詳しく調べてみましょう。この関数は入力オブジェクトからの変数 text の値を渡す Model インスタンス (リスト 3) と、displayImages という別の関数への参照を作成します。次に Model インスタンスの searchFlickr メソッドが呼び出されます。リスト 3 から、この displayImages 関数が呼び出されるのは、Flickr へのリモート呼び出しが完了し、その結果が構文解析されて FlickrImage オブジェクトになった時であるということがわかります。リスト 9 の displayImages 関数を見てください。

リスト 9. Flickr からの画像を表示する
function displayImages(images:FlickrImage[]){
    delete topRow;
    delete bottomRow;
    for (i in [1..3]){
        insert FlickrView {
            flickrImage : images[i-1]
            fitWidth : 150
            fitHeight : 150
            preserveRatio : true
            smooth : true
            rotate : 60*(i-2)
        } into topRow
    }
    for (i in [1..3]){
        insert FlickrView {
            flickrImage : images[i+2]
            fitWidth : 150
            fitHeight : 150
            preserveRatio : true
            smooth : true
            rotate : -60*(i-2)
        } into bottomRow
    }
}

JavaFX を使うことによって非常に簡潔なコードが作成されています。この displayImages 関数は topRow とbottomRow を削除し、これらのシーケンスの中にあるすべての Nodes をクリアーします。次にJavaFX の for ループを使って images オブジェクトに対して繰り返し処理を行います。各 FlickrImage インスタンスに対して FlickrView インスタンスが作成され、JavaFX の insert 文を使って topRow または bottomRow に追加されます。また、各 FlickrView インスタンスが変数 rotate も設定していることがわかると思います。rotate は Node の変数です (つまり任意のグラフィック・オブジェクトを回転することができます)。この変数は Node に適用するための回転角度です。こうすることで、画像を若干凝った配置にできるようになります (図 4)。

図 4. Flickr からの画像を表示する
Flickr からの画像を表示する

検索結果は (たとえ「toast」に対する検索であっても) 時間の経過と共に変化することを忘れないでください。リスト 9 を再度見てみると、各画像の変数 fitWidth と fitHeight が 150 に設定され、変数 preserveRatio が true に設定されていることがわかります。この結果が図 4 に表示されています。JavaFX ランタイムは画像を動的にリサイズします。高さと幅の上限は 150 ピクセルですが、縦横比は保持されるため、画像が歪むことはありません。


まとめ

この記事では JavaFX を使ってマッシュアップを作成しました。このマッシュアップをとおして、リモート Web サービスを呼び出す方法、そしてリモート・サービスから受信されるデータを構文解析する方法を説明しました。また JavaFX を使ってユーザー・インターフェースを作成する方法と、制御ロジックをユーザー・インターフェース要素に接続する方法を学びました。これらはマッシュアップを作成する上で最も一般的な作業であり、こうした作業を容易にするために JavaFX がどのように設計されているかを理解できたことと思います。これらの説明の中で、JavaFX の構文の重要な特徴の例をいくつか見てきました (型システム、クロージャーのサポート、シーケンス構文、強力なデータ・バインディング、そして宣言型の構文によるオブジェクトの作成など)。これで皆さんも JavaFX を利用して独自のマッシュアップをいつでも作成できるはずです。


ダウンロード

内容ファイル名サイズ
Mashup source codeFlickrFX.zip3KB

参考文献

学ぶために

製品や技術を入手するために

  • Java SDK: この記事では Java SE 1.6_05 を使用しています。
  • developerWorks からダウンロードできる IBM ソフトウェアの試用版を利用して皆さんの次期オープンソース開発プロジェクトを革新してください。
  • IBM 製品の試用版をダウンロードし、DB2 や Lotus、Rational、Tivoli、WebSphere などが提供するアプリケーション開発ツールやミドルウェア製品をお試しください。

議論するために

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=376203
ArticleTitle=JavaFX を使ってマッシュアップを作成する
publish-date=02102009