java2 第4回 高度なguiデザインの作成1 java2 第4回 高度なguiデザインの作成...
TRANSCRIPT
1
Java2 第４回高度なGUIデザインの作成
キーポイント
• FocusListenerの作成
• Exercise 3 and 4– 今まで学んだ機能を組み合わせて、高度なデザインのGUIを作成します
– レイアウトやイベントの作成については各自で考えて、工夫して下さい
– 作成するGUIの動作を確認したい場合は、Java2コースのWebページ上にあるjarファイルをダウンロード・起動して動作を確認して下さい
FocusEventの作成• FocusEventによりユーザーの入力状態を確認する
• Focusとは現在のキーボードの入力対象のコンポーネントのこと
• FocusListenerを用いて、ユーザーの入力を監視する
2
focus状態
focus状態
focus状態の解除
FocusEventの作成(2)• FocusEventで用いるMethodを確認する
3
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状態が外れた時の処理を記述する}
}
FocusEventの作成(3)• FocusListenerのMethodに動作を記述する
4
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);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setSize(240, 300);
setResizable(false);
setTitle(title);
setVisible(true);
}
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() + " =>");
}
}
focusListenerの動作を確認して下さい
FocusEventの作成(4)• Component自体にFocusListenerをaddする記述もできる
5
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を利用して下さい
Exercise 3 and 4• 以下に示すGUIを作成して下さい
• 複数ページを持つ複雑なデザインなGUIなので、今までの演習や課題で学んだことを用いて作成して下さい
• 各ページの要件や注意点はこの後にページ毎に説明します
6
1ページ目の作成• 以下のデザインのユーザー登録画面の作成
• ユーザー名、パスワード、パスワードの再入力、Emailの入力を行うテキストフィールドを作成し、不正入力があった場合にメッセージを返すイベントを作成する
7
必要入力項目に*印をつけています該当する項目に入力がされているか確認するイベントを作成して下さい
Password項目の入力と同じ入力がされているか確認する
入力が正しいEmailの形式でされているか確認する・文字列の中に”@”が入っている・文字列の最後が”.com”である
最初のページなので、”< Prev”
ボタンを押せないようにする
以上のような確認を行い、問題がないと判断できたら２ページ目へ >>
次の画面へ 画面の終了
1ページ目の作成(2)• 不正な入力と判断できた場合、ユーザー側が確認できるイベントを作成する
• Passwordの再入力、Emailの入力が不正の場合、以下のような表示をする
• 正しい入力が完了していないのに”Next>”ボタンが押された際に、ユーザーにエラーを返すイベントを作成する
8
正しく入力がされていない
以上のような確認を行い、問題がないと判断できたら２ページ目へ >>
エラーダイアログを表示
Passwordの再入力、Emailの不正入力が確認できた時にユーザー確認用の表示をする
2ページ目の作成• ユーザー情報の入力をできる画面を以下のようなデザインで作成して下さい
9
画像のアップロードをする項目の作成
1ページ目と同じように、*印の入力必須項目に入力がされているか確認するイベントを作成
ユーザー入力を行うための左記のようなコンポーネントの追加を行って下さい
前の画面に戻る
必須項目の入力が完了していると判断できたら次のページへ入力未完了の場合は、前ページのようなエラーダイアログの出力をする
2ページ目の作成(2)• 各コンポーネントを以下のように設定して下さい
10
• コンボボックスのアイテムの対応
– 日にちのコンボボックスに、指定した月に対応したアイテムを設定して下さい
– 「Country」の項目に対応したアイテムを「City」「Company」項目に設定して下さい
– （設定するアイテムは自由に作成して下さい）
3ページ目の作成• JTableクラスを用いて追加情報を入力するフォームを作成する
11
テーブルに入力されたデータを追加する
追加ボタン
テーブルに追加されたデータを消去するボタン
上記のようにデータを追加入力されたデータをリセットするボタン
4ページ目の作成• 今まで入力した情報をテキストエリアに表示するページを作成して下さい
12
ユーザー登録情報
ユーザー詳細情報
追加情報
GUIデザイン設計のポイント• CardLayoutの使用
– それぞれのページのレイアウトの作成にはCardLayoutを使用して下さい
13
メインのフレーム コンポーネントを追加したそれぞれのページ
メインフレーム上のボタンなどは共通して利用できる
GUIデザイン設計のポイント• それぞれのページのクラスを作成 （これはやり方の一つであるため、この方法に従う必要はありません）
– 記述が長くなるため、Pageクラスを作成してそれを継承させたそれぞれのページを作る
14
// ひな型となるPageクラスの作成
import javax.swing.JPanel;
public class Page extends JPanel {
//ページの終了要件確認のフラグboolean finish;
public boolean isFinished(){
return finish;
}
public void displayInfo(String info){}
}
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 class Page1 extends Page {
public Page1() {
// ページのレイアウトを記述}
public boolean isFinished() {
// ページの終了要件を記述return finish;
}
}
GUIデザイン設計のポイント• ActionEventの扱い
– メインページと内部ページのActionEventの処理を分ける
15
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) {
// 内部ページ上のイベント処理を記述}
… …
}
GUIデザイン設計のポイント• コンポーネントのレイアウト
– 自由なレイアウトでデザインしたい場合はレイアウトマネージャを無効にしてコンポーネントを配置する方法がある
– 以前の講義で学んだ座標を指定する方法を利用することができる
16
.setBounds(10, 25, 125, 150)
.setBounds(35, 180, 75, 20)
.setBounds(155, 345, 350, 150)