-1 -

GUI プログラミング 第 1 演習 HelloWorld ※GUI：Graphical User Interface Java の特徴 １．マルチプラットフォーム ２．オブジェクト指向 ３．ガベージコレクション ４．パッケージシステム Java 開発環境「Eclipse」の設定 １．Eclipse の実行

・共有フォルダから eclipse.zip をコピーして自分の PC の D ドライブへ貼り付け ・D:¥eclipse.zip を右クリック→ここに解凍 ・D:¥eclipse¥eclipse.exe をダブルクリックして起動

２．workspace を「D:¥workspace」に設定して OK

３．最初のタブは閉じる

-2 -

４．jdk の確認 ウィンドウ→設定→Java→インストール済みの JRE jdk1.6.xx が入っていれば OK

入っていなければ、追加ボタン→次へ→Java ホームのディレクトリを指定→完了 (※下記の JRE ホームディレクトリは例です。指示に従ってください。)

-3 -

５．java ファイルの文字コードを UTF-8 にする ウィンドウ→設定→一般→コンテンツ・タイプ テキスト→Java ソースファイルで、デフォルト・エンコードに UTF-8 と入力→更新

６．行番号の表示 ウィンドウ→設定→一般→エディタ→テキストエディタを選択 右側の設定項目の中で、「行番号の表示」にチェックをいれて OK

-4 -

HelloWorldSample まずは、クラスの理解のためコマンドラインのサンプルを作成し、実行してみる。 １．プロジェクトを新規作成

パッケージ・エクスプローラで右クリック→Java プロジェクト プロジェクト名 HelloWorld、JRE は「デフォルト JRE の使用」を選ぶ

２．パッケージの作成 src フォルダを選択→右クリック→新規→パッケージ パッケージ名 helloworld

３．クラスを作る helloworld パッケージを右クリック→新規→クラス １．Messenger クラス（メッセージを管理するクラス、Messenger.java を参照）

メンバー：String message メソッド：get メッセージ、set メッセージ、say メッセージ ２種類のコンストラクタ

２．HelloWorldSample クラス（HelloWorldSample.java を参照） 実行するための main メソッドをもつ。 java の実行メソッドは必ず public static void main(String[] args)

４．実行する 実行ボタンをクリックしてコンソールへの出力を確認 出力結果：Hello World!

this is messenger2. (setMessageメソッドを使用)

this is messenger3. (コンストラクタその２を使用)

Hello World!

Messenger.java

-5 -

package helloworld; 1 2 public class Messenger { 3 4 private String message; 5 public static final String HELLO_WORLD = "Hello World!"; 6 7 /** 8 * コンストラクタその１ 9 */ 10 public Messenger() { 11 message = HELLO_WORLD; 12 } 13 14 /** 15 * コンストラクタその２<br> 16 * メッセージを指定する 17 * @param message 18 */ 19 public Messenger(String message) { 20 this.message = message; 21 } 22 23 /** 24 * messageの getter 25 * @return 26 */ 27 public String getMessage() { 28 return message; 29 } 30 31 /** 32 * messageの setter 33 * @param message 34 */ 35 public void setMessage(String message) { 36 this.message = message; 37 } 38 39 /** 40 * メッセージを標準出力 41 */ 42 public void sayMessage() { 43 System.out.println(message); 44 } 45 46 }47

HelloWorldSample.java

-6 -

package helloworld; 1 2 public class HelloWorldSample { 3 4 public static void main(String[] args) { 5 6 Messenger messenger1 = new Messenger(); 7 8 Messenger messenger2 = new Messenger(); 9 messenger2.setMessage("this is messenger2. (setMessageメソッドを使用)"); 10 11 Messenger messenger3 = new Messenger("this is messenger3. (コンストラクタその２を使用)"); 12 13 // メッセージを出力 14 messenger1.sayMessage(); 15 messenger2.sayMessage(); 16 messenger3.sayMessage(); 17 System.out.println(Messenger.HELLO_WORLD); // 定数へのアクセス 18 } 19 20 }21

-7 -

GUI 版 HelloWorld サンプル 本講義では、Eclipse に Jigloo GUI Builder というプラグインを適用して Swing プログラムを作成す

る。

※Swing：Java による GUI の構築用ツールの一つ。ほかに、AWT, SWT などがある。Swing は Java

プログラム上で描画される軽量コンポーネントで、Pure Java（全て Java）である。近年見

た目や速度に改善がすすんでいる。 AWT…Swing より古い、重量コンポーネント（描画処理が OS に依存する） SWT…Eclipse を開発するために作られた。一部 C や C++で書かれている。

１．フレームを作成

helloworld パッケージを選択→右クリック→新規→その他を選択 GUI Forms→Swing→JFrame を選んで「次へ」 Class Name は HelloWorldFrame として「完了」

２．Jigloo のメッセージが出てきたら「OK」 ３．Look&Feel（プログラムの見た目）を設定

フレームを選択→右クリック→Set Look&Feel→Windows または Metal を選択 ４．レイアウトを設定

フレームを選択→右クリック→Set Layout→Absolute layout を選択（オブジェクトを座標で指定） ５．"Hello World!" の文字列を表示するラベルの作成

上部メニューComponents から Label を選び、フレーム内に貼り付ける 名前：messageLabel テキスト：適当な文字列（GUI で見たときに消えてしまわないため。後で書き換えるのでなんでも

よい。） フォント：GUI Properties タブの Properties→Basic→font でフォントサイズを 26 にしておく ラベルの大きさ：十分大きくしておく（特に右側）

６．ボタンを２つ作成 jButton1 のテキストは「変更」、jButton2 のテキストは「元に戻す」とする

７．ボタンを押したときに実行されるメソッドのひな形を作成 ボタンを選択し、右下の Event Name のリスト中の ActionListner を開いて actionPerformed を inline に設定する。２つのボタンの両方に行っておく。

-8 -

８．Source 編集ウィンドウでソースを編集する ・Messenger messenger1,messenger2 を宣言 ・messageLabel のテキストを設定 ・Button の actionperformed メソッドの記述

public class HelloWorldFrame extends javax.swing.JFrame {

private Messenger messenger, messenger2;

・・・・ public HelloWorldFrame() {

super();

messenger = new Messenger();

messenger2 = new Messenger("Message has changed.");

initGUI();

}

・・・・ messageLabel.setBounds(・・・・・・);

messageLabel.setText(messenger.getMessage());

・・・・ jButton1.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent evt) {

messageLabel.setText(messenger2.getMessage());

}

});

