[[TopPage]] > [[演習課題]] > 演習2-1 GUIプログラミングの基礎
* GUIプログラミングの基礎 [#ke48f0ee]
まず，下記のプログラムをダウンロードしてください．
&ref(GuiTest.java,,,GuiTest.java ダウンロード);／[[ソースコードファイルを見る>http://yoslab.net/netprog/source/GuiTest.java]]
*** コンパイル＆実行 [#d40cb1b0]
javacを使って，普通にコンパイルしてください．
コンパイルが終わったら実行します．
実行すると，図1に示すメインウィンドウが表示されます．
#ref(java_gui02.png,nolink,center)~
CENTER:図1. メインウィンドウ
メインウィンドウには，0から4までの番号が振られた，正方形のボタン(JButton)が５つ配置されています．
実行を終了するには，ウインドウを消すか，コマンドプロンプトの方で[Ctrl]+Cを入力します．
*** 説明 [#r4b21dee]
このプログラムは，GUI(Graphical User Interface)の基本的な機能を実装したものです．
プログラム中には，クラスが１つだけ(''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行目：５個の要素を持つ''JButton''オブジェクトの配列を初期化する．
buttonArray = new JButton[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のオブジェクト指向プログラミング [#sc3273f2]
[[Javaのオブジェクト指向の概説]]を軽く読んでください．
&color(red,yellow){'' 解説：JFrame ''};
- 突然，「public class GuiTest extends JFrame {」が出てきましたね．
-- JFrameってなんだろう？って思いますよね，
-- JFrameは，Javaのウィンドウ表示用のクラスです！
-- ここでクラスってのが出てきましたね．
-- クラスというのは，オブジェクト指向プログラミングで，データとその操作手順であるメソッドをまとめたオブジェクトの雛型（ひながた）のことですね！
-- もう少し，詳しく説明します．「public class GuiTest extends JFrame」というのは，
-- JFrameというクラスを拡張して，GuiTestという新しいクラスを作るという処理です．
-- もともとあるJFrame（Javaがもともと持っている）ものをextendsで拡張しています．
-- 「Javaのウィンドウ」って，全てにありますよね！それを拡張して，「GuiTest」という新しいクラスに拡張しています．
-- 「JFrame」の中身がどうなっているかは，分かりませんが，それを拡張して新しいものが作れます．
-- プログラムの再利用の仕組みの一つです．
&color(red,yellow){'' 解説：this ''};
- 突然，「this」が出てきましたね．
-- thisってなんだろう？って思いますよね，
-- thisは，自分自身のオブジェクトを指すときに使います．
-- public GuiTest() の中で，thisを使うと，GuiTest自身を指します．
-- 実は，GuiTestの中で，関数を使う時には，thisは書かなくても動きます．
-- 自分自身を読んでいることを明確に示すために，thisを書いています．
&color(red,yellow){'' 解説：ペイン ''};
- 突然，「ペイン」が出てきましたね．
-- ペインとは，枠とか区画とかの意味です．
-- JFrameをつくると，自動的にpaneが作られます．
-- このペインにぺたぺたとオブジェクト（ボタンとかフィールド）とかを貼り付けて画面を作ります．
-- Javaのレイヤーのイメージです．複数のレイヤーが重なったイメージで構成されています．~
&ref(1layers.gif,nolink);~
** 練習 [#h7c4ef3b]
（１）表示されるボタン(JButton)のサイズを50x50に変更してください．
（２）メインウィンドウのサイズを450x450に変更してください．
（３）メインウィンドウ上に表示されるボタンの数を増やし，図2のように８ｘ８のタイルを描画してください．~
&color(,yellow){注意};
- 配列はアクセスの注意
-- buttonArray = new JButton[5]; という書き方だと，buttonArray[0]から[4]まで確保されます．
-- つまり，[5]だと5個の変数が確保されるのですが，配列の番号は「0」からなので，「4」 が最後です！
&color(,yellow){ヒント1};：
- 二次元配列を使ってみましょう．覚えていますか？
-- 8つの箱の中にさらに8つの箱がある，というような概念です．
- 二次元配列を扱う場合は，二重for文もよく用いられます．
-- for文(y軸担当)の中にfor文(x軸担当)を作ってください．
-- 増加値となる変数は何でも良いですが，i,j,k, ... の順に用いるのが通例です（x, yなどが分かりやすい場合もあるので，御自由にどうぞ）．
-- ボタン番号は0-63です．これは，iとjを用いた計算式で表しましょう．
CENTER:&ref(java_gui03.PNG,nolink);~
図2. 8x8のボタンタイル
#br
&color(,yellow){ヒント2};：
- 二次元配列の宣言（上の方にあります！）は下記のように書きます！
private JButton buttonArray[][];
[][]を二つ書いてください。
- 二次元配列の生成は下記ように書きます！
buttonArray = new JButton[8][8];
- 二次元配列への代入などは下記のように書きます！
buttonArray[j][i] = new JButton....
すべて、[][]を使った形に書き換えます！
CENTER:&ref(board.key.png,,25%);~
図3. 一次元配列と二次元配列の対応
&color(,yellow){ヒント3};：
- iとjで動きを説明してみます．
- jが外側のループで，iが内側のループとします．
- iもjも，０から７まで動きます．
- iの最初は０です．
j*8+i
-とすると，jが０のときiが０から７まで変化すると，「j*8+i」の結果は，０から７まで変化します．
-次にjが1になります．
-「j*8+i」の結果は，８から１５まで変化します．
- ボタンの大きさを50x50にしたので，ボタンのｘ座標，ｙ座標の変化分も変更する必要があります．
&color(,yellow){ヒント4};：
下記のURLをブラウザにコピーして見て下さい！
http://yoslab.net/~yoshino/javaprog_addtion/howtoboard.key.png
&color(,yellow){注意};：
- <と<=では=しか違わないけど，注意しましょう．配列の境界を越えるとエラーがでます！
for(int i=0;i<8;i++) //iは０から７まで
for(int i=0;i<=8;i++) //iは０から８まで
&color(,yellow){おまけ};：
- 一次元配列でも表現できます．
for(int i = 0 ; i<64 ; i++) {
x = i % 8; // %は「モジュロ」とよびます．余りを返します．i % 8は iを８で割ったときのあまりです．
y = i / 8; // / は割り算ですね．整数の割り算なので，iが０から7までは，i/8の結果はずっと０です．
...
この形で，xとyの動きを作ることもできます！
&size(16){[[&ref(http://yoslab.net/netprog/next.gif,nolink); 次の演習(2-2)>演習2-2 イベント処理]]};
![[PukiWiki]](image/yoshi_java.png "[PukiWiki]")
