ガイダンス

情報科学B

第10回 GUI

プログラムの1行目に以下を入れること

// vm12345 杉崎 えり子

今日やること

Windowsなどで見られるウィンドウを作

成して（GUIプログラム）、そこに実行結

果を表示させる

3

ウィンドウの作成

情報科学B 第10回 GUI

金型

4 情報科学B 第10回 GUI

ドーナツ型 ワッフル型

金型

小倉あん味

チョコレート味

クリーム味

金型は同じだけれど、出

来上がるものは様々

ウィンドウの作成

ウィンドウ型

バックグラウンドが

グレーのウィンドウ

ウィンドウ金型から様々な

色のウィンドウを作成する

バックグラウンドが

ピンクのウィンドウ

ウィンドウの作成

ウィンドウ型

ウィンドウ金型はJava

では

_JFrame

と言う型名

今回は1個のウィンドウ

を作成し、そのウィンドウ

の名前を

_myframe

とする

JFrame myframe = new JFrame();

クラス

8

ウィンドウの作成

main

情報科学B 第10回 GUI import javax.swing.*;

public class Example10_1{

public static void main(String[] args){ /* フレームを作成 */

JFrame myframe = new JFrame(); /* サイズを指定 */ myframe.setSize(400, 300); /* 終了処理を設定 */ myframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); /* 実際に表示する */ myframe.setVisible(true); } } 基本形のウィンドウ 作成と表示

実行結果

Mainをシンプルにしたい→メソッド化

Example10_1.java

public class Window extends JFrame{

コンストラクタ

public Window() {

}

メイン

public static void main(String[] args){

}

}

ウィンドウの作成

継承

①ウィンドウの作成

Window myframe = new Window();

メソッド化

10

ウィンドウの作成

継承

情報科学B 第10回 GUI import javax.swing.*;

