2002 -0911 ver 0.10 第１草稿上がり -0912 ver 1.00 発行版 -0916 ver 1.02 誤字修正 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃.&&&&　****　%%%%.　　JavaScript&Javaで目指そう！基本情報技術者試験　 ┃ ┃&&&&&&******%%%%%%　　執筆＆編集　斎藤末広 suehiro@he.mirai.ne.jp 　┃ ┃'&┃&''*┃*''%┃%'　　発行　　　　江口昌宏 jmaga@yscon.co.jp　　　　┃ ┗━┻━━┻━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ★解除・登録　:http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html ★広告募集　　:http://www2.odn.ne.jp/~egu33/jmaga/jmaga-ad.html ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ 　第２７号　2002/09/12 　Layout(レイアウト) と Panel(パネル) ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ 　プログラムを作成する上での注意事項： 　Windows98SE, SDK(JDK) 1.3.1，IE 5.5 を前提としています。 　拡張子を表示するに設定してください。 ------------------------------------------------------------------------ ▼ Layout(レイアウト) と Panel(パネル) 　Layout(レイアウト)とは，日本語に直すと配置です。部屋の中の家具の配置， 新聞紙上の記事の配置をレイアウトといいます。 　Java のアプレットの中では，GUI 部品の配置をする係が，Layout(レイアウト) 群です。配置のやりかたの流儀で， BorderLayout(ボーダーレイアウト) GridLayout(グリッドレイアウト) FlowLayout(フローレイアウト) GridBagLayout(グリッドバッグレイアウト) CardLayout(カードレイアウト) と種類があります。この号では，このうち， BorderLayout(ボーダーレイアウト) GridLayout(グリッドレイアウト) FlowLayout(フローレイアウト) を勉強します。 ------------------------------------------------------------------------ ▼　FlowLayout の下働き 　まず，ボタンを１０個配置するだけのプログラムをみましょう。 例 j27-01 xSmpGUI10.java レイアウト省略時の配置 ソース　http://www.yscon.co.jp/j/java/jmaga/j26/xSmpGUI09.java 動作　　http://www.yscon.co.jp/j/java/jmaga/j26/xSmpGUI09.htm 1: import java.applet.Applet; 2: import java.awt.Button; 3: 4: public class xSmpGUI10 extends Applet{ 5: 6: public void init(){ 7: for(int i=1; i<=10; i++){// ボタンを１０個生成＆表示 8: add(new Button("ボタン " + i)); 9: } 10: } 11: } 　ボタンが上部中央から，左右対称に配置されます。これが，配置係を特にして いなかったときの配置(レイアウト)になります。アプレットは，なにも配置係を 指定しないと，FlowLayout(フローレイアウト)が見えないところで働いています。 今までアプレットの配置は，FlowLayout(フローレイアウト)が下働きをしてくれ ていました。 　FlowLayout(フローレイアウト)のFlow(フロー)は，流れるという意味です。流 れ図は，フローチャートといいました。同じFlow(フロー)です。FlowLayout は， 上部中央から，左右対称に配置するだけでなく，右の方から，順に配置する，左 のから順に配置するなど指定もできます。指定の例は，あとで触れます。 ------------------------------------------------------------------------ ▼　BorderLayout(ボーダレイアウト) ４方境界型 　BorderLayout(ボーダレイアウト)を配置係にしたときの例をみましょう。 BorderLayout(ボーダレイアウト)の Border(ボーダ)とは，ボーダラインのボーダ で，境界線という意味です。 　動作させて見て下さい。ボタンを５つ表示しています。 例 j27-02 xSmpGUI11.java BorderLayout(ボーダレイアウト) ソース　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI11.java 動作　　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI11.htm 1: import java.applet.Applet; 2: import java.awt.Button; 3: import java.awt.BorderLayout; 4: 5: public class xSmpGUI11 extends Applet{ 6: 7: BorderLayout xhaitigakari = new BorderLayout(); 8: 9: public void init(){ 10: 11: setLayout(xhaitigakari); 12: 13: add("Center", new Button("ボタン 中")); 14: add("East" , new Button("ボタン 東")); 15: add("West" , new Button("ボタン 西")); 16: add("South", new Button("ボタン 南")); 17: add("North" , new Button("ボタン 北")); 18: } 19: } 　ボタンが５つ表示されます。上下左右にそれぞれ接して，配置されます。ボタ ンの大きさは，表示できる領域に合わせて自動的に調整されています。地図に 見立てて，上が北(North)と呼ばれます。それぞれの部分は，中央が，Center で，東(Eest)，西(West)，南(South)と呼ばれます。 　利用法は 1) 生成 　 7: BorderLayout xhaitigakari = new BorderLayout(); 　配置係はクラス本体がやらずに，分身(インスタンス)がやるので，分身(インス タンス)を作っておきます。 2) 任命 　 11: setLayout(xhaitigakari); 　配置係を任命します。 3) 配置 13: add("Center", new Button("ボタン 中")); 14: add("East" , new Button("ボタン 東")); 15: add("West" , new Button("ボタン 西")); 16: add("South", new Button("ボタン 南")); 17: add("North" , new Button("ボタン 北")); 　add で指示されると，配置係が裏で働いて，場所を計算して，配置します。 　BorderLayout(ボーダレイアウト)は，BorderLayoutが得意とする配置がうまく 使える時には，配置位置をプログラム作成者が計算して決める必要が無いため， 便利です。 ------------------------------------------------------------------------ ▼　GridLayout(グリッドレイアウト)　網型レイアウト 　GridLayout(グリッドレイアウト)の Grid(グリッド)は，肉や魚を焼くときの 網(あみ)を指します。網は，格子(こうし)になっていますので，格子状のものも 指します。この配置係を使うと，格子状，碁盤の目のように配置してくれます。 　動作させてください。 例 j27-03 xSmpGUI12.java GridLayout(グリッドレイアウト) ソース　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI12.java 動作　　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI12.htm 1: public class xSmpGUI12 extends Applet{ 2: 3: GridLayout xhaitigakari = new GridLayout(4,3); 4: 5: public void init(){ 6: 7: setLayout(xhaitigakari); 8: 9: for(int i=1; i<=10; i++){// ボタンを１０個生成＆表示 10: add(new Button("ボタン " + i)); 11: } 12: 13: } 14: } 　GridLayout の使い方は，BorderLayout(ボーダレイアウト)と同じです。 1) 生成 3: GridLayout xhaitigakari = new GridLayout(4,3); 　配置係はクラス本体がやらずに，分身(インスタンス)がやるので，分身(インス タンス)を作っておきます。この場合は，縦４，横３の格子を準備しています。 行・列の順で，４行３列です。 2) 任命 　 7: setLayout(xhaitigakari); 　配置係を任命します。 3) 配置 10: add(new Button("ボタン " + i)); 　add で，指示されると，グリッドの配置係が，自動的に配置してくれます。格子 の位置に表示するものが指定してないと空白になります。 ------------------------------------------------------------------------ ▼　複雑な配置(レイアウト)のために，Panel を利用 　複数の配置のパターンを利用する場合は，区分に分けて，配置をします。区分 を管理するのは，Panel(パネル)にやってもらいます。本来のPanel(パネル)とい う英語は，天井や窓のなどの区分けされた１枚のガラスや板を指します。配置係 は，その板(パネル)をまず配置して，板(パネル)の中を，別の配置係に任せると いう感じです。 　次の例では，BorderLayout(ボーダレイアウト)，GridLayout(グリッドレイアウ ト)を Panel を利用して組み合わせた例です。 例 j27-03 xSmpGUI13.java Panel(パネル) ソース　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI13.java 動作　　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI13.htm 1: import java.applet.Applet; 2: import java.awt.Button; 3: 4: import java.awt.BorderLayout; 5: import java.awt.GridLayout; 6: import java.awt.Panel; 7: 8: public class xSmpGUI13 extends Applet{ 9: 10: BorderLayout xhaitigakari01 = new BorderLayout(); 11: GridLayout xhaitigakari02 = new GridLayout(4,3); 12: 13: Panel xpanel = new Panel(); 14: 15: public void init(){ 16: 17: setLayout(xhaitigakari01); 18: add("South", new Button("ボタン 南")); 19: add("Center", xpanel); 20: add("North" , new Button("ボタン 北")); 21: 22: xpanel.setLayout(xhaitigakari02); 23: for(int i=1; i<=10; i++){// ボタンを１０個生成＆表示 24: xpanel.add(new Button("ボタン " + i)); 25: } 26: 27: } 28: } 　配置係は，２名います。 10: BorderLayout xhaitigakari01 = new BorderLayout(); 11: GridLayout xhaitigakari02 = new GridLayout(4,3); それぞれ，次のように任命されます。 17: setLayout(xhaitigakari01); と 22: xpanel.setLayout(xhaitigakari02); 　まず，22 行目から解説します。22 行目では， 　xpanel.setLayout(xhaitigakari02); 　とピリオドが使われています。こういった書き方をしている時は，ピリオド前が その仕事をする人を表します。xpanel が，自分の配置係として，xhaitigakari02 を任命しています。これにより xhaitigakari02 は，xpanel の中の配置を担当し ます。 　17 行目では 　setLayout(xhaitigakari01); 　と，ピリオドとその前がありません。こういう場合は，このプログラム自身が やっているということです。このプログラム自身は，アプレットの画面を管理し ていますので，アプレットの中の配置係として，xhatigakari01 を任命したこと になります。 　実際の配置は， 18: add("South", new Button("ボタン 南")); 19: add("Center", xpanel); 20: add("North" , new Button("ボタン 北")); 　で，アプレットの配置係である，xhatigakari01に配置をやらせています。この 配置係は，BorderLayout でした。東と西の部分が省略されており，南と北には ボタンを配置しています。中央は，xpanel を配置しています。 23: for(int i=1; i<=10; i++){// ボタンを１０個生成＆表示 24: xpanel.add(new Button("ボタン " + i)); 25: } 　24 行の部分を10回繰り返しています。xpanel に配置をしています。xpanel の 配置係は，xhatigakari02 でした。この配置係は，GridLayout(グリッドレイアウ ト)のインスタンス(分身)でした。格子状に配置します。 　もう一度，動作をさせて確認してください。 動作　　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI13.htm ------------------------------------------------------------------------ ▼　さらに複雑な配置(レイアウト) 　FlowLayout にも登場してもらいます。Panelの分身(インスタンス)も２人登場 してもらいましょう。 　FlowLayout は，先ほどは，上部中央から配置していましたが，今回は，左詰め で配置してもらいます。 例 j27-04 xSmpGUI131.java 複数のレイアウトとパネル ソース　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI131.java 動作　　http://www.yscon.co.jp/j/java/jmaga/j27/xSmpGUI131.htm 1: import java.applet.Applet; 2: import java.awt.Button; 3: 4: import java.awt.BorderLayout; 5: import java.awt.GridLayout; 6: import java.awt.FlowLayout; 7: import java.awt.Panel; 8: 9: public class xSmpGUI131 extends Applet{ 10: 11: BorderLayout xboder = new BorderLayout(); 12: GridLayout xgrider = new GridLayout(4,3); 13: FlowLayout xflower = new FlowLayout(FlowLayout.LEFT); 14: 15: Panel xpanel01 = new Panel(); 16: Panel xpanel02 = new Panel(); 17: 18: public void init(){ 19: 20: setLayout(xboder); 21: add("South", new Button("ボタン 南")); 22: add("Center", xpanel01); 23: add("North" , xpanel02); 24: 25: xpanel01.setLayout(xgrider); 26: for(int i=1; i<=10; i++){// ボタンを１０個生成＆表示 27: xpanel01.add(new Button("ボタン " + i)); 28: } 29: 30: xpanel02.setLayout(xflower); 31: for(int i=1; i<=3; i++){// ボタンを３個生成＆表示 32: xpanel02.add(new Button("ボタン北 " + i)); 33: } 34: 35: } 36: } 37: 配置係は，３人登場しています。今回は，名前をそれらしくつけました。 xboder，xgrider，xflower です。名前からどの配置テクニックを使うか分かりま すよね。 11: BorderLayout xboder = new BorderLayout(); 12: GridLayout xgrider = new GridLayout(4,3); 13: FlowLayout xflower = new FlowLayout(FlowLayout.LEFT); 13行目に注目してください。 　FlowLayout xflower = new FlowLayout(FlowLayout.LEFT); 　このように，生成するときに，new FlowLayout(FlowLayout.LEFT)とやると， xflower は，左詰めで，順番に配置してくれます。 　ボタン北１，ボタン北２，ボタン北３の配置のようになります。 15: Panel xpanel01 = new Panel(); 16: Panel xpanel02 = new Panel(); 　パネルの分身(インスタンス)を２つ作っています。 20: setLayout(xboder); 21: add("South", new Button("ボタン 南")); 22: add("Center", xpanel01); 23: add("North" , xpanel02); 　setLayoutにピリオド前がありません。このアプレットに，xboder という 配置係を任命しています。南(下部)に ボタンを一つ配置，中央には，xpanel01， 北(上部)には，xpale02 を配置しています。 25: xpanel01.setLayout(xgrider); 26: for(int i=1; i<=10; i++){// ボタンを１０個生成＆表示 27: xpanel01.add(new Button("ボタン " + i)); 28: } 　xpale01 は，xgrider を配置係に任命しています。xpanel01にボタンを10個 配置します。 30: xpanel02.setLayout(xflower); 31: for(int i=1; i<=3; i++){// ボタンを３個生成＆表示 32: xpanel02.add(new Button("ボタン北 " + i)); 33: } 　xpanel02 は，xflower を配置係に任命しています。xpanel02 にボタンを３個， 配置しています。 ------------------------------------------------------------------------ ▼　Layoutクラスたちと他の GUI 部品の親子関係 　今回は，Layoutクラスのうち，３種類とPanelクラスを新たに勉強しました。 それぞれの親子関係を見てみましょう。 親←→子 Object Component Button Checkbox Label TextComponet TextField TextArea Container Panel Applet BorderLayout FlowLayout GridLayout 　最初の Object は，Ｊマガの中で，オブジェクトといってきたものとは少し違い ます。Ｊマガの中では，クラス本体とその分身(インスタンス)を区別しないで， 扱うときに，オブジェクトといっていますが，この Object は，特別なクラスで， すべてのクラスの親になります。言うならば，究極の親クラスです。 　Button とか，Label の親である，Component は，日本語にすると，構成部品 です。GUI 部品の部品にあたる英語です。 　今回登場した Panel の親は，Container です。Container は，日本語にすると 入れ物です。ＪＲの貨物を輸送する箱のコンテナも同じ英語です。今まで，よく 登場してきた，Applet クラスは，Container の子である，Panelのさらに子でし た。Container クラスからみると，Applet クラスは孫にあたります。今回使っ た，setLayout メソッドという仕事は，もともと，Container クラスで定義され ている仕事です。Container は，入れ物ですので，配置係を任命できるというこ とです。 　Panel も Applet も親子関係の上流は，Component です。Component には，色 を付ける仕事が定義されていました。Panel も Applet も色が付けることができ ますね。 　それぞれ，どんな仕事が定義されているか，マニュアルを参考にして下さい。 Object http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/lang/Object.html Component http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Component.html Button http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Button.html Checkbox http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Checkbox.html Label http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Label.html TextComponet http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/TextComponent.html TextField http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/TextField.html TextArea http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/TextArea.html Container http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Container.html Panel http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Panel.html Applet http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/Applet.html BorderLayout http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/BorderLayout.html FlowLayout http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/FlowLayout.html GridLayout http://java.sun.com/j2se/1.4/ja/docs/ja/api/java/awt/GridLayout.html ------------------------------------------------------------------------ ▼ 次号の予定 　次号は，Canvas(キャンパス)クラス を扱います。 　感想は，斎藤まで，suehiro@he.mirai.ne.jp 　広告等のお問い合わせ：jmaga@yscon.co.jp ------------------------------------------------------------------------ ▼ 誤字・脱字等の修正，プログラムの修正など，以下の場所で確認できます。 Jmaga情報 　http://www.yscon.co.jp/j/java/jmaga/ 登録・削除および広告の案内 　http://www2.odn.ne.jp/~egu33/jmaga/java-maga.html ------------------------------------------------------------------------ ▼ 著作権について 　このメールマガジンで公開しているプログラムソースは，著作権を当方スタッ フが所有しますが，商用を含めて，再利用，改変，発表を制限しません。 　本文に関しては，斎藤末広が著作権を所有します。再利用に関しては，承諾を 必要とします。 広告募集 http://www2.odn.ne.jp/~egu33/jmaga/jmaga-ad.html ------------------------------------------------------------------------ ▼アンケート（以下を返信してください） 　この号のＪマガに対するご意見をお待ちしてます。ぜひ，ご返信下さい。 内容のレベルは １　難しいのでもっと簡単にしてほしい ２　ちょうどよい ３　もっと難しくてもよい その他ご要望