corner imagecorner image
IDEPlatformPluginsDocs & SupportCommunityPartners

JavaFX Composer ���純�データベースクライアント�作�

執筆�よ�管�: Irina Filippova

���ュートリアル���MySQL データベース�接続�る�純�クライアントアプリケーションを JavaFX Composer �短時間�作��る方法����説明���。���ュートリアル�使用�る MySQL データベース�リモートサー�ー上��る���ローカルシステム� MySQL データベースサー�ーをインストール��構��る必���り��ん。

JavaFX Composer ��特別� JDBC データソース機能�用��れ����。��機能を使用�る��データベースクライアント� GUI を短時間�作���ローカル���リモート� JDBC 準拠�データベース�らデータを�得��るよ���り��。���ュートリアル�����データソースタイプ��作業方法����説明���。���データソース�使用������「JavaFX Composer �� RESTful WS データソース��作����JavaFX Composer ���他��ュートリアルを�照������。

目次

��ページ�内容� NetBeans IDE 6.9 �対象��

���ュートリアルを完了�る���次�ソフトウェア�リソース�必���。

ソフトウェア���リソース 必須�ージョン
NetBeans IDE version 6.9 � JavaFX ダウンロードオプション
Java Development Kit (JDK) version 6
MySQL Connector/J version 5.1.6 以�
CSS スタイルシート アプリケーション用� CSS スタイルシート
画�ファイル アプリケーション用�画�
データベースクライアントプロジェクト 完���データベースクライアントプロジェクト

注: リモート MySQL データベース�接続�る���インター�ット接続�必���。��データベース�接続�る����ローカルマシン� MySQL データベースサー�ーを実行�る必���り��ん。

����

���ュートリアル�目標��JavaFX Composer ツールを使用���JavaFX Script プログラミング言語�記述�れ�データベースクライアントアプリケーションを設計�る����。JavaFX Composer ��JavaFX GUI を簡��構築��る新�� NetBeans IDE ビジュアルレイアウトツール��。

���ュートリアルを開始�る���JavaDB データベース�接続�る�常��純�データベースクライアント�作�方法を解説����ビデオを�覧����。���JavaFX Composer ��状態�概念����知����必���り��。アプリケーション�状態�関�る詳細��「アプリケーション�状態��ュートリアル�よ�「アプリケーション�並列状態�よ�状態変数��ュートリアルを�照������。

���ュートリアル���リモート MySQL データベース�複数�表�接続�るデータベースクライアントアプリケーション���より複雑�シナリオ����説明���。���ュートリアルを終了��ら�次�内容����学習���。

  • JavaFX Composer を使用ã�—ã�¦ã€�リモート MySQL データベースã�‹ã‚‰ãƒ‡ãƒ¼ã‚¿ã‚’å�–å¾—ã�™ã‚‹å�˜ç´”ã�ª GUI を構築ã�™ã‚‹æ–¹æ³•。
  • CSS スタイルシートをプロジェクトã�«ã‚¤ãƒ³ãƒ�ートã�—ã€�CSS スタイルを UI コントロールã�«é�©ç”¨ã�™ã‚‹æ–¹æ³•。
  • 「排他å�¯è¦–ã€�テンプレートを使用ã�—ã�¦ã€�å�¯è¦–設定を変更ã�™ã‚‹æ–¹æ³•。
  • アプリケーションを構æˆ�ã�—ã�¦ã€�複数ã�®ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹è¡¨ã�«å�«ã�¾ã‚Œã‚‹ãƒ‡ãƒ¼ã‚¿ã‚’表示ã�™ã‚‹æ–¹æ³•。

�考��������ュートリアル用�完���プロジェクトをダウンロード����。

IDE �ら� MySQL データベース��接続

最���IDE �らリモート MySQL データベース��接続を確立�る必���り��。�����サー�ー� 1 �� MySQL データベースを設定�よ�構�����データベース��読��りアクセス権を��ユーザーを作����。

