プログラミング演習３ 第２回　GUIの復習.

Presentation on theme: "プログラミング演習３ 第２回　GUIの復習."— Presentation transcript:

1 プログラミング演習３ 第２回　GUIの復習

2 そもそもGUIとはなにか？ GUI(Graphic User Interface)とは、マウスなどのデバイスとCGを用いて、人が直感的に機械を操作できる環境のこと ↑プログラミング入門で扱った 　 プログラムのGUI

3 JavaによるGUIアプリケーション JavaでGUIアプリケーションを作成するにはSwingというGUIコンポーネントを使うのが主流です Swingでは、フレームというウィンドウを生成しそこにボタンやラベルなどのコンポーネントを追加することでGUIを作っていきます メニュー ラベル パネル ボタン スクロールバー (図形の描画)

4 GUIコンポーネントの階層 javax.swingパッケージ中のSwingコンポーネントは以下の３階層に分類される
トップレベルコンテナ（JFrame等） 　　メインウィンドウとなる土台の役割 Swingではこれらの階層のコンポーネントを組み合わせて作成する JMenuBar 中間コンテナ（JPanel等） 　　コンポーネント配置のためのコンテナの役割 コントロール（JLabel、JButton等） 　　　　ボタンやラベルなどのGUIコンポーネント JPanel JScrollPane

5 コンポーネントの配置が終わってからsetVisible(true)で表示
フレームの作成 早速プログラミングをはじめましょう フレームを作るには、import javax.swingをインポートして、JFrameを継承しなければなりません コンポーネントの配置が終わってからsetVisible(true)で表示

6 ラベルの表示 FlowLayout（）は左上から順に配置するレイアウト l0, l1, l2の順で追加 画像はJavaファイルと
同じ場所に置く FlowLayout（）は左上から順に配置するレイアウト l0, l1, l2の順で追加

7 レイアウト 追加したコンポーネントを配置するためにFlowLayoutなどのレイアウトマネージャが用意されている
GridLayout(n,m)：格子状に配置 BorderLayout：東西南北に配置 縦に３つ、横に１つ配置 North,South,East,West,Centerの どれかを指定する

8 パネル パネルをうまく使うと複雑なレイアウトを設定できます p1 p2 フレームのレイアウト 各パネルにもレイアウトの設定を行う
フレームに各パネルの追加

9 フレームにコンポーネントを配置するだけでは、機能を持たない
イベント処理 フレームにコンポーネントを配置するだけでは、機能を持たない ↓ コンポーネントが何のイベントを受け取るのか指定することにより、GUIに機能を持たせることができる イベントを受け取った際の処理をリスナーと呼ばれるクラスに記述することにより、イベントを処理する Button object(s) ActionEvent ActionListener ActionEvent クリック！

10 イベント処理の例 イベントを発生した時に行う処理を書く
イベントを発生させたいコンポーネントにリスナー(ボタンの場合はActionListener)を指定 この場合b1以外はリスナーが指定されていないので押しても何も起こらない イベントを発生した時に行う処理を書く

11 ダイアログ ユーザに対して緊急性のあるメッセージを表示する際にダイアログが使われます クリック！
trueにするとダイアログを閉じない限りプログラムを終了できない

12 図形の描画 Swingでは、図形を描画する際にpaintComponentメソッドをオーバーライドし、始めに親クラスのメソッドを呼ぶ
JframeはJComponentの子クラスではないので通常はJPanelに描画してJframeに追加する class ClassA extends JComponent{ /*略*/ @Override public void paintComponent(Graphics g) { //これは必須 super.paintComponent(g); /* 描画の処理 */ } 似た名前の ”paintComponents”というメソッドとの混同に注意

13 図形の描画のサンプル Jframe側のコード JPanel側のコード

14 図形の再描画 再描画する場合はrepaintメソッドを呼び出す ボタンを押すと○の位置が変わるプログラム

15 クリックの検知 クリックされたかどうかを検出するにはMouseListenerを使う。このアプリでは、フレーム上でクリックするとコンソールに文字が表示される

16 決定を押すとパスと入力した番号を比較しダイアログを表示
演習 ボタンを使ってユーザに４桁の番号を入力させ、パスワード(1111)とマッチしたかどうかを表示するダイアログを表示するアプリを作ってみましょう 数字ボタンをクリックすると上部に押した番号が表示される 入力例 正しい場合 異なる場合 クリアを押すと押した番号は消去される 決定を押すとパスと入力した番号を比較しダイアログを表示

17 Homework クリックしたところの座標を取得しコンソールに表示してみましょう 座標情報を持つクラス java.awt.Point
　　　　　ヒント：getPointメソッドで座標を取得出来ます Point p = e.getPoint(); int x = p.x; int y = p.y; 座標情報を持つクラス java.awt.Point

18 Homework １回目で作ったSmallCircleのdrawメソッドを呼び出し、”SmallCircleを<クリックした座標>に描画”とコンソール出力してみましょう クリックしたところに１回目で作成したSmallCircleを描画してみましょう ※パッケージ名は特に指定しない ヒント：図形のdrawメソッドも書き換える必要があります