JavaFX Composer ���純�データベースクライアント�作�
執ç†ã�Šã‚ˆã�³ç®¡ç�†: Irina Filippova
ã�“ã�®ãƒ�ュートリアルã�§ã�¯ã€�MySQL データベースã�«æŽ¥ç¶šã�™ã‚‹å�˜ç´”ã�ªã‚¯ãƒ©ã‚¤ã‚¢ãƒ³ãƒˆã‚¢ãƒ—リケーションを JavaFX Composer ã�§çŸæ™‚é–“ã�«ä½œæˆ�ã�™ã‚‹æ–¹æ³•ã�«ã�¤ã�„ã�¦èª¬æ˜Žã�—ã�¾ã�™ã€‚ã�“ã�®ãƒ�ュートリアルã�§ä½¿ç”¨ã�™ã‚‹ MySQL データベースã�¯ãƒªãƒ¢ãƒ¼ãƒˆã‚µãƒ¼ãƒ�ー上ã�«ã�‚ã‚‹ã�Ÿã‚�ã€�ãƒãƒ¼ã‚«ãƒ«ã‚·ã‚¹ãƒ†ãƒ ã�« MySQL データベースサーãƒ�ーをインストールã�—ã�¦æ§‹æˆ�ã�™ã‚‹å¿…è¦�ã�¯ã�‚りã�¾ã�›ã‚“。
JavaFX Composer ã�«ã�¯ç‰¹åˆ¥ã�ª JDBC データソース機能ã�Œç”¨æ„�ã�•れã�¦ã�„ã�¾ã�™ã€‚ã�“ã�®æ©Ÿèƒ½ã‚’使用ã�™ã‚‹ã�¨ã€�データベースクライアントã�® GUI ã‚’çŸæ™‚é–“ã�§ä½œæˆ�ã�—ã€�ãƒãƒ¼ã‚«ãƒ«ã�¾ã�Ÿã�¯ãƒªãƒ¢ãƒ¼ãƒˆã�§ JDBC æº–æ‹ ã�®ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã�‹ã‚‰ãƒ‡ãƒ¼ã‚¿ã‚’å�–å¾—ã�§ã��るよã�†ã�«ã�ªã‚Šã�¾ã�™ã€‚ã�“ã�®ãƒ�ュートリアルã�§ã�¯ã€�ã�“ã�®ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã‚¿ã‚¤ãƒ—ã�§ã�®ä½œæ¥æ–¹æ³•ã�«ã�¤ã�„ã�¦èª¬æ˜Žã�—ã�¾ã�™ã€‚ã�»ã�‹ã�®ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã�®ä½¿ç”¨ã�«ã�¤ã�„ã�¦ã�¯ã€�「JavaFX Composer ã�§ã�® RESTful WS データソースã�®æ“�作ã€�ã�ªã�©ã€�JavaFX Composer ã�®ã��ã�®ä»–ã�®ãƒ�ュートリアルをå�‚ç…§ã�—ã�¦ã��ã� ã�•ã�„。
目次
���ュートリアルを完了�る���次�ソフトウェア�リソース�必���。
注: リモート 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 データベースã�«æŽ¥ç¶šã�™ã‚‹ã�«ã�¯ã€�次ã�®æ‰‹é †ã�«å¾“ã�„ã�¾ã�™ã€‚
- 「サービス�ウィンドウ��「データベース�ノードを�クリック��「新�接続...�を�択���。

- 「データベースã�®æ–°è¦�接続ã€�ウィンドウã�§ã€�次ã�®æƒ…å ±ã‚’å…¥åŠ›ã�—ã€�「了解ã€�をクリックã�—ã�¾ã�™ã€‚
ドライ��: MySQL (Connector/J driver)
ホスト: dot.netbeans.org
�ート: 3306
データベース: usstates
ユーザー�: nbuser
パスワード: nbpassword

注: ãƒãƒ¼ã‚«ãƒ«ãƒžã‚·ãƒ³ä¸Šã�®ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã�«ã‚¢ã‚¯ã‚»ã‚¹ã�™ã‚‹ã�Ÿã‚�ã�®ãƒ‘スワードをä¿�å˜ã�™ã‚‹å ´å�ˆã�«ã�¯ã‚»ã‚ュリティーリスクを無視ã�§ã��ã‚‹ã�Ÿã‚�ã€�ã�“ã�®ä¾‹ã�§ã�¯ã€Œãƒ‘スワードをä¿�å˜ã€�ãƒ�ェックボックスをé�¸æŠžã�—ã�¦ã‚‚ã�‹ã�¾ã�„ã�¾ã�›ã‚“。
- 「jdbc:mysql://dot.netbeans.org:3306/usstates [デフォルトスã‚ーマ ã�® nbuser]ã€�ノードをå�³ã‚¯ãƒªãƒƒã‚¯ã�—ã€�「接続ã€�ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚
「サービス�ウィンドウ��接続�確立�れ���を示�
アイコンを��ノード�表示�れ��。接続ノードを展開��表を表示���。�れ�ら�クライアントを POPULATION �よ� STATES � 2 ��表�接続���。