IDE �らリモート MySQL データベース�接続�る���次�手順�従���。

  1. 「サービス�ウィンドウ��「データベース�ノードを�クリック��「新�接続...�を�択���。
    データベース��新�接続�確立
  2. 「データベース�新�接続�ウィンドウ��次�情報を入力��「了解�をクリック���。
    ドライ��: MySQL (Connector/J driver)
    ホスト: dot.netbeans.org
    �ート: 3306
    データベース: usstates
    ユーザー�: nbuser
    パスワード: nbpassword
    「データベース�新�接続�ウィンドウ��入力

    注: ローカルマシン上�データベース�アクセス�る���パスワードを�存�る場���セキュリティーリスクを無視��る�����例��「パスワードを�存��ェックボックスを�択��も�����ん。

  3. 「jdbc:mysql://dot.netbeans.org:3306/usstates [デフォルトスキーマ � nbuser]�ノードを�クリック��「接続�を�択���。
    「サービス�ウィンドウ��接続�確立�れ���を示� 接続ノード�アイコン アイコンを��ノード�表示�れ��。接続ノードを展開��表を表示���。�れ�ら�クライアントを POPULATION �よ� STATES � 2 ��表�接続���。
    展開�れ�データベース構造

JDBC データソース�追加

プロジェクト�作�

  1. IDE �「ファイル�>「新�プロジェクト�(Ctrl-Shift-N) を�択���。
  2. 「新�プロジェクト�ウィザード�「JavaFX�カテゴリを�択��プロジェクト�種類���「JavaFX Desktop ビジ�スアプリケーション�を�択���。
  3. 「���場所�ページ��「プロジェクト���「DBClient��入力��プロジェクト�場所を指定���。
    プロジェクト�よ��作��れ� Main.fx ファイル�エディタ�開���。
  4. アプリケーション UI �サイズを��領域����る���ツール�ー�デ�イス�表示サイズを「モ�イル 320 x 240��設定���。
    エディタ�ツール�ー��ビュー�ートサイズ��択

�れ��アプリケーション�主�部分�デザインを開始����。最���JDBC データソースを追加��2 ��データベース表�接続��データを�得���。

�ュートリアル�実施中����アプリケーションを���も実行��加��変更を���確�����。アプリケーションを実行�る���最�� MySQL Connector/J JAR ファイルをプロジェクト�クラスパス�追加���ップアップメニュー�ら「プロジェクトを実行�を�択���。JAR ファイル�追加方法�詳細������「アプリケーション�実行�を�照������。

JDBC データソース�追加

JavaFX Composer ��データソースフレームワーク�用��れ��り�HTTP サー�ー�データベース�ファイル��������ソース�アクセス��データを�得�る作業を簡��実行����。ユーザー��ら��データソースフレームワーク��データソースコン�ー�ント�セット���パレット�表示�れ��。データソース����� JavaFX コン�ー�ント���よ��ドラッグ�よ�カスタマイズ����。JDBC データソースを使用�る��SQL クエリーを実行��JDBC 準拠�データベース�らデータをフェッ�����。

�れ�ら�2 �� JDBC データソースを作���STATES �よ� POPULATION � 2 ��表�らデータを�得���。

  1. パレット�「データソース�セクション�ら�「JDBC データソース�をシーン�任��場所�ドラッグ&ドロップ���。
    IDE ��データベース接続�確立�必��追加パッケージをプロジェクト�追加���。
  2. 「データソースカスタマイザー�ウィンドウ��次��作を行���。
    1. 「接続 URL�フィールド�「�照�をクリック��MySQL サー�ー��接続を�択���。
      ユーザー��パスワード�フィールド�自動的�入力�れ��。
    2. SQL クエリーを作��� STATES 表�対����クエリーを実行�る���「SQL クエリー�フィールド�「作��をクリック���。
    3. 「SQL クエリーを生��ウィンドウ��STATES 表�ら abbrev � name � 2 ��列を�択���。
      「SELECT 節を生��オプション��択状態������「了解�をクリック���。
      SQL クエリー�作�
    4. 「データソースカスタマイザー�ウィンドウ�戻��ら�「データをフェッ��をクリック���。データ�データベース表�ら�得�れ�次�図�よ��表示�れ��。「了解�をクリック���。
      「データソースカスタマイザー�ウィンドウ
  3. 「ナビゲータ�ウィンドウ��「データソース�ノード�下� JDBC データソース�追加�れ��る��を確�����。
    ��データソース���を変更���。��データソース�「プロパティー�ウィンドウ��「識別��フィールド�「States��入力���。

