昨年のサンフランシスコでのJavaOneカンファレンスで、OracleはJavaFX 2.0テクノロジーを発表しました。 数日前、世界はJava FX 2.0ベータ版を見ました。 JavaFXは、Javaクライアントプラットフォームの進化における自然なステップです。 このテクノロジーは、機能豊富で魅力的なアプリケーションを作成するためのクロスプラットフォームツールを開発者に提供します。
Javaテクノロジに組み込まれたJavaFXは、ハードウェアグラフィックアクセラレータと、コントロール、グラフ、マルチメディア、統合ブラウザなどの新しいコンポーネントの幅広い選択をサポートする、豊富なグラフィックとメディアAPIを提供します。
JavaFX 2.0の明らかな利点の1つは、新しいテクノロジーを探さなくてもアプリケーションを作成できること、使い慣れた開発ツールを使用できること、そしてもちろん、Javaのすべての従来の利点です。 企業の場合-サーバー側とクライアント側でJavaテクノロジーを使用すると、統合のリスクが軽減されます。
マイナス面：残念ながら、ベータ版はWindows専用にリリースされましたが、サポートされているプラットフォームのリリースは拡大します。
しかし、100回聞くよりも1回見る方が良いです。
Macスタイルのボタンでタスクバーを一緒に書いてみましょう
最初のステップは、JavaFXをインストールすることです。 最も簡単な方法は、NetBeansプラグイン（ http://www.oracle.com/technetwork/java/javafx/downloads/index.html ）をダウンロードすることです。これには、JavaFX2.0、サンプル、テンプレートが含まれます。 NetBeansを使用しない場合は、同じリンクからSDKをダウンロードし、jfxrt.jarをライブラリとしてプロジェクトに接続します。
そのため、アイコンのセットを持つ最も単純なウィンドウを作成します。 詳細はコメントに記載されています。
// JavaFX Application public class FXUIDemo extends Application { public static void main(String[] args) { // -- FX Application.launch(args); } private HBox taskbar; @Override public void start(Stage stage) { // stage stage.setTitle("FX Demo"); // , layout manager BorderPane root = new BorderPane(); Scene scene = new Scene(root, 720, 550, Color.LIGHTGRAY); stage.setScene(scene); // layout - -- horizontal box taskbar = new HBox(10); taskbar.setPadding(new Insets(10, 30, 50, 30)); taskbar.setPrefHeight(150); taskbar.setAlignment(Pos.CENTER); root.setBottom(taskbar); // for (int i = 0; i < 5; i++) { ImageView node = new ImageView(new Image(getClass().getResource("icon-" + i + ".png").toString())); taskbar.getChildren().add(node); } stage.setVisible(true); } }
このコードの結果は次のとおりです。
次に、ボタンを復活させます。
これを行うには、別の方法で作成を選択し、マウスを押したときにアニメーション、ボタンのクリックの反射およびアニメーションを追加します。
この場合、アニメーションはScaleTransitionクラスによって実行されます。 次のようになります。
ScaleTransition animationGrow = new ScaleTransition(Duration.valueOf(300), node); animationGrow.setToX(1.3); animationGrow.setToY(1.3); animationGrow.play();
このコードでは、300msでノードオブジェクトが最初のオブジェクトの1.3倍になることをScaleTransitonに示します。 これ以上は必要ありません。ScaleTransitionクラスはすべての中間値を計算し、ノード自体をオブジェクトに適用します。 必要に応じて、値、FPS、およびその他のパラメーターの変化の滑らかさを制御できます。
JavaFXオブジェクトの他のプロパティ（サイズ、位置、傾斜角、透明度など）に基づいたアニメーションでは、同様の遷移クラスのセットを使用できます。
次に、反射を追加します。
node.setEffect(new Reflection());
基本設定は完全に私たちに合うので、エフェクトコンストラクター以外を呼び出す必要はありません。
マウスハンドラーを追加すると、createButton（）関数は次のようになります。
private static final double SCALE = 1.3; // private static final double DURATION = 300; // private Node createButton(String iconName, final Runnable action) { // final ImageView node = new ImageView(new Image(getClass().getResource(iconName).toString())); // final ScaleTransition animationGrow = new ScaleTransition(Duration.valueOf(DURATION), node); animationGrow.setToX(SCALE); animationGrow.setToY(SCALE); // final ScaleTransition animationShrink = new ScaleTransition(Duration.valueOf(DURATION), node); animationShrink.setToX(1); animationShrink.setToY(1); // final Reflection effect = new Reflection(); node.setEffect(effect); // node.setOnMouseClicked(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { action.run(); } }); // node.setOnMouseEntered(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { node.toFront(); animationShrink.stop(); animationGrow.playFromStart(); } }); // -- node.setOnMouseExited(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { animationGrow.stop(); animationShrink.playFromStart(); } }); return node; }
次に、ボタンクリックハンドラーを追加しましょう。 Mackタスクバーでは、短時間暗くなります。 この動作を実装するには、ColorAdjustエフェクトとTimelineクラスを使用します。 通常、タイムラインは、トランジション機能のないアニメーションの問題を解決するために使用されます。 開発者はタイムラインを使用して、オブジェクトのどのプロパティが時間とともに変化するかを選択し、キーポイントを設定できます。 ただし、現時点では、Timelineをタイマーとして使用してエフェクトをキャンセルするように制限しています。
// final ColorAdjust effectPressed = new ColorAdjustBuilder().brightness(-0.5).build(); node.setOnMouseReleased(new EventHandler<MouseEvent>() { public void handle(MouseEvent event) { // . : , // , input effect.setInput(effectPressed); // Timeline, 300 . new TimelineBuilder().keyFrames(new KeyFrame(Duration.valueOf(300), new EventHandler<ActionEvent>() { public void handle(ActionEvent event) { effect.setInput(null); } })).build().play(); action.run(); } });
タイムラインとColorAdjustがビルダーテンプレートを使用して作成されたことは注目に値します。 同様のビルダーが、ほぼすべてのJavaFX2.0オブジェクトに追加されました。これにより、よりコンパクトなコードを記述し、不要な変数の使用を回避できます。
それが私たちが得たものです。 画像では、カーソルは4番目のボタンの上にあります。 残念ながら、スクリーンショットにはアニメーションが表示されないため、自分で試してみてください。
しかし、私たちはそこで止まりません。 ボタンのアイコンはランダムに選択されたわけではなく、さらに各ボタンに対応するJavaFXコンポーネントを追加します。
まず、シーンに新しいコンポーネントを配置する場所を追加します。
// StackPane -- layout manager, StackPane view = new StackPane(); root.setCenter(view); view.getChildren().add(new Text("Hello from JavaFX..."));
次に、ボタンの作成サイクルを消去し、意味のあるクリックハンドラーとともに一度に1つずつ作成します。
したがって、最初のボタンはメディアファイルです。
start（）関数の本文に1行追加してMedia Playerを作成し、createButton（）関数を呼び出して開始します。
mediaPlayer = new MediaPlayer(new Media("http://webcast-west.sun.com/oow2010.flv")); taskbar.getChildren().add(createButton("icon-0.png", new Runnable() { public void run() { changeView(new MediaView(mediaPlayer)); mediaPlayer.play(); } }));
後続のボタンをクリックするためのハンドラーのコードを削減するために、changeView（）関数が追加され、mediaPlayerおよびビュー変数がレンダリングされました。
private StackPane view; private MediaPlayer mediaPlayer; private void changeView(Node node) { view.getChildren().clear(); // view mediaPlayer.stop(); // , view.getChildren().add(node); // view }
取得します
2番目のボタンはグラフィックです。
JavaFX2.0では、6種類のグラフが追加されました。 詳細は、SDKに同梱されているChartsSamplerデモアプリケーションにあります。
2番目のボタンをクリックして、折れ線グラフを作成します。
これには、メディアプレーヤーの場合よりも少し多くのコードが必要です。 座標軸を調整し、グラフのすべての要素に名前を付け、そしてもちろん、グラフのデータを作成する必要があります。
それでも、これはすべて15〜20行のコードに収まります。
taskbar.getChildren().add(createButton("icon-1.png", new Runnable() { public void run() { // NumberAxis xAxis = new NumberAxis(); NumberAxis yAxis = new NumberAxis(); // LineChart<Number, Number> chart = new LineChart<Number, Number>(xAxis, yAxis); chart.setTitle("Basic LineChart"); xAxis.setLabel("X Axis"); yAxis.setLabel("Y Axis"); // XYChart.Series<Number, Number> series = new XYChart.Series<Number, Number>(); series.setName("Random Data"); Random random = new Random(); for (int i = 0; i < 10 + random.nextInt(20); i++) { series.getData().add(new XYChart.Data<Number, Number>(10 * i + 5, random.nextDouble() * 120)); } chart.getData().add(series); changeView(chart); } }));
使用していませんが、グラフは既にアニメーション化されており、新しい要素を追加すると古いデータがスムーズに移動することに注意してください。
次のボタンには、面白い名前のアコーディオンを持つ別の新しいコントロールを掛けます。 これはスライドパネルのセットであり、最近ではかなり一般的なインターフェイス要素です。
taskbar.getChildren().add(createButton("icon-2.png", new Runnable() { public void run() { Accordion accordion = new Accordion(); for (int i = 0; i <= 4; i++) { TitledPane t1 = new TitledPane(new Label("Image " + i), new ImageView(new Image(getClass().getResource("icon-" + i + ".png").toString()))); accordion.getPanes().add(t1); } changeView(accordion); } }));
スクリーンショットでは、残念ながら、アニメーションは再び表示されません。パネルは突然開くのではなく、スムーズかつ美しく開きます。
4番目のボタン：WebView-組み込みブラウザー。 このコンポーネントは、CSS、JavaScript、DOM、およびHTML5をサポートする完全なWebKitベースのブラウザーを提供します。
追加する
taskbar.getChildren().add(createButton("icon-3.png", new Runnable() { public void run() { WebView web = new WebView(new WebEngine("http://habrahabr.ru")); changeView(web); } }));
JavaFX内のhabrahabr.ruを参照してください。
最後に、最後の5番目のボタンについて、JavaFX2.0の2つの優れた機能（バインディングとCSSスタイル）を残しました。
バインドを使用すると、ほとんどすべての2つのJavaFXオブジェクトのプロパティをバインドできます。 開発者は、リスナーの作成と同期について心配する必要はありません。プロパティをバインドするコードを1行書くだけです。 たとえば、次のように：
Slider slider = new Slider(); Circle circle = new Circle(); circle.radiusProperty().bind(slider.valueProperty());
スライダーコントロールスライダーの位置を変更すると、サークルサークルの半径が自動的に変更され、サークルが再描画されます。
もちろん、バインディングは、通常の直接バインディングに限定されません。 数式の作成、データ型の変更、双方向バインディングの適用が可能ですが、これは別の記事のトピックです。
各JavaFXシーン要素には、クラスに組み合わせてCSSファイルで定義したり、直接設定したりできるスタイルもあります。
5番目のボタンのコンポーネントでは、これら2つの機能を組み合わせます。コンポーネントのさまざまなスタイルのリストコンポーネントを作成し、バインディングを通じて、タスクバーのスタイルを選択したリストアイテムに関連付けます。
taskbar.getChildren().add(createButton("icon-4.png", new Runnable() { public void run() { // ListView listView = new ListView(); // listView.setItems(FXCollections.observableArrayList( "-fx-background-color: green;", "-fx-background-color: linear (0%,0%) to (100%,100%) stops (0.0,aqua) (1.0,red);", "-fx-background-color: transparent;", "-fx-opacity: 0.3;", "-fx-opacity: 1;")); // binding taskbar.styleProperty().bind(listView.getSelectionModel().selectedItemProperty()); changeView(listView); } }));
たとえば、ここでは、バックグラウンドにグラデーションが付いたタスクバーのように見えます。
以上です。 200行未満のコードを記述し、非常に優れたUIサンプルを作成しました。
結論として、いくつかのリンク：
-記事のアプリケーションコード： http : //www.javaone.ru/data/FXUIDemo.zip
-アプリケーションが動作しているビデオ： http : //www.youtube.com/watch?v=IHhA8G-0C9M
-http://download.oracle.com/javafx/に、主な機能の概要を記載した記事があります
-さらに、SDKおよびNetbeansバンドルには、ソースとともにデモアプリケーションが含まれています。 特に興味深いはずです：
-Ensemble-組み込みのjavadocとコードビューを備えたサンプルの膨大なコレクション。
-ChartsSampler-チャートの機能のデモであり、非常に珍しい。
記事はセルゲイ・グリネフとアレクサンダー・ベロクリロフによって作成されました