TopPage > 演習課題 > 演習2-1 GUIプログラミングの基礎
GUIプログラミングの基礎 †
まず,下記のプログラムをダウンロードしてください.
GuiTest.java ダウンロード/ソースコードファイルを見る
コンパイル&実行 †
javacを使って,普通にコンパイルしてください.
コンパイルが終わったら実行します.
実行すると,図1に示すメインウィンドウが表示されます.
図1. メインウィンドウ
メインウィンドウには,0から4までの番号が振られた,正方形のボタン(JButton)が5つ配置されています.
実行を終了するには,ウインドウを消すか,コマンドプロンプトの方で[Ctrl]+Cを入力します.
説明 †
このプログラムは,GUI(Graphical User Interface)の基本的な機能を実装したものです.
プログラム中には,クラスが1つだけ(GuiTest)実装されています.
このクラスは,JFrameというウィンドウの基となるクラスの性質を継承(extends)することで,少ないコード量でGUIプログラムを作成することが可能になっています.
少し詳しく見てみましょう.
- 1〜6行目:import文.(C言語での#includeのようなもの).
- 8行目: GuiTestクラスの宣言.JFrameクラスを継承している.
public class GuiTest extends JFrame {
- 9〜10行目:「ボタン(JButton)コンポーネント」と,コンテナ変数の宣言.
- 12〜28行目:(関数)「コンストラクタ」と呼ばれるGuiTestクラスを初期化するときに呼ばれる関数.
- 15〜16行目:ウィンドウのタイトル名(setTitle),サイズ(setSize)を設定する.
this.setTitle("Gui Test"); //ウィンドウのタイトルを設定する
this.setSize(400,400); //ウィンドウのサイズを設定する
- 17行目:ウィンドウの「コンテナ」を取得する.
c = this.getContentPane(); //フレームのペインを取得する
- 21行目:5個の要素を持つJButtonオブジェクトの配列を初期化する.
buttonArray = new JButton[5]; //ボタンの配列を5個作成する[0]から[4]まで使える
- 22〜26行目:各JButton要素に対して,インスタンスの作成(23行目),コンテナへの登録(24行目), JButton要素の場所と大きさの設定(25行目)を行う.
for(int i=0;i<5;i++){
buttonArray[i] = new JButton(Integer.toString(i));//ボタンに数値を設定
c.add(buttonArray[i]);//ペインに貼り付ける
buttonArray[i].setBounds(i*45,10,45,45);//ボタンの大きさと位置を設定
}
- 30〜33行目:プログラムのうち最初に実行されるメソッド.
ここでGuiTestクラスのインスタンスを作成する.
public static void main(String[] args) {
GuiTest gui = new GuiTest();
gui.setVisible(true);
}
GUIプログラミングの特徴は,
- Frame(ウィンドウなど)を作成して,Containerを取得する.
- Component(コンポーネント,コントロール)と呼ばれる「部品」を生成して,
- Container(コンテナ)に登録する
という流れになります.
Javaのオブジェクト指向プログラミング †
Javaのオブジェクト指向の概説を軽く読んでください.
解説:JFrame
- 突然,「public class GuiTest extends JFrame {」が出てきましたね.
- JFrameってなんだろう?って思いますよね,
- JFrameは,Javaのウィンドウ表示用のクラスです!
- ここでクラスってのが出てきましたね.
- クラスというのは,オブジェクト指向プログラミングで,データとその操作手順であるメソッドをまとめたオブジェクトの雛型(ひながた)のことですね!
- もう少し,詳しく説明します.「public class GuiTest extends JFrame」というのは,
- JFrameというクラスを拡張して,GuiTestという新しいクラスを作るという処理です.
- もともとあるJFrame(Javaがもともと持っている)ものをextendsで拡張しています.
- 「Javaのウィンドウ」って,全てにありますよね!それを拡張して,「GuiTest」という新しいクラスに拡張しています.
- 「JFrame」の中身がどうなっているかは,分かりませんが,それを拡張して新しいものが作れます.
- プログラムの再利用の仕組みの一つです.
解説:this
- 突然,「this」が出てきましたね.
- thisってなんだろう?って思いますよね,
- thisは,自分自身のオブジェクトを指すときに使います.
- public GuiTest() の中で,thisを使うと,GuiTest自身を指します.
- 実は,GuiTestの中で,関数を使う時には,thisは書かなくても動きます.
- 自分自身を読んでいることを明確に示すために,thisを書いています.
解説:ペイン
- 突然,「ペイン」が出てきましたね.
- ペインとは,枠とか区画とかの意味です.
- JFrameをつくると,自動的にpaneが作られます.
- このペインにぺたぺたとオブジェクト(ボタンとかフィールド)とかを貼り付けて画面を作ります.
- Javaのレイヤーのイメージです.複数のレイヤーが重なったイメージで構成されています.
練習 †
(1)表示されるボタン(JButton)のサイズを50x50に変更してください.
(2)メインウィンドウのサイズを450x450に変更してください.
(3)メインウィンドウ上に表示されるボタンの数を増やし,図2のように8x8のタイルを描画してください.
注意
- 配列はアクセスの注意
- buttonArray = new JButton[5]; という書き方だと,buttonArray[0]から[4]まで確保されます.
- つまり,[5]だと5個の変数が確保されるのですが,配列の番号は「0」からなので,「4」 が最後です!
ヒント1:
- 二次元配列を使ってみましょう.覚えていますか?
- 8つの箱の中にさらに8つの箱がある,というような概念です.
- 二次元配列を扱う場合は,二重for文もよく用いられます.
- for文(y軸担当)の中にfor文(x軸担当)を作ってください.
- 増加値となる変数は何でも良いですが,i,j,k, ... の順に用いるのが通例です(x, yなどが分かりやすい場合もあるので,御自由にどうぞ).
- ボタン番号は0-63です.これは,iとjを用いた計算式で表しましょう.
図2. 8x8のボタンタイル
ヒント2:
- 二次元配列の宣言(上の方にあります!)は下記のように書きます!
private JButton buttonArray[][];
[][]を二つ書いてください。
- 二次元配列の生成は下記ように書きます!
buttonArray = new JButton[8][8];
- 二次元配列への代入などは下記のように書きます!
buttonArray[i][j] = new JButton....
すべて、[][]を使った形に書き換えます!
図3. 一次元配列と二次元配列の対応
ヒント3:
- iとjで動きを説明してみます.
- jが外側のループで,iが内側のループとします.
- iもjも,0から7まで動きます.
- iの最初は0です.
j*8+i
- とすると,jが0のときiが0から7まで変化すると,「j*8+i」の結果は,0から7まで変化します.
- 次にjが1になります.
- 「j*8+i」の結果は,8から15まで変化します.
ヒント4:
下記のURLをブラウザにコピーして見て下さい!
http://yoslab.net/~yoshino/javaprog_addtion/howtoboard.key.png
注意:
と<=では=しか違わないけど,注意しましょう.配列の境界を越えるとエラーがでます!
for(int i=0;i<8;i++) //iは0から7まで
for(int i=0;i<=8;i++) //iは0から8まで
おまけ:
次の演習(2-2)