JDBC データソースã�®è¿½åŠ
プãƒã‚¸ã‚§ã‚¯ãƒˆã�®ä½œæˆ�
- IDE ã�§ã€Œãƒ•ァイルã€�>「新è¦�プãƒã‚¸ã‚§ã‚¯ãƒˆã€�(Ctrl-Shift-N) ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚
- 「新è¦�プãƒã‚¸ã‚§ã‚¯ãƒˆã€�ウィザードã�®ã€ŒJavaFXã€�カテゴリをé�¸æŠžã�—ã€�プãƒã‚¸ã‚§ã‚¯ãƒˆã�®ç¨®é¡žã�¨ã�—ã�¦ã€ŒJavaFX Desktop ビジãƒ�スアプリケーションã€�ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚
- 「å��å‰�ã�¨å ´æ‰€ã€�ページã�§ã€�「プãƒã‚¸ã‚§ã‚¯ãƒˆå��ã€�ã�«ã€ŒDBClientã€�ã�¨å…¥åŠ›ã�—ã€�プãƒã‚¸ã‚§ã‚¯ãƒˆã�®å ´æ‰€ã‚’指定ã�—ã�¾ã�™ã€‚
プãƒã‚¸ã‚§ã‚¯ãƒˆã�«ã‚ˆã�£ã�¦ä½œæˆ�ã�•れã�Ÿ Main.fx ファイルã�Œã‚¨ãƒ‡ã‚£ã‚¿ã�§é–‹ã��ã�¾ã�™ã€‚
- アプリケーション UI ã�®ã‚µã‚¤ã‚ºã‚’ã�“ã�®é ˜åŸŸã�«å�ˆã‚�ã�›ã‚‹ã�Ÿã‚�ã€�ツールãƒ�ーã�§ãƒ‡ãƒ�イスã�®è¡¨ç¤ºã‚µã‚¤ã‚ºã‚’「モãƒ�イル 320 x 240ã€�ã�«è¨å®šã�—ã�¾ã�™ã€‚

ã�“れã�§ã€�アプリケーションã�®ä¸»è¦�部分ã�®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’é–‹å§‹ã�§ã��ã�¾ã�™ã€‚最åˆ�ã�«ã€�JDBC ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã‚’è¿½åŠ ã�—ã€�2 ã�¤ã�®ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹è¡¨ã�«æŽ¥ç¶šã�—ã�¦ãƒ‡ãƒ¼ã‚¿ã‚’å�–å¾—ã�—ã�¾ã�™ã€‚
ãƒ�ュートリアルã�®å®Ÿæ–½ä¸ã�¯ã€�ã�“ã�®ã‚¢ãƒ—リケーションをã�„ã�¤ã�§ã‚‚実行ã�—ã€�åŠ ã�ˆã�Ÿå¤‰æ›´ã‚’ã�™ã��ã�«ç¢ºèª�ã�§ã��ã�¾ã�™ã€‚アプリケーションを実行ã�™ã‚‹ã�«ã�¯ã€�最åˆ�ã�« MySQL Connector/J JAR ファイルをプãƒã‚¸ã‚§ã‚¯ãƒˆã�®ã‚¯ãƒ©ã‚¹ãƒ‘スã�«è¿½åŠ ã�—ã€�ãƒ�ップアップメニューã�‹ã‚‰ã€Œãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’実行ã€�ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚JAR ファイルã�®è¿½åŠ æ–¹æ³•ã�®è©³ç´°ã�«ã�¤ã�„ã�¦ã�¯ã€�「アプリケーションã�®å®Ÿè¡Œã€�ã‚’å�‚ç…§ã�—ã�¦ã��ã� ã�•ã�„。
JDBC データソースã�®è¿½åŠ
JavaFX Composer ã�«ã�¯ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ãƒ•レームワークã�Œç”¨æ„�ã�•れã�¦ã�Šã‚Šã€�HTTP サーãƒ�ーã€�データベースã€�ファイルã�ªã�©ã�®ã�•ã�¾ã�–ã�¾ã�ªã‚½ãƒ¼ã‚¹ã�«ã‚¢ã‚¯ã‚»ã‚¹ã�—ã�¦ãƒ‡ãƒ¼ã‚¿ã‚’å�–å¾—ã�™ã‚‹ä½œæ¥ã‚’ç°¡å�˜ã�«å®Ÿè¡Œã�§ã��ã�¾ã�™ã€‚ユーザーå�´ã�‹ã‚‰ã�¯ã€�データソースフレームワークã�¯ã€�データソースコンãƒ�ーãƒ�ントã�®ã‚»ãƒƒãƒˆã�¨ã�—ã�¦ãƒ‘レットã�«è¡¨ç¤ºã�•れã�¾ã�™ã€‚データソースã�¯ã€�ã�»ã�‹ã�® JavaFX コンãƒ�ーãƒ�ントã�¨å�Œã�˜ã‚ˆã�†ã�«ãƒ‰ãƒ©ãƒƒã‚°ã�Šã‚ˆã�³ã‚«ã‚¹ã‚¿ãƒžã‚¤ã‚ºã�§ã��ã�¾ã�™ã€‚JDBC データソースを使用ã�™ã‚‹ã�¨ã€�SQL クエリーを実行ã�—ã€�JDBC æº–æ‹ ã�®ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã�‹ã‚‰ãƒ‡ãƒ¼ã‚¿ã‚’フェッãƒ�ã�§ã��ã�¾ã�™ã€‚
�れ�ら�2 �� JDBC データソースを作���STATES �よ� POPULATION � 2 ��表�らデータを�得���。
- パレットã�®ã€Œãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã€�セクションã�‹ã‚‰ã€�「JDBC データソースã€�をシーンã�®ä»»æ„�ã�®å ´æ‰€ã�«ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ã�—ã�¾ã�™ã€‚
IDE ã�Œã€�データベース接続ã�®ç¢ºç«‹ã�«å¿…è¦�ã�ªè¿½åŠ ãƒ‘ãƒƒã‚±ãƒ¼ã‚¸ã‚’ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã�«è¿½åŠ ã�—ã�¾ã�™ã€‚
- 「データソースカスタマイザー�ウィンドウ��次��作を行���。
- 「接続 URL�フィールド�「�照�をクリック��MySQL サー�ー��接続を�択���。
ユーザー��パスワード�フィールド�自動的�入力�れ��。
- SQL クエリーを作��� STATES 表�対����クエリーを実行�る���「SQL クエリー�フィールド�「作��をクリック���。
- 「SQL クエリーを生��ウィンドウ��STATES 表�ら abbrev � name � 2 ��列を�択���。
「SELECT 節を生��オプション��択状態������「了解�をクリック���。