次��2 番目�データソースを追加���POPULATION 表�接続���。�述� STATES 表��手順�従�����次�点�異�り��。

  • 「SQL クエリーを生æˆ�ã€�ウィンドウã�§ã€�POPULATION 表ã�‹ã‚‰ state_name 列ã�Šã‚ˆã�³ population 列をé�¸æŠžã�—ã�¾ã�™ã€‚
    SQL クエリー�作�
  • 「プロパティーã€�ウィンドウã�§ã€�データソースã�®è­˜åˆ¥å­�を「人å�£ã€�ã�«å¤‰æ›´ã�—ã�¾ã�™ã€‚

アプリケーション UI �デザイン

��節���アプリケーション UI を構築���。目的��2 ��別々�パ�ルを作����れ�れ�パ�ル�異�るデータベース表�データを表示��る����。�� UI を実装�る���「排他�視�テンプレートを使用��2 ��パ�ル (データベース表��� 1 ��パ�ル) を����。

「排他�視�テンプレート�使用

「排他�視�テンプレート�������状態� UI コントロールをグループ����視�����視��る場���常�役立���。��り���テンプレートを使用�る��UI コントロール�グループ全体�対���視���視を��や�切り替�られる���個別�コン�ー�ント��� UI コントロールを構��る必�����り��。��テンプレート�詳細������「JavaFX Composer テンプレート�ガイド�を�照������。

  1. 「パレット�ウィンドウ�「テンプレート�セクションを展開��「排他�視�テンプレートを「デザイン��ドラッグ���。
  2. 「テンプレートをカスタマイズ�ウィンドウ��次�値を設定���。
    • 状態変数: currentState。
    • コンテナ: デフォルト値ã�®ã�¾ã�¾ã�«ã�—ã�¾ã�™ã€‚ã�“れã�¯æŽ’ä»–å�¯è¦–パãƒ�ルã�®ã‚»ãƒƒãƒˆã‚’æ ¼ç´�ã�™ã‚‹ã‚³ãƒ³ãƒ†ãƒŠã�§ã€�å�„パãƒ�ルã�Œã�‚ã‚‹ 1 ã�¤ã�®çŠ¶æ…‹ã�§ã�®ã�¿è¡¨ç¤ºã�•れるよã�†ã�«ã�ªã‚Šã�¾ã�™ã€‚
    • 冗長化状態用ã�®ãƒ‘ãƒ�ルを作æˆ�: 最åˆ�ã�¯çŠ¶æ…‹ã�§ã�¯ã�ªã��パãƒ�ルを作æˆ�ã�™ã‚‹ã�Ÿã‚�ã€�ã�“ã�®ãƒ�ェックボックスã�¯é�¸æŠžè§£é™¤ã�—ã�¾ã�™ã€‚
    • 冗長コンãƒ�ーãƒ�ント用ã�®çŠ¶æ…‹ã‚’ä½œæˆ�: 追加ã�™ã‚‹ãƒ‘ãƒ�ルã�”ã�¨ã�«çŠ¶æ…‹ã�Œè‡ªå‹•çš„ã�«ä½œæˆ�ã�•れるよã�†ã�«ã�™ã‚‹ã�Ÿã‚�ã€�ã�“ã�®ãƒ�ェックボックスã�¯é�¸æŠžã�—ã�¾ã�™ã€‚
    • ã��ã�®ä»–ã�®è¨­å®šã�¯ã�™ã�¹ã�¦ãƒ‡ãƒ•ォルト値ã�®ã�¾ã�¾ã�«ã�—ã€�「了解ã€�をクリックã�—ã�¾ã�™ã€‚「排他å�¯è¦–ã€�テンプレートã�Œã‚·ãƒ¼ãƒ³ã�«è¿½åŠ ã�•れã€�「ナビゲータã€�ウィンドウã�®ã€Œãƒ†ãƒ³ãƒ—レートã€�ノードã�®ä¸‹ã�«è¡¨ç¤ºã�•れã�¾ã�™ã€‚
      「排他�視�テンプレート�カスタマイズ
  3. 「ナビゲータ�ウィンドウ�「exclusivelyVisibleContainerPanel [パ�ル]�ノードを�クリック��「追加�>「コンテナ�>「VBox�を�択���VBox コンテナを追加���。��方法� 2 �目� VBox コンテナを追加���。
    �� 2 �� Vbox コンテナ���を��れ�れ「states��よ�「population��変更���。�れを行����� VBox ��ップアップメニュー�「��を変更�を�択���。
    「ナビゲータ�ウィンドウ�プロジェクト構造を表示

