[[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)が5つ配置されています. 実行を終了するには,ウインドウを消すか,コマンドプロンプトの方で[Ctrl]+Cを入力します. *** 説明 [#r4b21dee] このプログラムは,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のオブジェクト指向プログラミング [#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] (1)表示されるボタン(JButton)のサイズを50x50に変更してください. (2)メインウィンドウのサイズを450x450に変更してください. (3)メインウィンドウ上に表示されるボタンの数を増やし,図2のように8x8のタイルを描画してください.~ &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[i][j] = new JButton.... すべて、[][]を使った形に書き換えます! CENTER:&ref(board.key.png,,25%);~ 図3. 一次元配列と二次元配列の対応 &color(,yellow){ヒント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まで変化します. &color(,yellow){ヒント4};: 下記のURLをブラウザにコピーして見て下さい! http://yoslab.net/~yoshino/javaprog_addtion/howtoboard.key.png &color(,yellow){注意};: <と<=では=しか違わないけど,注意しましょう.配列の境界を越えるとエラーがでます! for(int i=0;i<8;i++) //iは0から7まで for(int i=0;i<=8;i++) //iは0から8まで &color(,yellow){おまけ};: - 一次元配列でも表現できます. for(int i = 0 ; i<64 ; i++) { x = i % 8; // %は「モジュロ」とよびます.余りを返します.i % 8は iを8で割ったときのあまりです. y = i / 8; // / は割り算ですね.整数の割り算なので,iが0から7までは,i/8の結果はずっと0です. ... この形で,xとyの動きを作ることもできます! &size(16){[[&ref(http://yoslab.net/netprog/next.gif,nolink); 次の演習(2-2)>演習2-2 イベント処理]]};