アジェンダ 1 グラフィカルなインタフェース GUI(Graphical User Interface) の基礎 2 Swing を利用する Swing の基礎知識 2

(1)

UML

によるソフトウェア設計

(2)

アジェンダ

1 – グラフィカルなインタフェース

GUI(Graphical User Interface) の基礎

2 – Swing を利用する

(3)

1. グラフィカルなインタフェース



ウィンドウの作成手順

1. ウィンドウ ( フレーム ) を作成する

2. ウィジェット ( ボタンなど ) を作成する

3. ウィジェットをウィンドウに組み込む

4. 作成したウィンドウのサイズを指定し表示する

GUI(Graphical User Interface)

の基礎

JFrame frame = new JFrame();

JButton button = new Button(“click me”); frame.getContentPane().add(button);

ウィジェットはウィンドウに直に組み込まず、「コンテンツペイン」

と呼ばれるオブジェクトに組み込む。ウィンドウは「窓枠」、ペイン

は「ガラス」のようなもの

(4)

1.1. 実際のソースコード

GUI(Graphical User Interface)

の基礎

import javax.swing.*;

public class SimpleGui1 {

public static void main(String[] args) { JFrame frame = new JFrame();

JButton button = new JButton(“click me”);

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.getContentPane().add(button); frame.setSize(300, 300); frame.setVisible(true); } } swing パッケージをインポートこのように書くと、ウィンドウを閉じると同時にプログラムが終了

(5)

1.2. イベント処理

GUI(Graphical User Interface)

の基礎

● “SimpleGui1” クラスは、ボタンをクリックしても

何も起きない

● 何か処理を行わせるには以下の 2 つが必要

1. ユーザがボタンをクリックした時に自動的に呼び出されるメ

ソッド

2. ユーザがボタンをクリックしたこと (

イベント

) を検知し、

メソッドを呼び出す手段

ボタンオブジェクト

プログラム

1.

「ユーザがクリックしたら　　伝えて欲しい」と指示

(6)

1.3. リスナインタフェース

● 前のページの「プログラム」とは、「

リスナインタフェー

ス

」と呼ばれるインタフェースを実装したもの

● イベントリスナ

( 上記実装 ) を作れば、

イベントソース

( ボタンなど ) からイベント ( オブジェクト ) を受け取るこ

とができる

GUI(Graphical User Interface)

の基礎

<< インタフェース >>

ActionListener

actionPerformed(ActionEvent ev) << インタフェース >>

ItemListener

itemStateChanged(ItemEvent ev) << インタフェース >>

KeyListener

keyPressed(KeyEvent ev) keyReleased(KeyEvent ev) keyTyped(KeyEvent ev)

(7)

1.4. リスナとソースのコミュニケーション

GUI(Graphical User Interface)

の基礎

イベントリスナ

イベントソース

button.addActionListener(this)

actionPerformed(the Event)

リスナのリストに追加して

ください。クリックされた

ら actionPerformed() メ

ソッドを呼んでください。

わかりました。リスナのリストに追加しま

す。クリックされたら actionPerformed()

メソッドを呼び出します。

(8)

1.5. ActionEvent の扱い

GUI(Graphical User Interface)

の基礎

1. ActionListener インタフェースを実装する

2. リスナをボタンに登録する（これで「イベントを

受け取りたい」という意志がイベントソースに伝

わる )

3. イベント処理のためのメソッド (ActionListener イ

ンタフェースを使う場合は actionPerformed() メ

ソッド ) を実装する

● テキスト 360 ページのソースコード参照

(9)

1.6. リスナ、ソース、イベント

GUI(Graphical User Interface)

の基礎

イベントオブジェクト

リスナは

イベントオブジェクトを

受け取る

ソースは

イベントオブジェクトを

送る

イベントオブジェクトは

イベントに関する情報を

保持する

(10)

1.7. 描画パネル

● 「

描画パネル

」とは、プログラマが自ら図形を

描いたりすることができるウィジェット

● JPanel クラスを継承して、 paintComponent() メ

ソッドをオーバライドする

import java.awt.*; import javax.swing.*;

public class MyDrawPanel extends JPanel { public void paintComponent(Graphics g) { Graphics2D g2d = (Graphics2D)g; g2d.setColor(Color.ORANGE); g2d.fillRect(20, 50, 100, 100); } }

