ガイダンス

(1)

情報科学B

第10回 GUI

1 情報科学B 第10回 GUI 情報科学B Info2/3・・・ Example10_1.java info10 ←今日のフォルダー作成

プログラムの1行目に以下のように自分の入れること

// vm12345 杉崎えり子

(2)

今日やること

2 情報科学B 第10回 GUI

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

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

果を表示させる

(3)

3

ウィンドウの作成

情報科学B 第10回 GUI

(4)

金型

ドーナツ型ワッフル型

(5)

金型

5 情報科学B 第10回 GUI たい焼き型

小倉あん味

チョコレート味

クリーム味

金型は同じだけれど、出

来上がるものは様々

(6)

ウィンドウの作成

ウィンドウ型

バックグラウンドが

グレーのウィンドウ

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

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

バックグラウンドが

ピンクのウィンドウ

(7)

ウィンドウの作成

ウィンドウ型

ウィンドウ金型はJava

では

_JFrame

と言う型名

今回は1個のウィンドウ

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

の名前を

_myframe

とする

JFrame myframe = new JFrame();

クラス

オブジェクト（インスタンス）

型（クラス名）変数＝ new クラス名();

クラス（型）からオブジェクト（もの）を作る

(8)

8

ウィンドウの作成

main

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); } } 基本形のウィンドウ作成と表示

実行結果

Example11_2.java コピーして実施

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

Main myframe JFrame

Example10_1.java

他のパッケージ内のクラスや他のパッケージ内のクラスやインターフェイスを参照するために利用を参照するために利用 import パッケージ名 . (ドット)クラス名； ↑myframe

(9)

9 情報科学B 第10回 GUI import javax.swing.*; フレームを作成するクラスJFrameはjavax.swingというパッケージの中にあるので、import文を使って呼び出しておく。これを書くことにより、javas.swing.JFrame をJFrameと簡単に書くことが可能になる。 myframe.setSize(400, 300); myframeの幅400px、高さ300pxを設定。 myframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 「X」ボタンを押すとアプリケーションを終了させる。 myframe.setVisible(true); myframeを表示させる

ウィンドウの作成

継承

(10)

10

ウィンドウの作成

main

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); } } 基本形のウィンドウ作成と表示

実行結果

Example11_2.java コピーして実施

↑この部分をメソッド化

Main myframe JFrame

Example10_1.java

(11)

public class Window extends JFrame{

//コンストラクタ

public Window() {

}

//メイン

public static void main(String[] args){

}

パネル作成メイン

ウィンドウの作成

継承

①ウィンドウの作成

Window myframe = new Window();

メソッド化

JFrameクラスを継承してWindowクラスを作成（Jframeクラスの機能を追加するため） Windowクラスからmyframeオブジェクトを作成したらコンストラクタ（Window）を実施する JFrameクラスを拡張して Windowクラスを作成

(12)

12

ウィンドウの作成

継承

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();

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

実行結果

Example11_2.java Ex10_2 JFrame main

Example10_2.java

Ex10_2クラスから myframeオブジェクトを作成したらコンストラクタ（Ex10_2）を実施する

(13)

13 情報科学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を設定。

ウィンドウの作成

継承

(14)

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

Example10_1 myframe = new Example10_1();

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

(15)

15

ボタンの作成

情報科学B 第10回 GUI 追記して実施文字列を表示するために JLabelクラス（型）を用いて labelオブジェクトを作成ボタンを作成するために JButtonクラス（型）を用いてオブジェクトを作成

(16)

16

ボタンの作成

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); //実際に表示する }

Example10_2 myframe = new Example10_2 (); } }

赤字が追加部分

追記して実施 Ex10_2 label button JFrame main JLabel JButton

Example10_2.java

に追記

テキストの水平方向配置位置 GUI部品の配置位置

(17)

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); ボタンを下に配置。

実行結果

ボタンの作成

(18)

18

ボタンを押すイベント

情報科学B 第10回 GUI クリックされると数字がカウントアップするクリックする

(19)

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）を実施するクリックされたときの処理ボタンにイベントの監視人をつけるアクションイベントが発生すると actionPerformedが呼び出される ActionEvent オブジェクトを e という変数で使う

(20)

20

ボタンを押すイベント

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

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に追記

(21)

21

ボタンを押すイベント

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

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

Example10_2 myframe = new Example10_2 (); }

(22)

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"); } かっこ内の数字と文字列を表示。

ボタンを押すイベント

実行結果

(23)

23

課題

ボタンを押すイベント

Kadai10_1.java

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

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

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

・・・・

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

BorderLayout.NORTH BorderLayout.SOUTH

(24)

24

課題

ボタンを押すイベント

Kadai10_2.java

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

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

ムを作りなさい。

・・・・ BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.EAST

(25)

25

課題

ボタンを押すイベント

Kadai10_3.java

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

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

表示させる。

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

1のとき大吉 2のとき中吉 3のとき吉 4のとき凶

(26)

26

ヒント

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

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

乱数の発生方法

表示方法

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

ガイダンス

情報科学B

第10回 GUI

プログラムの1行目に以下のように自分の入れること

// vm12345 杉崎 えり子

今日やること

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

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

果を表示させる

ウィンドウの作成

金型

金型

小倉あん味

チョコレート味

クリーム味

金型は同じだけれど、出

来上がるものは様々

ウィンドウの作成

ウィンドウ型

バックグラウンドが

グレーのウィンドウ

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

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

バックグラウンドが

ピンクのウィンドウ

ウィンドウの作成

ウィンドウ型

ウィンドウ金型はJava

では

JFrame

と言う型名

今回は1個のウィンドウ

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

の名前を

myframe

とする

JFrame myframe = new JFrame();

クラス

オブジェクト（インスタンス）

クラス（型）からオブジェクト（もの）を作る

ウィンドウの作成

main

実行結果

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

Example10_1.java

ウィンドウの作成

継承

ウィンドウの作成

main

実行結果

↑この部分をメソッド化

Example10_1.java

public class Window extends JFrame{

//コンストラクタ

public Window() {

}

//メイン

public static void main(String[] args){

}

}

ウィンドウの作成

継承

①ウィンドウの作成

メソッド化

ウィンドウの作成

継承

実行結果

Example10_2.java

ウィンドウの作成

継承

ボタンの作成

ボタンの作成

赤字が追加部分

Example10_2.java

に追記

実行結果

ボタンの作成

ボタンを押すイベント

public class Button extends JFrame implements ActionListener {

コンストラクタ

// vm12345 杉崎えり子

_JFrame

_myframe