- 「データソースカスタマイザー�ウィンドウ�戻��ら�「データをフェッ��をクリック���。データ�データベース表�ら�得�れ�次�図�よ��表示�れ��。「了解�をクリック���。

- 「ナビゲータã€�ウィンドウã�§ã€�「データソースã€�ノードã�®ä¸‹ã�« JDBC データソースã�Œè¿½åŠ ã�•れã�¦ã�„ã‚‹ã�“ã�¨ã‚’確èª�ã�§ã��ã�¾ã�™ã€‚
ã�“ã�®ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã�®å��å‰�を変更ã�—ã�¾ã�™ã€‚ã�“ã�®ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã�®ã€Œãƒ—ãƒãƒ‘ティーã€�ウィンドウã�§ã€�「è˜åˆ¥å�ã€�フィールドã�«ã€ŒStatesã€�ã�¨å…¥åŠ›ã�—ã�¾ã�™ã€‚
次ã�«ã€�2 番目ã�®ãƒ‡ãƒ¼ã‚¿ã‚½ãƒ¼ã‚¹ã‚’è¿½åŠ ã�—ã�¦ã€�POPULATION 表ã�«æŽ¥ç¶šã�—ã�¾ã�™ã€‚å‰�è¿°ã�® STATES 表ã�§ã�®æ‰‹é †ã�«å¾“ã�„ã�¾ã�™ã�Œã€�次ã�®ç‚¹ã�Œç•°ã�ªã‚Šã�¾ã�™ã€‚
- 「SQL クエリーを生��ウィンドウ��POPULATION 表�ら state_name 列�よ� population 列を�択���。

- 「プãƒãƒ‘ティーã€�ウィンドウã�§ã€�データソースã�®è˜åˆ¥å�を「人å�£ã€�ã�«å¤‰æ›´ã�—ã�¾ã�™ã€‚
アプリケーション UI �デザイン
��節���アプリケーション UI を構築���。目的��2 ��別々�パ�ルを作����れ�れ�パ�ル�異�るデータベース表�データを表示��る����。�� UI を実装�る���「排他�視�テンプレートを使用��2 ��パ�ル (データベース表��� 1 ��パ�ル) を����。
「排他�視�テンプレート�使用
「排他å�¯è¦–ã€�テンプレートã�¯ã€�ã�•ã�¾ã�–ã�¾ã�ªçŠ¶æ…‹ã�§ UI コントãƒãƒ¼ãƒ«ã‚’グループå�˜ä½�ã�§å�¯è¦–ã�¾ã�Ÿã�¯ä¸�å�¯è¦–ã�«ã�™ã‚‹å ´å�ˆã�«é�žå¸¸ã�«å½¹ç«‹ã�¡ã�¾ã�™ã€‚ã�¤ã�¾ã‚Šã€�ã�“ã�®ãƒ†ãƒ³ãƒ—レートを使用ã�™ã‚‹ã�¨ã€�UI コントãƒãƒ¼ãƒ«ã�®ã‚°ãƒ«ãƒ¼ãƒ—全体ã�«å¯¾ã�—ã�¦å�¯è¦–ã�¨ä¸�å�¯è¦–ã‚’ã�™ã�°ã‚„ã��切り替ã�ˆã‚‰ã‚Œã‚‹ã�Ÿã‚�ã€�個別ã�®ã‚³ãƒ³ãƒ�ーãƒ�ントã�”ã�¨ã�« UI コントãƒãƒ¼ãƒ«ã‚’æ§‹æˆ�ã�™ã‚‹å¿…è¦�ã�Œã�ªã��ã�ªã‚Šã�¾ã�™ã€‚ã�“ã�®ãƒ†ãƒ³ãƒ—レートã�®è©³ç´°ã�«ã�¤ã�„ã�¦ã�¯ã€�「JavaFX Composer テンプレートã�®ã‚¬ã‚¤ãƒ‰ã€�ã‚’å�‚ç…§ã�—ã�¦ã��ã� ã�•ã�„。
- 「パレット�ウィンドウ�「テンプレート�セクションを展開��「排他�視�テンプレートを「デザイン��ドラッグ���。
- 「テンプレートをカスタマイズã€�ウィンドウã�§ã€�次ã�®å€¤ã‚’è¨å®šã�—ã�¾ã�™ã€‚
- 状態変数: currentState。
- コンテナ: デフォルト値ã�®ã�¾ã�¾ã�«ã�—ã�¾ã�™ã€‚ã�“れã�¯æŽ’ä»–å�¯è¦–パãƒ�ルã�®ã‚»ãƒƒãƒˆã‚’æ ¼ç´�ã�™ã‚‹ã‚³ãƒ³ãƒ†ãƒŠã�§ã€�å�„パãƒ�ルã�Œã�‚ã‚‹ 1 ã�¤ã�®çŠ¶æ…‹ã�§ã�®ã�¿è¡¨ç¤ºã�•れるよã�†ã�«ã�ªã‚Šã�¾ã�™ã€‚
- 冗長化状態用�パ�ルを作�: 最��状態����パ�ルを作��る������ェックボックス��択解除���。
- 冗長コンãƒ�ーãƒ�ント用ã�®çŠ¶æ…‹ã‚’ä½œæˆ�: è¿½åŠ ã�™ã‚‹ãƒ‘ãƒ�ルã�”ã�¨ã�«çŠ¶æ…‹ã�Œè‡ªå‹•çš„ã�«ä½œæˆ�ã�•れるよã�†ã�«ã�™ã‚‹ã�Ÿã‚�ã€�ã�“ã�®ãƒ�ェックボックスã�¯é�¸æŠžã�—ã�¾ã�™ã€‚
- ã��ã�®ä»–ã�®è¨å®šã�¯ã�™ã�¹ã�¦ãƒ‡ãƒ•ォルト値ã�®ã�¾ã�¾ã�«ã�—ã€�「了解ã€�をクリックã�—ã�¾ã�™ã€‚「排他å�¯è¦–ã€�テンプレートã�Œã‚·ãƒ¼ãƒ³ã�«è¿½åŠ ã�•れã€�「ナビゲータã€�ウィンドウã�®ã€Œãƒ†ãƒ³ãƒ—レートã€�ノードã�®ä¸‹ã�«è¡¨ç¤ºã�•れã�¾ã�™ã€‚