STATES 表�パ�ルコンテンツ�追加

�����states VBox コンテナ�コン�ー�ントを追加���。「ナビゲータ�ウィンドウ�「states�ノードを�クリック��「追加�を�択��次�コン�ー�ントを�択���。

    • ラベル (「追加ã€�>「コントロールã€�>「ラベルã€�): 「プロパティーã€�ウィンドウã�®ã€Œãƒ†ã‚­ã‚¹ãƒˆã€�フィールドã�«ã�‚るテキストをã€�「米国ã�®å·žã€�ã�«å¤‰æ›´ã�—ã�¾ã�™ã€‚
    • グリッドフォーム (「追加ã€�>「テンプレートã€�>「グリッドフォームã€�):
      「テンプレートをカスタマイズ�ウィンドウ��「データソース�ドロップダウンリスト�ら「States データソース�を�択���。「追加�を 2 回クリック��表形��データを表示�る行を 2 �追加���。今度��表示�るフィールドを STATES データベース表�ら追加�る必���り��。�れを行����「フィールド�行�中をダブルクリック��「abbrev��入力���。2 行目��「name��入力���。IDE �「タイトル��値を自動的�入力��� (����「Abbrev:��「Abbreviation:��変更�る必���り��)。
      「グリッドフォーム�テンプレート�カスタマイズ
    • インデックスボタン (「追加ã€�>「テンプレートã€�>「インデックスボタンã€�): 「テンプレートをカスタマイズã€�ウィンドウã�§ã€�「インデックス付ã��コンãƒ�ーãƒ�ントã€�を「States データソースã€�ã�«è¨­å®šã�—ã€�残りã�®è¨­å®šã�¯ãƒ‡ãƒ•ォルト値ã�®ã�¾ã�¾ã�«ã�—ã�¾ã�™ã€‚ã�“れらã�®ã‚¤ãƒ³ãƒ‡ãƒƒã‚¯ã‚¹ãƒœã‚¿ãƒ³ã�¯ã€�STATES 表ã�®ãƒ¬ã‚³ãƒ¼ãƒ‰ã‚’一覧表示ã�™ã‚‹ã�Ÿã‚�ã�«ä½¿ç”¨ã�•れã�¾ã�™ã€‚
      「インデックスボタン�テンプレート�カスタマイズ

�れ��STATES 表�パ�ル�デザイン�れ���。「デザイン�ビュー��次�画��よ���る����。
STATES 表�フォームを使用��デザイン

POPULATION 表�パ�ルコンテンツ�追加

��手順���POPULATION 表�����構造を追加���。��手順��基本的�� STATES 表����������������り��。「ナビゲータ�ウィンドウ�「population�ノードを�クリック��「コンテナをデザイン�を�択���。population VBox �コンテンツ��を表示�る独立��ビュー�表示�れ��。�れ�より�population VBox �コンテンツを視覚的�区別����。
「デザイン�ビュー�ツール�ー上��る�イパーリンク

