Graphics and Image Manipulations

GUIコンポーネントの設定と配置
Creation and positioning of GUI components
• java.awt 継承階層 Inheritance hierarchy
• コンポーネント Component
• コンポーネントレイアウト Layout
• パネル Panel
• フレーム Frame
java.awt継承階層
(abstract window toolkit) Hierarchy Component例
TextField
java.lang.Object
TextComponent
java.lang.Object
|
+--java.awt.Component
CheckboxGroup
TextArea
Button
|
+--java.awt.Label
Component
Label
Container
Panel
List
Window
Java.applet.Applet
FlowLayout
Frame
BorderLayout
Choice
GridLayout
三種類のレイアウト
Checkbox
GUI Components
次に説明します
コンポーネント：ラベル
Label
ラベル：編集不能なテキストを表示する部品。
読み出し専用テキストを一行だけ表示する。
コンストラクタとメソッド
public Label()
public Label(String s)
public Label(String s, int alignment)
public String getText()
public void setText(String s)
public void setAlignment(int alignment)
使い方
例のソース
private Label label;
label = new Label();
label.setText(“Label demo”);
//label = new Label(“Label demo”);
label.setAlignment(Label.CENTER);
//label = new Label(“Label demo”, Label.CENTER);
add(label);
String s は
ラベルのテキスト
int alignment は表示位
置：
Label.LEFT
Label.CENTER
Label.RIGHT
……
g.drawString(“text is: ” + label.getText(), 20, 30);
Containerから継承したadd()メソッドを
使って（add(label); ）、labelをアプレット
に追加します。
コンポーネント：テキストフィールド
TextField
テキストフィールド：キーボードからテキストを入力できる部品。
ユーザがテキストフィールドにデータを入力して
Enterキーを押すと、アクションイベントが生成されます。
コンストラクタとメソッド
使い方
例のソース
private TextField password;
public TextField()
public TextField(int columns)
public TextField(String s)
public TextField(String s, int columns)
public void setEditable(boolean b)
public void setEchoChar(Char c)
password = new TextField(“secrete”, 20);
password.setEchoChar(‘*’); //マスク文字
password.setEditable(false); //編集不可
//password.setEditable(true); 編集可
add(password);
……
true: 編集可能
false: 編集不能
String s は
表示するテキスト
int columns は
列数（長さ）
マスク文字は
パスワードを入力する時
に利用すると便利
Containerから継承したadd()メソッドを
使って（add(password); ）、password
テキストフィールドをアプレットに追加し
ます。
ボタン：押しボタン、選択ボタン
Button, Choice, Checkbox
ボタンはクリックして特定のアクションを選択するためのGUIコンポーネントです。
Javaでは、押しボタン、選択ボタン、チェックボックスの３種類がつかえます。
コンストラクタとメソッド
使い方
例のソース
private Button button;
public Button(String s)
button = new Button("addition");
public Choice()
// button.addActionListener(this);
public String getItem(int index)
public synchronized void add(String s)
public synchronized String getSelectedItem()
public int getSelectedIndex()
public synchronized void insert(String s, int index)
public synchronized void remove(String s)
指定インデック
スに新しい項
目を追加する
指定した項目を
選択ボタンに追
加する
add(button);
private Choice choice;
choice = new Choice();
choice.add("English");
choice.add(“日本語”);
//choice.addItemListener(this);
add(choice);
choice.insert(“中国語”, 1);
ボタン：チェックボックス、ラジオボタン
Checkbox, Checkbox + CheckboxGroup
チェックボックスとラジオボタンはクラスCheckboxから作ります。
Demo
使い方
ソース
コンストラクタとメソッド
public Checkbox(String s)
private Checkbox fontBold;
fontBold = new Checkbox("Bold");
public CheckboxGroup()
//CheckboxGroupオブジェクトを生成する
//fontBold.addItemListener(this);
add(fontBold);
public Checkbox(
String s,
//ラジオボタンのラベル
CheckboxGroup c,
boolean state)
//ラジオボタンの状態
指定されたラベルと状態を持ちラジ
オボタンを一つ生成して、既存の
CheckboxGroup cに追加する
private Checkbox fontcolor;
private CheckboxGroup fontcolor;
fontcolor = new CheckboxGroup();
colorRed = new Checkbox("red", fontcolor, true);
//colorRed.addItemListener(this);
add(colorRed);
1組のラジオボタンは、１個のCheckboxGroupオブ
ジェクトおよび複数個のCheckboxオブジェクトから構
成されますが、同時には１個ボタンしか選べません。
……
コンポーネント：選択リスト
List
リスト：選択項目のリストの中から１項目をクルックして選べる部品。
１項目しか選択できないものを単一選択リスト、複数の項目
を同時に選択できるものを多重選択リストと呼びます。
Demo
ソース
使い方
コンストラクタとメソッド
private List colorlist;
public List(int item, boolean b)
colorlist = new List(3, false); //単一選択リスト
public String getItem(int index)
public synchronized void add(String s)
public synchronized String getSelectedItem()
public int getSelectedIndex()
public synchronized void remove(String s)
//true 多重選択リスト
//colorlist.addActionListener(this);
//colorlist.addItemListener(this);
colorlist.add("red");
colorlist.add("green");
ComponentクラスにはChoiceやList
で共通に使えるメソッドがいくつか
定義されています。
colorlist.add("blue");
指定した項目を
選択リストに追
加する
add(colorlist);
colorlist.remove(“green”);
選択リストから
指定した項目
を削除する
コンポーネント：テキストエリア
TextArea
TextArea：複数行のテキストを操作（入力、編集、表示）
することができます。
コンストラクタとメソッド
使い方
ソース
public TextArea()
public TextArea(int rows, int columns)
public TextArea(String s)
public TextArea(String s, int rows, int
columns)
public TextArea(
String s, int rows, int columns, int scrollbar)
private TextArea area;
public void setEditable(boolean b)
add(area);
TextFieldと違う：
TextFieldは一行のテキスト
（データ）を操作しますが、
TextAreaは複数行のテキス
トを操作します。
この二行は以下の一行
Demo
area = new TextArea("Hello!", 10, 40);
//area = new TextArea(10, 40);
//area.setText(“Hello!”);
//area.addTextListener(this);
area.setEditable(false);
false – 編集不可
true – 編集可
area.append("This is a demo." +"\n");
area = new TextArea(“Hello!”, 10,
40);と同じです。
指定したテキストを
テキストエリアに追
加します
“\n” は改行です
レイアウトマネージャ
Layout Manager
FlowLayout
ソース Demo
GUIコンポーネントが」コンテナに追加された順
に左から右に配置します
setLayout(new
FlowLayout(FlowLayou.RIGHT));
add(label);
public FlowLayout()
……
public FlowLayout(int p)
add(area);
public FlowLayout( int p, int h, int v)
BorderLayout
ソース
setLayout(new BorderLayout(5,5));
Demo
コンポーネントを５つの区域（N,S,E,W,C）に分け
て配置します。
add(colorlist, BorderLayout.NORTH);
public BorderLayout(int h, int v)
ソース
add(textField, BorderLayout.CENTER);
add(button, BorderLayout.EAST);
public BorderLayout()
GridLayout
add(label, BorderLayout.WEST);
add(area, BorderLayout.SOUTH);
Demo
格子（行と列）に沿ってコンポーネントを配置し
ます。
public GridLayout()
public GridLayout(int r, int c, int h, int v)
setLayout(new GridLayout(3,4,2,2));
add(button);
……
add(area);
パネル
Panel
必要性：ために、FlowLauout()とかBorderLayout()とか
GridLayout()とかどれだけでも、各コンポーネントを正確な位
置に配置することが難しいから、異なる復数のパネルを使う。
Container クラス=> Panelクラス => Appletクラス
Panel（オブジェクト）を利用し
てコンポーネントをより複雑
にはいちすることができます。
private Panel panel1,panel2;
panel1 = new Panel();
panel1.setLayout(new BorderLayout(5, 5));
……
public Panel()
panel1.add(button, BorderLayout.NORTH);
……
panel2 = new Panel();
ソース
Demo
panel2.setLayout(new GridLayout(1, 5, 2, 2));
……
panel2.add(colorlist);
……
フレーム
Frame
Frame: タイトルバーと境界領域を持ったウィンドウで、
ユーザがリサイズすることができます。
Container クラス=> Windowクラス => Frameクラス
フレームのデフォルトレイア
ウトマネージャは
BorderLayoutです。
private Frame myFrame;
フレームのタ
イトル
…….
myFrame = new Frame("New Frame");
myFrame.setSize(300,100);
public Frame(String s)
ソース
Demo
myFrame.setVisible(true);
フレームの
サイズ
…….
フレームを
表示する
課題
• 1. 電卓のGUIを作成せよ。 ex1
• 2. 印刷機のGUIを作成せよ。 ex2
Note: 作成したGUIには機能を持たせる必要はない。

Download Report