演習2-1 GUIプログラミングの基礎の変更点

追加された行はこの色です。
削除された行はこの色です。
演習2-1 GUIプログラミングの基礎へ行く。
演習2-1 GUIプログラミングの基礎の差分を削除
[[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のオブジェクト指向の概説]]を軽く読んでください．


** 練習 [#h7c4ef3b]

（１）表示されるボタン(JButton)のサイズを50x50に変更してください．

（２）メインウィンドウのサイズを450x450に変更してください．

（３）メインウィンドウ上に表示されるボタンの数を増やし，図2のように８ｘ８のタイルを描画してください．~


&color(,yellow){ヒント};：
- 二次元配列を使ってみましょう．覚えていますか？
-- 8つの箱の中にさらに8つの箱がある，というような概念です．

- 二次元配列を扱う場合は，二重for文もよく用いられます．
-- for文(y軸担当)の中にfor文(x軸担当)を作ってください．
-- 増加値となる変数は何でも良いですが，i,j,k, ... の順に用いるのが通例です．
-- ボタン番号は0-63です．これは，iとjを用いた計算式で表しましょう．

CENTER:&ref(java_gui03.PNG,nolink);~
図2. 8x8のボタンタイル


#br

&size(16){[[&ref(http://yoslab.net/netprog/next.gif,nolink); 次の演習(2-2)>演習2-2 イベント処理]]};
演習2-1 GUIプログラミングの基礎 の変更点
