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

TopPage > 演習課題 > 演習2-1 GUIプログラミングの基礎

GUIプログラミングの基礎 †

まず，下記のプログラムをダウンロードしてください．

GuiTest.java ダウンロード／ソースコードファイルを見る

コンパイル＆実行 †

javacを使って，普通にコンパイルしてください．

コンパイルが終わったら実行します． 実行すると，図1に示すメインウィンドウが表示されます．

メインウィンドウには，0から4までの番号が振られた，正方形のボタン(JButton)が５つ配置されています．

実行を終了するには，ウインドウを消すか，コマンドプロンプトの方で[Ctrl]+Cを入力します．

説明 †

このプログラムは，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プログラミングの特徴は，

1. Frame(ウィンドウなど)を作成して，Containerを取得する．
2. Component(コンポーネント，コントロール)と呼ばれる「部品」を生成して，
3. 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のレイヤーのイメージです．複数のレイヤーが重なったイメージで構成されています．
    
    

練習 †

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

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

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

注意

• 配列はアクセスの注意
  • 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：

• 二次元配列の宣言（上の方にあります！）は下記のように書きます！

  private JButton buttonArray[][];
  [][]を二つ書いてください。

• 二次元配列の生成は下記ように書きます！

  buttonArray = new JButton[8][8];

• 二次元配列への代入などは下記のように書きます！

  buttonArray[j][i] = new JButton....
  すべて、[][]を使った形に書き換えます！

ヒント3：

• iとjで動きを説明してみます．
• jが外側のループで，iが内側のループとします．
• iもjも，０から７まで動きます．
• iの最初は０です．

  j*8+i

• とすると，jが０のときiが０から７まで変化すると，「j*8+i」の結果は，０から７まで変化します．
• 次にjが1になります．
• 「j*8+i」の結果は，８から１５まで変化します．
• ボタンの大きさを50x50にしたので，ボタンのｘ座標，ｙ座標の変化分も変更する必要があります．

ヒント4： 下記のURLをブラウザにコピーして見て下さい！

http://yoslab.net/~yoshino/javaprog_addtion/howtoboard.key.png

注意：

• <と<=では=しか違わないけど，注意しましょう．配列の境界を越えるとエラーがでます！

  for(int i=0;i<8;i++)    //iは０から７まで
  for(int i=0;i<=8;i++)   //iは０から８まで

おまけ：

• 一次元配列でも表現できます．

  for(int i = 0 ; i<64 ; i++) {
       x = i % 8; // %は「モジュロ」とよびます．余りを返します．i % 8は iを８で割ったときのあまりです．
       y = i / 8; // /　は割り算ですね．整数の割り算なので，iが０から7までは，i/8の結果はずっと０です．
  ...

  この形で，xとyの動きを作ることもできます！

次の演習(2-2)