も�一度「ナビゲータ�ウィンドウ�「population�ノードを�クリック��「追加�をクリック��次�コン�ー�ントを追加���。

  • ラベル (「追加ã€�>「コントロールã€�>「ラベルã€�): 「プロパティーã€�ウィンドウã�®ã€Œãƒ†ã‚­ã‚¹ãƒˆã€�フィールドã�«ã�‚るテキストをã€�「人å�£ã€�ã�«å¤‰æ›´ã�—ã�¾ã�™ã€‚
  • グリッドフォーム (「追加ã€�>「テンプレートã€�>「グリッドフォームã€�):
    「データソース�ドロップダウンリスト�ら「Population データソース�を�択���。「追加�を 2 回クリック��表形��データを表示�る行を 2 �追加���。今度��表示�るフィールドを POPULATION データベース表�ら追加�る必���り��。�れを行����「フィールド�行�中をダブルクリック��「state_name��入力���。2 行目��「population��入力���。IDE �「タイトル��値を自動的�入力���。
    POPULATION 表�「グリッドフォーム�テンプレート�カスタマイズ
  • インデックスボタン (「追加ã€�>「テンプレートã€�>「インデックスボタンã€�): 「テンプレートをカスタマイズã€�ウィンドウã�§ã€�「インデックス付ã��コンãƒ�ーãƒ�ントã€�を「Population データソースã€�ã�«è¨­å®šã�—ã€�残りã�®è¨­å®šã�¯ãƒ‡ãƒ•ォルト値ã�®ã�¾ã�¾ã�«ã�—ã�¾ã�™ã€‚
    POPULATION 表�「インデックスボタン�テンプレート�カスタマイズ
    �れ��POPULATION 表�パ�ル�デザイン�れ���。「デザイン�ビュー�ツール�ー上��る scene �イパーリンクをクリック���シーン�コンテンツを表示���。アプリケーション全体��次�画��よ���る����。

    注: 「デザイン�ビュー��コン�ー�ント� STATES 表�コン�ー�ント�������も�題��り��ん。デザイン�整��れ����よ��見�る���1 ��マスター状態���作業���る����。次��状態を追加��状態���パ�ル��視性を変更���。

    2 ��表を使用��デザイン

状態�作�

  1. 「ナビゲータ�ウィンドウ��「テンプレート�ノード�下��る「排他�視�テンプレートをダブルクリック���。
    テンプレート�カスタマイザー�ウィンドウ�開��2 ��状態�自動的�生��れ��る���確�����。IDE �シーン�パ�ル������� 2 ��状態を作����由��パ�ル���状態を作��るオプションを有効�������。
  2. 「了解�をクリック���。「デザイン�ビュー� 2 ��新��状態�追加�れ���。
  3. 最��状態をダブルクリック���。��を「States��変更��開始状態�設定���。「了解�をクリック���。
  4. 2 番目�状態をダブルクリック���。��を「Population��変更���「了解�をクリック���。

�れ���れ�れ�状態を�択�る��「States�状態�� states VBox ���表示�れ�「Population�状態�� population VBox ���表示�れ��。�る状態��択�れ��る���プロパティーを編集�る����変更��用�れる���在�状態����る���注�������。������アプリケーション全体��用�れる����コン�ー�ントを編集��る��マスター状態����。特定�状態���プロパティー�変更を最�����������を強��勧����。特定�状態�変更�必��値��を編集�る���マスター�状態以外�作業�る必���り��。

状態を切り替�るボタン�追加

��手順���アプリケーション�状態���り異�るデータベース表�接続�れ��るパ�ルを切り替�るボタンを追加���。

  1. 「デザイン�ビュー�マスター状態を�択���。��変更作業��必�マスター状態�実行������。
  2. パレット�「コントロール�セクションを探��「ボタン�を「デザイン��ドラッグ��� (�マージン�近��置�置���)。
    デザイン��ボタン�追加
  3. ボタン�「プロパティー�ウィンドウ�「アクション�プロパティー�「生��アイコン 「生��アイコン をクリック��「生�: 次�状態�移動�を�択���。
    �れ�より�次�状態�切り替�るボタン�アクション�生��れ��。エディタ�「ソース�ビュー�変�り�生��� buttonAction 関数�表示�れ��。
  4. 「ソース�ビュー��「currentState.next()�を「currentState.nextWrapped()��変更���。
    「ソース�ビュー��アクション�追加
  5. マスター状態����ボタン�「プロパティー��「テキスト�フィールド�横��る「マスター�値セット�アイコンをクリック���状態�ボタン�テキストを変更���。ボタン�テキスト�変更
  6. 「プロパティー��「詳細�ダイアログ��「指定�れ�も�を使用�オプションを�択���。「States�状態を�択��「人���入力���。「Population�状態を�択��「米国�州��入力���。「閉�る�をクリック���。�れ��2 ��状態�よ��異�るテキスト�ボタン�表示�れるよ���り��。
    「プロパティー��「詳細�ダイアログ