public class Example10_2 extends JFrame{ //JFrameの拡張

public Example10_2(){ //コンストラクタ

setSize(400, 300);

setDefaultCloseOperation(EXIT_ON_CLOSE); setVisible(true); //実際に表示する

}

public static void main(String[] args){

Example10_2 myframe = new Example10_2();

//拡張されたフレームを作成 } } 基本形のウィンド ウ作成と表示

実行結果

Example10_2.java

11 情報科学B 第10回 GUI import javax.swing.*; フレームを作成するクラスJFrameはjavax.swingというパッケージの中にあるの で、import文を使って呼び出しておく。これを書くことにより、javas.swing.JFrame をJFrameと簡単に書くことが可能になる。

public class Example10_1 extends JFrame{

Example10_1をJframeを継承して作ったことを宣言 public Example10_1(){ プログラムの初期状態を設定するためのメソッド。メソッド名はクラス名と同じに すること（コンストラクタ） 。 myframe.setSize(400, 300); myframeの幅400px、高さ300pxを設定。

ウィンドウの作成

継承

12 情報科学B 第10回 GUI myframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 「X」ボタンを押すとアプリケーションを終了させる。 myframe.setVisible(true); myframeを表示させる

Example10_1 myframe = new Example10_1();

Mainの中でExample10_1クラスのオブジェクトを生成しmyframeに代入

13

ボタンの作成

14

ボタンの作成

情報科学B 第10回 GUI import javax.swing.*;

import java.awt.*; //BorderLayout()を使うために public class Example10_2 extends JFrame{

JLabel label; //labelをJLabelで宣言。Example10_2クラス内でlabel使用可

JButton button; //buttonをJbuttonで宣言。Example10_2クラス内でlabel使用可 public Example10_2(){

setSize(400, 300);

setDefaultCloseOperation(EXIT_ON_CLOSE);

label = new JLabel("clicks",JLabel.CENTER); //ラベルを作る button = new JButton("Click Me!"); //ボタンを作る

setLayout(new BorderLayout()); //レイアウトマネージャを指定 add(label, BorderLayout.CENTER); //ラベルを真ん中に配置 add(button, BorderLayout.SOUTH); //ボタンを下に配置 setVisible(true); //実際に表示する

}

public static void main(String[] args){

Example10_2 myframe = new Example10_2 (); } }

赤字が追加部分

Example10_2.java

に追記

15 情報科学B 第10回 GUI

import java.awt.*;

BorderLayoutを使用するために、import

label = new JLabel("clicks",JLabel.CENTER);

Jlabelクラスを使ってラベルオブジェクトを生成。””で囲まれる文字列を表示し、 Jlabel.CENTERで中央に表示

button = new JButton("Click Me!");

Jbuttonクラスを使ってボタンオブジェクトを生成。””で囲まれる文字列を中央に 表示する。 setLayout(new BorderLayout()); BorderLayoutはレイアウトマネージャで適当に配置してくれる。 add(label, BorderLayout.CENTER); ラベルを真ん中に配置。 add(button, BorderLayout.SOUTH); ボタンを下に配置。

実行結果

ボタンの作成

public class Button extends JFrame implements ActionListener {

コンストラクタ

public Button(){

addActionListener(this);

}

メイン

public static void main(String[] args){

}

イベント

public void actionPerformed(ActionEvent e) {

}

}

ボタンを押すイベント

② ボタンの作成

Button myframe = new Button(); ボタンクリック処理 を行うために、リス ナーインタフェース を実装 myframeオブジェクトを作成したらコン ストラクタ（Button）を実施する

17

ボタンを押すイベント

public class Example10_2 extends Jframe implements ActionListener { JLabel label; JButton button; int count = 0; public Example10_2(){ setSize(400, 300); setDefaultCloseOperation(EXIT_ON_CLOSE);

label = new JLabel("clicks",JLabel.CENTER); //ラベルを作る button = new JButton("Click Me!"); //ボタンを作る

setLayout(new BorderLayout()); //レイアウトマネージャを指定 add(label, BorderLayout.CENTER); //ラベルを真ん中に add(button, BorderLayout.SOUTH); //ボタンを下に配置 setVisible(true); //実際に表示する button.addActionListener(this); }

赤字が追加部分

Example10_2.javaに追記

18

ボタンを押すイベント

情報科学B 第10回 GUI //イベントがあったらここに来る

public void actionPerformed(ActionEvent e) { //イベントがbuttonで起こっていたら… if (e.getSource() == button) { count++; //countを増加 //ラベルの文字を換える。 label.setText(count + " clicks"); } } }

public static void main(String[] args){

Example10_2 myframe = new Example10_2 (); }

19 情報科学B 第10回 GUI

public class Example11_2 extends Jframe implements ActionListener import {

イベント処理のActionListenerの道具を使えるようにする

button.addActionListener(this);

ボタンにイベントの監視人をつける

public void actionPerformed(ActionEvent e) {

クリックを感知したらactionPerformedメソッドを実行。どんなイベントが起こったか はeというオブジェクトで知らせる。 if (e.getSource() == button) { イベントの発生がどこで起こったか調べbuttonかどうか。 label.setText(count + " clicks"); } かっこ内の数字と文字列を表示。

ボタンを押すイベント

実行結果

20

課題

ボタンを押すイベント

Kadai10_1.java

① クリックした回数表示（Example10_2.java）に加え、

あと何回クリック可能か（残数）を表示するようにし

なさい。クリックする前の残数は100とする。

今日は課題の提出はない。

21

課題

ボタンを押すイベント

Kadai10_2.java

② カウントアップするボタン、カウントダウンするボタ

ン、0にクリアするボタンを作成し作動するプログラ

ムを作りなさい。

22

課題

ボタンを押すイベント

Kadai10_3.java

③ 下図のように「今日の占い」を作成しなさい。結

果は、1～4の乱数を発生させ、対応したものを

表示させる。

乱数発生方法は次ページ参照

23

ヒント

※乱数の発生のさせ方（変数fortuneに1～4の乱数を代入する）

int fortune=new java.util.Random().nextInt(4); //0以上～4未満の乱数発 fortune++; //変数fortuneに1～4の乱数が格納される

乱数の発生方法

表示方法

Switch文を使ってfortuneの中身の1～4の値で判別させる