Java 2 - Lesson01

Transcription

1 Java2 第 4 回 高度な GUI デザインの作成 キーポイント FocusListener の作成 Exercise 3 and 4 今まで学んだ機能を組み合わせて 高度なデザインの GUI を作成します レイアウトやイベントの作成については各自で考えて 工夫して下さい 作成する GUI の動作を確認したい場合は Java2 コースの Web ページ上にある jar ファイルをダウンロード 起動して動作を確認して下さい 1

2 FocusEvent の作成 FocusEventによりユーザーの入力状態を確認する Focusとは現在のキーボードの入力対象のコンポーネントのこと FocusListenerを用いて ユーザーの入力を監視する focus 状態 focus 状態の解除 focus 状態 2

3 FocusEvent で用いる Method を確認する FocusEvent の作成 (2) import java.awt.event.focusevent; import java.awt.event.focuslistener; public class FocusEventTest extends JFrame implements FocusListener{ public static void main(string[] args){ new FocusEventTest("ChangeEventTest"); public FocusEventTest(String title){ public void focusgained(focusevent e) { // Focus 状態になった時の処理を記述する public void focuslost(focusevent e) { // Focus 状態が外れた時の処理を記述する 3

4 FocusEvent の作成 (3) FocusListener の Method に動作を記述する public class FocusEventTest extends JFrame implements FocusListener { JTextField jtf1, jtf2, jtf3; JLabel jlab1, jlab2; public static void main(string[] args) { new FocusEventTest("ChangeEventTest"); public FocusEventTest(String title) { JPanel jp = new JPanel(); jtf1 = new JTextField("first", 20); jtf1.addfocuslistener(this); jtf2 = new JTextField("second", 20); jtf2.addfocuslistener(this); jtf3 = new JTextField("third", 20); jtf3.addfocuslistener(this); jlab1 = new JLabel(); jlab2 = new JLabel(); jp.add(jtf1); jp.add(jtf2); jp.add(jtf3); jp.add(jlab1); jp.add(jlab2); add(jp); public void focusgained(focusevent e) { JTextField jtf_col = (JTextField) e.getcomponent(); jlab2.settext(jtf_col.gettext()); public void focuslost(focusevent e) { JTextField jtf_col = (JTextField) e.getcomponent(); jlab1.settext(jtf_col.gettext() + " =>"); setdefaultcloseoperation(jframe.exit_on_close); setsize(240, 300); setresizable(false); settitle(title); setvisible(true); focuslistener の動作を確認して下さい 4

5 FocusEvent の作成 (4) Component 自体に FocusListener を add する記述もできる public class FocusEventTest2 extends JFrame { public static void main(string[] args){ new FocusEventTest2("FocusEventTest2"); public FocusEventTest2(String title){ JPanel jp = new JPanel(); JTextField jtf1 = new JTextField("first", 20); JTextField jtf2 = new JTextField("second", 20); JTextField jtf3 = new JTextField("third", 20); JLabel jlab1 = new JLabel(); jtf1.addfocuslistener(new FocusAdapter() { public void focusgained(focusevent e) { jlab1.settext(jtf1.gettext()); ); jtf2.addfocuslistener // 省略する jp.add(jtf1); jp.add(jtf2); jp.add(jtf3); jp.add(jlab1); add(jp); 前述と同じように動作させることができる setdefaultcloseoperation(jframe.exit_on_close); setsize(240, 300); setresizable(false); settitle(title); setvisible(true); ユーザーの Focus を利用したプログラムを組む場合は このように FocusListener を利用して下さい 5

6 以下に示す GUI を作成して下さい Exercise 3 and 4 複数ページを持つ複雑なデザインな GUI なので 今までの演習や課題で学んだことを用いて作成して下さい 各ページの要件や注意点はこの後にページ毎に説明します 6

7 1 ページ目の作成 以下のデザインのユーザー登録画面の作成 ユーザー名 パスワード パスワードの再入力 の入力を行うテキストフィールドを作成し 不正入力があった場合にメッセージを返すイベントを作成する Password 項目の入力と同じ入力がされているか確認する 必要入力項目に * 印をつけています該当する項目に入力がされているか確認するイベントを作成して下さい 入力が正しい の形式でされているか確認する が入っている 文字列の最後が.com である 以上のような確認を行い 問題がないと判断できたら 2 ページ目へ >> 次の画面へ 画面の終了 最初のページなので < Prev ボタンを押せないようにする 7

8 1 ページ目の作成 (2) 不正な入力と判断できた場合 ユーザー側が確認できるイベントを作成する Password の再入力 の入力が不正の場合 以下のような表示をする 正しい入力が完了していないのに Next> ボタンが押された際に ユーザーにエラーを返すイベントを作成する Password の再入力 の不正入力が確認できた時にユーザー確認用の表示をする エラーダイアログを表示 正しく入力がされていない 以上のような確認を行い 問題がないと判断できたら 2 ページ目へ >> 8

9 2 ページ目の作成 ユーザー情報の入力をできる画面を以下のようなデザインで作成して下さい ユーザー入力を行うための左記のようなコンポーネントの追加を行って下さい 画像のアップロードをする項目の作成 前の画面に戻る 必須項目の入力が完了していると判断できたら次のページへ入力未完了の場合は 前ページのようなエラーダイアログの出力をする 1 ページ目と同じように * 印の入力必須項目に入力がされているか確認するイベントを作成 9

10 2 ページ目の作成 (2) 各コンポーネントを以下のように設定して下さい コンボボックスのアイテムの対応 日にちのコンボボックスに 指定した月に対応したアイテムを設定して下さい Country の項目に対応したアイテムを City Company 項目に設定して下さい ( 設定するアイテムは自由に作成して下さい ) 10

11 3 ページ目の作成 JTable クラスを用いて追加情報を入力するフォームを作成する テーブルに入力されたデータを追加する 追加ボタン 入力されたデータをリセットするボタン 上記のようにデータを追加 テーブルに追加されたデータを消去するボタン 11

12 4 ページ目の作成 今まで入力した情報をテキストエリアに表示するページを作成して下さい ユーザー登録情報 ユーザー詳細情報 追加情報 12

13 CardLayout の使用 GUI デザイン設計のポイント それぞれのページのレイアウトの作成には CardLayout を使用して下さい メインのフレーム コンポーネントを追加したそれぞれのページ メインフレーム上のボタンなどは共通して利用できる 13

14 GUI デザイン設計のポイント それぞれのページのクラスを作成 ( これはやり方の一つであるため この方法に従う必要はありません ) 記述が長くなるため Page クラスを作成してそれを継承させたそれぞれのページを作る // ひな型となる Page クラスの作成 import javax.swing.jpanel; public class Page extends JPanel { // ページの終了要件確認のフラグ boolean finish; public boolean isfinished(){ return finish; public void displayinfo(string info){ public class Page1 extends Page { public Page1() { // ページのレイアウトを記述 public class Main implements ActionListener { JFrame jf; CardLayout cl; JPanel jpmain; Page[] pages; public Main() { cl = new CardLayout(); jpmain = new JPanel(); jpmain.setlayout(cl); // 記述を省略 // CardLayout をセットしたメインのパネルに // Page 型を継承したクラスを add する pages = new Page[] { new Page1(), new Page2(), new Page3(),new Page4() ; for (int i = 0; i < pages.length; i++) { jpmain.add(pages[i], "page" + i); public boolean isfinished() { // ページの終了要件を記述 return finish; 14

15 ActionEvent の扱い GUI デザイン設計のポイント メインページと内部ページの ActionEvent の処理を分ける public class Main implements ActionListener { public Main() { 内部ページ上のイベント処理を設定 public void actionperformed(actionevent e) { // メインページ上のイベント処理を記述 メインページ上のイベント処理を設定 public class Page1 extends Page implements ActionListener { public Page1() { public void actionperformed(actionevent arg0) { // 内部ページ上のイベント処理を記述 15

16 コンポーネントのレイアウト GUI デザイン設計のポイント 自由なレイアウトでデザインしたい場合はレイアウトマネージャを無効にしてコンポーネントを配置する方法がある 以前の講義で学んだ座標を指定する方法を利用することができる.setBounds(10, 25, 125, 150).setBounds(35, 180, 75, 20).setBounds(155, 345, 350, 150) 16