��例���状態を切り替�る���標準�ボタンを使用�����。����「�択ボックス������ UI コントロールを使用�る��も����。

アプリケーション�実行

�れ�デザイン�完���。アプリケーションを実行����よ��動作�る�を見����ょ�。アプリケーション�実行を試�る���次��作を行���。

  1. マスター状態�「シーン��下��る「排他�視�ノードを�択��「デザイン��中央部�移動���。マスター状態���「排他監視�テンプレート�外枠���表示�れ��。マスター状態��ボタン��置を�次�図�よ��調整���。
    展開�れ�データベース構造
  2. MySQL Connector/J JAR ファイルをダウンロード��プロジェクト�クラスパス�追加���。MySQL データベース��接続を確立�る��コ�クタ�必���。

    �������「プロジェクト�ウィンドウ�「DBClient�プロジェクト�ノードを�クリック��「プロパティー�を�択���。「ライブラリ�カテゴリを�択��「JAR/フォルダを追加�をクリック���。システム上� MySQL Connector JAR ファイルを探��「開��をクリック���。
  3. プロジェクトを実行��� (プロジェクトを�クリック��「プロジェクトを実行�を�択�る��主プロジェクト�場�� F6 キーを押���)。デザインファイル��存�れ�プロジェクト�コンパイル�よ�開始�れ��。クライアント�リモートデータベース�接続��表���れ��るデータを表示���。「��ボタン�よ�「次��ボタンを押���表レコード�一覧�らデータ�表示�れ��。「人��ボタンを押���POPULATION 表�切り替�り��。

�れ��実用的�データベースクライアントアプリケーション�完�����。次�手順���グラフィックスをイン�ート��CSS スタイルシートを追加���アプリケーション UI �視覚表�を改良���。

GUI �拡張: 画��追加�よ� CSS �使用

JavaFX CSS �使用

JavaFX 1.3 �最新リリース�プラットフォーム��CSS �サ�ート�強化�れ����。CSS スタイルシートを使用�る��ユーザーインタフェース�外観をカスタマイズ����。��アプリケーション���CSS スタイルシートを使用���アプリケーション UI をより見栄��良�外観����。

��例������使用��る CSS スタイルシート�用��れ����。JavaFX CSS ��HTML �使用�れる CSS 仕様�準拠�����。JavaFX アプリケーション用� CSS スタイルシート�作�方法�よ� CSS スタイル��用�詳細������「CSS を使用�� UI �スタイルを�用�る方法��よ�「UI コントロール�� CSS ��用�を�照������。

CSS スタイルシート�追加

  1. 「プロジェクト�ウィンドウ�「dbclient�パッケージを�クリック��「新��>「��他�を�択���。「新�ファイル�ウィンドウ��「カテゴリ�を「��他��「ファイル�種類�を「階層�スタイルシート��設定��「次��をクリック��新��ファイル�「controlStyle.css������を付���。
  2. �供�れ��る CSS スタイルシート を開����内容を新��ファイル�コピー���。

    �����ファイルを�純�プロジェクト� /src/dbclient ディレクトリ��存�る��も����。

  3. 最���スタイルシートをシーン�追加�る必���り��。マスター状態��「ナビゲータ�ウィンドウ�らシーンを�択���。「プロパティー�ウィンドウ��「スタイルシート�フィールド�「{__DIR__}controlStyle.css��入力���。

� GUI �素�� CSS スタイル��用

������ GUI �素�スタイルを追加���。スタイル��「プロパティー�ウィンドウ�「スタイル�セクション��る「スタイルクラス�プロパティーを使用��指定���。JavaFX Composer � CSS スタイルを�用�る一般的�手順��次���り��。

  1. �素を�択��「プロパティー�ウィンドウ�「スタイルクラス�プロパティーフィールド�横��る「詳細を開��アイコン 「詳細を開��アイコン をクリック���。
    �れ�より�「プロパティー��「詳細�ダイアログ�表示�れ������状態�����素�スタイルを設定����。
  2. 「プロパティー��「詳細�ダイアログ�状態を�択��スタイルクラス� (labelStyle ��) を入力���。次�図��「ラベル��素�「プロパティー��「詳細�ダイアログ��「スタイルクラス�プロパティー�例��。マスター状態�値を編集�る��(��例�よ��) ��値�����状態��用�れ��。

    「プロパティー��「詳細�ダイアログ

