演習2-1 GUIプログラミングの基礎
をテンプレートにして作成
開始行:
[[TopPage]] > [[演習課題]] > 演習2-1 GUIプログラミングの...
* GUIプログラミングの基礎 [#ke48f0ee]
まず,下記のプログラムをダウンロードしてください.
&ref(GuiTest.java,,,GuiTest.java ダウンロード);/[[ソース...
*** コンパイル&実行 [#d40cb1b0]
javacを使って,普通にコンパイルしてください.
コンパイルが終わったら実行します.
実行すると,図1に示すメインウィンドウが表示されます.
#ref(java_gui02.png,nolink,center)~
CENTER:図1. メインウィンドウ
メインウィンドウには,0から4までの番号が振られた,正方形...
実行を終了するには,ウインドウを消すか,コマンドプロンプ...
*** 説明 [#r4b21dee]
このプログラムは,GUI(Graphical User Interface)の基本的な...
プログラム中には,クラスが1つだけ(''GuiTest'')実装されて...
このクラスは,''JFrame''というウィンドウの基となるクラス...
少し詳しく見てみましょう.
- 1〜6行目:import文.(C言語での#includeのようなもの).
- 8行目: GuiTestクラスの宣言.JFrameクラスを継承してい...
public class GuiTest extends JFrame {
- 9〜10行目:「ボタン(JButton)コンポーネント」と,コンテ...
- 12〜28行目:(関数)「''コンストラクタ''」と呼ばれるGui...
- 15〜16行目:ウィンドウのタイトル名(setTitle),サイズ(se...
this.setTitle("Gui Test"); //ウィンドウのタイトルを設定...
this.setSize(400,400); //ウィンドウのサイズを設定する
- 17行目:ウィンドウの「コンテナ」を取得する.
c = this.getContentPane(); //フレームのペインを取得する
- 21行目:5個の要素を持つ''JButton''オブジェクトの配列を...
buttonArray = new JButton[5]; //ボタンの配列を5個作成す...
- 22〜26行目:各JButton要素に対して,''インスタンス''の作...
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 ext...
-- JFrameというクラスを拡張して,GuiTestという新しいクラ...
-- もともとあるJFrame(Javaがもともと持っている)ものをex...
-- 「Javaのウィンドウ」って,全てにありますよね!それを拡...
-- 「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)メインウィンドウ上に表示されるボタンの数を増やし,...
&color(,yellow){注意};
- 配列はアクセスの注意
-- buttonArray = new JButton[5]; という書き方だと,butto...
-- つまり,[5]だと5個の変数が確保されるのですが,配列の番...
&color(,yellow){ヒント1};:
- 二次元配列を使ってみましょう.覚えていますか?
-- 8つの箱の中にさらに8つの箱がある,というような概念です.
- 二次元配列を扱う場合は,二重for文もよく用いられます.
-- for文(y軸担当)の中にfor文(x軸担当)を作ってください.
-- 増加値となる変数は何でも良いですが,i,j,k, ... の順に...
-- ボタン番号は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も,0から7まで動きます.
- iの最初は0です.
j*8+i
-とすると,jが0のときiが0から7まで変化すると,「j*8+i...
-次にjが1になります.
-「j*8+i」の結果は,8から15まで変化します.
- ボタンの大きさを50x50にしたので,ボタンのx座標,y座標...
&color(,yellow){ヒント4};:
下記のURLをブラウザにコピーして見て下さい!
http://yoslab.net/~yoshino/javaprog_addtion/howtoboard.k...
&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; // %は「モジュロ」とよびます.余りを返し...
y = i / 8; // / は割り算ですね.整数の割り算なので...
...
この形で,xとyの動きを作ることもできます!
&size(16){[[&ref(http://yoslab.net/netprog/next.gif,nolin...
終了行:
[[TopPage]] > [[演習課題]] > 演習2-1 GUIプログラミングの...
* GUIプログラミングの基礎 [#ke48f0ee]
まず,下記のプログラムをダウンロードしてください.
&ref(GuiTest.java,,,GuiTest.java ダウンロード);/[[ソース...
*** コンパイル&実行 [#d40cb1b0]
javacを使って,普通にコンパイルしてください.
コンパイルが終わったら実行します.
実行すると,図1に示すメインウィンドウが表示されます.
#ref(java_gui02.png,nolink,center)~
CENTER:図1. メインウィンドウ
メインウィンドウには,0から4までの番号が振られた,正方形...
実行を終了するには,ウインドウを消すか,コマンドプロンプ...
*** 説明 [#r4b21dee]
このプログラムは,GUI(Graphical User Interface)の基本的な...
プログラム中には,クラスが1つだけ(''GuiTest'')実装されて...
このクラスは,''JFrame''というウィンドウの基となるクラス...
少し詳しく見てみましょう.
- 1〜6行目:import文.(C言語での#includeのようなもの).
- 8行目: GuiTestクラスの宣言.JFrameクラスを継承してい...
public class GuiTest extends JFrame {
- 9〜10行目:「ボタン(JButton)コンポーネント」と,コンテ...
- 12〜28行目:(関数)「''コンストラクタ''」と呼ばれるGui...
- 15〜16行目:ウィンドウのタイトル名(setTitle),サイズ(se...
this.setTitle("Gui Test"); //ウィンドウのタイトルを設定...
this.setSize(400,400); //ウィンドウのサイズを設定する
- 17行目:ウィンドウの「コンテナ」を取得する.
c = this.getContentPane(); //フレームのペインを取得する
- 21行目:5個の要素を持つ''JButton''オブジェクトの配列を...
buttonArray = new JButton[5]; //ボタンの配列を5個作成す...
- 22〜26行目:各JButton要素に対して,''インスタンス''の作...
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 ext...
-- JFrameというクラスを拡張して,GuiTestという新しいクラ...
-- もともとあるJFrame(Javaがもともと持っている)ものをex...
-- 「Javaのウィンドウ」って,全てにありますよね!それを拡...
-- 「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)メインウィンドウ上に表示されるボタンの数を増やし,...
&color(,yellow){注意};
- 配列はアクセスの注意
-- buttonArray = new JButton[5]; という書き方だと,butto...
-- つまり,[5]だと5個の変数が確保されるのですが,配列の番...
&color(,yellow){ヒント1};:
- 二次元配列を使ってみましょう.覚えていますか?
-- 8つの箱の中にさらに8つの箱がある,というような概念です.
- 二次元配列を扱う場合は,二重for文もよく用いられます.
-- for文(y軸担当)の中にfor文(x軸担当)を作ってください.
-- 増加値となる変数は何でも良いですが,i,j,k, ... の順に...
-- ボタン番号は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も,0から7まで動きます.
- iの最初は0です.
j*8+i
-とすると,jが0のときiが0から7まで変化すると,「j*8+i...
-次にjが1になります.
-「j*8+i」の結果は,8から15まで変化します.
- ボタンの大きさを50x50にしたので,ボタンのx座標,y座標...
&color(,yellow){ヒント4};:
下記のURLをブラウザにコピーして見て下さい!
http://yoslab.net/~yoshino/javaprog_addtion/howtoboard.k...
&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; // %は「モジュロ」とよびます.余りを返し...
y = i / 8; // / は割り算ですね.整数の割り算なので...
...
この形で,xとyの動きを作ることもできます!
&size(16){[[&ref(http://yoslab.net/netprog/next.gif,nolin...
ページ名: