Javafx-quick-guide
JavaFX-概要
- リッチインターネットアプリケーション*は、デスクトップアプリケーションと同様の機能とエクスペリエンスを提供するWebアプリケーションです。 これらは、ユーザーに通常のWebアプリケーションと比較した場合、より優れた視覚体験を提供します。 これらのアプリケーションは、ブラウザのプラグインまたは仮想マシンとして提供され、従来の静的アプリケーションをより強化された、流動的でアニメーション化された魅力的なアプリケーションに変換するために使用されます。
従来のデスクトップアプリケーションとは異なり、RIAは実行するために追加のソフトウェアを必要としません。 別の方法として、アプリケーションに応じてActiveX、Java、Flashなどのソフトウェアをインストールする必要があります。
RIAでは、リッチグラフィックスをサポートするプラグインがあるため、グラフィカルプレゼンテーションはクライアント側で処理されます。 簡単に言えば、RIAでのデータ操作はサーバー側で実行され、関連するオブジェクト操作はクライアント側で実行されます。
RIAを開発できる3つの主要な技術があります。 これらには以下が含まれます-
- アドビフラッシュ
- マイクロソフトシルバーライト
- JavaFX
アドビフラッシュ
このソフトウェアプラットフォームは、アドビシステムズによって開発され、リッチインターネットアプリケーションの作成に使用されます。 これらに加えて、ベクター、アニメーション、ブラウザゲーム、デスクトップアプリケーション、モバイルアプリケーション、ゲームなど、他のアプリケーションを構築することもできます。
これは、デスクトップブラウザの普及率が96％のRIAを開発および実行するために最も一般的に使用されるプラットフォームです。
マイクロソフトシルバーライト
Adobe Flashと同様に、Microsoft Silverlightもリッチインターネットアプリケーションを開発および実行するためのソフトウェアアプリケーションフレームワークです。 当初、このフレームワークはストリーミングメディアに使用されていました。 現在のバージョンは、マルチメディア、グラフィックス、およびアニメーションもサポートしています。
このプラットフォームは、デスクトップブラウザーの普及率66％で使用されることはほとんどありません。
JavaFX
JavaFXは、リッチインターネットアプリケーションを開発できるJavaライブラリです。 Javaテクノロジーを使用することにより、これらのアプリケーションのブラウザー普及率は76％です。
JavaFXとは何ですか？
JavaFXは、リッチインターネットアプリケーションの構築に使用されるJavaライブラリです。 このライブラリを使用して記述されたアプリケーションは、複数のプラットフォームで一貫して実行できます。 JavaFXを使用して開発されたアプリケーションは、デスクトップコンピューター、携帯電話、テレビ、タブレットなどのさまざまなデバイスで実行できます。
Javaプログラミング言語を使用して* GUIアプリケーション*を開発するために、プログラマは Advanced Windowing Toolkit や Swing などのライブラリに依存しています。 JavaFXの登場後、これらのJavaプログラマーはリッチコンテンツを使用してGUIアプリケーションを効果的に開発できるようになりました。
JavaFXの必要性
豊富な機能を備えた*クライアントサイドアプリケーション*を開発するために、プログラマはさまざまなライブラリに依存して、メディア、UIコントロール、Web、2D、3Dなどの機能を追加していました。 JavaFXには、これらすべての機能が1つのライブラリに含まれています。 これらに加えて、開発者は Swing などのJavaライブラリの既存の機能にアクセスすることもできます。
JavaFXは、豊富なグラフィックスとメディアAPIのセットを提供し、ハードウェアアクセラレーショングラフィックスを通じて最新の Graphical Processing Unit を活用します。 JavaFXは、開発者がグラフィックアニメーションとUIコントロールを組み合わせるためのインターフェイスも提供します。
JavaFXは、Java、Groovy、JRubyなどのJVMベースのテクノロジーで使用できます。 開発者がJavaFXを選択する場合、上記の技術のいずれかの予備知識がJavaFXを使用してRIAを開発するのに十分であるため、追加の技術を学ぶ必要はありません。
JavaFXの機能
以下は、JavaFXの重要な機能の一部です-
- * Javaで記述*-JavaFXライブラリはJavaで記述されており、 Java、Groovy、JRuby など、JVMで実行できる言語で使用できます。 これらのJavaFXアプリケーションもプラットフォームに依存しません。
- FXML -JavaFXは、宣言型マークアップ言語のようなHTMLであるFXMLとして知られる言語を特徴としています。 この言語の唯一の目的は、ユーザーインターフェイスを定義することです。
- Scene Builder -JavaFXはScene Builderという名前のアプリケーションを提供します。 このアプリケーションをEclipseやNetBeansなどのIDEに統合すると、ユーザーはドラッグアンドドロップデザインインターフェイスにアクセスでき、FXMLアプリケーションの開発に使用できます（Swing Drag＆DropやDreamWeaver Applicationsと同様）。
- * Swing相互運用性*-JavaFXアプリケーションでは、 Swing Node クラスを使用してSwingコンテンツを埋め込むことができます。 同様に、既存のSwingアプリケーションを、埋め込みWebコンテンツやリッチグラフィックメディアなどのJavaFX機能で更新できます。
- ビルトインUIコントロール-JavaFXライブラリは、フル機能のアプリケーションを開発できるUIコントロールを提供します。
- *スタイリングのようなCSS *-JavaFXはスタイリングのようなCSSを提供します。 これを使用することにより、CSSの簡単な知識でアプリケーションの設計を改善できます。
- キャンバスおよび印刷API *-JavaFXは、レンダリングモードの即時モードスタイルであるCanvasを提供します。 パッケージ *javafx.scene.canvas 内には、キャンバスのクラスのセットが含まれており、これを使用してJavaFXシーンの領域内に直接描画できます。 JavaFXは、パッケージ javafx.print で印刷用のクラスも提供します。
- 豊富なAPIセット-JavaFXライブラリは、GUIアプリケーション、2Dおよび3Dグラフィックスなどを開発するための豊富なAPIセットを提供します。 このAPIのセットには、Javaプラットフォームの機能も含まれています。 したがって、このAPIを使用して、Generics、Annotations、Multithreading、Lambda ExpressionsなどのJava言語の機能にアクセスできます。 従来のJavaコレクションライブラリが強化され、監視可能なリストやマップなどの概念が含まれていました。 これらを使用して、ユーザーはデータモデルの変更を観察できます。
- 統合グラフィックスライブラリ-JavaFXは 2d および 3d グラフィックスのクラスを提供します。
- グラフィックスパイプライン-JavaFXは、Prismとして知られるハードウェアアクセラレーショングラフィックスパイプラインに基づいたグラフィックスをサポートします。 サポートされているグラフィックカードまたはGPUで使用すると、スムーズなグラフィックを提供します。 システムがグラフィックカードをサポートしていない場合、プリズムはデフォルトでソフトウェアレンダリングスタックになります。
JavaFXの歴史
JavaFXは、もともと Chris Oliver が See Beyond Technology Corporation という会社で働いていたときに開発したもので、2005年に Sun Microsystems に買収されました。
次のポイントは、このプロジェクトの詳細情報を提供します-
*当初、このプロジェクトはF3* （Form Follows Functions）*と名付けられ、GUIアプリケーションを開発するための豊富なインターフェイスを提供することを目的として開発されました。
* *Sun Microsystems* は2005年6月にSee Beyond社を買収し、F3プロジェクトを *JavaFX* として採用しました。
* 2007年、JavaFXは *Java One* （毎年開催される世界規模のWeb会議）で公式に発表されました。
* 2008年には、JavaFXと統合された *Net Beans* が利用可能になりました。 同じ年に、JavaFX 1.0用のJava *Standard Development Kit* がリリースされました。
* 2009年、Oracle CorporationはSun Microsystemsを買収し、同じ年にJavaFXの次のバージョン（1.2）もリリースされました。
* 2010年にJavaFX 1.3がリリースされ、2011年にJavaFX 2.0がリリースされました。
* 最新バージョンのJavaFX8は、2014年3月18日にJavaの不可欠な部分としてリリースされました。JavaFX-環境
Java8以降、JDK （Java Development Kit）*には *JavaFX ライブラリが含まれています。 したがって、JavaFXアプリケーションを実行するには、システムにJava8以降のバージョンをインストールするだけです。
それに加えて、EclipseやNetBeansのようなIDEはJavaFXのサポートを提供します。 この章では、さまざまな方法でJavaFXアプリケーションを実行するための環境の設定方法について説明します。
Java8のインストール
まず、コマンドプロンプトを開き、コマンド「Java」を入力して、システムにJavaがインストールされているかどうかを確認する必要があります。
システムにJavaをインストールしていない場合、コマンドプロンプトには次のスクリーンショットに示すメッセージが表示されます。
次に、以下の手順に従ってJavaをインストールします。
ステップ1 *-https://www.oracle.com/technetwork/java/javase/downloads/indexl[JavaSE Downloads]ページにアクセスし、次のスクリーンショットで強調表示されているJDK *Download ボタンをクリックします。
- ステップ2 *-[ダウンロード]ボタンをクリックすると、[Java SE Development Kit 8ダウンロード]ページにリダイレクトされます。 このページには、さまざまなプラットフォーム用のJDKのリンクがあります。
ライセンス契約に同意し、それぞれのリンクをクリックして必要なソフトウェアをダウンロードします。
たとえば、Windows 64ビットオペレーティングシステムで作業している場合は、次のスクリーンショットで強調表示されているJDKバージョンをダウンロードする必要があります。
Java SE Development Kit 8ダウンロードページ
強調表示されたリンクをクリックすると、Windows 64ビットオペレーティングシステムに適したJava8 Development Kitがシステムにダウンロードされます。
- ステップ3 *-ダウンロードしたバイナリ実行可能ファイルを実行して、JDK8のインストールを開始します。
Java SE Development Kit 8 Next
- ステップ4 *-インストールディレクトリを選択します。
- ステップ5 *-宛先フォルダーを選択して[次へ]をクリックすると、次のスクリーンショットに示すように、JavaFXインストールプロセスの進行状況バーが表示されます。
- ステップ6 *-必要に応じてインストールディレクトリを変更します。変更しない場合は、デフォルトのディレクトリをそのまま使用して、先に進みます。
- ステップ7 *-次のスクリーンショットに示すように、閉じるボタンをクリックしてインストールプロセスを完了します。
Windows用のパスのセットアップ
Javaをインストールした後、パス変数を設定する必要があります。 * C：\ Program Files \ java \ jdk1.8.0_91 *ディレクトリにJavaをインストールしたと仮定します。
今、あなたは以下に記載されている手順に従うことができます-
- 「マイコンピュータ」を右クリックして、「プロパティ」を選択します。
- 「詳細」タブの下の「環境変数」ボタンをクリックします。
- ここで、「Path」変数を変更して、Java実行可能ファイルへのパスも含まれるようにします。 たとえば、パスが現在「C：\ WINDOWS \ SYSTEM32」に設定されている場合、パスを「C：\ WINDOWS \ SYSTEM32」に変更します。 C：\ Program Files \ java \ jdk1.8.0_91 \ bin '
JavaFXのNetBeans環境の設定
*NetBeans8* は、JavaFXの組み込みサポートを提供します。 これをインストールすると、追加のプラグインまたはJARファイルなしでJavaFXアプリケーションを作成できます。 NetBeans環境をセットアップするには、以下に示す手順に従う必要があります。- ステップ1 *-https://netbeans.org/[NetBeans Webサイト] NetBeans Webサイトにアクセスし、[ダウンロード]ボタンをクリックしてNetBeansソフトウェアをダウンロードします。
ステップ2 *-*ダウンロード*をクリックすると、さまざまなJavaアプリケーション用のNetBeansバンドルを提供するNetBeansソフトウェアのダウンロードページが表示されます。 次のスクリーンショットに示すように、 *JavaSE 用のNetBeansソフトウェアをダウンロードします。
ステップ3 *-このボタンをクリックすると、 *netbeans-8.0-windows.exe という名前のファイルがシステムにダウンロードされます。 このファイルを実行してインストールします。 このファイルを実行すると、次のスクリーンショットに示すようにNetBeansインストーラーが起動します。
構成が完了すると、インストーラーの*ようこそページ*が表示されます。
- ステップ4 *-[次へ]ボタンをクリックして、インストールを続行します。
ステップ5 *-次のウィンドウには、 NETBEANS IDE 8.0ライセンス契約書があります*。 注意深く読み、「使用許諾契約の条項に同意します」のチェックボックスをオンにして契約に同意し、[次へ]ボタンをクリックします。
ステップ6 *-次のウィンドウで、 *Junit の使用許諾契約が表示されます。「使用許諾契約の条項に同意します、JUnitのインストール」のラジオボタンを選択して同意し、*次*をクリックします。
ステップ7 *-Netbeans 8.0をインストールする必要がある宛先ディレクトリを選択します。 さらに、システムの *Java Development Kit がインストールされているディレクトリを参照して、 Next ボタンをクリックすることもできます。
ステップ8 *-同様に、 *Glassfish Server のインストール先ディレクトリを選択します。 Java Development Kitディレクトリ（現在はGlassfishリファレンス）を参照し、[次へ]をクリックします。
- ステップ9 *-自動更新の[更新の確認]ボックスをオンにし、[インストール]ボタンをクリックしてインストールを開始します。
- ステップ10 *-このステップはNetBeans IDE 8.0のインストールを開始し、しばらく時間がかかる場合があります。
- ステップ11 *-プロセスが完了したら、[完了]ボタンをクリックしてインストールを完了します。
- ステップ12 *-NetBeans IDEを起動すると、次のスクリーンショットに示すような開始ページが表示されます。
ステップ13 *-ファイルメニューで、*新規プロジェクト …を選択して、次のスクリーンショットに示すように新規プロジェクトウィザードを開きます。
ステップ14 *-*新規プロジェクト*ウィザードで、 *JavaFX を選択し、*次*をクリックします。 新しいJavaFXアプリケーションの作成が開始されます。
ステップ15 *- *NewJavaFX Application ウィンドウでプロジェクトの名前とプロジェクトの場所を選択し、 Finish をクリックします。 指定された名前でサンプルアプリケーションを作成します。
この例では、 javafxsample という名前のアプリケーションが作成されます。 このアプリケーション内で、NetBeans IDEは Javafxsample.java という名前のJavaプログラムを生成します。 次のスクリーンショットに示すように、このプログラムはNetBeansソースパッケージ*→javafxsample *内に作成されます。
- ステップ16 *-ファイルを右クリックし、[ファイルを実行]を選択して、次のスクリーンショットに示すようにこのコードを実行します。
この自動的に作成されたプログラムには、「* Hay World」というラベルの付いたボタンを持つ単純なJavaFXウィンドウを生成するコードが含まれています。 このボタンをクリックするたびに、文字列 *Hello World がコンソールに次のように表示されます。
EclipseでのJavaFXのインストール
- e（fx）** clipseという名前のプラグインもJavaFXで利用できます。 次の手順を使用して、EclipseでJavaFXを設定できます。 まず、システムにEclipseがあることを確認してください。 そうでない場合は、システムにEclipseをダウンロードしてインストールします。
Eclipseがインストールされたら、以下の手順に従ってシステムに e（fx）clipse をインストールします。
ステップ1 *- *Help メニューでEclipseを開き、以下に示すように Install New Software …オプションを選択します。
クリックすると、次のスクリーンショットに示すように、 Available Software ウィンドウが表示されます。
このウィンドウの[操作]テキストボックスで、必要なソフトウェアのプラグインのリンクを指定する必要があります。
ステップ2 *-*追加…ボタンをクリックします。 プラグインの名前を e（fx）clipse として指定します。 次に、次のリンクを場所として提供します。 http://download.eclipse.org/efxclipse/updates-released/2.3.0/site/
- ステップ3 *-プラグインの名前と場所を指定した後、次のスクリーンショットで強調表示されている[OK]ボタンをクリックします。
ステップ4 *-プラグインを追加するとすぐに、 *e（fx）clipse – install および e（fx）clipse – single components の2つのチェックボックスが表示されます。 これらのチェックボックスを両方オンにして、次のスクリーンショットに示すように、[追加]ボタンをクリックします。
- ステップ5 *-次に、Eclipse IDEを開きます。 次のスクリーンショットに示すように、[ファイル]メニューをクリックし、[プロジェクト]を選択します。
Eclipse IDEの[ファイルメニューをクリック]
ステップ6 *-次に、プロジェクトを作成するためにEclipseが提供するウィザードのリストを表示できるウィンドウが表示されます。 *JavaFX ウィザードを展開し、 JavaFX Project を選択して、次のスクリーンショットに示すように Next ボタンをクリックします。
- ステップ7 *-*次*をクリックすると、新しいプロジェクトウィザードが開きます。 ここで、必要なプロジェクト名を入力し、*完了*をクリックできます。
ステップ8 *-[完了]をクリックすると、指定された名前（サンプル）でアプリケーションが作成されます。 *application という名前のサブパッケージに、 Main.java という名前のプログラムが次のように生成されます。
- ステップ9 *-この自動生成プログラムには、空のJavaFXウィンドウを生成するコードが含まれています。 このファイルを右クリックして、次のスクリーンショットに示すように、「実行」→「Javaアプリケーション」を選択します。
このアプリケーションを実行すると、次のように空のJavaFXウィンドウが表示されます。
注-コードの詳細については、後の章で説明します。
JavaFX-アーキテクチャ
JavaFXは、豊富なグラフィックスを備えたGUIアプリケーションを構築するための豊富なクラスとインターフェイスのセットを備えた完全なAPIを提供します。 このAPIの重要なパッケージは次のとおりです-
- javafx.animation -塗りつぶし、フェード、回転、拡大縮小、変換などの遷移ベースのアニメーションをJavaFXノードに追加するクラスが含まれています。
- javafx.application -JavaFXアプリケーションのライフサイクルを担当するクラスのセットが含まれています。
- javafx.css -CSSのようなスタイルをJavaFX GUIアプリケーションに追加するクラスが含まれています。
- javafx.event -JavaFXイベントを配信および処理するためのクラスとインターフェースが含まれています。
- javafx.geometry -2Dオブジェクトを定義し、それらに対して操作を実行するクラスが含まれています。
- javafx.stage -このパッケージには、JavaFXアプリケーションのトップレベルのコンテナクラスが含まれています。
- javafx.scene -このパッケージは、シーングラフをサポートするクラスとインターフェイスを提供します。 さらに、キャンバス、チャート、コントロール、エフェクト、画像、入力、レイアウト、メディア、ペイント、形状、テキスト、変換、Webなどのサブパッケージも提供します。 このJavaFXの豊富なAPIをサポートするコンポーネントがいくつかあります。
次の図は、JavaFX APIのアーキテクチャを示しています。 ここでは、JavaFX APIをサポートするコンポーネントを見ることができます。
シーングラフ
JavaFXでは、GUIアプリケーションはシーングラフを使用してコーディングされていました。 シーングラフは、GUIアプリケーションの構築の開始点です。 ノードと呼ばれる（GUI）アプリケーションプリミティブを保持します。
ノードは視覚的/グラフィカルなオブジェクトであり、それが含まれる場合があります-
- 幾何学的（グラフィック）オブジェクト-（2Dおよび3D）（円、長方形、多角形など）
- * UIコントロール*-ボタン、チェックボックス、選択ボックス、テキスト領域など。
- コンテナ-（レイアウトペイン）（境界ペイン、グリッドペイン、フローペインなど）
- メディア要素-オーディオ、ビデオ、画像オブジェクトなど。
一般に、ノードのコレクションはシーングラフを作成します。 これらのノードはすべて、以下に示すように階層順に配置されています。
シーングラフの各ノードには単一の親があり、親を含まないノードは*ルートノード*と呼ばれます。
同様に、すべてのノードには1つ以上の子があり、子のないノードは*リーフノード*と呼ばれます。子を持つノードは*ブランチノード*と呼ばれます。
ノードインスタンスは、シーングラフに1回だけ追加できます。 シーングラフのノードには、効果、不透明度、変換、イベントハンドラー、イベントハンドラー、アプリケーション固有の状態を設定できます。
プリズム
Prismは、JavaFXでグラフィックスをレンダリングするために使用される*高性能ハードウェア加速グラフィックパイプライン*です。 2Dおよび3Dグラフィックの両方をレンダリングできます。
グラフィックをレンダリングするために、Prismは以下を使用します-
- Windows XPおよびVista上のDirectX 9。
- Windows 7上のDirectX 11。
- MacおよびLinuxのOpenGL、組み込みシステム。
システム上のグラフィックスのハードウェアサポートが十分でない場合、Prismはソフトウェアレンダーパスを使用してグラフィックスを処理します。
サポートされているグラフィックカードまたはGPUで使用すると、よりスムーズなグラフィックを提供します。 システムがグラフィックカードをサポートしていない場合に備えて、Prismはデフォルトでソフトウェアレンダリングスタック（上記2つのいずれか）を使用します。
GWT（Glass Windowing Toolkit）
名前が示すように、GWTはWindows、タイマー、Surfaces、およびイベントキューを管理するサービスを提供します。 GWTはJavaFXプラットフォームをネイティブオペレーティングシステムに接続します。
量子ツールキット
これは、Prism、Glass、Media Engine、およびWeb Engineの低レベルコンポーネントを抽象化したものです。 PrismとGWTを結び付け、JavaFXで利用できるようにします。
WebView
JavaFXを使用して、HTMLコンテンツをシーングラフに埋め込むこともできます。 WebViewは、このコンテンツの処理に使用されるJavaFXのコンポーネントです。 内部のオープンソースWebブラウザーエンジンである Web Kit と呼ばれるテクノロジーを使用します。 このコンポーネントは、HTML5、CSS、JavaScript、DOM、SVGなどのさまざまなWebテクノロジーをサポートしています。
WebViewを使用すると、次のことができます-
- ローカルまたはリモートURLからHTMLコンテンツをレンダリングします。
- 履歴をサポートし、戻るおよび進むナビゲーションを提供します。
- コンテンツをリロードします。
- Webコンポーネントにエフェクトを適用します。
- HTMLコンテンツを編集します。
- JavaScriptコマンドを実行します。
- イベントを処理します。
一般に、WebViewを使用して、JavaからWebコンテンツを制御できます。
メディアエンジン
- JavaFXメディアエンジン*は、 Streamer として知られるオープンソースエンジンに基づいています。 このメディアエンジンは、ビデオおよびオーディオコンテンツの再生をサポートしています。
JavaFXメディアエンジンは、次のファイル形式のオーディオのサポートを提供します-
| Audio |
|
| Video |
|
パッケージ javafx.scene.media には、JavaFXでメディア機能を提供するクラスとインターフェースが含まれています。 それは3つのコンポーネントの形で提供されます-
- メディアオブジェクト-これはメディアファイルを表します
- Media Player -メディアコンテンツを再生します。
- メディアビュー-メディアを表示します。
JavaFX-アプリケーション
この章では、JavaFXアプリケーションの構造を詳細に説明し、JavaFXアプリケーションの作成例をサンプルで学習します。
JavaFXアプリケーション構造
一般に、JavaFXアプリケーションには、次の図に示すように、 Stage、Scene 、 Nodes の3つの主要コンポーネントがあります。
ステージ
ステージ（ウィンドウ）には、JavaFXアプリケーションのすべてのオブジェクトが含まれます。 パッケージ javafx.stage の Stage クラスで表されます。 プライマリステージは、プラットフォーム自体によって作成されます。 作成されたステージオブジェクトは、 Application クラスの* start（）*メソッドに引数として渡されます（次のセクションで説明します）。
ステージには、位置を決定する2つのパラメーター、つまり Width と Height があります。 コンテンツ領域と装飾（タイトルバーと境界線）に分かれています。
利用可能なステージの5種類があります-
- 装飾された
- 装飾なし
- トランスペアレント
- 統一
- 実用性
ステージのコンテンツを表示するには、* show（）*メソッドを呼び出す必要があります。
シーン
シーンは、JavaFXアプリケーションの物理コンテンツを表します。 シーングラフのすべてのコンテンツが含まれています。 パッケージ javafx.scene のクラス Scene はシーンオブジェクトを表します。 インスタンスでは、シーンオブジェクトは1つのステージにのみ追加されます。
シーンクラスをインスタンス化して、シーンを作成できます。 シーンのサイズ（高さおよび幅）と*ルートノード*をコンストラクターに渡すことで、シーンのサイズを選択できます。
シーングラフとノード
- シーングラフ*は、シーンの内容を表すツリー状のデータ構造（階層）です。 対照的に、*ノード*はシーングラフの視覚的/グラフィカルオブジェクトです。
ノードには次のものが含まれます-
- -円、長方形、多角形などの幾何学的（グラフィック）オブジェクト（2Dおよび3D）
- -ボタン、チェックボックス、選択ボックス、テキスト領域などのUIコントロール
- 境界ペイン、グリッドペイン、フローペインなどのコンテナ（レイアウトペイン）
- オーディオ、ビデオ、画像オブジェクトなどのメディア要素。
パッケージ javafx.scene の Node クラスはJavaFXのノードを表し、このクラスはすべてのノードのスーパークラスです。
前に説明したように、ノードには3つのタイプがあります-
- ルートノード-最初のシーングラフはルートノードとして知られています。
- 分岐ノード/親ノード-子ノードを持つノードは、分岐/親ノードとして知られています。 パッケージ javafx.scene の Parent という抽象クラスは、すべての親ノードの基本クラスであり、それらの親ノードは次のタイプになります-
- グループ-グループノードは、子ノードのリストを含む集合ノードです。 グループノードがレンダリングされるたびに、そのすべての子ノードが順番にレンダリングされます。 グループに適用される変換、エフェクト状態は、すべての子ノードに適用されます。
- 地域-これは、チャート、ペイン、コントロールなど、すべてのJavaFX NodeベースのUIコントロールの基本クラスです。
- WebView -このノードはWebエンジンを管理し、そのコンテンツを表示します。
- リーフノード-子ノードのないノードはリーフノードと呼ばれます。 たとえば、Rectangle、Ellipse、Box、ImageView、MediaViewはリーフノードの例です。
ルートノードをシーングラフに渡すことは必須です。 グループがルートとして渡されると、すべてのノードがシーンにクリップされ、シーンのサイズを変更してもシーンのレイアウトに影響しません。
JavaFXアプリケーションの作成
JavaFXアプリケーションを作成するには、Applicationクラスをインスタンス化し、その抽象メソッド* start（）*を実装する必要があります。 このメソッドでは、JavaFXアプリケーションのコードを記述します。
アプリケーションクラス
パッケージ javafx.application の Application クラスは、JavaFXのアプリケーションのエントリポイントです。 JavaFXアプリケーションを作成するには、このクラスを継承し、その抽象メソッド* start（）*を実装する必要があります。 このメソッドでは、JavaFXグラフィックスのコード全体を記述する必要があります
*main* メソッドでは、* launch（）*メソッドを使用してアプリケーションを起動する必要があります。 このメソッドは、次のプログラムに示すように、Applicationクラスの* start（）*メソッドを内部的に呼び出します。public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
/*
Code for JavaFX application.
(Stage, scene, scene graph)
*/
}
public static void main(String args[]){
launch(args);
}
}- start（）*メソッド内で、典型的なJavaFXアプリケーションを作成するには、以下に示す手順に従う必要があります-
- 必要なノードを含むシーングラフを準備します。
- 必要な寸法のシーンを準備し、シーングラフ（シーングラフのルートノード）を追加します。
- ステージを準備し、シーンをステージに追加して、ステージのコンテンツを表示します。
シーングラフの準備
アプリケーションごとに、必要なノードを含むシーングラフを準備する必要があります。 ルートノードは最初のノードであるため、ルートノードを作成する必要があります。 ルートノードとして、 Group、Region、またはWebView から選択できます。
グループ-グループノードは、パッケージ javafx.scene に属する Group というクラスで表されます。以下に示すように、このクラスをインスタンス化することでグループノードを作成できます。
Group root = new Group();*Group* クラスの* getChildren（）*メソッドは、ノードを保持する *ObservableList* クラスのオブジェクトを提供します。 以下に示すように、このオブジェクトを取得してノードを追加できます。//Retrieving the observable list object
ObservableList list = root.getChildren();
//Setting the text object as a node
list.add(NodeObject);以下に示すように、インスタンス化時に Group クラスとそのコンストラクターにノードオブジェクトを渡すだけで、ノードオブジェクトをグループに追加することもできます。
Group root = new Group(NodeObject);地域-すべてのJavaFX NodeベースのUIコントロールの基本クラスです。
- グラフ-このクラスはすべてのグラフの基本クラスであり、パッケージ javafx.scene.chart に属します。 +このクラスには、 PieChart および XYChart の2つのサブクラスがあります。 これら2つのサブクラスには、 AreaChart、BarChart、BubbleChart などのサブクラスがあります。 JavaFXでさまざまなタイプのXY平面グラフを描画するために使用されます。 +これらのクラスを使用して、アプリケーションにチャートを埋め込むことができます。
- Pane -Paneは、 AnchorPane、BorderPane、DialogPane など、すべてのレイアウトペインの基本クラスです。 このクラスは、- javafx.scene.layout と呼ばれるパッケージに属します。 +これらのクラスを使用して、アプリケーションに事前定義されたレイアウトを挿入できます。
- Control - Accordion、ButtonBar、ChoiceBox、ComboBoxBase、HTMLEditorなどのユーザーインターフェイスコントロールの基本クラスです。 このクラスは、パッケージjavafx.scene.control に属します。 +これらのクラスを使用して、アプリケーションにさまざまなUI要素を挿入できます。
グループでは、次のプログラムに示すように、上記のクラスをインスタンス化し、ルートノードとして使用できます。
//Creating a Stack Pane
StackPane pane = new StackPane();
//Adding text area to the pane
ObservableList list = pane.getChildren();
list.add(NodeObject);*WebView* -このノードはWebエンジンを管理し、そのコンテンツを表示します。以下は、JavaFXのノードクラス階層を表す図です。
シーンの準備
JavaFXシーンは、パッケージ javafx.scene の Scene クラスで表されます。 次のタラブロックに示すように、このクラスをインスタンス化することでシーンを作成できます。
インスタンス化中に、ルートオブジェクトをシーンクラスのコンストラクターに渡すことが必須です。
Scene scene = new Scene(root);以下に示すように、シーンの高さと幅を表すdouble型の2つのパラメーターを渡すこともできます。
Scene scene = new Scene(root, 600, 300);ステージの準備
これは、JavaFXアプリケーションのコンテナであり、アプリケーションのウィンドウを提供します。 これは、パッケージ javafx.stage の Stage クラスで表されます。 このクラスのオブジェクトは、 Application クラスの* start（）*メソッドのパラメーターとして渡されます。
このオブジェクトを使用すると、ステージでさまざまな操作を実行できます。 主に、次を実行できます-
- メソッド* setTitle（）*を使用して、ステージのタイトルを設定します。
- * setScene（）*メソッドを使用して、シーンオブジェクトをステージにアタッチします。
- 以下に示すように、* show（）*メソッドを使用してシーンのコンテンツを表示します。
//Setting the title to Stage.
primaryStage.setTitle("Sample application");
//Setting the scene to Stage
primaryStage.setScene(scene);
//Displaying the stage
primaryStage.show();JavaFXアプリケーションのライフサイクル
JavaFX Applicationクラスには3つのライフサイクルメソッドがあります。
- * start（）*-JavaFXグラフィックスコードが書き込まれるエントリポイントメソッド。
- * stop（）*-オーバーライドできる空のメソッド。ここでは、アプリケーションを停止するロジックを記述できます。
- * init（）*-オーバーライドできる空のメソッドですが、このメソッドでステージまたはシーンを作成することはできません。
これらに加えて、JavaFXアプリケーションを起動する* launch（）*という静的メソッドを提供します。
- launch（）*メソッドは静的であるため、静的コンテキストから呼び出す必要があります（通常はメイン）。 JavaFXアプリケーションが起動されるたびに、次のアクションが（同じ順序で）実行されます。
- アプリケーションクラスのインスタンスが作成されます。
- * Init（）*メソッドが呼び出されます。
- * start（）*メソッドが呼び出されます。
- ランチャーは、アプリケーションが終了するまで待機し、* stop（）*メソッドを呼び出します。
JavaFXアプリケーションの終了
アプリケーションの最後のウィンドウが閉じられると、JavaFXアプリケーションは暗黙的に終了します。 ブール値「False」を静的メソッド* setImplicitExit（）*（静的コンテキストから呼び出す必要があります）に渡すことで、この動作をオフにできます。
メソッド* Platform.exit（）または *System.exit （int）を使用して、JavaFXアプリケーションを明示的に終了できます。
例1 –空のウィンドウを作成する
このセクションでは、空のウィンドウを表示するJavaFXサンプルアプリケーションを作成する方法について説明します。 手順は次のとおりです-
ステップ1：クラスを作成する
Javaクラスを作成し、パッケージ javafx.application の Application クラスを継承し、次のようにこのクラスのstart（）メソッドを実装します。
public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}ステップ2：グループオブジェクトの作成
- start（）メソッドでは、次のように、パッケージ *javafx.scene に属するGroupというクラスをインスタンス化することにより、グループオブジェクトを作成します。
Group root = new Group();ステップ3：シーンオブジェクトの作成
パッケージ javafx.scene に属する Scene という名前のクラスをインスタンス化して、シーンを作成します。 このクラスに、前の手順で作成したGroupオブジェクト*（root）*を渡します。
ルートオブジェクトに加えて、画面の高さと幅を表す2つのdoubleパラメーターを、Groupクラスのオブジェクトとともに次のように渡すこともできます。
Scene scene = new Scene(root,600, 300);ステップ4：ステージのタイトルを設定する
*Stage* クラスの* setTitle（）*メソッドを使用して、ステージにタイトルを設定できます。 *primaryStage* は、シーンクラスのstartメソッドにパラメーターとして渡されるStageオブジェクトです。*primaryStage* オブジェクトを使用して、以下に示すように、シーンのタイトルを *Sample Application* として設定します。primaryStage.setTitle("Sample Application");ステップ5：シーンをステージに追加する
*Stage* という名前のクラスの* setScene（）*メソッドを使用して、Sceneオブジェクトをステージに追加できます。 以下に示すように、このメソッドを使用して、前の手順で準備したSceneオブジェクトを追加します。primaryStage.setScene(scene);ステップ6：ステージのコンテンツを表示する
次のように Stage クラスの* show（）*という名前のメソッドを使用して、シーンのコンテンツを表示します。
primaryStage.show();ステップ7：アプリケーションの起動
次のように、メインメソッドから Application クラスの* launch（）*静的メソッドを呼び出して、JavaFXアプリケーションを起動します。
public static void main(String args[]){
launch(args);
}例
次のプログラムは、空のJavaFXウィンドウを生成します。 このコードを JavafxSample.java という名前のファイルに保存します
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class JavafxSample extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
//creating a Group object
Group group = new Group();
//Creating a Scene by passing the group object, height and width
Scene scene = new Scene(group ,600, 300);
//setting color to the scene
scene.setFill(Color.BROWN);
//Setting the title to Stage.
primaryStage.setTitle("Sample Application");
//Adding the scene to Stage
primaryStage.setScene(scene);
//Displaying the contents of the stage
primaryStage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac JavafxSample.java
java JavafxSample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
例2 –直線を描く
前の例では、空のステージを作成する方法を見てきました。この例では、JavaFXライブラリを使用して直線を描画してみます。
手順は次のとおりです-
ステップ1：クラスを作成する
Javaクラスを作成し、パッケージ javafx.application の Application クラスを継承し、このクラスの* start（）*メソッドを次のように実装します。
public class DrawingLine extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}ステップ2：線の作成
パッケージ javafx.scene.shape に属する Line という名前のクラスをインスタンス化することにより、JavaFXで行を作成できます。このクラスを次のようにインスタンス化します。
//Creating a line object
Line line = new Line();ステップ3：線にプロパティを設定する
次のコードブロックに示すように、それぞれのセッターメソッドを使用して、プロパティ startX、startY、endX および endY を設定して、X-Y平面に線を描く座標を指定します。
line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);ステップ4：グループオブジェクトの作成
start（）メソッドで、パッケージjavafx.sceneに属するGroupというクラスをインスタンス化することにより、グループオブジェクトを作成します。
次のようにグループに追加するために、前のステップで作成されたLine（ノード）オブジェクトを、Groupクラスのコンストラクターへのパラメーターとして渡します-
Group root = new Group(line);ステップ5：シーンオブジェクトの作成
パッケージ javafx.scene に属する Scene という名前のクラスをインスタンス化して、シーンを作成します。 このクラスに、前の手順で作成されたGroupオブジェクト*（root）*を渡します。
ルートオブジェクトに加えて、画面の高さと幅を表す2つのdoubleパラメーターを、Groupクラスのオブジェクトとともに次のように渡すこともできます。
Scene scene = new Scene(group ,600, 300);ステップ6：ステージのタイトルを設定する
*Stage* クラスの* setTitle（）*メソッドを使用して、ステージにタイトルを設定できます。 *primaryStage* は、シーンクラスのstartメソッドにパラメーターとして渡されるStageオブジェクトです。*primaryStage* オブジェクトを使用して、シーンのタイトルを次のように *Sample Application* として設定します。primaryStage.setTitle("Sample Application");ステップ7：シーンをステージに追加する
*Stage* という名前のクラスの* setScene（）*メソッドを使用して、Sceneオブジェクトをステージに追加できます。 この方法を使用して、前の手順で準備したSceneオブジェクトを次のように追加します。primaryStage.setScene(scene);ステップ8：ステージのコンテンツを表示する
次のように Stage クラスの* show（）*という名前のメソッドを使用して、シーンのコンテンツを表示します。
primaryStage.show();ステップ9：アプリケーションの起動
次のように、メインメソッドから Application クラスの* launch（）*静的メソッドを呼び出して、JavaFXアプリケーションを起動します。
public static void main(String args[]){
launch(args);
}例
次のプログラムは、JavaFXを使用して直線を生成する方法を示しています。 このコードを JavafxSample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
public class DrawingLine extends Application{
@Override
public void start(Stage stage) {
//Creating a line object
Line line = new Line();
//Setting the properties to a line
line.setStartX(100.0);
line.setStartY(150.0);
line.setEndX(500.0);
line.setEndY(150.0);
//Creating a Group
Group root = new Group(line);
//Creating a Scene
Scene scene = new Scene(root, 600, 300);
//Setting title to the scene
stage.setTitle("Sample application");
//Adding the scene to the stage
stage.setScene(scene);
//Displaying the contents of a scene
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac DrawingLine.java
java DrawingLine実行すると、上記のプログラムは、以下に示すような直線を表示するJavaFXウィンドウを生成します。
例3 –テキストの表示
JavaFXシーンにテキストを埋め込むこともできます。 この例は、JavaFXにテキストを埋め込む方法を示しています。
手順は次のとおりです-
ステップ1：クラスを作成する
Javaクラスを作成し、パッケージ javafx.application の Application クラスを継承し、このクラスの* start（）*メソッドを次のように実装します。
public class DrawingLine extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
}
}ステップ2：テキストを埋め込む
パッケージ javafx.scene.shape に属する Text というクラスをインスタンス化して、このクラスをインスタンス化することにより、JavaFXシーンにテキストを埋め込むことができます。
埋め込みテキストを文字列形式で渡すことにより、このクラスをインスタンス化できます。または、以下に示すように、デフォルトのコンストラクターを使用してテキストオブジェクトを作成できます。
//Creating a Text object
Text text = new Text();ステップ3：フォントの設定
*Text* クラスの* setFont（）*メソッドを使用して、テキストにフォントを設定できます。 このメソッドは、パラメータとしてフォントオブジェクトを受け入れます。 以下に示すように、指定されたテキストのフォントを45に設定します。//Setting font to the text
text.setFont(new Font(45));ステップ4：テキストの位置を設定する
次のようにそれぞれのsetterメソッド* setX（）および setY（）*を使用してX、Y座標を設定することにより、X-Y平面上のテキストの位置を設定できます。
//setting the position of the text
text.setX(50);
text.setY(150);ステップ5：追加するテキストの設定
TextクラスのsetText（）メソッドを使用して、追加するテキストを設定できます。 このメソッドは、追加するテキストを表す文字列パラメーターを受け入れます。
text.setText("Welcome to finddevguides");ステップ6：グループオブジェクトの作成
- start（）メソッドで、パッケージ *javafx.scene に属するGroupという名前のクラスをインスタンス化して、グループオブジェクトを作成します。
次のようにグループに追加するために、前の手順で作成されたテキスト（ノード）オブジェクトをパラメータとしてGroupクラスのコンストラクタに渡します-
Group root = new Group(text)ステップ7：シーンオブジェクトの作成
パッケージ javafx.scene に属する Scene という名前のクラスをインスタンス化して、シーンを作成します。 このクラスに、前の手順で作成したGroupオブジェクト*（root）*を渡します。
ルートオブジェクトに加えて、画面の高さと幅を表す2つのdoubleパラメーターを、Groupクラスのオブジェクトとともに次のように渡すこともできます。
Scene scene = new Scene(group ,600, 300);ステップ8：ステージのタイトルを設定する
*Stage* クラスの* setTitle（）*メソッドを使用して、ステージにタイトルを設定できます。 *primaryStage* は、シーンクラスのstartメソッドにパラメーターとして渡されるStageオブジェクトです。*primaryStage* オブジェクトを使用して、以下に示すように、シーンのタイトルを *Sample Application* として設定します。primaryStage.setTitle("Sample Application");ステップ9：ステージにシーンを追加する
*Stage* という名前のクラスの* setScene（）*メソッドを使用して、Sceneオブジェクトをステージに追加できます。 この方法を使用して、前の手順で準備したSceneオブジェクトを次のように追加します。primaryStage.setScene(scene);ステップ10：ステージのコンテンツを表示する
次のように Stage クラスの* show（）*という名前のメソッドを使用して、シーンのコンテンツを表示します。
primaryStage.show();ステップ11：アプリケーションの起動
次のように、メインメソッドから Application クラスの* launch（）*静的メソッドを呼び出して、JavaFXアプリケーションを起動します。
public static void main(String args[]){
launch(args);
}例
以下は、JavaFXを使用してテキストを表示するプログラムです。 このコードを DisplayingText.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class DisplayingText extends Application {
@Override
public void start(Stage stage) {
//Creating a Text object
Text text = new Text();
//Setting font to the text
text.setFont(new Font(45));
//setting the position of the text
text.setX(50);
text.setY(150);
//Setting the text to be added.
text.setText("Welcome to finddevguides");
//Creating a Group object
Group root = new Group();
//Retrieving the observable list object
ObservableList list = root.getChildren();
//Setting the text object as a node to the group object
list.add(text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Sample Application");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac DisplayingText.java
java DisplayingText実行すると、上記のプログラムは、次のようにテキストを表示するJavaFXウィンドウを生成します。
JavaFX-2Dシェイプ
前の章で、JavaFXの基本的なアプリケーションを見てきました。そこでは、空のウィンドウを作成する方法と、JavaFXのXY平面に線を引く方法を学びました。 線に加えて、他のいくつかの2D図形も描画できます。
2D形状
一般に、2DシェイプはXY平面に描画できる幾何学的図形であり、これらには線、長方形、円などが含まれます。
JavaFXライブラリを使用すると、描画することができます-
- 線、長方形、円、楕円、多角形、ポリライン、3次曲線、四角形曲線、円弧などの事前定義された形状。
- MoveTO Path Element、Line、Horizontal Line、Vertical Line、Cubic Curve、Quadratic Curve、Arcなどのパス要素。
- これらに加えて、SVGパスを解析して2D形状を描くこともできます。
上記の2D形状はそれぞれクラスによって表され、これらのクラスはすべてパッケージ javafx.scene.shape に属します。 Shape という名前のクラスは、JavaFXのすべての2次元形状の基本クラスです。
2Dシェイプを作成する
チャートを作成するには、する必要があります-
- 必要な形状のそれぞれのクラスをインスタンス化します。
- 形状のプロパティを設定します。
- 図形オブジェクトをグループに追加します。
各クラスのインスタンス化
2次元形状を作成するには、まず、それぞれのクラスをインスタンス化する必要があります。
たとえば、行を作成する場合は、次のようにLineという名前のクラスをインスタンス化する必要があります-
Line line = new Line();シェイプのプロパティを設定する
クラスをインスタンス化した後、setterメソッドを使用して形状のプロパティを設定する必要があります。
たとえば、線を描くには、線の始点と終点のx座標とy座標を渡す必要があります。 次のように、それぞれのセッターメソッドを使用してこれらの値を指定できます-
//Setting the Properties of the Line
line.setStartX(150.0f);
line.setStartY(140.0f);
line.setEndX(450.0f);
line.setEndY(140.0f);シェイプオブジェクトをグループに追加する
最後に、以下に示すように、コンストラクターのパラメーターとして渡すことにより、図形のオブジェクトをグループに追加する必要があります。
//Creating a Group object
Group root = new Group(line);次の表に、JavaFXが提供するさまざまな形状（クラス）のリストを示します。
| S.No | Shape & Description |
|---|---|
| 1 |
線は、2点を結ぶ幾何学的構造です。 パッケージ javafx.scene.shape の Line クラスは、XY平面の線を表します。 |
| 2 |
一般に、長方形とは、すべての内角が直角である2対の平行で平行な辺を持つ4辺形の多角形です。 JavaFXでは、Rectangleは Rectangle という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 3 |
JavaFXでは、鋭いエッジまたはアーチ型のエッジを持つ長方形を描くことができます。アーチ型のエッジを持つ長方形は、角丸長方形と呼ばれます。 |
| 4 |
円は、閉ループを形成する線であり、その上のすべての点は中心点から固定距離です。 JavaFXでは、円は Circle という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 5 |
楕円は、それぞれフォーカスと呼ばれる2つのポイントによって定義されます。 楕円上の任意の点が取られた場合、焦点までの距離の合計は一定です。 楕円のサイズは、これら2つの距離の合計によって決まります。 JavaFXでは、楕円は Ellipse という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 6 |
端と端をつなぐ多数の共面線分によって形成される閉じた形状。 JavaFXでは、ポリゴンは Polygon という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 7 |
ポリラインは、ポリラインが最後に閉じられていないことを除いて、ポリゴンと同じです。 または、1つ以上の線分で構成される連続線。 JavaFXでは、ポリラインは Polygon という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 8 |
3次曲線は、XY平面のベジェパラメトリック曲線であり、次数3の曲線です。 JavaFXでは、3次曲線は CubicCurve という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 9 |
2次曲線は、XY平面のベジェパラメトリック曲線であり、次数2の曲線です。 JavaFXでは、QuadCurveはQuadCurveという名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 10 |
円弧は曲線の一部です。 JavaFXでは、アークは Arc という名前のクラスで表されます。 このクラスは、パッケージ- javafx.scene.shape に属します。 リンク：/javafx/2dshapes_types_of_arc [円弧のタイプ] これに加えて、3種類の弧 Open、Chord、Round を描画できます。 |
| 11 |
JavaFXでは、SVGパスを解析して画像を構築できます。 このような形状は、 SVGPath という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 このクラスには、Stringデータ型の content というプロパティがあります。 これは、画像を描画するSVGパスエンコード文字列を表します。 |
パスクラスを介してより多くの図形を描画する
前のセクションでは、クラスをインスタンス化し、それぞれのパラメーターを設定することにより、いくつかの単純な事前定義された形状を描画する方法を見てきました。
ただし、これらの事前定義された形状だけでは、* javafx.shapeパッケージ*で提供されるプリミティブ以外の複雑な形状を構築するには不十分です。
たとえば、次の図に示すようにグラフィカル要素を描画する場合、これらの単純な形状に依存することはできません。
パスクラス
このような複雑な構造を描画するために、JavaFXは Path という名前のクラスを提供します。 このクラスは、図形の幾何学的な輪郭を表します。
moveTo、LineTo、HlineTo、VlineTo、ArcTo、QuadCurveTo、CubicCurveToなどのさまざまな*パス要素*を保持する監視可能なリストに添付されます。
インスタンス化すると、このクラスは指定されたパス要素に基づいてパスを構築します。
次のようにインスタンス化しながら、このクラスにパス要素を渡すことができます-
Path myshape = new Path(pathElement1, pathElement2, pathElement3);または、次のように* addAll（）*メソッドを使用して、監視可能なリストを取得し、すべてのパス要素を追加できます-
Path myshape = new Path();
myshape.getElements().addAll(pathElement1, pathElement2, pathElement3);また、add（）メソッドを使用して要素を個別に追加することもできます-
Path myshape = new Path();
myshape.getElements().add(pathElement1);パス要素への移動
パス要素 MoveTo は、パスの現在の位置を指定されたポイントに移動するために使用されます。 通常、パス要素を使用して描画された形状の開始点を設定するために使用されます。
パッケージ javafx.scene.shape の LineTo というクラスで表されます。 それは、二重データ型の2つのプロパティ、つまり-
- X -現在の位置から線を引くポイントのx座標。
- Y -現在位置から線が引かれるポイントのy座標。
あなたはMoveToクラスをインスタンス化し、次のように新しいポイントのx、y座標を渡すことにより、パス要素への移動を作成することができます-
MoveTo moveTo = new MoveTo(x, y);コンストラクタに値を渡さない場合、新しいポイントは（0,0）に設定されます。
また、次のようにそれぞれのセッターメソッドを使用して、x、y座標に値を設定することができます-
setX(value);
setY(value);例–複雑なパスの描画
この例では、 Path、MoveTo 、および Line クラスを使用して次の形状を描画する方法を示します。
このコードを ComplexShape.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
public class ComplexShape extends Application {
@Override
public void start(Stage stage) {
//Creating a Path
Path path = new Path();
//Moving to the starting point
MoveTo moveTo = new MoveTo(108, 71);
//Creating 1st line
LineTo line1 = new LineTo(321, 161);
//Creating 2nd line
LineTo line2 = new LineTo(126,232);
//Creating 3rd line
LineTo line3 = new LineTo(232,52);
//Creating 4th line
LineTo line4 = new LineTo(269, 250);
//Creating 4th line
LineTo line5 = new LineTo(108, 71);
//Adding all the elements to the path
path.getElements().add(moveTo);
path.getElements().addAll(line1, line2, line3, line4, line5);
//Creating a Group object
Group root = new Group(path);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Drawing an arc through a path");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac ComplexShape.java
java ComplexShape上記のプログラムは、実行時にアークを表示するJavaFXウィンドウを生成します。このウィンドウは、以下に示すように、現在の位置から指定したポイントまで描画されます。
以下は、JavaFXが提供するさまざまなパス要素（クラス）です。 これらのクラスは、パッケージ javafx.shape に存在します。 これらのクラスはすべて、クラス PathElement を継承します。
| S.No | Shape & Description |
|---|---|
| 1 |
パス要素 line は、現在の位置から指定された座標内のポイントに直線を描くために使用されます。 LineTo という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 2 |
パス要素 HLineTo は、現在の位置から指定された座標内のポイントに水平線を描画するために使用されます。 HLineTo という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 3 |
パス要素 vertical line は、現在の位置から指定された座標内のポイントに垂直線を描画するために使用されます。 VLineTo という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 4 |
パス要素の2次曲線は、現在の位置から指定された座標のポイントに* 2次曲線*を描くために使用されます。 QuadraticCurveTo という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 5 |
パス要素 cubic curve は、現在の位置から指定された座標のポイントに3次曲線を描くために使用されます。 CubicCurveTo という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
| 6 |
パス要素 Arc は、現在の位置から指定された座標内のポイントに円弧を描くために使用されます。 ArcTo という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 |
2Dオブジェクトのプロパティ
すべての2次元オブジェクトについて、塗りつぶし、ストローク、StrokeTypeなどのさまざまなプロパティを設定できます。 次のセクションでは、2Dオブジェクトのさまざまなプロパティについて説明します。
- リンク：/javafx/stroke_type [ストロークタイプ]
- リンク：/javafx/stroke_width [ストローク幅]
- リンク：/javafx/stroke_fill [ストロークフィル]
- リンク：/javafx/stroke [ストローク]
- リンク：/javafx/stroke_line_join [ストロークライン]
- リンク：/javafx/stroke_miter_limit [ストロークマイターリミット]
- リンク：/javafx/stroke_line_cap [ストロークラインキャップ]
- リンク：/javafx/smooth [スムーズ]
2Dオブジェクトの操作
グループに複数のシェイプを追加する場合、以下に示すように、最初のシェイプは2番目のシェイプと重なります。
変換（回転、拡大縮小、変換など）、遷移（アニメーション）に加えて、2Dオブジェクトに対して3つの操作（ Union、Subtraction 、 Intersection ）を実行することもできます。
| S.No | Operation & Description |
|---|---|
| 1 |
この操作は、入力として2つ以上の形状を取り、それらが占める領域を返します。 |
| 2 |
この操作は、入力として2つ以上の形状を取り、それらの間の交差領域を返します。 |
| 3 |
この操作は、入力として2つ以上の形状を取ります。 次に、2番目の図形と重なる領域を除く、最初の図形の領域を返します。 |
JavaFX-テキスト
さまざまな形状と同様に、JavaFXでテキストノードを作成することもできます。 テキストノードは、パッケージ javafx.scene.text に属する Text という名前のクラスで表されます。
このクラスには、JavaFXでテキストを作成し、その外観を変更するためのいくつかのプロパティが含まれています。 このクラスは、パッケージ javafx.scene.shape に属するShapeクラスも継承します。
したがって、フォント、配置、行間隔、テキストなどのテキストのプロパティに加えて また、* strokeFill、stroke、strokeWidth、strokeTypeなどの基本的なシェイプノードプロパティを継承します。
テキストノードの作成
パッケージ javafx.scene.text のクラスTextはJavaFXのテキストノードを表すため、次のようにこのクラスをインスタンス化することでテキストを作成できます-
Text text = new Text();クラスTextには、作成されるテキストを表す文字列型の text という名前のプロパティが含まれています。
Textクラスをインスタンス化した後、以下に示すように* setText（）*メソッドを使用してこのプロパティに値を設定する必要があります。
String text = "Hello how are you"
Text.setText(text);また、次のコードブロックに示すように、それぞれのセッターメソッド、すなわち* setX（）および setY（）*を使用してプロパティxおよびyに値を指定することにより、テキストの位置（原点）を設定することもできます-
text.setX(50);
text.setY(50);例
次のプログラムは、JavaFXでテキストノードを作成する方法を示す例です。 このコードを TextExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Text;
public class TextExample extends Application {
@Override
public void start(Stage stage) {
//Creating a Text object
Text text = new Text();
//Setting the text to be added.
text.setText("Hello how are you");
//setting the position of the text
text.setX(50);
text.setY(50);
//Creating a Group object
Group root = new Group(text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Sample Application");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac TextExample.java
java TextExample実行すると、上記のプログラムは、次のように指定されたテキストを表示するJavaFXウィンドウを生成します-
テキストの位置とフォント
デフォルトでは、テキストクラスによって作成されたテキストは、フォント…、サイズ…、および黒色です。
- setFont（）メソッドを使用して、テキストのフォントサイズと色を変更できます。 このメソッドは、 *Font クラスのオブジェクトを受け入れます。
パッケージ javafx.scene.text の Font という名前のクラスは、テキストのフォントを定義するために使用されます。 このクラスには、* font（）*という名前の静的メソッドが含まれています。
このメソッドは、4つのパラメータを受け入れます-
- family -これは文字列型で、テキストに適用するフォントのファミリーを表します。
- 重量-このプロパティは、フォントの重量を表します。 - FontWeight.BLACK、FontWeight.BOLD、FontWeight.EXTRA_BOLD、FontWeight.EXTRA_LIGHT、LIGHT、MEDIUM、NORMAL、SEMI_BOLD、THIN の9つの値を受け入れます。
- posture -このプロパティは、フォントの姿勢（通常または斜体）を表します。 2つの値 FontPosture.REGULAR および FontPosture.ITALIC を受け入れます。
- サイズ-このプロパティはdouble型で、フォントのサイズを表します。
次の方法を使用して、テキストにフォントを設定できます-
text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));例
次のプログラムは、JavaFXでテキストノードのフォントを設定する方法を示す例です。 ここでは、フォントをVerdana、太さを太字、姿勢を標準、サイズを20に設定しています。
このコードを TextFontExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
public class TextFontExample extends Application {
@Override
public void start(Stage stage) {
//Creating a Text object
Text text = new Text();
//Setting font to the text
text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
//setting the position of the text
text.setX(50);
text.setY(130);
//Setting the text to be added.
text.setText("Hi how are you");
//Creating a Group object
Group root = new Group(text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Setting Font to the text");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac TextFontExample.java
java TextFontExample実行すると、上記のプログラムは、次のように指定されたフォントでテキストを表示するJavaFXウィンドウを生成します-
ストロークと色
Textクラスは、パッケージのShapeクラスも継承します。 したがって、 javafx.scene.shape を使用して、テキストノードにストロークと色を設定することもできます。
次のように、シェイプ（継承）クラスの* setFill（）*メソッドを使用して、テキストに色を設定できます-
text.setFill(Color.BEIGE);同様に、メソッド* setStroke（）を使用して、テキストのストロークの色を設定できます。 ストロークの幅は、次のようにメソッド setStrokeWidth（）*を使用して設定できます-
//Setting the color
text.setFill(Color.BROWN);
//Setting the Stroke
text.setStrokeWidth(2);
//Setting the stroke color
text.setStroke(Color.BLUE);例
次のプログラムは、テキストノードの色、strokeWidth、およびstrokeColorを設定する方法を示す例です。 このコードでは、ストロークの色を青、テキストの色を茶色、ストロークの幅を2に設定しています。
このコードを StrokeExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
public class StrokeExample extends Application {
@Override
public void start(Stage stage) {
//Creating a Text object
Text text = new Text();
//Setting font to the text
text.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 50));
//setting the position of the text
text.setX(50);
text.setY(130);
//Setting the color
text.setFill(Color.BROWN);
//Setting the Stroke
text.setStrokeWidth(2);
//Setting the stroke color
text.setStroke(Color.BLUE);
//Setting the text to be added.
text.setText("Hi how are you");
//Creating a Group object
Group root = new Group(text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Setting font to the text");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac StrokeExample.java
java StrokeExample実行すると、上記のプログラムは、次のように指定されたストロークと色の属性を持つテキストを表示するJavaFXウィンドウを生成します-
テキストへの装飾の適用
取り消し線などの装飾を適用することもできます。この場合、テキストを介して行が渡されます。 Text クラスのメソッドを使用して、テキストに下線を引くことができます。
メソッド* setStrikethrough（）を使用してテキストを打ち消すことができます。 これはブール値を受け入れ、次のコードボックスに示すようにテキストを打ち消すためにこのメソッドに値 *true を渡します-
//Striking through the text
text1.setStrikethrough(true);同様に、次のように値 true をメソッド* setUnderLine（）*に渡すことにより、テキストに下線を引くことができます-
//underlining the text
text2.setUnderline(true);例
次のプログラムは、 underline や strike through などの装飾をテキストに適用する方法を示す例です。 このコードを DecorationsExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
public class DecorationsExample extends Application {
@Override
public void start(Stage stage) {
//Creating a Text_Example object
Text text1 = new Text("Hi how are you");
//Setting font to the text
text1.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
//setting the position of the text
text1.setX(50);
text1.setY(75);
//Striking through the text
text1.setStrikethrough(true);
//Creating a Text_Example object
Text text2 = new Text("Welcome to finddevguides");
//Setting font to the text
text2.setFont(Font.font("verdana", FontWeight.BOLD, FontPosture.REGULAR, 20));
//setting the position of the text
text2.setX(50);
text2.setY(150);
//underlining the text
text2.setUnderline(true);
//Creating a Group object
Group root = new Group(text1, text2);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Decorations Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac DecorationsExample.java
java DecorationsExample実行すると、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します-
JavaFX-エフェクト
効果とは、グラフィックの外観を強化するアクションです。 JavaFXでは、効果は視覚的にノードの外観を向上させるためにノードに適用されるアルゴリズムです。 Node クラスのエフェクトプロパティは、エフェクトを指定するために使用されます。
JavaFXでは、 bloom、blur 、 glow などのさまざまな効果をノードに設定できます。 これらの各効果はクラスによって表され、これらのすべてのクラスは javafx.scene.effect という名前のパッケージで利用できます。
ノードへの効果の適用
- setEffect（）*メソッドを使用して、ノードにエフェクトを適用できます。 このメソッドには、エフェクトのオブジェクトを渡す必要があります。
ノードに効果を適用するには、する必要があります-
- ノードを作成します。
- 適用する必要があるエフェクトのそれぞれのクラスをインスタンス化します。
- エフェクトのプロパティを設定します。
- * setEffect（）*メソッドを使用して、ノードにエフェクトを適用します。
ノードの作成
まず、それぞれのクラスをインスタンス化して、JavaFXアプリケーションにノードを作成します。
たとえば、アプリケーション内の画像にグロー効果を適用する場合。 最初に、Imageクラスをインスタンス化して画像ノードを作成し、以下に示すようにビューを設定する必要があります。
//Creating an image
Image image = new Image("https://www.finddevguides.com/green/images/logo.png");
//Setting the image view
ImageView imageView = new ImageView(image);
//Setting the position of the image
imageView.setX(100);
imageView.setY(70);
//setting the fit height and width of the image view
imageView.setFitHeight(200);
imageView.setFitWidth(400);
//Setting the preserve ratio of the image view
imageView.setPreserveRatio(true);各クラスのインスタンス化
作成されたノードに適用する必要がある効果を表すクラスをインスタンス化します。
たとえば-グロー効果を適用するには、次のコードボックスに示すように Glow クラスをインスタンス化する必要があります-
Glow glow = new Glow();エフェクトのプロパティを設定する
クラスをインスタンス化した後、セッターメソッドを使用してエフェクトのプロパティを設定する必要があります。
例-3次元ボックスを描画するには、幅、高さ、深さを渡す必要があります。 以下に示すように、それぞれのセッターメソッドを使用してこれらの値を指定できます-
//setting the level property
glow.setLevel(0.9);ノードへの効果の追加
最後に、* setEffect（）*メソッドを使用して、必要な効果をノードに適用できます。 例：グロー効果を画像ノードに設定するには、次のようにこのメソッドにGlowクラスのオブジェクトを渡す必要があります-
imageView.setEffect(glow);- JavaFXエフェクト*-次の表に、JavaFXが提供するさまざまなエフェクト（クラス）のリストを示します。 これらのクラスは、 javafx.scene.effect というパッケージに存在します。
| S.No | Shape and Description |
|---|---|
| 1 |
画像に色調整効果を適用して、画像の色を調整できます。 これには、各ピクセルの*色相、彩度、明度*および*コントラスト*の調整が含まれます パッケージ javafx.scene.effect の ColorAdjust というクラスは、色調整効果を表します。 |
| 2 |
カラー入力エフェクトは、長方形を描画して色で塗りつぶすのと同じ出力を提供します。 他のエフェクトとは異なり、このエフェクトをノードに適用すると、ノードではなく長方形のボックスのみが表示されます。 このエフェクトは、主に他のエフェクトの入力として渡すために使用されます。 パッケージ javafx.scene.effect の ColorInput という名前のクラスは、色の入力効果を表します。 |
| 3 |
JavaFXの画像入力エフェクトは、JavaFX画面に画像を埋め込むだけです。 Color Inputエフェクト（指定された色付きの長方形の領域を他のエフェクトへの入力として渡すために使用されます）と同様に、Image Inputエフェクトは指定された画像を別のエフェクトへの入力として渡します。 パッケージ javafx.scene.effect の ImageInput という名前のクラスは、イメージ入力エフェクトを表します。 |
| 4 |
一般に、ブレンドとは、2つ以上の異なるものまたは物質の混合物を意味します。 このブレンド効果を適用すると、同じ位置にある2つの異なる入力のピクセルを取得し、*ブレンドモード*に基づいて結合された出力を生成します。 パッケージ javafx.scene.effect の Blend という名前のクラスは、ブレンド効果を表します。 |
| 5 |
ブルーム効果を適用すると、ノードの一部のピクセルがグローになります。 パッケージ javafx.scene.effect の Bloom というクラスは、ブルーム効果を表します。 |
| 6 |
ブルームと同様に、グローエフェクトは指定された入力画像をグローさせ、このエフェクトは入力の明るいピクセルをより明るくします。 パッケージ javafx.scene.effect の Glow という名前のクラスは、グロー効果を表します。 |
| 7 |
このぼかし効果をノードに適用すると、不明瞭になります。 ボックスぼかしは、JavaFXが提供するぼかし効果の一種です。 この効果では、ノードにぼかしを適用するときに、単純なボックスフィルターが使用されます。 パッケージ javafx.scene.effect の BoxBlur という名前のクラスは、boxblurエフェクトを表します。 |
| 8 |
Box Blur Gaussianと同様に、JavaFXのノードをぼかします。 *ガウスぼかし効果*の唯一の違いは、ガウス畳み込みカーネルを使用してぼかし効果を生成することです。 パッケージ javafx.scene.effect のGaussianBlurというクラスは、ガウスぼかし効果を表します。 |
| 9 |
ガウス効果と同様に、モーションブラーはJavaFXのノードをぼかす効果です。 また、ぼかし効果を生成するためにガウス畳み込みカーネルを使用しますが、この効果の違いは、指定された角度でガウス畳み込みカーネルが使用されることです。 パッケージ javafx.scene.effect の MotionBlur というクラスは、モーションブラーエフェクトを表します。 |
| 10 |
JavaFXのノードに反射効果を適用すると、ノードの下部に反射が追加されます。 パッケージ javafx.scene.effect の Reflection という名前のクラスは、反射効果を表します。 |
| 11 |
JavaFXのノード（一般的なイメージ）にセピアトーン効果を適用すると、赤褐色の色調になります。 パッケージ javafx.scene.effect の SepiaTone という名前のクラスは、セピアトーン効果を表します。 |
| 12 |
この効果は、ぼやけたエッジを持つ指定されたノードの複製を作成します。 パッケージ javafx.scene.effect の Shadow という名前のクラスは、セピアトーン効果を表します。 |
| 13 |
この効果をノードに適用すると、指定したノードの背後に影が作成されます。 パッケージ javafx.scene.effect の DropShadow という名前のクラスは、ドロップシャドウ効果を表します。 |
| 14 |
この効果をノードに適用すると、ノードのエッジの内側に影が作成されます。 パッケージ javafx.scene.effect の InnerShadow という名前のクラスは、内部シャドウ効果を表します。 |
| 15 |
照明効果は、光源からの光をシミュレートするために使用されます。 さまざまな種類の光源、つまり*ポイント*、距離、および*スポット*があります。 パッケージ javafx.scene.effect の Lighting というクラスは、照明効果を表します。 |
| 16 |
この効果をノードに適用すると、まるで遠くの光源によって生成されているかのように、ノード上でライトがシミュレートされます。 遠方光源-ノードから遠い距離にある光源。 ここでは、光源から一方向に光が減衰します。 パッケージ javafx.scene.effect の Light.Distant というクラスは、遠方の光源を表します。 |
| 17 |
この効果をノードに適用すると、スポットライトによって生成されているかのように、ライトがシミュレートされます。 スポット光源-この光源からの光は全方向に減衰します。 光の強度は、光源からオブジェクトまでの距離に依存します。 パッケージ javafx.scene.effect の Light.Spot という名前のクラスは、遠方の光源を表します。 |
| 18 |
この効果をノードに適用すると、点光源によって生成されているかのように、ノード上でライトがシミュレートされます。 点光源-この光源からの光は、単一の点からすべての方向に減衰します。 光の強度は、光源からオブジェクトまでの距離に依存します。 パッケージjavafx.scene.effectの Point.Spot という名前のクラスは、ポイントライトを表します。 |
JavaFX-変換
変換とは、ルールを適用することにより、いくつかのグラフィックスを別のものに変更することを意味します。 Translation、拡大または縮小、Rotation、Shearing などのさまざまなタイプの変換を使用できます。
JavaFXを使用すると、回転、スケーリング、変換などの変換をノードに適用できます。 これらの変換はすべてさまざまなクラスによって表され、これらはパッケージ javafx.scene.transform に属します。
| S.No | Transformation & Description |
|---|---|
| 1 |
回転では、オブジェクトを原点から特定の角度*θ（シータ）*で回転させます。 |
| 2 |
オブジェクトのサイズを変更するには、スケーリング変換が使用されます。 |
| 3 |
オブジェクトを画面上の別の位置に移動します。 |
| 4 |
オブジェクトの形状を傾斜させる変換は、せん断変換と呼ばれます。 |
複数の変換
JavaFXのノードに複数の変換を適用することもできます。 次のプログラムは、長方形に対して同時に Rotation、Scaling および Translation 変換を実行する例です。
このコードを名前でファイルに保存します-
*MultipleTransformationsExample.java* 。import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
public class MultipleTransformationsExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Rectangle
Rectangle rectangle = new Rectangle(50, 50, 100, 75);
//Setting the color of the rectangle
rectangle.setFill(Color.BURLYWOOD);
//Setting the stroke color of the rectangle
rectangle.setStroke(Color.BLACK);
//creating the rotation transformation
Rotate rotate = new Rotate();
//Setting the angle for the rotation
rotate.setAngle(20);
//Setting pivot points for the rotation
rotate.setPivotX(150);
rotate.setPivotY(225);
//Creating the scale transformation
Scale scale = new Scale();
//Setting the dimensions for the transformation
scale.setX(1.5);
scale.setY(1.5);
//Setting the pivot point for the transformation
scale.setPivotX(300);
scale.setPivotY(135);
//Creating the translation transformation
Translate translate = new Translate();
//Setting the X,Y,Z coordinates to apply the translation
translate.setX(250);
translate.setY(0);
translate.setZ(0);
//Adding all the transformations to the rectangle
rectangle.getTransforms().addAll(rotate, scale, translate);
//Creating a Group object
Group root = new Group(rectangle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Multiple transformations");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac MultipleTransformationsExample.java
java MultipleTransformationsExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
3Dオブジェクトの変換
3Dオブジェクトに変換を適用することもできます。 以下は、3次元ボックスを回転および平行移動する例です。
このコードを RotationExample3D.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Box;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
public class RotationExample3D extends Application {
@Override
public void start(Stage stage) {
//Drawing a Box
Box box = new Box();
//Setting the properties of the Box
box.setWidth(150.0);
box.setHeight(150.0);
box.setDepth(150.0);
//Creating the translation transformation
Translate translate = new Translate();
translate.setX(400);
translate.setY(150);
translate.setZ(25);
Rotate rxBox = new Rotate(0, 0, 0, 0, Rotate.X_AXIS);
Rotate ryBox = new Rotate(0, 0, 0, 0, Rotate.Y_AXIS);
Rotate rzBox = new Rotate(0, 0, 0, 0, Rotate.Z_AXIS);
rxBox.setAngle(30);
ryBox.setAngle(50);
rzBox.setAngle(30);
box.getTransforms().addAll(translate,rxBox, ryBox, rzBox);
//Creating a Group object
Group root = new Group(box);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Drawing a cylinder");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac RotationExample3D.java
java RotationExample3D実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
JavaFX-アニメーション
一般に、オブジェクトをアニメートするということは、高速表示によってオブジェクトの動きを錯覚させることを意味します。 JavaFXでは、時間とともにプロパティを変更することでノードをアニメーション化できます。 JavaFXは、 javafx.animation という名前のパッケージを提供します。 このパッケージには、ノードのアニメーション化に使用されるクラスが含まれています。 アニメーションは、これらすべてのクラスの基本クラスです。
JavaFXを使用すると、フェード遷移、フィル遷移、回転遷移、スケール遷移、ストローク遷移、変換遷移、パス遷移、シーケンシャル遷移などのアニメーション（遷移）を適用できます。 *、*一時停止遷移、*並列遷移*など
これらすべての遷移は、パッケージ javafx.animation の個々のクラスによって表されます。
特定のアニメーションをノードに適用するには、以下に示す手順に従う必要があります-
- それぞれのクラスを使用して必要なノードを作成します。
- 適用されるそれぞれの遷移（アニメーション）クラスをインスタンス化します
- 遷移のプロパティを設定し、
- 最後に、 Animation クラスの* play（）*メソッドを使用してトランジションを再生します。
この章では、基本的な遷移（回転、スケーリング、翻訳）の例を説明します。
トランジションを回転
以下は、JavaFXのRotate Transitionを示すプログラムです。 このコードを RotateTransitionExample.java という名前のファイルに保存します。
import javafx.animation.RotateTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.stage.Stage;
import javafx.util.Duration;
public class RotateTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Creating a hexagon
Polygon hexagon = new Polygon();
//Adding coordinates to the hexagon
hexagon.getPoints().addAll(new Double[]{
200.0, 50.0,
400.0, 50.0,
450.0, 150.0,
400.0, 250.0,
200.0, 250.0,
150.0, 150.0,
});
//Setting the fill color for the hexagon
hexagon.setFill(Color.BLUE);
//Creating a rotate transition
RotateTransition rotateTransition = new RotateTransition();
//Setting the duration for the transition
rotateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
rotateTransition.setNode(hexagon);
//Setting the angle of the rotation
rotateTransition.setByAngle(360);
//Setting the cycle count for the transition
rotateTransition.setCycleCount(50);
//Setting auto reverse value to false
rotateTransition.setAutoReverse(false);
//Playing the animation
rotateTransition.play();
//Creating a Group object
Group root = new Group(hexagon);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Rotate transition example ");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac RotateTransitionExample.java
java RotateTransitionExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
スケール遷移
以下は、JavaFXのスケール遷移を示すプログラムです。 このコードを ScaleTransitionExample.java という名前のファイルに保存します。
import javafx.animation.ScaleTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ScaleTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(300.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(50.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating scale Transition
ScaleTransition scaleTransition = new ScaleTransition();
//Setting the duration for the transition
scaleTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
scaleTransition.setNode(circle);
//Setting the dimensions for scaling
scaleTransition.setByY(1.5);
scaleTransition.setByX(1.5);
//Setting the cycle count for the translation
scaleTransition.setCycleCount(50);
//Setting auto reverse value to true
scaleTransition.setAutoReverse(false);
//Playing the animation
scaleTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Scale transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac ScaleTransitionExample.java
java ScaleTransitionExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
トランジションを翻訳
以下は、JavaFXのTranslate Transitionを示すプログラムです。 このコードを TranslateTransitionExample.java という名前のファイルに保存します。
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;
import javafx.util.Duration;
public class TranslateTransitionExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(150.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(100.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating Translate Transition
TranslateTransition translateTransition = new TranslateTransition();
//Setting the duration of the transition
translateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
translateTransition.setNode(circle);
//Setting the value of the transition along the x axis.
translateTransition.setByX(300);
//Setting the cycle count for the transition
translateTransition.setCycleCount(50);
//Setting auto reverse value to false
translateTransition.setAutoReverse(false);
//Playing the animation
translateTransition.play();
//Creating a Group object
Group root = new Group(circle);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Translate transition example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac TranslateTransitionExample.java
java TranslateTransitionExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
これらに加えて、JavaFXは、ノードにより多くの遷移を適用するクラスを提供します。 以下は、JavaFXがサポートする他の種類の遷移です。
- ノードリンクの属性に影響を与える遷移：/javafx/javafx_geometrical_transitions [Fade、Fill、Stroke]
- 複数の基本的な遷移リンクを含む遷移：/javafx/javafx_sequential_parallel [Sequential、Parallel、Pause]
- 指定されたパスリンクに沿ってオブジェクトを変換する遷移：/javafx/javafx_path_transition [Path Transition]
JavaFX-色
アプリケーションに色を適用するために、JavaFXはパッケージ javafx.scene.paint パッケージでさまざまなクラスを提供します。 このパッケージには、Paintという名前の抽象クラスが含まれており、色を適用するために使用されるすべてのクラスの基本クラスです。
これらのクラスを使用すると、次のパターンで色を適用できます-
均一-このパターンでは、ノード全体に均一に色が適用されます。
画像パターン-これにより、ノードの領域を画像パターンで塗りつぶすことができます。
グラデーション-このパターンでは、ノードに適用される色は、ある点から別の点に変化します。 2種類のグラデーション、すなわち*線形グラデーション*と*放射グラデーション*があります。
*Shape、Text* （Sceneを含む）など、色を適用できるすべてのノードクラスには、* setFill（）*および* setStroke（）*という名前のメソッドがあります。 これらは、それぞれノードとそのストロークの色の値を設定するのに役立ちます。
これらのメソッドは、Paintタイプのオブジェクトを受け入れます。 したがって、これらのタイプの画像のいずれかを作成するには、これらのクラスをインスタンス化し、オブジェクトをパラメーターとしてこれらのメソッドに渡す必要があります。
ノードに色を適用する
ノードに均一なカラーパターンを設定するには、次のように* setFill（）、 setStroke（）*メソッドにクラスカラーのオブジェクトを渡す必要があります-
//Setting color to the text
Color color = new Color.BEIGE
text.setFill(color);
//Setting color to the stroke
Color color = new Color.DARKSLATEBLUE
circle.setStroke(color);上記のコードブロックでは、カラークラスの静的変数を使用してカラーオブジェクトを作成しています。
同様に、以下に示すように、RGB値またはカラーのHSB標準またはカラーのWebハッシュコードを使用することもできます-
//creating color object by passing RGB values
Color c = Color.rgb(0,0,255);
//creating color object by passing HSB values
Color c = Color.hsb(270,1.0,1.0);
//creating color object by passing the hash code for web
Color c = Color.web("0x0000FF",1.0);例
以下は、JavaFXのノードに色を適用する方法を示す例です。 ここでは、円とテキストノードを作成し、それらに色を適用しています。
このコードを ColorExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class ColorExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the properties of the circle
circle.setCenterX(300.0f);
circle.setCenterY(180.0f);
circle.setRadius(90.0f);
//Setting color to the circle
circle.setFill(Color.DARKRED);
//Setting the stroke width
circle.setStrokeWidth(3);
//Setting color to the stroke
circle.setStroke(Color.DARKSLATEBLUE);
//Drawing a text
Text text = new Text("This is a colored circle");
//Setting the font of the text
text.setFont(Font.font("Edwardian Script ITC", 50));
//Setting the position of the text
text.setX(155);
text.setY(50);
//Setting color to the text
text.setFill(Color.BEIGE);
text.setStrokeWidth(2);
text.setStroke(Color.DARKSLATEBLUE);
//Creating a Group object
Group root = new Group(circle, text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Color Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac ColorExample.java
java ColorExample実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
ノードへの画像パターンの適用
ノードに画像パターンを適用するには、 ImagePattern クラスをインスタンス化し、そのオブジェクトを* setFill（）、 setStroke（）*メソッドに渡します。
このクラスのコンストラクタは、6つのパラメータを受け入れます-
- 画像-パターンの作成に使用する画像のオブジェクト。
- xおよびy -アンカー長方形の原点の（x、y）座標を表す二重変数。
- 高さと幅-パターンの作成に使用される画像の高さと幅を表す二重変数。
- isProportional -これはブール変数です。このプロパティをtrueに設定すると、開始位置と終了位置が比例するように設定されます。
ImagePattern radialGradient = new ImagePattern(dots, 20, 20, 40, 40, false);例
以下は、JavaFXのノードにイメージパターンを適用する方法を示す例です。 ここでは、円とテキストノードを作成し、それらに画像パターンを適用しています。
このコードを ImagePatternExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class ImagePatternExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the properties of the circle
circle.setCenterX(300.0f);
circle.setCenterY(180.0f);
circle.setRadius(90.0f);
//Drawing a text
Text text = new Text("This is a colored circle");
//Setting the font of the text
text.setFont(Font.font("Edwardian Script ITC", 50));
//Setting the position of the text
text.setX(155);
text.setY(50);
//Setting the image pattern
String link = "https://encrypted-tbn1.gstatic.com"
+ "/images?q=tbn:ANd9GcRQub4GvEezKMsiIf67U"
+ "rOxSzQuQ9zl5ysnjRn87VOC8tAdgmAJjcwZ2qM";
Image image = new Image(link);
ImagePattern radialGradient = new ImagePattern(image, 20, 20, 40, 40, false);
//Setting the linear gradient to the circle and text
circle.setFill(radialGradient);
text.setFill(radialGradient);
//Creating a Group object
Group root = new Group(circle, text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Image pattern Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac ImagePatternExample.java
java ImagePatternExample実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
線形グラデーションパターンの適用
ノードに線形グラデーションパターンを適用するには、 LinearGradient クラスをインスタンス化し、そのオブジェクトを* setFill（）、setStroke（）*メソッドに渡します。
このクラスのコンストラクタは、すなわち、5つのパラメータを受け入れます-
- startX、startY -これらのdoubleプロパティは、グラデーションの開始点のxおよびy座標を表します。
- endX、endY -これらのdoubleプロパティは、グラデーションの終点のxおよびy座標を表します。
- cycleMethod -この引数は、開始点と終了点で定義されたカラーグラデーション境界の外側の領域を塗りつぶす方法を定義します。
- 比例-これはブール変数です。このプロパティを true に設定すると、開始位置と終了位置が比率に設定されます。
- ストップ-この引数は、グラデーションラインに沿ったカラーストップポイントを定義します。
//Setting the linear gradient
Stop[] stops = new Stop[] {
new Stop(0, Color.DARKSLATEBLUE),
new Stop(1, Color.DARKRED)
};
LinearGradient linearGradient =
new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);例
以下は、JavaFXのノードにグラデーションパターンを適用する方法を示す例です。 ここでは、円とテキストノードを作成し、それらに線形グラデーションパターンを適用しています。
このコードを LinearGradientExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class LinearGradientExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the properties of the circle
circle.setCenterX(300.0f);
circle.setCenterY(180.0f);
circle.setRadius(90.0f);
//Drawing a text
Text text = new Text("This is a colored circle");
//Setting the font of the text
text.setFont(Font.font("Edwardian Script ITC", 55));
//Setting the position of the text
text.setX(140);
text.setY(50);
//Setting the linear gradient
Stop[] stops = new Stop[] {
new Stop(0, Color.DARKSLATEBLUE),
new Stop(1, Color.DARKRED)
};
LinearGradient linearGradient =
new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);
//Setting the linear gradient to the circle and text
circle.setFill(linearGradient);
text.setFill(linearGradient);
//Creating a Group object
Group root = new Group(circle, text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Linear Gradient Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac LinearGradientExample.java
java LinearGradientExample実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
放射状グラデーションパターンの適用
放射状グラデーションパターンをノードに適用するには、 GradientPattern クラスをインスタンス化し、そのオブジェクトを* setFill（）、setStroke（）*メソッドに渡します。
このクラスのコンストラクタはいくつかのパラメータを受け入れますが、そのうちのいくつかは-
- startX、startY -これらのdoubleプロパティは、グラデーションの開始点のxおよびy座標を表します。
- endX、endY -これらのdoubleプロパティは、グラデーションの終点のxおよびy座標を表します。
- cycleMethod -この引数は、カラーグラデーション境界の外側の領域が開始点と終了点によってどのように定義され、どのように塗りつぶされるべきかを定義します。
- 比例-これはブール変数です。このプロパティを true に設定すると、開始位置と終了位置が比率に設定されます。
- ストップ-この引数は、グラデーションラインに沿ったカラーストップポイントを定義します。
//Setting the radial gradient
Stop[] stops = new Stop[] {
new Stop(0.0, Color.WHITE),
new Stop(0.3, Color.RED),
new Stop(1.0, Color.DARKRED)
};
RadialGradient radialGradient =
new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);例
以下は、JavaFXのノードに放射状のグラデーションパターンを適用する方法を示す例です。 ここでは、円とテキストノードを作成し、それらにグラデーションパターンを適用しています。
このコードを RadialGradientExample.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.paint.CycleMethod;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class RadialGradientExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the properties of the circle
circle.setCenterX(300.0f);
circle.setCenterY(180.0f);
circle.setRadius(90.0f);
//Drawing a text
Text text = new Text("This is a colored circle");
//Setting the font of the text
text.setFont(Font.font("Edwardian Script ITC", 50));
//Setting the position of the text
text.setX(155);
text.setY(50);
//Setting the radial gradient
Stop[] stops = new Stop[] {
new Stop(0.0, Color.WHITE),
new Stop(0.3, Color.RED),
new Stop(1.0, Color.DARKRED)
};
RadialGradient radialGradient =
new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);
//Setting the radial gradient to the circle and text
circle.setFill(radialGradient);
text.setFill(radialGradient);
//Creating a Group object
Group root = new Group(circle, text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Radial Gradient Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]) {
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac RadialGradientExample.java
java RadialGradientExample実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
JavaFX-画像
パッケージ javafx.scene.image でJavaFXが提供するクラスを使用して、イメージをロードおよび変更できます。 JavaFXは、 Bmp、Gif、Jpeg、Png などの画像形式をサポートしています。
この章では、画像をJavaFXにロードする方法、画像を複数のビューに投影する方法、画像のピクセルを変更する方法について説明します。
画像の読み込み
パッケージ javafx.scene.image の Image という名前のクラスをインスタンス化することにより、JavaFXにイメージをロードできます。
クラスのコンストラクタに、次のいずれかを渡す必要があります-
- ロードする画像の InputStream オブジェクト、または
- 画像のURLを保持する文字列変数。
//Passing FileInputStream object as a parameter
FileInputStream inputstream = new FileInputStream("C:\\images\\image.jpg");
Image image = new Image(inputstream);
//Loading image from URL
//Image image = new Image(new FileInputStream("url for the image));画像をロードした後、 ImageView クラスをインスタンス化し、次のようにそのコンストラクタに画像を渡すことにより、画像のビューを設定することができます-
ImageView imageView = new ImageView(image);例
以下は、JavaFXで画像をロードし、ビューを設定する方法を示す例です。
このコードを ImageExample.java という名前のファイルに保存します。
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
public class ImageExample extends Application {
@Override
public void start(Stage stage) throws FileNotFoundException {
//Creating an image
Image image = new Image(new FileInputStream("path of the image"));
//Setting the image view
ImageView imageView = new ImageView(image);
//Setting the position of the image
imageView.setX(50);
imageView.setY(25);
//setting the fit height and width of the image view
imageView.setFitHeight(455);
imageView.setFitWidth(500);
//Setting the preserve ratio of the image view
imageView.setPreserveRatio(true);
//Creating a Group object
Group root = new Group(imageView);
//Creating a scene object
Scene scene = new Scene(root, 600, 500);
//Setting title to the Stage
stage.setTitle("Loading an image");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]) {
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac ImageExample.java
java ImageExample実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
画像の複数のビュー
同じシーンの画像に複数のビューを設定することもできます。 次のプログラムは、JavaFXのシーン内の画像にさまざまなビューを設定する方法を示す例です。
このコードを MultipleViews.java という名前のファイルに保存します。
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;
public class MultipleViews extends Application {
@Override
public void start(Stage stage) throws FileNotFoundException {
//Creating an image
Image image = new Image(new FileInputStream("file path"));
//Setting the image view 1
ImageView imageView1 = new ImageView(image);
//Setting the position of the image
imageView1.setX(50);
imageView1.setY(25);
//setting the fit height and width of the image view
imageView1.setFitHeight(300);
imageView1.setFitWidth(250);
//Setting the preserve ratio of the image view
imageView1.setPreserveRatio(true);
//Setting the image view 2
ImageView imageView2 = new ImageView(image);
//Setting the position of the image
imageView2.setX(350);
imageView2.setY(25);
//setting the fit height and width of the image view
imageView2.setFitHeight(150);
imageView2.setFitWidth(250);
//Setting the preserve ratio of the image view
imageView2.setPreserveRatio(true);
//Setting the image view 3
ImageView imageView3 = new ImageView(image);
//Setting the position of the image
imageView3.setX(350);
imageView3.setY(200);
//setting the fit height and width of the image view
imageView3.setFitHeight(100);
imageView3.setFitWidth(100);
//Setting the preserve ratio of the image view
imageView3.setPreserveRatio(true);
//Creating a Group object
Group root = new Group(imageView1, imageView2, imageView3);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting title to the Stage
stage.setTitle("Multiple views of an image");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]) {
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac MultipleViews.java
java MultipleViews実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
ピクセルを書く
JavaFXは、画像のピクセルを読み書きするための PixelReader および PixelWriter クラスという名前のクラスを提供します。 WritableImage クラスは、書き込み可能なイメージを作成するために使用されます。
以下は、画像のピクセルを読み書きする方法を示す例です。 ここでは、画像の色の値を読み取り、それを暗くしています。
このコードを WritingPixelsExample.java という名前のファイルに保存します。
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.image.PixelReader;
import javafx.scene.image.PixelWriter;
import javafx.scene.image.WritableImage;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class WritingPixelsExample extends Application {
@Override
public void start(Stage stage) throws FileNotFoundException {
//Creating an image
Image image = new Image(new FileInputStream("C:\\images\\logo.jpg"));
int width = (int)image.getWidth();
int height = (int)image.getHeight();
//Creating a writable image
WritableImage wImage = new WritableImage(width, height);
//Reading color from the loaded image
PixelReader pixelReader = image.getPixelReader();
//getting the pixel writer
PixelWriter writer = wImage.getPixelWriter();
//Reading the color of the image
for(int y = 0; y < height; y++) {
for(int x = 0; x < width; x++) {
//Retrieving the color of the pixel of the loaded image
Color color = pixelReader.getColor(x, y);
//Setting the color to the writable image
writer.setColor(x, y, color.darker());
}
}
//Setting the view for the writable image
ImageView imageView = new ImageView(wImage);
//Creating a Group object
Group root = new Group(imageView);
//Creating a scene object
Scene scene = new Scene(root, 600, 500);
//Setting title to the Stage
stage.setTitle("Writing pixels ");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]) {
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac WritingPixelsExample.java
java WritingPixelsExample実行すると、上記のプログラムは次のようにJavaFXウィンドウを生成します-
JavaFX-3Dシェイプ
前の章で、XY平面に2D形状を描く方法を見てきました。 これらの2D形状に加えて、JavaFXを使用して他のいくつかの3D形状も描画できます。
3D形状
一般に、3D形状は、XYZ平面に描画できる幾何学的図形です。 これらには、 Cylinder、Sphere および Box が含まれます。
上記の各3D形状はクラスによって表され、これらのすべてのクラスはパッケージ javafx.scene.shape に属します。 Shape3D という名前のクラスは、JavaFXのすべての3次元形状の基本クラスです。
3Dシェイプを作成する
3次元形状を作成するには、する必要があります-
- 必要な3D形状のそれぞれのクラスをインスタンス化します。
- 3D形状のプロパティを設定します。
- 3D形状オブジェクトをグループに追加します。
各クラスのインスタンス化
3次元の形状を作成するには、まず、それぞれのクラスをインスタンス化する必要があります。 たとえば、3Dボックスを作成する場合、次のようにBoxという名前のクラスをインスタンス化する必要があります-
Box box = new Box();シェイプのプロパティを設定する
クラスをインスタンス化した後、setterメソッドを使用して形状のプロパティを設定する必要があります。
たとえば、3Dボックスを描画するには、その幅、高さ、深さを渡す必要があります。 次のように、それぞれのセッターメソッドを使用してこれらの値を指定できます-
//Setting the properties of the Box
box.setWidth(200.0);
box.setHeight(400.0);
box.setDepth(200.0);シェイプオブジェクトをグループに追加する
最後に、以下に示すように、コンストラクターのパラメーターとして渡すことにより、図形のオブジェクトをグループに追加する必要があります。
//Creating a Group object
Group root = new Group(box);次の表に、JavaFXが提供するさまざまな3D形状のリストを示します。
| S.No | Shape & Description |
|---|---|
| 1 |
直方体は、長さ（深さ）、幅、および*高さ*を持つ3次元形状です。 JavaFXでは、3次元ボックスは Box という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 このクラスをインスタンス化することにより、JavaFXでBoxノードを作成できます。 このクラスには、doubleデータ型の3つのプロパティがあります-
|
| 2 |
シリンダーは、曲面で接続された2つの平行な（ほとんど円形の）ベースを持つ閉じたソリッドです。 これは、2つのパラメーター、つまり、円形ベースの*半径*とシリンダーの*高さ*によって記述されます。 JavaFXでは、シリンダーは Cylinder という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 このクラスをインスタンス化することにより、JavaFXでシリンダーノードを作成できます。 このクラスには、doubleデータ型の2つのプロパティがあります-
|
| 3 |
球体は、3D空間内の特定のポイントからすべて同じ距離rにあるポイントのセットとして定義されます。 この距離rは球の半径であり、与えられた点は球の中心です。 JavaFXでは、球体は Sphere という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.shape に属します。 このクラスをインスタンス化することにより、JavaFXで球体ノードを作成できます。 このクラスには、doubleデータ型の radius という名前のプロパティがあります。 球体の半径を表します。 |
3Dオブジェクトのプロパティ
すべての3次元オブジェクトについて、Cull Face、Drawing Mode、Materialなどのさまざまなプロパティを設定できます。
次のセクションでは、3Dオブジェクトのプロパティについて説明します。
カルフェイス
一般に、カリングとは、形状の不適切な方向の部分（ビュー領域には表示されない）を削除することです。
Cull Faceプロパティは CullFace タイプであり、3D形状のCull Faceを表します。 以下に示すように、メソッド* setCullFace（）*を使用して、形状のCull Faceを設定できます-
box.setCullFace(CullFace.NONE);形状のストロークタイプは-
- なし-カリングは実行されません（CullFace.NONE）。
- Front -すべての正面向きのポリゴンがカリングされます。 （CullFace.FRONT）。
- Back -すべての裏面ポリゴンがカリングされます。 （StrokeType.BACK）。
デフォルトでは、3次元形状のカリング面は「戻る」です。
例
次のプログラムは、球体のさまざまなカリング面を示す例です。 このコードを SphereCullFace.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.CullFace;
import javafx.stage.Stage;
import javafx.scene.shape.Sphere;
public class SphereCullFace extends Application {
@Override
public void start(Stage stage) {
//Drawing Sphere1
Sphere sphere1 = new Sphere();
//Setting the radius of the Sphere
sphere1.setRadius(50.0);
//Setting the position of the sphere
sphere1.setTranslateX(100);
sphere1.setTranslateY(150);
//setting the cull face of the sphere to front
sphere1.setCullFace(CullFace.FRONT);
//Drawing Sphere2
Sphere sphere2 = new Sphere();
//Setting the radius of the Sphere
sphere2.setRadius(50.0);
//Setting the position of the sphere
sphere2.setTranslateX(300);
sphere2.setTranslateY(150);
//Setting the cull face of the sphere to back
sphere2.setCullFace(CullFace.BACK);
//Drawing Sphere3
Sphere sphere3 = new Sphere();
//Setting the radius of the Sphere
sphere3.setRadius(50.0);
//Setting the position of the sphere
sphere3.setTranslateX(500);
sphere3.setTranslateY(150);
//Setting the cull face of the sphere to none
sphere2.setCullFace(CullFace.NONE);
//Creating a Group object
Group root = new Group(sphere1, sphere2, sphere3);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting title to the Stage
stage.setTitle("Drawing a Sphere");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac SphereCullFace.java
java SphereCullFace実行すると、上記のプログラムは、それぞれ次のように、カルフェイス値 FRONT、BACK および NONE を持つ3つの球体を表示するJavaFXウィンドウを生成します-
描画モード
プロパティは DrawMode 型であり、現在の3D形状の描画に使用される描画モードを表します。 あなたは次のようにメソッドsetDrawMode（）を使用して3D形状を描くために描画モードを選択することができます-
box.setDrawMode(DrawMode.FILL);JavaFXでは、2つの描画モードを選択して3D形状を描画できます。
- Fill -このモードは、2Dシェイプを描画して塗りつぶします（DrawMode.FILL）。
- Line -このモードは、線を使用して3D形状を描画します（DrawMode.LINE）。
デフォルトでは、3次元形状の描画モードは塗りつぶしです。
例
次のプログラムは、3Dボックスのさまざまな描画モードを示す例です。 このコードを BoxDrawMode.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.shape.Box;
import javafx.scene.shape.DrawMode;
import javafx.stage.Stage;
public class BoxDrawMode extends Application {
@Override
public void start(Stage stage) {
//Drawing a Box
Box box1 = new Box();
//Setting the properties of the Box
box1.setWidth(100.0);
box1.setHeight(100.0);
box1.setDepth(100.0);
//Setting the position of the box
box1.setTranslateX(200);
box1.setTranslateY(150);
box1.setTranslateZ(0);
//Setting the drawing mode of the box
box1.setDrawMode(DrawMode.LINE);
//Drawing a Box
Box box2 = new Box();
//Setting the properties of the Box
box2.setWidth(100.0);
box2.setHeight(100.0);
box2.setDepth(100.0);
//Setting the position of the box
box2.setTranslateX(450);//450
box2.setTranslateY(150);//150
box2.setTranslateZ(300);
//Setting the drawing mode of the box
box2.setDrawMode(DrawMode.FILL);
//Creating a Group object
Group root = new Group(box1, box2);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting camera
PerspectiveCamera camera = new PerspectiveCamera(false);
camera.setTranslateX(0);
camera.setTranslateY(0);
camera.setTranslateZ(0);
scene.setCamera(camera);
//Setting title to the Stage
stage.setTitle("Drawing a Box");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac BoxDrawMode.java
java BoxDrawMode実行時に、上記のプログラムは、次のように、それぞれ描画モード値LINEおよびFILLの2つのボックスを表示するJavaFXウィンドウを生成します-
素材
cull Faceプロパティのタイプは Material であり、3D形状のマテリアルの表面を選択するために使用されます。 次のようにメソッド* setCullFace（）*を使用して、3D形状のマテリアルを設定できます-
cylinder.setMaterial(material);このメソッドについて前述したように、タイプMaterialのオブジェクトを渡す必要があります。 パッケージ javafx.scene.paint の PhongMaterial クラスはこのクラスのサブクラスであり、Phongシェーディングマテリアルを表す7つのプロパティを提供します。 これらのプロパティのセッターメソッドを使用して、これらすべてのタイプのマテリアルを3Dシェイプの表面に適用できます。
以下は、JavaFXで利用可能な素材の種類です-
- bumpMap -これは、RGBイメージとして保存された法線マップを表します。
- diffuseMap -これは拡散マップを表します。
- selfIlluminationMap -これは、このPhongMaterialの自己照明マップを表します。
- specularMap -これは、このPhongMaterialのスペキュラーマップを表します。
- diffuseColor -これは、このPhongMaterialの拡散色を表します。
- specularColor -これは、このPhongMaterialの鏡面反射色を表します。
- specularPower -これは、このPhongMaterialの鏡面屈折力を表します。
デフォルトでは、3次元シェイプのマテリアルは、ライトグレーの拡散色を持つPhongMaterialです。
例
以下は、シリンダー上のさまざまなマテリアルを表示する例です。 このコードを CylinderMaterials.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Cylinder;
import javafx.stage.Stage;
public class CylinderMaterials extends Application {
@Override
public void start(Stage stage) {
//Drawing Cylinder1
Cylinder cylinder1 = new Cylinder();
//Setting the properties of the Cylinder
cylinder1.setHeight(130.0f);
cylinder1.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder1.setTranslateX(100);
cylinder1.setTranslateY(75);
//Preparing the phong material of type bump map
PhongMaterial material1 = new PhongMaterial();
material1.setBumpMap(new Image
("http://www.finddevguides.com/images/tplogo.gif"));
//Setting the bump map material to Cylinder1
cylinder1.setMaterial(material1);
//Drawing Cylinder2
Cylinder cylinder2 = new Cylinder();
//Setting the properties of the Cylinder
cylinder2.setHeight(130.0f);
cylinder2.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder2.setTranslateX(200);
cylinder2.setTranslateY(75);
//Preparing the phong material of type diffuse map
PhongMaterial material2 = new PhongMaterial();
material2.setDiffuseMap(new Image
("http://www.finddevguides.com/images/tp-logo.gif"));
//Setting the diffuse map material to Cylinder2
cylinder2.setMaterial(material2);
//Drawing Cylinder3
Cylinder cylinder3 = new Cylinder();
//Setting the properties of the Cylinder
cylinder3.setHeight(130.0f);
cylinder3.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder3.setTranslateX(300);
cylinder3.setTranslateY(75);
//Preparing the phong material of type Self Illumination Map
PhongMaterial material3 = new PhongMaterial();
material3.setSelfIlluminationMap(new Image
("http://www.finddevguides.com/images/tp-logo.gif"));
//Setting the Self Illumination Map material to Cylinder3
cylinder3.setMaterial(material3);
//Drawing Cylinder4
Cylinder cylinder4 = new Cylinder();
//Setting the properties of the Cylinder
cylinder4.setHeight(130.0f);
cylinder4.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder4.setTranslateX(400);
cylinder4.setTranslateY(75);
//Preparing the phong material of type Specular Map
PhongMaterial material4 = new PhongMaterial();
material4.setSpecularMap(new Image
("http://www.finddevguides.com/images/tp-logo.gif"));
//Setting the Specular Map material to Cylinder4
cylinder4.setMaterial(material4);
//Drawing Cylinder5
Cylinder cylinder5 = new Cylinder();
//Setting the properties of the Cylinder
cylinder5.setHeight(130.0f);
cylinder5.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder5.setTranslateX(100);
cylinder5.setTranslateY(300);
//Preparing the phong material of type diffuse color
PhongMaterial material5 = new PhongMaterial();
material5.setDiffuseColor(Color.BLANCHEDALMOND);
//Setting the diffuse color material to Cylinder5
cylinder5.setMaterial(material5);
//Drawing Cylinder6
Cylinder cylinder6 = new Cylinder();
//Setting the properties of the Cylinder
cylinder6.setHeight(130.0f);
cylinder6.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder6.setTranslateX(200);
cylinder6.setTranslateY(300);
//Preparing the phong material of type specular color
PhongMaterial material6 = new PhongMaterial();
//setting the specular color map to the material
material6.setSpecularColor(Color.BLANCHEDALMOND);
//Setting the specular color material to Cylinder6
cylinder6.setMaterial(material6);
//Drawing Cylinder7
Cylinder cylinder7 = new Cylinder();
//Setting the properties of the Cylinder
cylinder7.setHeight(130.0f);
cylinder7.setRadius(30.0f);
//Setting the position of the Cylinder
cylinder7.setTranslateX(300);
cylinder7.setTranslateY(300);
//Preparing the phong material of type Specular Power
PhongMaterial material7 = new PhongMaterial();
material7.setSpecularPower(0.1);
//Setting the Specular Power material to the Cylinder
cylinder7.setMaterial(material7);
//Creating a Group object
Group root = new Group(cylinder1 ,cylinder2, cylinder3,
cylinder4, cylinder5, cylinder6, cylinder7);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Setting camera
PerspectiveCamera camera = new PerspectiveCamera(false);
camera.setTranslateX(0);
camera.setTranslateY(0);
camera.setTranslateZ(-10);
scene.setCamera(camera);
//Setting title to the Stage
stage.setTitle("Drawing a cylinder");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
Javac CylinderMaterials.java
java CylinderMaterials上記のプログラムは、実行時に、次のスクリーンショットに示すように、マテリアル、バンプマップ、拡散マップ、自己照明マップ、スペキュラーマップ、拡散カラー、スペキュラーカラー、（BLANCHEDALMOND）スペキュラーパワーを持つ7つのシリンダーを表示するJavaFXウィンドウを生成します−
JavaFX-イベント処理
JavaFXでは、GUIアプリケーション、Webアプリケーション、およびグラフィカルアプリケーションを開発できます。 このようなアプリケーションでは、ユーザーがアプリケーション（ノード）と対話するたびに、イベントが発生したと言われます。
たとえば、ボタンをクリックする、マウスを動かす、キーボードから文字を入力する、リストから項目を選択する、ページをスクロールするなどのイベントが発生します。
イベントの種類
イベントは大きく次の2つのカテゴリに分類することができます-
- フォアグラウンドイベント-ユーザーの直接的な対話を必要とするイベント。 これらは、グラフィカルユーザーインターフェイスのグラフィカルコンポーネントと対話する人の結果として生成されます。 たとえば、ボタンをクリックする、マウスを動かす、キーボードから文字を入力する、リストから項目を選択する、ページをスクロールするなど
- バックグラウンドイベント-エンドユーザーの相互作用を必要とするイベントは、バックグラウンドイベントとして知られています。 バックグラウンドイベントの例は、オペレーティングシステムの中断、ハードウェアまたはソフトウェアの障害、タイマーの期限切れ、操作の完了です。
JavaFXのイベント
JavaFXは、さまざまなイベントを処理するためのサポートを提供します。 パッケージ javafx.event の Event というクラスは、イベントの基本クラスです。
そのサブクラスのインスタンスはイベントです。 JavaFXは、さまざまなイベントを提供します。 それらの一部を以下にリストします。
- マウスイベント-これは、マウスがクリックされたときに発生する入力イベントです。 MouseEvent という名前のクラスで表されます。 これには、マウスクリック、マウス押下、マウスリリース、マウス移動、マウス入力ターゲット、マウス終了ターゲットなどのアクションが含まれます。
- キーイベント-これは、ノードでキーストロークが発生したことを示す入力イベントです。 KeyEvent という名前のクラスで表されます。 このイベントには、キーの押下、キーのリリース、キーの入力などのアクションが含まれます。
- ドラッグイベント-これは、マウスがドラッグされたときに発生する入力イベントです。 DragEvent という名前のクラスで表されます。 入力されたドラッグ、ドロップされたドラッグ、入力されたターゲットのドラッグ、終了したターゲットのドラッグ、上にドラッグなどのアクションが含まれます
- ウィンドウイベント-これは、ウィンドウの表示/非表示アクションに関連するイベントです。 WindowEvent という名前のクラスで表されます。 ウィンドウの非表示、ウィンドウの表示、ウィンドウの非表示、ウィンドウの表示などのアクションが含まれます。
イベント処理
イベント処理は、イベントを制御し、イベントが発生した場合に何をすべきかを決定するメカニズムです。 このメカニズムには、イベントが発生したときに実行されるイベントハンドラーと呼ばれるコードがあります。
JavaFXは、イベントを処理するハンドラーとフィルターを提供します。 JavaFXでは、すべてのイベントに-
- ターゲット-イベントが発生したノード。 ターゲットは、ウィンドウ、シーン、およびノードです。
- ソース-イベントが生成されるソースは、イベントのソースになります。 上記のシナリオでは、マウスがイベントのソースです。
- Type -発生したイベントのタイプ。マウスイベントの場合–マウスが押された状態、マウスが離された状態がイベントのタイプです。
次のようにグループオブジェクトを使用して、サークル、停止、再生ボタンが挿入されたアプリケーションがあると仮定します-
再生ボタンをクリックすると、ソースはマウスになり、ターゲットノードは再生ボタンになり、生成されるイベントのタイプはマウスクリックになります。
JavaFXでのイベント処理のフェーズ
イベントが生成されるたびに、JavaFXは次のフェーズを経ます。
ルート建設
イベントが生成されるたびに、イベントのデフォルト/初期ルートは*イベントディスパッチチェーン*の構築によって決定されます。 ステージからソースノードへのパスです。
上記のシナリオで再生ボタンをクリックしたときに生成されるイベントのイベントディスパッチチェーンを次に示します。
イベントキャプチャフェーズ
イベントディスパッチチェーンの構築後、アプリケーションのルートノードがイベントをディスパッチします。 このイベントは、ディスパッチチェーン内のすべてのノード（上から下）に移動します。 これらのノードのいずれかに、生成されたイベントに対して filter が登録されている場合、実行されます。 ディスパッチチェーン内のどのノードにも生成されたイベントのフィルターがない場合、ターゲットノードに渡され、最終的にターゲットノードがイベントを処理します。
イベントバブリングフェーズ
イベントバブリングフェーズでは、イベントはターゲットノードからステージノードに移動します（下から上）。 イベントディスパッチチェーン内のノードのいずれかに、生成されたイベント用に登録された handler がある場合、実行されます。 これらのノードにイベントを処理するハンドラがない場合、イベントはルートノードに到達し、最終的にプロセスが完了します。
イベントハンドラーとフィルター
イベントフィルターとハンドラーは、イベントを処理するアプリケーションロジックを含むものです。 ノードは、複数のハンドラー/フィルターに登録できます。 親子ノードの場合、共通のフィルター/ハンドラーを親に提供できます。これは、すべての子ノードのデフォルトとして処理されます。
前述のように、イベント中の処理は実行されるフィルターであり、イベントバブリングフェーズ中はハンドラーが実行されます。 すべてのハンドラーとフィルターは、パッケージ javafx.event の EventHandler インターフェースを実装します。
イベントフィルターの追加と削除
イベントフィルターをノードに追加するには、 Node クラスの* addEventFilter（）*メソッドを使用してこのフィルターを登録する必要があります。
//Creating the mouse event handler
EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
System.out.println("Hello World");
circle.setFill(Color.DARKSLATEBLUE);
}
};
//Adding event Filter
Circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);同様に、以下に示すようにメソッドremoveEventFilter（）を使用してフィルターを削除することができます-
circle.removeEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);イベント処理の例
以下は、イベントフィルターを使用したJavaFXでのイベント処理を示す例です。 このコードを EventFiltersExample.java という名前のファイルに保存します。
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class EventFiltersExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(300.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(25.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Setting the text
Text text = new Text("Click on the circle to change its color");
//Setting the font of the text
text.setFont(Font.font(null, FontWeight.BOLD, 15));
//Setting the color of the text
text.setFill(Color.CRIMSON);
//setting the position of the text
text.setX(150);
text.setY(50);
//Creating the mouse event handler
EventHandler<MouseEvent> eventHandler = new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent e) {
System.out.println("Hello World");
circle.setFill(Color.DARKSLATEBLUE);
}
};
//Registering the event filter
circle.addEventFilter(MouseEvent.MOUSE_CLICKED, eventHandler);
//Creating a Group object
Group root = new Group(circle, text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting the fill color to the scene
scene.setFill(Color.LAVENDER);
//Setting title to the Stage
stage.setTitle("Event Filters Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac EventFiltersExample.java
java EventFiltersExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
イベントハンドラーの追加と削除
ノードにイベントハンドラーを追加するには、以下に示すように、 Node クラスの* addEventHandler（）*メソッドを使用してこのハンドラーを登録する必要があります。
//Creating the mouse event handler
EventHandler<javafx.scene.input.MouseEvent> eventHandler =
new EventHandler<javafx.scene.input.MouseEvent>() {
@Override
public void handle(javafx.scene.input.MouseEvent e) {
System.out.println("Hello World");
circle.setFill(Color.DARKSLATEBLUE);
}
};
//Adding the event handler
circle.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandler);同様に、以下に示すようにメソッドremoveEventHandler（）を使用してイベントハンドラを削除することができます-
circle.removeEventHandler(MouseEvent.MOUSE_CLICKED, eventHandler);例
次のプログラムは、イベントハンドラーを使用したJavaFXでのイベント処理を示す例です。
このコードを EventHandlersExample.java という名前のファイルに保存します。
import javafx.animation.RotateTransition;
import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.PerspectiveCamera;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.PhongMaterial;
import javafx.scene.shape.Box;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;
public class EventHandlersExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Box
Box box = new Box();
//Setting the properties of the Box
box.setWidth(150.0);
box.setHeight(150.0);
box.setDepth(100.0);
//Setting the position of the box
box.setTranslateX(350);
box.setTranslateY(150);
box.setTranslateZ(50);
//Setting the text
Text text = new Text("Type any letter to rotate the box,
and click on the box to stop the rotation");
//Setting the font of the text
text.setFont(Font.font(null, FontWeight.BOLD, 15));
//Setting the color of the text
text.setFill(Color.CRIMSON);
//setting the position of the text
text.setX(20);
text.setY(50);
//Setting the material of the box
PhongMaterial material = new PhongMaterial();
material.setDiffuseColor(Color.DARKSLATEBLUE);
//Setting the diffuse color material to box
box.setMaterial(material);
//Setting the rotation animation to the box
RotateTransition rotateTransition = new RotateTransition();
//Setting the duration for the transition
rotateTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
rotateTransition.setNode(box);
//Setting the axis of the rotation
rotateTransition.setAxis(Rotate.Y_AXIS);
//Setting the angle of the rotation
rotateTransition.setByAngle(360);
//Setting the cycle count for the transition
rotateTransition.setCycleCount(50);
//Setting auto reverse value to false
rotateTransition.setAutoReverse(false);
//Creating a text filed
TextField textField = new TextField();
//Setting the position of the text field
textField.setLayoutX(50);
textField.setLayoutY(100);
//Handling the key typed event
EventHandler<KeyEvent> eventHandlerTextField = new EventHandler<KeyEvent>() {
@Override
public void handle(KeyEvent event) {
//Playing the animation
rotateTransition.play();
}
};
//Adding an event handler to the text feld
textField.addEventHandler(KeyEvent.KEY_TYPED, eventHandlerTextField);
//Handling the mouse clicked event(on box)
EventHandler<javafx.scene.input.MouseEvent> eventHandlerBox =
new EventHandler<javafx.scene.input.MouseEvent>() {
@Override
public void handle(javafx.scene.input.MouseEvent e) {
rotateTransition.stop();
}
};
//Adding the event handler to the box
box.addEventHandler(javafx.scene.input.MouseEvent.MOUSE_CLICKED, eventHandlerBox);
//Creating a Group object
Group root = new Group(box, textField, text);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
//Setting camera
PerspectiveCamera camera = new PerspectiveCamera(false);
camera.setTranslateX(0);
camera.setTranslateY(0);
camera.setTranslateZ(0);
scene.setCamera(camera);
//Setting title to the Stage
stage.setTitle("Event Handlers Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac EventHandlersExample.java
java EventHandlersExample実行すると、上記のプログラムは、以下に示すようにテキストフィールドと3Dボックスを表示するJavaFXウィンドウを生成します-
ここで、テキストフィールドに文字を入力すると、3Dボックスがx軸に沿って回転し始めます。 もう一度ボックスをクリックすると、回転が停止します。
イベント処理に便利なメソッドを使用する
JavaFXの一部のクラスは、イベントハンドラープロパティを定義します。 それぞれのセッターメソッドを使用してこれらのプロパティに値を設定することにより、イベントハンドラーに登録できます。 これらのメソッドは、便利なメソッドとして知られています。
これらのメソッドのほとんどは、Node、Scene、Windowなどのクラスに存在し、それらのすべてのサブクラスで使用できます。
たとえば、マウスイベントリスナーをボタンに追加するには、以下に示すように便利なメソッド* setOnMouseClicked（）*を使用できます。
playButton.setOnMouseClicked((new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
System.out.println("Hello World");
pathTransition.play();
}
}));例
次のプログラムは、便利なメソッドを使用したJavaFXでのイベント処理を示す例です。
このコードを ConvinienceMethodsExample.java という名前のファイルに保存します。
import javafx.animation.PathTransition;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ConvinienceMethodsExample extends Application {
@Override
public void start(Stage stage) {
//Drawing a Circle
Circle circle = new Circle();
//Setting the position of the circle
circle.setCenterX(300.0f);
circle.setCenterY(135.0f);
//Setting the radius of the circle
circle.setRadius(25.0f);
//Setting the color of the circle
circle.setFill(Color.BROWN);
//Setting the stroke width of the circle
circle.setStrokeWidth(20);
//Creating a Path
Path path = new Path();
//Moving to the staring point
MoveTo moveTo = new MoveTo(208, 71);
//Creating 1st line
LineTo line1 = new LineTo(421, 161);
//Creating 2nd line
LineTo line2 = new LineTo(226,232);
//Creating 3rd line
LineTo line3 = new LineTo(332,52);
//Creating 4th line
LineTo line4 = new LineTo(369, 250);
//Creating 5th line
LineTo line5 = new LineTo(208, 71);
//Adding all the elements to the path
path.getElements().add(moveTo);
path.getElements().addAll(line1, line2, line3, line4, line5);
//Creating the path transition
PathTransition pathTransition = new PathTransition();
//Setting the duration of the transition
pathTransition.setDuration(Duration.millis(1000));
//Setting the node for the transition
pathTransition.setNode(circle);
//Setting the path for the transition
pathTransition.setPath(path);
//Setting the orientation of the path
pathTransition.setOrientation(
PathTransition.OrientationType.ORTHOGONAL_TO_TAN GENT);
//Setting the cycle count for the transition
pathTransition.setCycleCount(50);
//Setting auto reverse value to true
pathTransition.setAutoReverse(false);
//Creating play button
Button playButton = new Button("Play");
playButton.setLayoutX(300);
playButton.setLayoutY(250);
circle.setOnMouseClicked (new EventHandler<javafx.scene.input.MouseEvent>() {
@Override
public void handle(javafx.scene.input.MouseEvent e) {
System.out.println("Hello World");
circle.setFill(Color.DARKSLATEBLUE);
}
});
playButton.setOnMouseClicked((new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
System.out.println("Hello World");
pathTransition.play();
}
}));
//Creating stop button
Button stopButton = new Button("stop");
stopButton.setLayoutX(250);
stopButton.setLayoutY(250);
stopButton.setOnMouseClicked((new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
System.out.println("Hello World");
pathTransition.stop();
}
}));
//Creating a Group object
Group root = new Group(circle, playButton, stopButton);
//Creating a scene object
Scene scene = new Scene(root, 600, 300);
scene.setFill(Color.LAVENDER);
//Setting title to the Stage
stage.setTitle("Convenience Methods Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac ConvinienceMethodsExample.java
java ConvinienceMethodsExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。 ここで、再生ボタンをクリックしてアニメーションを開始し、停止ボタンをクリックしてアニメーションを停止します。
JavaFX-UIコントロール
すべてのユーザーインターフェイスは、次の3つの主要な側面を考慮します-
- * UI要素*-これらは、ユーザーが最終的に表示および操作するコア視覚要素です。 JavaFXは、基本から複雑までさまざまな、広く使用されている一般的な要素の膨大なリストを提供します。これについては、このチュートリアルで説明します。
- レイアウト-UI要素を画面上で整理する方法を定義し、GUI（グラフィカルユーザーインターフェイス）に最終的なルックアンドフィールを提供します。 この部分については、レイアウトの章で説明します。
- 動作-これらは、ユーザーがUI要素と対話するときに発生するイベントです。 この部分については、イベント処理の章で説明します。
JavaFXは、パッケージ javafx.scene.control でいくつかのクラスを提供します。 さまざまなGUIコンポーネント（コントロール）を作成するために、JavaFXは日付ピッカー、ボタンテキストフィールドなどのいくつかのコントロールをサポートしています。
各コントロールはクラスで表されます。それぞれのクラスをインスタンス化して、コントロールを作成できます。
以下は、GUIがJavaFXを使用して設計されている間に一般的に使用されるコントロールのリストです。
| S.No | Control & Description |
|---|---|
| 1 |
Label Labelオブジェクトは、テキストを配置するためのコンポーネントです。 |
| 2 |
Button このクラスはラベル付きボタンを作成します。 |
| 3 |
ColorPicker ColorPickerは、ユーザーが色を操作および選択できるように設計されたコントロールのペインを提供します。 |
| 4 |
CheckBox CheckBoxは、オン（true）またはオフ（false）状態にできるグラフィカルコンポーネントです。 |
| 5 |
RadioButton RadioButtonクラスはグラフィカルコンポーネントであり、グループ内でON（真）またはOFF（偽）状態になります。 |
| 6 |
ListView ListViewコンポーネントは、テキストアイテムのスクロールリストをユーザーに提示します。 |
| 7 |
TextField TextFieldオブジェクトは、1行のテキストの編集を可能にするテキストコンポーネントです。 |
| 8 |
PasswordField PasswordFieldオブジェクトは、パスワード入力専用のテキストコンポーネントです。 |
| 9 |
Scrollbar Scrollbarコントロールは、ユーザーが値の範囲から選択できるようにするためのスクロールバーコンポーネントを表します。 |
| 10 |
FileChooser FileChooserコントロールは、ユーザーがファイルを選択できるダイアログウィンドウを表します。 |
| 11 |
ProgressBar タスクが完了に向かって進行すると、進行状況バーにタスクの完了率が表示されます。 |
| 12 |
Slider スライダーを使用すると、ユーザーは制限された間隔内でノブをスライドさせることでグラフィカルに値を選択できます。 |
例
次のプログラムは、JavaFXでログインページを表示する例です。 ここでは、コントロール label、text field、password field および button を使用しています。
このコードを LoginPage.java という名前のファイルに保存します。
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class LoginPage extends Application {
@Override
public void start(Stage stage) {
//creating label email
Text text1 = new Text("Email");
//creating label password
Text text2 = new Text("Password");
//Creating Text Filed for email
TextField textField1 = new TextField();
//Creating Text Filed for password
PasswordField textField2 = new PasswordField();
//Creating Buttons
Button button1 = new Button("Submit");
Button button2 = new Button("Clear");
//Creating a Grid Pane
GridPane gridPane = new GridPane();
//Setting size for the pane
gridPane.setMinSize(400, 200);
//Setting the padding
gridPane.setPadding(new Insets(10, 10, 10, 10));
//Setting the vertical and horizontal gaps between the columns
gridPane.setVgap(5);
gridPane.setHgap(5);
//Setting the Grid alignment
gridPane.setAlignment(Pos.CENTER);
//Arranging all the nodes in the grid
gridPane.add(text1, 0, 0);
gridPane.add(textField1, 1, 0);
gridPane.add(text2, 0, 1);
gridPane.add(textField2, 1, 1);
gridPane.add(button1, 0, 2);
gridPane.add(button2, 1, 2);
//Styling nodes
button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
text1.setStyle("-fx-font: normal bold 20px 'serif' ");
text2.setStyle("-fx-font: normal bold 20px 'serif' ");
gridPane.setStyle("-fx-background-color: BEIGE;");
//Creating a scene object
Scene scene = new Scene(gridPane);
//Setting title to the Stage
stage.setTitle("CSS Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac LoginPage.java
java LoginPage実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
次のプログラムは、* Date Picker、Radio Button、Toggle Button、Check Box、List View、Choice ListなどのJavaFXのコントロールを示す登録フォームの例です。
このコードを Registration.java という名前のファイルに保存します。
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.CheckBox;
import javafx.scene.control.ChoiceBox;
import javafx.scene.control.DatePicker;
import javafx.scene.control.ListView;
import javafx.scene.control.RadioButton;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.scene.control.ToggleGroup;
import javafx.scene.control.ToggleButton;
import javafx.stage.Stage;
public class Registration extends Application {
@Override
public void start(Stage stage) {
//Label for name
Text nameLabel = new Text("Name");
//Text field for name
TextField nameText = new TextField();
//Label for date of birth
Text dobLabel = new Text("Date of birth");
//date picker to choose date
DatePicker datePicker = new DatePicker();
//Label for gender
Text genderLabel = new Text("gender");
//Toggle group of radio buttons
ToggleGroup groupGender = new ToggleGroup();
RadioButton maleRadio = new RadioButton("male");
maleRadio.setToggleGroup(groupGender);
RadioButton femaleRadio = new RadioButton("female");
femaleRadio.setToggleGroup(groupGender);
//Label for reservation
Text reservationLabel = new Text("Reservation");
//Toggle button for reservation
ToggleButton Reservation = new ToggleButton();
ToggleButton yes = new ToggleButton("Yes");
ToggleButton no = new ToggleButton("No");
ToggleGroup groupReservation = new ToggleGroup();
yes.setToggleGroup(groupReservation);
no.setToggleGroup(groupReservation);
//Label for technologies known
Text technologiesLabel = new Text("Technologies Known");
//check box for education
CheckBox javaCheckBox = new CheckBox("Java");
javaCheckBox.setIndeterminate(false);
//check box for education
CheckBox dotnetCheckBox = new CheckBox("DotNet");
javaCheckBox.setIndeterminate(false);
//Label for education
Text educationLabel = new Text("Educational qualification");
//list View for educational qualification
ObservableList<String> names = FXCollections.observableArrayList(
"Engineering", "MCA", "MBA", "Graduation", "MTECH", "Mphil", "Phd");
ListView<String> educationListView = new ListView<String>(names);
//Label for location
Text locationLabel = new Text("location");
//Choice box for location
ChoiceBox locationchoiceBox = new ChoiceBox();
locationchoiceBox.getItems().addAll
("Hyderabad", "Chennai", "Delhi", "Mumbai", "Vishakhapatnam");
//Label for register
Button buttonRegister = new Button("Register");
//Creating a Grid Pane
GridPane gridPane = new GridPane();
//Setting size for the pane
gridPane.setMinSize(500, 500);
//Setting the padding
gridPane.setPadding(new Insets(10, 10, 10, 10));
//Setting the vertical and horizontal gaps between the columns
gridPane.setVgap(5);
gridPane.setHgap(5);
//Setting the Grid alignment
gridPane.setAlignment(Pos.CENTER);
//Arranging all the nodes in the grid
gridPane.add(nameLabel, 0, 0);
gridPane.add(nameText, 1, 0);
gridPane.add(dobLabel, 0, 1);
gridPane.add(datePicker, 1, 1);
gridPane.add(genderLabel, 0, 2);
gridPane.add(maleRadio, 1, 2);
gridPane.add(femaleRadio, 2, 2);
gridPane.add(reservationLabel, 0, 3);
gridPane.add(yes, 1, 3);
gridPane.add(no, 2, 3);
gridPane.add(technologiesLabel, 0, 4);
gridPane.add(javaCheckBox, 1, 4);
gridPane.add(dotnetCheckBox, 2, 4);
gridPane.add(educationLabel, 0, 5);
gridPane.add(educationListView, 1, 5);
gridPane.add(locationLabel, 0, 6);
gridPane.add(locationchoiceBox, 1, 6);
gridPane.add(buttonRegister, 2, 8);
//Styling nodes
buttonRegister.setStyle(
"-fx-background-color: darkslateblue; -fx-textfill: white;");
nameLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
dobLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
genderLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
reservationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
technologiesLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
educationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
locationLabel.setStyle("-fx-font: normal bold 15px 'serif' ");
//Setting the back ground color
gridPane.setStyle("-fx-background-color: BEIGE;");
//Creating a scene object
Scene scene = new Scene(gridPane);
//Setting title to the Stage
stage.setTitle("Registration Form");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac Registration.java
java Registration実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
JavaFX-チャート
一般に、チャートはデータのグラフィカルな表現です。 *棒グラフ、円グラフ、折れ線グラフ、散布図などのデータを表すさまざまな種類のグラフがあります。
JavaFXは、さまざまな*円グラフ*および* XYグラフ*のサポートを提供します。 XY平面で表されるチャートには、* AreaChart、BarChart、BubbleChart、LineChart、ScatterChart、StackedAreaChart、StackedBarChartなどが含まれます。
各チャートはクラスによって表され、これらのチャートはすべてパッケージ javafx.scene.chart に属します。 Chart という名前のクラスはJavaFXのすべてのチャートの基本クラスであり、 XYChart はXY平面に描画されるすべてのチャートの基本クラスです。
チャートを作成する
チャートを作成するには、する必要があります-
- チャートの軸を定義する
- それぞれのクラスをインスタンス化する
- データを準備してチャートに渡す
各クラスのインスタンス化
チャートを作成するには、それぞれのクラスをインスタンス化します。 たとえば、折れ線グラフを作成する場合は、次のように Line という名前のクラスをインスタンス化する必要があります-
LineChart linechart = new LineChart(xAxis, yAxis);上記のコードで見られるように、インスタンス化中に、チャートのX軸とY軸をそれぞれ表す2つのオブジェクトを渡す必要があります。
軸の定義
一般的に、チャートの軸は次のように表すことができます-
- 人口、年齢、
- 週の日数、国などのカテゴリ。
JavaFXでは、軸はX軸またはY軸を表す抽象クラスです。 次の図に示すように、各タイプの軸、つまり CategoryAxis および NumberAxis を定義する2つのサブクラスがあります-
カテゴリ軸-このクラスをインスタンス化することにより、各値がカテゴリを表すXまたはY軸を定義（作成）できます。 以下に示すように、このクラスをインスタンス化することにより、カテゴリ軸を定義できます-
CategoryAxis xAxis = new CategoryAxis();この軸に、あなたは以下に示すように軸のカテゴリとラベルのリストを設定する必要があります-
//setting the list of categories.
xAxis.setCategories(FXCollections.<String>observableArrayList
(Arrays.asList("n ame1", "name2"….)));
//Setting label to the axis
xAxis.setLabel("name of the axis ");*NumberAxis* -このクラスをインスタンス化することにより、各値が数値を表すXまたはY軸を定義（作成）できます。 この *Axis、Long、Double、BigDecimal* などで任意のNumberタイプを使用できます。 次のようにこのクラスをインスタンス化することにより、数値軸を定義できます-//Defining the axis
NumberAxis yAxis = new NumberAxis();
//Setting labelto the axis
yAxis.setLabel("name of the axis");XYチャートへのデータの受け渡し
すべてのXYチャートは、XY平面に沿って表されます。 チャートに一連のポイントをプロットするには、一連のXY座標を指定する必要があります。
*javafx.scene.chart* パッケージの *<X、Y>* クラスは、データをチャートに送信できるクラスです。 このクラスは、名前付きシリーズの監視可能なリストを保持します。 以下に示すように、 *XYChart.Series* クラスの* getData（）*メソッドを使用して、このリストを取得できます-ObservableList list = series.getData();ここで、 series は XYChart.Series クラスのオブジェクトです。 次のように* add（）*メソッドを使用して、このリストにデータを追加できます-
list.add(new XYChart.Data(x-axis data, y-axis data));これらの2行は、以下に示すように一緒に書くことができます-
series.getData().add(new XYChart.Data(x-axis data, y-axis data));次の表は、JavaFXが提供するさまざまなチャート（クラス）の説明です-
| S.No | Chart & Description |
|---|---|
| 1 |
円グラフは、異なる色の円のスライスとしての値の表現です。 これらのスライスにはラベルが付けられ、各スライスに対応する値がチャートに表示されます。 JavaFXでは、円グラフは PieChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 |
| 2 |
折れ線グラフまたは折れ線グラフは、直線セグメントで接続された一連のデータポイント（マーカー）として情報を表示します。 折れ線グラフは、同じ時間頻度でデータがどのように変化するかを示しています。 JavaFXでは、折れ線グラフは LineChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでLineChartノードを作成できます。 |
| 3 |
エリアチャートは、エリアベースのチャートを描画するために使用されます。 与えられた一連の点と軸の間の面積をプロットします。 一般に、このチャートは2つの量を比較するために使用されます。 JavaFXでは、面グラフは AreaChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでAreaChartノードを作成できます。 |
| 4 |
棒グラフは、長方形の棒を使用してグループ化されたデータを表すために使用されます。 これらのバーの長さは値を表します。 棒グラフの棒は、垂直または水平にプロットできます。 JavaFXでは、棒グラフは BarChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでBarChartノードを作成できます。 |
| 5 |
バブルチャートを使用して、3次元データを作成します。 3番目の次元は、バブルのサイズ（半径）で表されます。 JavaFXでは、バブルチャートは BubbleChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでBubbleChartノードを作成できます。 |
| 6 |
散布図は、デカルト平面にプロットされた2つの変数の値を使用する一種のグラフです。 通常、2つの変数間の関係を見つけるために使用されます。 JavaFXでは、散布図は ScatterChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでScatterChartノードを作成できます。 |
| 7 |
JavaFXでは、積み上げ面グラフは StackedAreaChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでStackedAreaChartノードを作成できます。 |
| 8 |
JavaFXでは、積み上げ棒グラフは StackedBarChart という名前のクラスで表されます。 このクラスは、パッケージ javafx.scene.chart に属します。 このクラスをインスタンス化することにより、JavaFXでStackedBarChartノードを作成できます。 |
JavaFX-レイアウトペイン（コンテナ）
シーンに必要なすべてのノードを構築した後、通常、それらを順番に配置します。
コンテナ内のコンポーネントのこの配置は、コンテナのレイアウトと呼ばれます。 また、コンテナ内の特定の位置にすべてのコンポーネントを配置することも含まれているため、レイアウトに従っていると言えます。
JavaFXは、 HBox、VBox、Border Pane、Stack Pane、Text Flow、Anchor Pane、Title Pane、Grid Pane、Flow Panel などのいくつかの定義済みレイアウトを提供します。
上記の各レイアウトはクラスによって表され、これらのクラスはすべてパッケージ javafx.layout に属します。 Pane という名前のクラスは、JavaFXのすべてのレイアウトの基本クラスです。
レイアウトを作成する
レイアウトを作成するには、する必要があります-
- ノードを作成します。
- 必要なレイアウトのそれぞれのクラスをインスタンス化します。
- レイアウトのプロパティを設定します。
- 作成したすべてのノードをレイアウトに追加します。
ノードを作成する
まず、それぞれのクラスをインスタンス化して、JavaFXアプリケーションの必要なノードを作成します。
たとえば、テキストボックスと2つのボタン、つまりHBoxレイアウトでの再生と停止が必要な場合は、次のコードブロックに示すように、最初にこれらのノードを作成する必要があります-
//Creating a text field
TextField textField = new TextField();
//Creating the play button
Button playButton = new Button("Play");
//Creating the stop button
Button stopButton = new Button("stop");各クラスのインスタンス化
ノードを作成した後（およびそれらに対するすべての操作を完了した後）、必要なレイアウトのクラスをインスタンス化します。
たとえば、Hboxレイアウトを作成する場合は、次のようにこのクラスをインスタンス化する必要があります。
HBox hbox = new HBox();レイアウトのプロパティを設定する
クラスをインスタンス化した後、それぞれのセッターメソッドを使用してレイアウトのプロパティを設定する必要があります。
例-HBoxレイアウトで作成されたノード間にスペースを設定する場合は、spacingという名前のプロパティに値を設定する必要があります。 これは、以下に示すように、セッターメソッド* setSpacing（）*を使用して行うことができます-
hbox.setSpacing(10);シェイプオブジェクトをグループに追加する
最後に、以下に示すように、コンストラクターのパラメーターとして渡すことにより、図形のオブジェクトをグループに追加する必要があります。
//Creating a Group object
Group root = new Group(line);レイアウトペイン
以下は、JavaFXが提供するさまざまなレイアウトペイン（クラス）です。 これらのクラスは、パッケージ javafx.scene.layout に存在します。
| S.No | Shape & Description |
|---|---|
| 1 |
HBoxレイアウトは、アプリケーション内のすべてのノードを単一の水平行に配置します。 パッケージ javafx.scene.layout の HBox という名前のクラスは、テキストの水平ボックスレイアウトを表します。 |
| 2 |
VBoxレイアウトは、アプリケーション内のすべてのノードを単一の垂直列に配置します。 パッケージ javafx.scene.layout の VBox という名前のクラスは、テキストの垂直ボックスレイアウトを表します。 |
| 3 |
Border Paneレイアウトは、アプリケーション内のノードを上下左右に配置します。 パッケージ javafx.scene.layout の BorderPane という名前のクラスは、境界ペインレイアウトを表します。 |
| 4 |
スタックペインレイアウトは、アプリケーションのノードをスタックのように別のノードの上に配置します。 最初に追加されたノードはスタックの下部に配置され、次のノードはスタックの上部に配置されます。 パッケージ javafx.scene.layout の StackPane というクラスは、スタックペインレイアウトを表します。 |
| 5 |
テキストフローレイアウトは、単一のフローに複数のテキストノードを配置します。 パッケージ javafx.scene.layout の TextFlow という名前のクラスは、テキストフローレイアウトを表します。 |
| 6 |
アンカーペインレイアウトは、ペインから特定の距離にあるアプリケーションのノードを固定します。 パッケージ javafx.scene.layout の AnchorPane という名前のクラスは、アンカーペインレイアウトを表します。 |
| 7 |
タイルペインレイアウトは、アプリケーションのすべてのノードを均一なサイズのタイルの形式で追加します。 パッケージ javafx.scene.layout の TilePane という名前のクラスは、TilePaneレイアウトを表します。 |
| 8 |
グリッドペインレイアウトは、アプリケーション内のノードを行と列のグリッドとして配置します。 このレイアウトは、JavaFXを使用してフォームを作成するときに便利です。 パッケージ javafx.scene.layout の GridPane という名前のクラスは、GridPaneレイアウトを表します。 |
| 9 |
フローペインのレイアウトは、フロー内のすべてのノードをラップします。 水平フローペインはペインの要素をその高さでラップし、垂直フローペインは要素をその幅でラップします。 パッケージ javafx.scene.layout の FlowPane という名前のクラスは、フローペインレイアウトを表します。 |
JavaFX-CSS
*Cascading Style Sheets* （CSSとも呼ばれる）は、Webページを表示可能にするプロセスを簡素化することを目的としたシンプルなデザイン言語です。CSSは、Webページのルックアンドフィールの部分を処理します。 CSSを使用すると、テキストの色、フォントのスタイル、段落間の間隔、列のサイズ、レイアウトを制御できます。 これらとは別に、使用する背景画像や色、レイアウト設計、さまざまなデバイスや画面サイズの表示のバリエーション、およびその他のさまざまな効果も制御できます。
JavaFXのCSS
JavaFXは、CSSを使用してアプリケーションのルックアンドフィールを強化する機能を提供します。 パッケージ javafx.css には、JavaFXアプリケーションにCSSを適用するために使用されるクラスが含まれています。
CSSは、ブラウザによって解釈され、ドキュメント内の対応する要素に適用されるスタイルルールで構成されます。
スタイルルールは3つの部分で構成されています-
- セレクタ-セレクタは、スタイルが適用されるHTMLタグです。 これには、 <h1> や <table> などのタグを使用できます。
- プロパティ-プロパティは、HTMLタグの属性の一種です。 簡単に言えば、すべてのHTML属性はCSSプロパティに変換されます。 色、*ボーダー*などです。
- 値-値はプロパティに割り当てられます。 たとえば、色のプロパティは red または*＃F1F1F1 *などの値を持つことができます。
次のようにCSSスタイルルールの構文を置くことができます-
selector { property: value }JavaFXで使用されるデフォルトのスタイルシートは modena.css です。 JavaFXランタイムjarにあります。
独自のスタイルシートを追加する
次のように、JavaFXのシーンに独自のスタイルシートを追加できます-
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");インラインスタイルシートの追加
- setStyle（）*メソッドを使用してインラインスタイルを追加することもできます。 これらのスタイルはキーと値のペアのみで構成され、それらが設定されているノードに適用できます。 以下は、インラインスタイルシートをボタンに設定するサンプルコードです。
.button {
-fx-background-color: red;
-fx-text-fill: white;
}例
テキストフィールド、パスワードフィールド、2つのボタンを持つフォームを表示するJavaFXアプリケーションを開発したと仮定します。 デフォルトでは、このフォームは次のスクリーンショットに示すように見えます-
次のプログラムは、JavaFXで上記のアプリケーションにスタイルを追加する方法を示す例です。
このコードを CssExample.java という名前のファイルに保存します
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class CssExample extends Application {
@Override
public void start(Stage stage) {
//creating label email
Text text1 = new Text("Email");
//creating label password
Text text2 = new Text("Password");
//Creating Text Filed for email
TextField textField1 = new TextField();
//Creating Text Filed for password
PasswordField textField2 = new PasswordField();
//Creating Buttons
Button button1 = new Button("Submit");
Button button2 = new Button("Clear");
//Creating a Grid Pane
GridPane gridPane = new GridPane();
//Setting size for the pane
gridPane.setMinSize(400, 200);
//Setting the padding
gridPane.setPadding(new Insets(10, 10, 10, 10));
//Setting the vertical and horizontal gaps between the columns
gridPane.setVgap(5);
gridPane.setHgap(5);
//Setting the Grid alignment
gridPane.setAlignment(Pos.CENTER);
//Arranging all the nodes in the grid
gridPane.add(text1, 0, 0);
gridPane.add(textField1, 1, 0);
gridPane.add(text2, 0, 1);
gridPane.add(textField2, 1, 1);
gridPane.add(button1, 0, 2);
gridPane.add(button2, 1, 2);
//Styling nodes
button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;");
text1.setStyle("-fx-font: normal bold 20px 'serif' ");
text2.setStyle("-fx-font: normal bold 20px 'serif' ");
gridPane.setStyle("-fx-background-color: BEIGE;");
//Creating a scene object
Scene scene = new Scene(gridPane);
//Setting title to the Stage
stage.setTitle("CSS Example");
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
public static void main(String args[]){
launch(args);
}
}次のコマンドを使用して、コマンドプロンプトから保存したJavaファイルをコンパイルして実行します。
javac CssExample.java
java CssExample実行時に、上記のプログラムは以下に示すようにJavaFXウィンドウを生成します。