Graphics2D クラスは

Graphics クラスの

サブクラス

GUI(Graphical User Interface)

の基礎

両方必要

(11)

1.8. イベントと図形の描画

1. 描画パネルとボタンの 2 つのウィジェット

を備えたフレームが画面に表示される。ボ

タンには、イベントリスナが登録され、ク

リックに対応できる状態になる。

2. ボタンをクリックすると、イベントオブジ

ェクトが自動で作成され、イベントリスナ

のメソッド ( イベントハンドラ ) が呼び出

される。

3. イベントハンドラがフレームオブジェクト

の repaint() メソッドを呼び出す。すると、

システムによって描画パネルオブジェクト

の paintComponent() メソッドが呼び出さ

れる。

4. paintComponent() メソッドによって円の色

GUI(Graphical User Interface)

の基礎

(12)

1.9. 実際のソースコード

GUI(Graphical User Interface)

の基礎



テキスト 371 ページ参照

● 参考：フレームのレイアウト

center

north

west

east

south

frame.getContentPane().add(drawPanel); frame.getContentPane().add(BorderLayout.CENTER, drawPanel);

このように書くとデフォルトで” center” に

描画パネルが配置されるが・・・

通常は、このように配置する領域を指定する

(13)

1.10. ボタンを 2 つにする

GUI(Graphical User Interface)

の基礎

● 扱うイベントが 2 つになる

ラベル

円の色を変化させるボタン

ラベルを変更する

ボタン

(14)

1.11. 複数のイベント扱う方法

GUI(Graphical User Interface)

の基礎

1. actionPerformed() メソッドを 2 つ作る

このようなコードは実際に書けない

2. 2 つのボタンに同じリスナを登録する

正しく動作するが、「オブジェクト指向的」ではない