・・・・ jButton2.addActionListener(new ActionListener() {

public void actionPerformed(ActionEvent evt) {

messageLabel.setText(messenger.getMessage());

}

});

９．実行する

-9 -

【発展課題】 各コンポーネントの大きさと配置を、フレームの大きさに合わせて自動設定するように書き換える。

ラ ベ ル の テ キス トのフ ォン トも 自動 的にフ レー ムぎ りぎ りにな るよ うに 調節 する。

HelloWorldFrame.java を参考に以下の手順で実装し、空欄になっているところは考えて埋めなさい。

１．GUIEditor で Frame 全体を選択し、右下の Event Name のリスト中の ComponentListner を開

いて componentResized を handler method に設定 ２．自動生成されたメッセージハンドラー thisComponentResized の実装

ボタンの配置を計算して実装（ア～ケを埋める） jButton1.setBounds(x 座標,y 座標,幅,高さ); jButton2.setBounds(x 座標,y 座標,幅,高さ); 使うもの：frame.getWidth(), frame.getHeight(), insets.top←タイトルバー高さ

３．setPrefferedMessageSize(JFrame frame)の実装

ラベルがフレームに比べて小さかったらフォントを大きくしていき、 ラベルがフレームに比べて大きかったらフォントを小さくしていく。 それぞれ、フォントサイズを変更するときの条件にある空欄サ～セおよび□を埋める。 □には論理演算子&&または||のどちらかが入る。

４．Button の actionperformed メソッドを修正 setPreferredMessageSize(frame)を呼び出して、メッセージが変わった時もフォントが調節される

ようにする。

frame.getWidth()

frame.getHeight()

insets.top

10→ 10→

10→

80 90

180 中央に配置

26

HelloWorldFrame.java

-10 -