- 「ナビゲータã€�ウィンドウã�§ã€Œ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 表�パ�ル�デザイン�れ���。「デザイン�ビュー��次�画��よ���る����。

POPULATION 表ã�®ãƒ‘ãƒ�ルコンテンツã�®è¿½åŠ
ã�“ã�®æ‰‹é †ã�§ã�¯ã€�POPULATION 表å�‘ã�‘ã�«å�Œã�˜æ§‹é€ ã‚’è¿½åŠ ã�—ã�¾ã�™ã€‚ã�“ã�®æ‰‹é †ã�¯ã€�基本的ã�«ã�¯ STATES 表ã�¨å�Œã�˜ã�§ã�™ã�Œã€�ã�„ã��ã�¤ã�‹ã�®é�•ã�„ã�Œã�‚りã�¾ã�™ã€‚「ナビゲータã€�ウィンドウã�§ã€Œpopulationã€�ノードをå�³ã‚¯ãƒªãƒƒã‚¯ã�—ã€�「コンテナをデザインã€�ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚population VBox ã�®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„ã�®ã�¿ã‚’表示ã�™ã‚‹ç‹¬ç«‹ã�—ã�Ÿãƒ“ューã�Œè¡¨ç¤ºã�•れã�¾ã�™ã€‚ã�“れã�«ã‚ˆã‚Šã€�population VBox ã�®ã‚³ãƒ³ãƒ†ãƒ³ãƒ„を視覚的ã�«åŒºåˆ¥ã�§ã��ã�¾ã�™ã€‚
ã‚‚ã�†ä¸€åº¦ã€ŒãƒŠãƒ“ゲータã€�ウィンドウã�§ã€Œpopulationã€�ノードをå�³ã‚¯ãƒªãƒƒã‚¯ã�—ã€�ã€Œè¿½åŠ ã€�をクリックã�—ã�¦æ¬¡ã�®ã‚³ãƒ³ãƒ�ーãƒ�ãƒ³ãƒˆã‚’è¿½åŠ ã�—ã�¾ã�™ã€‚
状態�作�
- 「ナビゲータ�ウィンドウ��「テンプレート�ノード�下��る「排他�視�テンプレートをダブルクリック���。
テンプレート�カスタマイザー�ウィンドウ�開��2 ��状態�自動的�生��れ��る���確�����。IDE �シーン�パ�ル������� 2 ��状態を作����由��パ�ル���状態を作��るオプションを有効�������。
- 「了解ã€�をクリックã�—ã�¾ã�™ã€‚「デザインã€�ビューã�« 2 ã�¤ã�®æ–°ã�—ã�„状態ã�Œè¿½åŠ ã�•れã�¾ã�—ã�Ÿã€‚
- 最åˆ�ã�®çŠ¶æ…‹ã‚’ãƒ€ãƒ–ãƒ«ã‚¯ãƒªãƒƒã‚¯ã�—ã�¾ã�™ã€‚å��å‰�を「Statesã€�ã�«å¤‰æ›´ã�—ã€�開始状態ã�«è¨å®šã�—ã�¾ã�™ã€‚「了解ã€�をクリックã�—ã�¾ã�™ã€‚
- 2 番目�状態をダブルクリック���。��を「Population��変更���「了解�をクリック���。
ã�“れã�§ã€�ã��れã�žã‚Œã�®çŠ¶æ…‹ã‚’é�¸æŠžã�™ã‚‹ã�¨ã€�「Statesã€�状態ã�§ã�¯ states VBox ã�®ã�¿ã�Œè¡¨ç¤ºã�•れã€�「Populationã€�状態ã�§ã�¯ population VBox ã�®ã�¿ã�Œè¡¨ç¤ºã�•れã�¾ã�™ã€‚ã�‚る状態ã�Œé�¸æŠžã�•れã�¦ã�„ã‚‹ã�¨ã��ã�«ãƒ—ãƒãƒ‘ティーを編集ã�™ã‚‹ã�¨ã€�ã��ã�®å¤‰æ›´ã�Œé�©ç”¨ã�•れるã�®ã�¯ç�¾åœ¨ã�®çŠ¶æ…‹ã�®ã�¿ã�«ã�ªã‚‹ã�“ã�¨ã�«æ³¨æ„�ã�—ã�¦ã��ã� ã�•ã�„。ã�—ã�Ÿã�Œã�£ã�¦ã€�アプリケーション全体ã�«é�©ç”¨ã�•れるã�™ã�¹ã�¦ã�®ã‚³ãƒ³ãƒ�ーãƒ�ントを編集ã�§ã��ã‚‹ã�®ã�¯ãƒžã‚¹ã‚¿ãƒ¼çŠ¶æ…‹ã� ã�‘ã�§ã�™ã€‚特定ã�®çŠ¶æ…‹ã�§ã�¯ã€�プãƒãƒ‘ティーã�®å¤‰æ›´ã‚’最å°�é™�ã�«ã�¨ã�©ã‚�ã�¦ã�Šã��ã�“ã�¨ã‚’å¼·ã��ã�Šå‹§ã‚�ã�—ã�¾ã�™ã€‚特定ã�®çŠ¶æ…‹ã�§å¤‰æ›´ã�Œå¿…è¦�ã�ªå€¤ã�®ã�¿ã‚’編集ã�™ã‚‹ã�«ã�¯ã€�マスターã�®çŠ¶æ…‹ä»¥å¤–ã�§ä½œæ¥ã�™ã‚‹å¿…è¦�ã�Œã�‚りã�¾ã�™ã€‚
状態を切り替ã�ˆã‚‹ãƒœã‚¿ãƒ³ã�®è¿½åŠ
ã�“ã�®æ‰‹é †ã�§ã�¯ã€�アプリケーションã�®çŠ¶æ…‹ã€�ã�¤ã�¾ã‚Šç•°ã�ªã‚‹ãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹è¡¨ã�«æŽ¥ç¶šã�•れã�¦ã�„るパãƒ�ルを切り替ã�ˆã‚‹ãƒœã‚¿ãƒ³ã‚’è¿½åŠ ã�—ã�¾ã�™ã€‚
- 「デザインã€�ビューã�§ãƒžã‚¹ã‚¿ãƒ¼çŠ¶æ…‹ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚ã�“ã�®å¤‰æ›´ä½œæ¥ã�¯ã€�å¿…ã�šãƒžã‚¹ã‚¿ãƒ¼çŠ¶æ…‹ã�§å®Ÿè¡Œã�—ã�¦ã��ã� ã�•ã�„。
- パレットã�§ã€Œã‚³ãƒ³ãƒˆãƒãƒ¼ãƒ«ã€�セクションを探ã�—ã€�「ボタンã€�を「デザインã€�ã�«ãƒ‰ãƒ©ãƒƒã‚°ã�—ã�¾ã�™ (å�³ãƒžãƒ¼ã‚¸ãƒ³ã�«è¿‘ã�„ä½�ç½®ã�«ç½®ã��ã�¾ã�™)。