��例���マスター状態を�択��次�スタイルを GUI �素�割り当���。

  • states VBox
    1. 「label� - labelStyle
    2. 「formGrid�>「abbrevTitleLabel��よ�「nameTitleLabel� - labelStyle1
    3. 「formGrid�>「abbrevValueLabel��よ�「nameValueLabel� - labelstyle2
    4. 「tile�>「indexPreviousButton��よ�「indexNextButton�- buttonStyle
  • population VBox:
    1. 「label2� - labelStyle
    2. 「formGrid2�>「state_NameTitleLabel��よ�「populationTitleLabel� - labelStyle1
    3. 「formGrid2�>「state_NameValueLabel��よ�「populationValueLabel� - labelstyle2
    4. 「tile2�>「indexPreviousButton2��よ�「indexNextButton2� - buttonStyle
  • 「buttonã€�: 「スタイルクラスã€�ã‚’ buttonStyle1 ã�«è¨­å®šã�—ã�¾ã�™ã€‚

背景画��追加


��手順���PNG 画�を背景画����追加���。アプリケーション�画�を追加�る���次�手順�従���。

  1. 画�ファイルをプロジェクト� src/dbclient ディレクトリ��存���。
    IDE ���画�ファイル��プロジェクト�構造��よ�パレット�「�在�プロジェクト - 画�ファイル�セクション�表示�れ��。
  2. マスター状態を�択���。パレット�画�を「デザイン�� [0,0] ��置 (左上隅) �ドラッグ���。
    「imageView�ノード��「ナビゲータ�ウィンドウ�シーン�下�表示�れ�リソース���追加�れ���。
  3. ��画��シーンより大�����「imageView��「プロパティー�ウィンドウ�「レイアウト�カテゴリを表示��「幅����る�を 320 ��「高�����る�を 240 �設定��� (�在�デ�イス�ビュー�ートサイズ)。
  4. ��「プロパティー�ウィンドウ��画����明度を下��約 0.3 �設定���。
    展開�れ�データベース構造

プロジェクト�実行

DBClient プロジェクトを実行��� (主プロジェクト�場�� F6 を押������「主プロジェクトを実行�アイコンをクリック���)。デザインファイル��存�れ�プロジェクト�コンパイル�よ�開始�れ��。IDE �データベース�接続�る��待機���。��後�データ�表示�れ��。

展開�れ�データベース構造 展開�れ�データベース構造

 

GUI コン�ー�ント�レイアウトを改善�る�����ら�調整�必���る場���り��。次�変更�����マスター状態�行�必���り��。

  • 両方ã�®ãƒ‘ãƒ�ルã�®ã€ŒformGridã€�ã�§ã�™ã�¹ã�¦ã�®ãƒ©ãƒ™ãƒ«ã‚’é�¸æŠžã�—ã€�「レイアウトã€�セクションã�®ã€Œæ¨ªã‚’最大ã�«æ‹¡å¼µ (縦ã�¯ç¶­æŒ�)ã€�プロパティーを「Trueã€�ã�«è¨­å®šã�—ã�¾ã�™ã€‚ã�“れã�«ã‚ˆã‚Šã€�「formGridã€�ã�®ã�™ã�¹ã�¦ã�®åˆ—ã�Œå�Œã�˜å¹…ã�«ã�ªã‚Šã�¾ã�™ã€‚
  • VBox 内ã�§å�„ UI コンãƒ�ーãƒ�ント間ã�®ç¸¦æ–¹å�‘ã�®ã‚¹ãƒšãƒ¼ã‚¹ã‚’大ã��ã��ã�—ã�¾ã�™ã€‚両方ã�® VBox è¦�ç´ ã‚’é�¸æŠžã�—ã€�「è¦�ç´ é–“éš”ã€�ã‚’ã�Ÿã�¨ã�ˆã�° 20 ã�«è¨­å®šã�—ã�¾ã�™ã€‚

関連項目

NetBeans IDE を使用�� JavaFX アプリケーションを開発�る方法�����詳細��次�リソースを�照������。