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

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

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

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

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

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

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

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

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

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

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

図形の描画 図形の描画はJPanelクラスを継承し、paintComponentメソッドをオーバーライドする 始めにsuper.paintComponentメソッドを呼び、その後ろに描画処理を書く このコンポーネントをJFrame内に描画領域としてレイアウトする class ClassA extends JPanel{ /*略*/ @Override public void paintComponent(Graphics g) { //これは必須 super.paintComponent(g); /* 描画の処理 */ } class ClassB extends JFrame{ ClassA gp; public ClassB() { //レイアウトの設定 gp = new ClassA(); add(gp); /*略*/ }

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

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

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

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

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

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