- ボタンã�®ã€Œãƒ—ãƒãƒ‘ティーã€�ウィンドウã�§ã€Œã‚¢ã‚¯ã‚·ãƒ§ãƒ³ã€�プãƒãƒ‘ティーã�®ã€Œç”Ÿæˆ�ã€�アイコン
をクリック��「生�: 次�状態�移動�を�択���。
�れ�より�次�状態�切り替�るボタン�アクション�生��れ��。エディタ�「ソース�ビュー�変�り�生��� buttonAction 関数�表示�れ��。
- 「ソース�ビュー��「currentState.next()�を「currentState.nextWrapped()��変更���。

- マスター状態ã�®ã�¾ã�¾ã€�ボタンã�®ã€Œãƒ—ãƒãƒ‘ティーã€�ã�®ã€Œãƒ†ã‚ストã€�フィールドã�®æ¨ªã�«ã�‚る「マスターã�®å€¤ã‚»ãƒƒãƒˆã€�アイコンをクリックã�—ã€�å�„状態ã�®ãƒœã‚¿ãƒ³ã�®ãƒ†ã‚ストを変更ã�—ã�¾ã�™ã€‚

- 「プãƒãƒ‘ティーã€�ã�®ã€Œè©³ç´°ã€�ダイアãƒã‚°ã�§ã€�「指定ã�•れã�Ÿã‚‚ã�®ã‚’使用ã€�オプションをé�¸æŠžã�—ã�¾ã�™ã€‚「Statesã€�状態をé�¸æŠžã�—ã€�「人å�£ã€�ã�¨å…¥åŠ›ã�—ã�¾ã�™ã€‚「Populationã€�状態をé�¸æŠžã�—ã€�「米国ã�®å·žã€�ã�¨å…¥åŠ›ã�—ã�¾ã�™ã€‚「閉ã�˜ã‚‹ã€�をクリックã�—ã�¾ã�™ã€‚ã�“れã�§ã€�2 ã�¤ã�®çŠ¶æ…‹ã�«ã‚ˆã�£ã�¦ç•°ã�ªã‚‹ãƒ†ã‚ストã�Œãƒœã‚¿ãƒ³ã�«è¡¨ç¤ºã�•れるよã�†ã�«ã�ªã‚Šã�¾ã�™ã€‚
ã�“ã�®ä¾‹ã�§ã�¯ã€�状態を切り替ã�ˆã‚‹ã�Ÿã‚�ã�«æ¨™æº–ã�®ãƒœã‚¿ãƒ³ã‚’使用ã�—ã�¦ã�„ã�¾ã�™ã€‚ã�—ã�‹ã�—ã€�「é�¸æŠžãƒœãƒƒã‚¯ã‚¹ã€�ã�ªã�©ã�»ã�‹ã�® UI コントãƒãƒ¼ãƒ«ã‚’使用ã�™ã‚‹ã�“ã�¨ã‚‚ã�§ã��ã�¾ã�™ã€‚
アプリケーション�実行
�れ�デザイン�完���。アプリケーションを実行����よ��動作�る�を見����ょ�。アプリケーション�実行を試�る���次��作を行���。
- マスター状態ã�§ã€Œã‚·ãƒ¼ãƒ³ã€�ã�®ä¸‹ã�«ã�‚る「排他å�¯è¦–ã€�ノードをé�¸æŠžã�—ã€�「デザインã€�ã�®ä¸å¤®éƒ¨ã�«ç§»å‹•ã�—ã�¾ã�™ã€‚マスター状態ã�§ã�¯ã€�「排他監視ã€�テンプレートã�¯å¤–æž ã�®ã�¿ã�Œè¡¨ç¤ºã�•れã�¾ã�™ã€‚マスター状態ã�§ã�®ãƒœã‚¿ãƒ³ã�®ä½�置をã€�次ã�®å›³ã�®ã‚ˆã�†ã�«èª¿æ•´ã�—ã�¾ã�™ã€‚

