目次

アプレットなJavaの基礎講座

レイアウト処理

◆ レイアウト処理

ボタン、ラベル等のGUI部品は、カンタンにできました。 しかし、表示は、左上から右下へ流れるような配置にしかなりませんでした。 実は、これは、FlowLayoutと呼び、デフォルトのレイアウト方式だったのです。

通常、GUI部品は、Panelオブジェクトを使用し、FlowLayout、GridLayout、BordorLayoutの各方式でレイアウトを指定します。 では、各々説明していきましょう。

Panelオブジェクト

GUI部品を載せるお盆ようなものです。

FlowLayout方式

左上から右下へ流れるような配置

GridLayout方式

Excelの表のような、格子状の配置

BordorLayout方式

アプレット領域を東西南北(North,South,East,West,Center)の5つのエリアに分けての配置

◆ レイアウト処理のサンプル

以下は、各ボタン(1〜3)をクリックすると画像が交互の替わるアプレットです。
まずは、サンプルソースを見てください。

尚、このサンプルソースは、「初体験 Java 」(著者 丸の内とら 技術評論社)をかなり参考にさせてもらいました。
著作権等の問題がありましたら、ご連絡ください。いつもお世話になっています!

jlearn07.javaの内容

import java.applet.Applet;
import java.awt.*;
import java.awt.event.*;
public class jlearn07 extends Applet{
	Button btn1;
	Button btn2;
	Button btn3;
	Button btnClear;
	Image[] myImg;
	int flag;
	public void init(){
		//画像ロード		
		myImg = new Image[3];
		myImg[0] = getImage(getDocumentBase(), "../img/chaichan.gif");
		myImg[1] = getImage(getDocumentBase(), "../img/chaikobana.gif");
		myImg[2] = getImage(getDocumentBase(), "../chaiimg/chaichan_ani.gif");
		//レイアウト用パネル作成
		Panel myPanel1 = new Panel();
		//パネルのレイアウト方式を設定
		myPanel1.setLayout(new GridLayout(1, 3));
			//パネルの上にボタンを載せる
			myPanel1.add(btn1 = new Button("ちゃいちゃん1"));
			myPanel1.add(btn2 = new Button("ちゃいちゃん2"));
			myPanel1.add(btn3 = new Button("ちゃいちゃん3"));
		//ボーダーレイアウトを設定
		setLayout(new BorderLayout());
		//画像消去ボタンを作成
		add(btnClear = new Button("画像を消す"));
		//パネルをNorth(上部)に配置
		add ("North", myPanel1);
		//画像消去ボタンをSouth(下部)に配置
		add ("South", btnClear);		
		//ボタンのイベント処理メソッドを定義
		btn1.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e){
				flag = 1;
				repaint();
			}
		});
		btn2.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e){
				flag = 2;
				repaint();
			}
		});
		btn3.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e){
				flag = 3;
				repaint();
			}
		});
		btnClear.addActionListener(new ActionListener() {
			public void actionPerformed(ActionEvent e){
				flag = 0;
				repaint();
			}
		});
		flag = 0;
	}
	public void paint(Graphics g){
		switch (flag) {
			case 0:
				break;
			case 1:
				g.drawImage(myImg[0], 140, 80, this);
				break;
			case 2:
				g.drawImage(myImg[1], 140, 80, this);
				break;
			case 3:
				g.drawImage(myImg[2], 140, 80, this);
				break;
		}
	}
}

コメントを見れば大体理解できるとおもいますが...、まず、アップレット起動時に...、

  1. 画像データ3つをロードして
  2. レイアウト用パネル作成して
  3. パネルのレイアウト方式を設定して
  4. ボーダーレイアウトを設定して
  5. 画像消去ボタンを作成して
  6. パネルをNorth(上部)に配置して
  7. 画像消去ボタンをSouth(下部)に配置して
  8. ボタン毎のイベント処理メソッドを定義する

ポイントは、GUI部品のaddとレイアウトのaddは、別ってことです。混同しないようにしてください。

あと、アップレット表示時に、アップレット起動時に設定した flag の内容に従って、switch文で振り分け、画像を表示してます。

◆ MS-DOSプロンプトからそのソースをコンパイルします。

ソースファイルが完成したら、MS-DOSプロンプトからそのソースをコンパイルします

D:\javalean>javac jlearn07.java
D:\javalean>dir /B
jlearn07.java
jlearn07.class

◆ APPLETタグで本クラスを指定したHTMLファイル(jleran07.htm)作成します。

jlearn07.htmの内容

<HTML>
<BODY>
<APPLET CODEBASE="../applet/" CODE="jlearn07.class" WIDTH="300" HEIGHT="300">
</APPLET>
</BODY>
</HTML>

        CODEBASE属性は、jlearn07.classとjlearn07.htmが同じフォルダーにあれば不要です。
        また、CODEBASE属性を指定しない場合、セキュリティ上の理由で参照可能なフォルダーは、
        現在の文書が含まれているフォルダーのサブフォルダーのみです。

さぁ! 7回目のAです。クリックしてアプレットを体験してください。

目次