プログラミング演習3

プログラミング演習3
第2回 GUIの復習
そもそもGUIとはなにか?
GUI(Graphic User Interface)とは、マウスなどの
デバイスとCGを用いて、人が直感的に機械を操
作できる環境のこと
↑プログラミング入門で扱った
プログラムのGUI
JavaによるGUIアプリケーション
JavaでGUIアプリケーションを作成するにはSwingというGUIコン
ポーネントを使うのが主流です
Swingでは、フレームというウィンドウを生成しそこにボタンやラ
ベルなどのコンポーネントを追加することでGUIを作っていきま
す
メニュー
ラベル
ボタン
スクロールバー
パネル
(図形の描画)
GUIコンポーネントの階層
javax.swingパッケージ中のSwingコンポーネント
は以下の3階層に分類される JMenuBar
トップレベルコンテナ(JFrame等)
メインウィンドウとなる土台の役割
中間コンテナ(JPanel等)
コンポーネント配置のためのコンテナの役割
コントロール(JLabel、JButton等)
JPanel
ボタンやラベルなどのGUIコンポーネント
JScrollPane
Swingではこれらの階層のコンポーネントを組み合
わせて作成する
4
フレームの作成
早速プログラミングをはじめましょう
フレームを作るには、import javax.swingをインポートして、JFrameを継承しな
ければなりません
コンポーネントの配置が終わっ
てからsetVisible(true)で表示
ラベルの表示
画像はJavaファイルと
同じ場所に置く
FlowLayout()は左上から順に配置するレイアウト
l0, l1, l2の順で追加
レイアウト
追加したコンポーネントを配置するためにFlowLayoutなどのレイ
アウトマネージャが用意されている
GridLayout(n,m):格子状に配置
縦に3つ、横に1つ
配置
BorderLayout:東西南北に配置
North,South,East,
West,Centerの
どれかを指定す
る
パネル
パネルをうまく使うと複雑な
レイアウトを設定できます
p1
フレームのレイアウト
各パネルにもレイアウト
の設定を行う
フレームに各パネルの追加
p2
イベント処理
フレームにコンポーネントを配置するだけでは、機能を持たない
↓
コンポーネントが何のイベントを受け取るのか指定することにより、GUIに機能を持た
せることができる
イベントを受け取った際の処理をリスナーと呼ばれるクラスに記述することにより、イ
ベントを処理する
Button object(s)
ActionEvent
ActionEvent
クリック!
ActionListener
イベント処理の例
イベントを発生させたいコンポーネントにリス
ナー(ボタンの場合はActionListener)を指定
この場合b1以外はリスナーが指定されていな
いので押しても何も起こらない
イベントを発生した時に行う処理を書く
ダイアログ
ユーザに対して緊急性のあ
るメッセージを表示する際に
ダイアログが使われます
クリック!
trueにするとダイアログを閉じない限り
プログラムを終了できない
図形の描画
Swingでは、図形を描画する際にpaintComponentメソッドをオー
バーライドし、始めに親クラスのメソッドを呼ぶ
JframeはJComponentの子クラスではないので通常はJPanelに
描画してJframeに追加する
class ClassA extends JComponent{
/*略*/
@Override
public void paintComponent(Graphics g) {
//これは必須
super.paintComponent(g);
/* 描画の処理 */
}
似た名前の
”paintComponents”という
メソッドとの混同に注意
図形の描画のサンプル
Jframe側のコード
JPanel側のコード
図形の再描画
再描画する場合はrepaintメソッドを呼び出す
ボタンを押すと○の位置が変わるプログラム
クリックの検知
クリックされたかどうかを検
出するにはMouseListenerを
使う。このアプリでは、フレー
ム上でクリックするとコン
ソールに文字が表示される
演習
ボタンを使ってユーザに4桁の番号を入力させ、パス
ワード(1111)とマッチしたかどうかを表示するダイアロ
グを表示するアプリを作ってみましょう
数字ボタンをクリックする
と上部に押した番号が表
示される
入力例
正しい場合
クリアを押すと押した
番号は消去される
決定を押すとパスと
入力した番号を比較
しダイアログを表示
異なる場合
Homework
1. クリックしたところの座標を取得しコンソール
に表示してみましょう
ヒント:getPointメソッドで座標を取得出来ます
Point p = e.getPoint();
int x = p.x;
int y = p.y;
座標情報を持つクラス
java.awt.Point
Homework
2.
1回目で作ったSmallCircleのdrawメソッドを呼び出し、”SmallCircleを<ク
リックした座標>に描画”とコンソール出力してみましょう
※パッケージ名は特に指定しない
3.
クリックしたところに1回目で作成したSmallCircleを描画してみましょう
ヒント:図形のdrawメソッドも書き
換える必要があります