- MySQL Connector/J JAR ファイルをダウンãƒãƒ¼ãƒ‰ã�—ã€�プãƒã‚¸ã‚§ã‚¯ãƒˆã�®ã‚¯ãƒ©ã‚¹ãƒ‘スã�«è¿½åŠ ã�—ã�¾ã�™ã€‚MySQL データベースã�¸ã�®æŽ¥ç¶šã‚’確立ã�™ã‚‹ã�«ã�¯ã‚³ãƒ�クタã�Œå¿…è¦�ã�§ã�™ã€‚
ã�“ã�®ã�Ÿã‚�ã�«ã�¯ã€�「プãƒã‚¸ã‚§ã‚¯ãƒˆã€�ウィンドウã�§ã€ŒDBClientã€�プãƒã‚¸ã‚§ã‚¯ãƒˆã�®ãƒŽãƒ¼ãƒ‰ã‚’å�³ã‚¯ãƒªãƒƒã‚¯ã�—ã€�「プãƒãƒ‘ティーã€�ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚「ライブラリã€�カテゴリをé�¸æŠžã�—ã€�「JAR/ãƒ•ã‚©ãƒ«ãƒ€ã‚’è¿½åŠ ã€�をクリックã�—ã�¾ã�™ã€‚システム上ã�§ MySQL Connector JAR ファイルを探ã�—ã€�「開ã��ã€�をクリックã�—ã�¾ã�™ã€‚
- プãƒã‚¸ã‚§ã‚¯ãƒˆã‚’実行ã�—ã�¾ã�™ (プãƒã‚¸ã‚§ã‚¯ãƒˆã‚’å�³ã‚¯ãƒªãƒƒã‚¯ã�—ã�¦ã€Œãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’実行ã€�ã‚’é�¸æŠžã�™ã‚‹ã�‹ã€�主プãƒã‚¸ã‚§ã‚¯ãƒˆã�®å ´å�ˆã�¯ 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 スタイルシートã�®è¿½åŠ
- 「プãƒã‚¸ã‚§ã‚¯ãƒˆã€�ウィンドウã�§ã€Œdbclientã€�パッケージをå�³ã‚¯ãƒªãƒƒã‚¯ã�—ã�¦ã€Œæ–°è¦�ã€�>「ã��ã�®ä»–ã€�ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚「新è¦�ファイルã€�ウィンドウã�§ã€�「カテゴリã€�を「ã��ã�®ä»–ã€�ã€�「ファイルã�®ç¨®é¡žã€�を「階層å¼�スタイルシートã€�ã�«è¨å®šã�—ã�¦ã€Œæ¬¡ã�¸ã€�をクリックã�—ã€�æ–°ã�—ã�„ファイルã�«ã€ŒcontrolStyle.cssã€�ã�¨ã�„ã�†å��å‰�を付ã�‘ã�¾ã�™ã€‚
- �供�れ��る CSS スタイルシート を開����内容を新��ファイル�コピー���。
ã�¾ã�Ÿã€�ã�“ã�®ãƒ•ァイルをå�˜ç´”ã�«ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã�® /src/dbclient ディレクトリã�«ä¿�å˜ã�™ã‚‹ã�“ã�¨ã‚‚ã�§ã��ã�¾ã�™ã€‚
- 最åˆ�ã�«ã€�スタイルシートをシーンã�«è¿½åŠ ã�™ã‚‹å¿…è¦�ã�Œã�‚りã�¾ã�™ã€‚マスター状態ã�§ã€�「ナビゲータã€�ウィンドウã�‹ã‚‰ã‚·ãƒ¼ãƒ³ã‚’é�¸æŠžã�—ã�¾ã�™ã€‚「プãƒãƒ‘ティーã€�ウィンドウã�§ã€�「スタイルシートã€�フィールドã�«ã€Œ{__DIR__}controlStyle.cssã€�ã�¨å…¥åŠ›ã�—ã�¾ã�™ã€‚
å�„ GUI è¦�ç´ ã�¸ã�® CSS スタイルã�®é�©ç”¨
ã�“ã�“ã�§ã�¯ã€�å�„ GUI è¦�ç´ ã�«ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¿½åŠ ã�—ã�¾ã�™ã€‚スタイルã�¯ã€�「プãƒãƒ‘ティーã€�ウィンドウã�®ã€Œã‚¹ã‚¿ã‚¤ãƒ«ã€�セクションã�«ã�‚る「スタイルクラスã€�プãƒãƒ‘ティーを使用ã�—ã�¦æŒ‡å®šã�—ã�¾ã�™ã€‚JavaFX Composer ã�§ CSS スタイルをé�©ç”¨ã�™ã‚‹ä¸€èˆ¬çš„ã�ªæ‰‹é †ã�¯ã€�次ã�®ã�¨ã�Šã‚Šã�§ã�™ã€‚
- è¦�ç´ ã‚’é�¸æŠžã�—ã€�「プãƒãƒ‘ティーã€�ウィンドウã�§ã€Œã‚¹ã‚¿ã‚¤ãƒ«ã‚¯ãƒ©ã‚¹ã€�プãƒãƒ‘ティーフィールドã�®æ¨ªã�«ã�‚る「詳細を開ã��ã€�アイコン
をクリック���。
ã�“れã�«ã‚ˆã‚Šã€�「プãƒãƒ‘ティーã€�ã�®ã€Œè©³ç´°ã€�ダイアãƒã‚°ã�Œè¡¨ç¤ºã�•れã€�ã�•ã�¾ã�–ã�¾ã�ªçŠ¶æ…‹ã�§ã�®ã�“ã�®è¦�ç´ ã�®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’è¨å®šã�§ã��ã�¾ã�™ã€‚
- 「プãƒãƒ‘ティーã€�ã�®ã€Œè©³ç´°ã€�ダイアãƒã‚°ã�§çŠ¶æ…‹ã‚’é�¸æŠžã�—ã€�スタイルクラスå�� (labelStyle ã�ªã�©) を入力ã�—ã�¾ã�™ã€‚次ã�®å›³ã�¯ã€�「ラベルã€�è¦�ç´ ã�®ã€Œãƒ—ãƒãƒ‘ティーã€�ã�®ã€Œè©³ç´°ã€�ダイアãƒã‚°ã�§ã�®ã€Œã‚¹ã‚¿ã‚¤ãƒ«ã‚¯ãƒ©ã‚¹ã€�プãƒãƒ‘ティーã�®ä¾‹ã�§ã�™ã€‚マスター状態ã�§å€¤ã‚’編集ã�™ã‚‹ã�¨ã€�(ã�“ã�®ä¾‹ã�®ã‚ˆã�†ã�«) ã��ã�®å€¤ã�Œã�™ã�¹ã�¦ã�®çŠ¶æ…‹ã�«é�©ç”¨ã�•れã�¾ã�™ã€‚

ã�“ã�®ä¾‹ã�§ã�¯ã€�マスター状態をé�¸æŠžã�—ã€�次ã�®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’ GUI è¦�ç´ ã�«å‰²ã‚Šå½“ã�¦ã�¾ã�™ã€‚
- states VBox
- 「label� - labelStyle
- 「formGrid�>「abbrevTitleLabel��よ�「nameTitleLabel� - labelStyle1
- 「formGrid�>「abbrevValueLabel��よ�「nameValueLabel� - labelstyle2
- 「tile�>「indexPreviousButton��よ�「indexNextButton�- buttonStyle
- population VBox:
- 「label2� - labelStyle
- 「formGrid2�>「state_NameTitleLabel��よ�「populationTitleLabel� - labelStyle1
- 「formGrid2�>「state_NameValueLabel��よ�「populationValueLabel� - labelstyle2
- 「tile2�>「indexPreviousButton2��よ�「indexNextButton2� - buttonStyle
- 「buttonã€�: 「スタイルクラスã€�ã‚’ buttonStyle1 ã�«è¨å®šã�—ã�¾ã�™ã€‚
背景画åƒ�ã�®è¿½åŠ
ã�“ã�®æ‰‹é †ã�§ã�¯ã€�PNG ç”»åƒ�を背景画åƒ�ã�¨ã�—ã�¦è¿½åŠ ã�—ã�¾ã�™ã€‚アプリケーションã�«ç”»åƒ�ã‚’è¿½åŠ ã�™ã‚‹ã�«ã�¯ã€�次ã�®æ‰‹é †ã�«å¾“ã�„ã�¾ã�™ã€‚
- ç”»åƒ�ファイルをプãƒã‚¸ã‚§ã‚¯ãƒˆã�® src/dbclient ディレクトリã�«ä¿�å˜ã�—ã�¾ã�™ã€‚
IDE ã�§ã�¯ã€�ç”»åƒ�ファイルã�¯ã€�プãƒã‚¸ã‚§ã‚¯ãƒˆã�®æ§‹é€ ã€�ã�Šã‚ˆã�³ãƒ‘レットã�®ã€Œç�¾åœ¨ã�®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆ - ç”»åƒ�ファイルã€�セクションã�«è¡¨ç¤ºã�•れã�¾ã�™ã€‚
- マスター状態を�択���。パレット�画�を「デザイン�� [0,0] ��置 (左上隅) �ドラッグ���。
「imageViewã€�ノードã�Œã€�「ナビゲータã€�ウィンドウã�®ã‚·ãƒ¼ãƒ³ã�®ä¸‹ã�«è¡¨ç¤ºã�•れã€�リソースã�¨ã�—ã�¦è¿½åŠ ã�•れã�¾ã�—ã�Ÿã€‚
- ã�“ã�®ç”»åƒ�ã�¯ã‚·ãƒ¼ãƒ³ã‚ˆã‚Šå¤§ã��ã�„ã�Ÿã‚�ã€�「imageViewã€�ã�®ã€Œãƒ—ãƒãƒ‘ティーã€�ウィンドウã�§ã€Œãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã€�カテゴリを表示ã�—ã€�「幅ã�«å�ˆã‚�ã�›ã‚‹ã€�ã‚’ 320 ã�«ã€�「高ã�•ã�«å�ˆã‚�ã�›ã‚‹ã€�ã‚’ 240 ã�«è¨å®šã�—ã�¾ã�™ (ç�¾åœ¨ã�®ãƒ‡ãƒ�イスã�®ãƒ“ューãƒ�ートサイズ)。
- å�Œã�˜ã€Œãƒ—ãƒãƒ‘ティーã€�ウィンドウã�§ã€�ç”»åƒ�ã�®ä¸�é€�明度を下ã�’ã�¦ç´„ 0.3 ã�«è¨å®šã�—ã�¾ã�™ã€‚

プãƒã‚¸ã‚§ã‚¯ãƒˆã�®å®Ÿè¡Œ
DBClient プãƒã‚¸ã‚§ã‚¯ãƒˆã‚’実行ã�—ã�¾ã�™ (主プãƒã‚¸ã‚§ã‚¯ãƒˆã�®å ´å�ˆã�¯ F6 を押ã�™ã�‹ã€�ã�¾ã�Ÿã�¯ã€Œä¸»ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã‚’実行ã€�アイコンをクリックã�—ã�¾ã�™)。デザインファイルã�Œä¿�å˜ã�•れã€�プãƒã‚¸ã‚§ã‚¯ãƒˆã�Œã‚³ãƒ³ãƒ‘イルã�Šã‚ˆã�³é–‹å§‹ã�•れã�¾ã�™ã€‚IDE ã�Œãƒ‡ãƒ¼ã‚¿ãƒ™ãƒ¼ã‚¹ã�«æŽ¥ç¶šã�™ã‚‹ã�¾ã�§å¾…機ã�—ã�¾ã�™ã€‚ã��ã�®å¾Œã€�データã�Œè¡¨ç¤ºã�•れã�¾ã�™ã€‚
GUI コンãƒ�ーãƒ�ントã�®ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚’改善ã�™ã‚‹ã�Ÿã‚�ã�«ã€�ã�•らã�«èª¿æ•´ã�Œå¿…è¦�ã�«ã�ªã‚‹å ´å�ˆã�Œã�‚りã�¾ã�™ã€‚次ã�®å¤‰æ›´ã�¯ã�™ã�¹ã�¦ã€�マスター状態ã�§è¡Œã�†å¿…è¦�ã�Œã�‚りã�¾ã�™ã€‚
- 両方ã�®ãƒ‘ãƒ�ルã�®ã€ŒformGridã€�ã�§ã�™ã�¹ã�¦ã�®ãƒ©ãƒ™ãƒ«ã‚’é�¸æŠžã�—ã€�「レイアウトã€�セクションã�®ã€Œæ¨ªã‚’最大ã�«æ‹¡å¼µ (縦ã�¯ç¶æŒ�)ã€�プãƒãƒ‘ティーを「Trueã€�ã�«è¨å®šã�—ã�¾ã�™ã€‚ã�“れã�«ã‚ˆã‚Šã€�「formGridã€�ã�®ã�™ã�¹ã�¦ã�®åˆ—ã�Œå�Œã�˜å¹…ã�«ã�ªã‚Šã�¾ã�™ã€‚
- VBox 内ã�§å�„ UI コンãƒ�ーãƒ�ント間ã�®ç¸¦æ–¹å�‘ã�®ã‚¹ãƒšãƒ¼ã‚¹ã‚’大ã��ã��ã�—ã�¾ã�™ã€‚両方ã�® VBox è¦�ç´ ã‚’é�¸æŠžã�—ã€�「è¦�ç´ é–“éš”ã€�ã‚’ã�Ÿã�¨ã�ˆã�° 20 ã�«è¨å®šã�—ã�¾ã�™ã€‚
é–¢é€£é …ç›®
NetBeans IDE を使用ã�—ã�¦ JavaFX アプリケーションを開発ã�™ã‚‹æ–¹æ³•ã�«ã�¤ã�„ã�¦ã�®è©³ç´°ã�¯ã€�次ã�®ãƒªã‚½ãƒ¼ã‚¹ã‚’å�‚ç…§ã�—ã�¦ã��ã� ã�•ã�„。