package helloworld; 1 2 import helloworld.Messenger; 3 4 import java.awt.Dimension; 5 import java.awt.Font; 6 import java.awt.Insets; 7 import java.awt.event.ActionEvent; 8 import java.awt.event.ActionListener; 9 import java.awt.event.ComponentAdapter; 10 import java.awt.event.ComponentEvent; 11 import javax.swing.BorderFactory; 12 import javax.swing.JButton; 13 import javax.swing.JComponent; 14 import javax.swing.JFrame; 15 import javax.swing.JLabel; 16 17 import javax.swing.WindowConstants; 18 import javax.swing.border.LineBorder; 19 import javax.swing.SwingUtilities; 20 21 22 /** 23 * This code was edited or generated using CloudGarden's Jigloo 24 * SWT/Swing GUI Builder, which is free for non-commercial 25 * use. If Jigloo is being used commercially (ie, by a corporation, 26 * company or business for any purpose whatever) then you 27 * should purchase a license for each developer using Jigloo. 28 * Please visit www.cloudgarden.com for details. 29 * Use of Jigloo implies acceptance of these licensing terms. 30 * A COMMERCIAL LICENSE HAS NOT BEEN PURCHASED FOR 31 * THIS MACHINE, SO JIGLOO OR THIS CODE CANNOT BE USED 32 * LEGALLY FOR ANY CORPORATE OR COMMERCIAL PURPOSE. 33 * 34 * 課題 35 * 文字を常に画面いっぱいにする 36 */ 37 public class HelloWorldFrame extends javax.swing.JFrame { 38 private Messenger messenger, messenger2; 39 private JLabel messageLabel; 40 private JButton jButton1; 41 private JButton jButton2; 42 43 final int minWidth = 200; 44 final int minHeight = 130; 45 46 { 47 //Set Look & Feel 48 try { 49 javax.swing.UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel"); 50 } catch(Exception e) { 51 e.printStackTrace(); 52 } 53 } 54 55 56 /** 57 * Auto-generated main method to display this JFrame 58 */ 59 public static void main(String[] args) { 60 SwingUtilities.invokeLater(new Runnable() { 61 public void run() { 62 HelloWorldFrame inst = new HelloWorldFrame(); 63 inst.setLocationRelativeTo(null); 64

HelloWorldFrame.java

-11 -

inst.setVisible(true); 65 } 66 }); 67 } 68 69 public HelloWorldFrame() { 70 super(); 71 messenger = new Messenger(); 72 messenger2 = new Messenger("Message has changed."); 73 initGUI(); 74 } 75 76 private void initGUI() { 77 try { 78 setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE); 79 getContentPane().setLayout(null); 80 // フレームの最小幅、最小高さを設定 81 this.setMinimumSize(new Dimension(minWidth, minHeight)); 82 // フレームのサイズ変更イベントを受け取る 83 this.addComponentListener(new ComponentAdapter() { 84 public void componentResized(ComponentEvent evt) { 85 thisComponentResized(evt); 86 } 87 }); 88 { 89 messageLabel = new JLabel(); 90 getContentPane().add(messageLabel, "Center"); 91 messageLabel.setFont(new java.awt.Font("Dialog",1,26)); 92 messageLabel.setText(Messenger.HELLO_WORLD); 93 } 94 { 95 jButton1 = new JButton(); 96 getContentPane().add(jButton1, "North"); 97 jButton1.setText("変更"); 98 jButton1.addActionListener(new ActionListener() { 99 public void actionPerformed(ActionEvent evt) { 100 messageLabel.setText(messenger2.getMessage()); 101 // イベントの原因となったボタンを取得 102 JButton btn = (JButton)evt.getSource(); 103 // ボタンの親フレームを取得 104 JFrame frame = (JFrame)SwingUtilities.getWindowAncestor(btn); 105 // ラベルのフォントを修正 106 setPreferredMessageSize(frame); 107 } 108 }); 109 } 110 { 111 jButton2 = new JButton(); 112 getContentPane().add(jButton2); 113 jButton2.setText("元に戻す"); 114 jButton2.addActionListener(new ActionListener() { 115 public void actionPerformed(ActionEvent evt) { 116 messageLabel.setText(messenger.getMessage()); 117 // イベントの原因となったボタンを取得 118 JButton btn = (JButton)evt.getSource(); 119 // ボタンの親フレームを取得 120 JFrame frame = (JFrame)SwingUtilities.getWindowAncestor(btn); 121 // ラベルのフォントを修正 122 setPreferredMessageSize(frame); 123 } 124 }); 125 } 126 pack(); 127 setSize(400, 300); 128

HelloWorldFrame.java

-12 -

} catch (Exception e) { 129 e.printStackTrace(); 130 } 131 } 132 133 private void thisComponentResized(ComponentEvent evt) { 134 // フレームを取得 135 JFrame frame = (JFrame)evt.getSource(); 136 // タイトルバーの高さを取得するために Insets インスタンス（オブジェクト）を取得 137 Insets insets = frame.getInsets(); 138 // ボタンの配置 139 jButton1.setBounds([ ア ], [ イ ], [ ウ ], [ エ ]); 140 jButton2.setBounds([ カ ], [ キ ], [ ク ], [ ケ ]); 141 // Label の配置 142 setPreferredMessageSize(frame); 143 } 144 145 private void setPreferredMessageSize(JFrame frame) { 146 Insets insets = frame.getInsets(); 147 // ラベルの大きさを取得 148 Dimension d = messageLabel.getPreferredSize(); 149 // ラベルのフォントを取得 150 Font font = messageLabel.getFont(); 151 // フォントサイズを取得 152 int fontSize = font.getSize(); 153 int i=0; 154 // ラベルがフレームに比べて小さかったらフォントを大きくしていく 155 while ([ サ ]-20 > d.width □ [ シ ]-insets.top-10-56 > d.height) { 156 fontSize ++; 157 messageLabel.setFont(new Font(font.getFamily(), font.getStyle(), fontSize)); 158 d = messageLabel.getPreferredSize(); // ラベルの大きさを計算しなおす 159 messageLabel.setBounds(10, 10, d.width, d.height); 160 if (++i>100) 161 break; 162 } 163 // ラベルがフレームに比べて大きかったらフォントを小さくしていく 164 i=0; 165 while ([ ス ]-20 < d.width □ [ セ ]-insets.top-10-56 < d.height) { 166 fontSize --; 167 messageLabel.setFont(new Font(font.getFamily(), font.getStyle(), fontSize)); 168 d = messageLabel.getPreferredSize(); // ラベルの大きさを計算しなおす 169 messageLabel.setBounds(10, 10, d.width, d.height); 170 if (++i>100) 171 break; 172 } 173 } 174 175 } 176