3. イベントリスナを 2 つ作る ( 別クラスとして）

リスナオブジェクトは、 frame や label といった変数に

アクセスできない

「 3. 」はいいアイディアだが、インスタンス変数に

アクセスするのが大変、何かよい方法は・・・

(15)

1.12. 内部クラス

● 「

内部クラス

」とはクラスの中に作られたクラス

● 内部クラスで外部クラスの変数を利用する

class MyOuterClass { class MyInnerClass { ... } } class MyOuterClass { private int x; class MyInnerClass { void go() { x = 42; } }

変数 x は内部クラス

の変数と同じように

使用できる

GUI(Graphical User Interface)

の基礎

内部クラスでは、外部クラ

スの変数やメソッドを利用

する際、たとえ private 宣言

されていても自らのものと

同様に利用できる

(16)

1.13. 内部クラスと外部クラスの関係

GUI(Graphical User Interface)

の基礎

1. 外部クラスのオブジェクト

を作成する

2. 既に作成した外部オブジェクト

を使って内部オブジェクトを

作成する

3. これにより、外部オブジェクト

と内部オブジェクトは緊密に

結びつく

MyOuter オブジェクト

String s

int x

MyInner オブジェクト

MyOuter オブジェクト

(17)

1.14. 修正されたプログラム

GUI(Graphical User Interface)

の基礎



テキスト 379 ページ参照

2 つのリスナクラス

外部クラス

内部クラス

円の色を変化させる

ためのリスナクラス

ラベルを変更する

ためのリスナクラス

TwoButtons

(18)

2. Swing を利用する

Swing

の基礎知識



Swing コンポーネント

● 「

コンポーネント

」とは「ウィジェット」とほぼ

同義語

● コンポーネントの多くが javax.swing.JComponent

を継承するオブジェクト

インタラクティブな

コンポーネント

JButton

JCehckBox

JTextField

他のコンポーネントの「容れ物」

となるコンポーネント

(

バックグラウンドコンポーネント

)

JFrame

_JPanel

(19)

2.1. レイアウトマネージャ

● 「

レイアウトマネージャ

」は、あるコンポーネン

トに他のコンポーネントが組み込まれる際、その

サイズや配置などを決定するオブジェクト

Swing

の基礎知識

ボタン 1

ボタン 2

ボタン 3

パネル B

パネル A

パネル B のレイ

アウトマネー

ジャは 3 つのボ

タンのサイズと

配置を決める

パネル A のレイ

アウトマネー

ジャはパネル B

のサイズと配置

を決める (3 つの

ボタンには一切

関知しない )

(20)

2.2. レイアウトの手順

1. パネルが作成され、ボタンが組み込まれる

2. パネルのレイアウトマネージャが、サイズに関す

るボタン側の要望を確認する

3. パネルのレイアウトマネージャが、自らのレイア

ウトルールに基づき、ボタン側の要望をどの程度

受け入れるかを決定する

4. パネルがフレームに組み込まれる

5. フレームのレイアウトマネージャが、サイズに関

するパネル側の要望を確認する。

6. フレームのレイアウトマネージャが、自らのレイ

アウトルールに基づき、パネル側の要望をどの程

Swing

の基礎知識

(21)

2.3. レイアウトマネージャの種類

● BorderLayout

バックグラウンドコンポーネントを 5 つの領域に

分割するレイアウトマネージャ。各領域に組み込

めるコンポーネントは 1 つ。フレームのデフォル

トレイアウトマネージャ。

● FlowLayout

コンポーネントは組み込まれた順に左から右に並

べられる。右端に到達すると自動的に改行される。

パネルのデフォルトレイアウトマネージャ。

● BoxLayout

FlowLayout と似ているが、コンポーネントを縦あ

るいは横に並べることができる ( 意図的に改行が

できる ) 。

Swing

の基礎知識

※ 上記以外にもいくつかレイアウトマネージャがある

(22)

2.4. さまざまな Swing コンポーネント

● JTextField

● JTextArea

● JCheckBox

● JList

Swing

の基礎知識

(23)

2.5. JTextField

JTextField field = new JTextField(20); // 20 文字分の長さ指定 JTextField field = new JTextField(“Your name”);

Swing

の基礎知識

● コンストラクタ

● API の例

①field.getText(); // テキストの抽出 ②field.setText(“text”); // テキストの入力 ③field.addActionListener(myActionListener); // Enter キーを押したイベントを処理するリスナの登録 ④field.selectAll(); // テキストを選択 ( ハイライト表示 ) ⑤field.requestFocus(); // フォーカスをあてる

(24)

2.6. JTextArea

Swing

の基礎知識

JTextArea text = new JTextArea(10, 20); // 10 行 20 文字分の領域を指定

● コンストラクタ

● API の例

①JScrollPane scroller = new JScrollPane(text);

②scroller.setVerticalScrollBarPolicy( ② ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS); ②scroller.setHorizontalScrollBarPolicy( ② ScrollPaneConstants.HORIZONTAL_SCROLLBAR_ALWAYS); ②panel.add(scroller); // 縦のスクロールバーのみを持つテキストエリアを作成 ②text.setText(“text”); // テキストの変更 ③text.append(“text2”); // テキストの追加 ④text.selectAll(); // テキストを選択 ( ハイライト表示 )

(25)

2.7. JCheckBox

Swing

の基礎知識

JCheckBox check = new JCheckBox(“CheckBox”);

● コンストラクタ

● API の例

①check.addItemListener(this);

// チェックが ON/OFF されたイベントを処理するリスナの登録

②public void itemStateChanged(ItemEvent ev) {

② String onOrOff = “off”;

② if (check.isSelected()) onOrOff = “on”;

② System.out.println(“CheckBox is “ + onOrOff); ②} // イベントを処理する

③check.setSelected(true); // チェックを ON にする

(26)

2.8. JList

Swing

の基礎知識

String[] listEntries = {“alpha”, “beta”, “gamma”, “delta”}; JList list = new JList(listEntries);

● コンストラクタ

● API の例

①JScrollPane scroller = new JScrollPane(list);

②scroller.setVerticalScrollBarPolicy( ② ScrollPaneConstants.VERTICAL_SCROLLBAR_ALWAYS); ②scroller.setHorizontalScrollBarPolicy( ② ScrollPaneConstants.HORIZONTAL_SCROLLBAR_ALWAYS); ②panel.add(scroller); // 縦のスクロールバーのみを持つリストを作成 ②list.setVisibleRowCount(3); // 表示行の指定 ③list.addListSelectionListener(this); // リストが選択されたイベントを処理するリスナの登録

④public void valueChanged(ListSelectionEvent lev) {

④ if (!lev.getValueIsAjusting()) {

④ String selection = (String)list.getSelectedValue(); ④ System.out.println(selection);