アプレットⅠ

Transcription

1 アプレット Ⅰ 今回の課題項目 アプレット ( アプレットの作成 コーディング コンパイル 実行 ) アプレット ( グラフィックス表示 文字の描画 グラフィックスの描画 ) アプレット ( 各種グラフィックスメソッド ) 今回の重点項目 アプレット ( アプレットの作成 ) アプレット ( グラフィックス表示 ) アプレット ( グラフィックスメソッド ) -1-

2 アプレット Java はオブジェクト指向型のプログラム言語で有る Java では C 言語やPascal と謂う他のプログラム言語同様に 数値計算やファイル操作を行なう事は勿論 絵や文字の描画 アニメーション キーボードやマウスでの操作等も行なう事が出来る 但し Java の最大の特徴は Java で作成したプログラム ( アプレット ) をホームページ上に置く事が出来る為 ホームページの表現能力を大きく飛躍する事が出来る点に有る アプレットの仕組 アプレット (applet) アプレットとは 単独で動作する事は無く 他のアプリケーションの中に組み込まれた形で実行される小さなプログラムを謂う 実質的には WEB ブラウザ内に表示して実行するタイプのプログラムで有る Java 対応の Web ブラウザでは アプレットを表示する為の専用タグをサポートして居り HTML のタグを記述する丈で簡単にアプレットを呼び出す事が出来る アプレットは 今迄に作成したアプリケーションとは異なる構造を仕て居り アプリケーションを其の儘 HTML のタグから呼び出しても アプレットと仕て動かす事は出来ない アプレットと仕て使用するプログラムは アプレットと仕ての利用に必要な機能を備えて居なければ成らない Java には 其の為の専用クラス java.applet.applet が用意されて居る Applet クラスは WEB ページに埋め込まれるアプレット 又は Java アプレットビューアで表示されるアプレットのスーパークラスで有り アプレットと其の環境との間の標準インタフェースの役割を果たす 此のクラスを継承してクラス定義をすれば 其れが自動的にアプレットと仕て認識される様に成る アプレットのプログラム形式 アプレットのプログラムは 下記の様な形を仕て居る 但し Applet クラスで定義されて居る下記の総てのメソッドを記述する必要は無く 必要なメソッド丈をオーバーライドすれば良い import java.applet.applet; import java.awt.*; public class クラス名 extends Applet public void init() アプレットのロード時に実行 public void start() アプレットの開始時に実行 public void stop() アプレットの停止時に実行 public void destroy() アプレットのアンロード時に実行 public void paint() アプレットの表示で実行 アプレット用のソースコードは Applet クラスの継承と仕て作成する為 ファイルの冒頭で import する必要が有る 亦 継承なので アプレットのクラスは extends Applet で有る事が必要で有る 更に アプレットのクラスは ブラウザに依りインスタンス化されて実行される為 外部から参照可能と謂う意味で public 修飾子が付けられて居る事が必要で有る -2-

3 アプレットの作成 コーディング (coding) 下記のコードを テキストエディタで入力し HelloWorld.java と謂うファイル名で保存する import java.applet.applet; import java.awt.graphics; public class HelloWorld extends Applet public void paint(graphics g) g.drawstring("hello World!", 10, 10); paint メソッドは アプレットを描画する為のメソッドで有る paint メソッドの引数では アプレットの描画の対象と成るオブジェクトで有る Graphics クラスのインスタンスが渡されて来る 此のインスタンスは描画領域 色 フォント等 描画に関する様々な情報を管理して居る Graphics クラスは Java のグラフィカルユーザインタフェース (GUI) を提供するパッケージ java.awt(abstract Window Toolkit) で定義されて居り Java では 殆どのグラフィック系 ( 文字 画像の表示 ) に Graphics クラスを使用する 猶 アプレット自身も GUI コンポーネントで有る 猶 文字を表示するのに drawstring メソッドを使用して居る 此れは 画面に文字を描画するメソッドで Graphics クラスで定義されて居る コンパイル (compile) プログラムの記述が終了すれば コンパイルを行う 記述等に間違いが無ければ クラス名.class と謂うファイルが作成される ( 上記では HelloWorld.class) 実行 (execute) 作成したアプレットを WEB ブラウザで実行し 表示するには HTML ファイルで アプレットを表示する場所に 下記の様に APPLET タグを使用して記述する 猶 width と height には 表示するアプレットのサイズを指定する <APPLET CODE=" プログラム名 " WIDTH="width" HEIGHT="height"></APPLET> 例として 上記のプログラムをコンパイルして作成された HelloWorld.class の場合は 其れを表示させたい場所に下記の様に記述する <APPLET CODE="HelloWorld.class" WIDTH="300" HEIGHT="200"></APPLET> 此れで 指定の場所に HelloWorld が表示される 上記の例では 横 300 縦 200 の領域をアプレット用に確保して居る 此の領域は背景が表示されないので 背景画や背景色を設定して居る場合 其の大きさを確認する事が出来る 猶 領域外に文字を書いても画面には表示されない -3-

4 グラフィック表示 文字の描画 下記のコードを テキストエディタで入力し HelloWorld2.java と謂うファイル名で保存した後 コンパイルして HTML ファイルから呼び出し ブラウザで表示する import java.applet.applet; import java.awt.graphics; import java.awt.font; import java.awt.color; public class HelloWorld2 extends Applet public void paint(graphics g) g.drawstring("hello World!", 10, 10); // TimesRoman と言うフォントの通常フォントで 大きさが 18 ドットの文字を指定 g.setfont(new Font("TimesRoman", Font.PLAIN, 18)); g.drawstring("hello World!", 10, 40); // TimesRoman と言うフォントの通常フォントで 大きさが 36 ドットの文字を指定 g.setfont(new Font("TimesRoman", Font.PLAIN, 36)); g.drawstring("hello World!", 10, 70); // イタリック体の文字を書く g.setfont(new Font("TimesRoman", Font.ITALIC, 36)); g.drawstring("hello World!", 10, 110); // 太文字で書く g.setfont(new Font("TimesRoman", Font.BOLD, 36)); g.drawstring("hello World!", 10, 150); // 色を赤に変更して文字を書く g.setcolor(color.red); g.setfont(new Font("TimesRoman", Font.PLAIN, 36)); g.drawstring("hello World!", 10, 200); 此処では Graphics クラスで定義された下記のメソッドを使用して居る drawstring() 文字を書くメソッド setfont() 文字の大きさや書体を変えるメソッド setcolor() 文字の色を変えるメソッド亦 定数と仕て最初から用意されて居る色は 下記の13 色で有る black blue cyan darkgray gray green lightgray magenta orange pink red white yellow 此のアプレットは Sun Microsystems が提供して居る Java Plugin が無いと動作しない -4-

5 グラフィックスの描画 下記のコードを テキストエディタで入力し Draw.java と謂うファイル名で保存した後 コンパイルして HTML ファイルから呼び出し ブラウザで表示する import java.applet.applet; import java.awt.graphics; import java.awt.color; import java.awt.font; import java.awt.image; public class Draw extends Applet public void paint(graphics g) g.setcolor(color.black); g.drawrect(10, 10, 50, 50); g.setcolor(color.red); g.fillrect(70, 10, 50, 50); // (10,10)-(10+50,10+50) を対角とする // 四角形を黒色で描く // (70,10)-(120,60) の領域を // 赤で塗る g.drawline(130, 10, 170, 60); // (130,10)-(170,60) の線を書く ( 色は前の設定で赤 ) g.setcolor(color.green); g.drawarc(190, 10, 50, 50, 0, 360); g.setcolor(color.blue); g.fillarc(250, 10, 50, 50, 90, 180); g.setcolor(color.lightgray); g.fill3drect(310, 10, 50, 50, true); g.fill3drect(370, 10, 50, 50, false); // (190,10)-(240,60) に // 内接する円 ( 楕円 ) を 0 度から 360 度分描く // 角度 90 度の位置から // 180 度分 ( 半円 ) を塗り潰す // ボタン風の塗り潰し // 押される前 // 押された後 g.setcolor(new Color(127, 127, 255)); // 斯うすれば RGB で色を指定する事が出来る g.fillroundrect(10, 90, 80, 50, 10, 10); // 角の丸い四角 g.setcolor(new Color(160, 82, 45)); int xpoint[] = 150, 200, 180, 120, 100; int ypoint[] = 90, 110, 140, 140, 110; // (150, 90)-(200,110)-(180,140)-(120,140)-(100,110) で g.fillpolygon(xpoint, ypoint, 5); // 囲まれた領域を塗り潰す // squid.gif と言う画像ファイルを読み込み (250, 90) に表示 g.drawimage(getimage(getdocumentbase(), "squid.gif"), 250, 90, this); 画像ファイルは サーバから画像を取得するメソッドと表示するメソッドの 2 個が必要で有るが 取り敢えずはソースコードの様に 1 個の命令の様に使用する事が出来る 猶 アプレットに読み込める画像形式は GIF と JPEG で有る paint メソッドは 画面の描き換えが必要な時 即ち Java の有るサイトへアクセスした時やアイコン化状態から元に戻した時等に 自動的に呼び出されるメソッドで有る 其の為 態々 コードの中で paint メソッドを呼び出す必要が無い -5-

6 Graphics メソッド一覧 描画用の Graphics メソッドを 下記に示す 此等のメソッドは java.awt.graphics パッケージで 定義されて居る 猶 使用例中の g は Graphics クラスのオブジェクトを示す setfont 書式 setfont(font font) 表示する文字のフォントを font に切替える Font クラスのオブジェクト font は別で用意する必要が有る 使用例 g.setfont(new Font("TimesRoman", Font.PLAIN, 18)); // "TimesRoman" の通常フォントで 18dot のサイズを設定する // 通常は上記の様に Font クラスのコンストラクタと組み合わせて使用する 補足 Font クラスのコンストラクタの第 2 引数で使用出来る物は Font.PLAIN 通常 Font.ITALIC イタリック体 Font.BOLD 太字の3 種丈で有る setcolor 書式 setcolor(color c) 表示する色を c に切替える Color クラスのオブジェクト c は別で用意する必要が有る 使用例 g.setcolor(color.red); // 赤に設定する g.setcolor(new Color(100, 130, 34)); // R = 100, G = 130, B = 34 の抹茶色 // 既定色以外は Color クラスのコンストラクタを使用して RGB で指定する 補足 既定色は Color.white Color.lightgray Color.gray Color.darkGray Color.black Color.red Color.pink Color.orange Color.yellow Color.green Color.magenta Color.cyan Color.blue で有る drawstring 書式 drawstring(string str, int x, int y) x y の位置に文字列 str を表示する 表示するフォント 及び 色は setfont setcolor で設定する 使用例 g.drawstring("hello World!", 100, 100); // (100,100) の位置に Hello World! と表示する 補足漢字に付いては Unicode で漢字を書けば表示する事が出来る 但し Unicode で記述しなくても表示出来る場合も有る drawline 書式 drawline(int x1, int y1, int x2, int y2) (x1,y1) から (x2, y2) に線を引く 色は setcolor で設定する 使用例 g.drawline(100, 50, 130, 200);// (100, 50) - (130, 200) に線を引く 書式 補足 drawpolygon/fillpolygon drawpolygon(int xpoints[], int ypoints[], int npoints) fillpolygon(int xpoints[], int ypoints[], int npoints) x 座標の配列 xpoints と y 座標の配列 ypoints で指定された点を結ぶ閉じた多角形を描く npoints には 点の総数を指定する 始点と終点が一致しない場合は 自動的に両点間に線が引かれる -6-

7 書式 drawrect/fillrect drawrect(int x, int y, int width, int height) fillrect(int x, int y, int width, int height) (x, y) に width height の大きさの四角を描く fillrect は塗り潰し 色は setcolor で設定する 使用例 g.drawrect(50, 0, 100, 200); // (50, 0) - ( , ) を対角線とする四角を描く 補足左上座標と右下座標を指定するのでは無い事に注意 書式 drawarc/fillarc drawarc(int x, int y, int width, int height, int startangle int endangle) fillarc(int x, int y, int width, int height, int startangle, int endangle) 座標 (x, y) に有る大きさ width height の四角に内接する円弧を描く x の正の方向から startangle の角度から endangle 迄の弧を描く fillarc は塗り潰し 色は setcolor で設定する 使用例 補足 g.drawrect(50, 0, 100, 200);// (50, 0) - ( , ) を対角線とする四角を描く g.drawarc(0, 0, 100, 100, 0, 360);// 中心 (50, 50) 半径 50 の円を描く startangle,endangle の単位は度 startangle,endangle には負の値も使える 書式 使用例 draw3drect/fill3drect draw3drect(int x, int y, int width, int height, boolean raised) 座標 (x, y) に width height の大きさの四角を描く fillrect と違い 立体的な四角を描く raised が true の時は飛び出して居る四角 false なら凹んで居る四角に成る 色は setcolor で設定する g.fill3drect(50, 0, 100, 200, true);// (50, 0) - ( , ) を対角線とする四角を描く -7-

8 drawroundrect/fillroundrect 書式 drawroundrect(int x, int y, int width, int height, int arcwidth int archeight) fillroundrect(int x, int y, int width, int height, int arcwidth int archeight) 角の丸い四角を描く 色は setcolor で設定する 使用例 g.drawroundrect(50, 0, 100, 200, 10, 200); 書式 drawoval/filloval drawoval(int x, int y, int width, int height) filloval(int x, int y, int width, int height) 座標 (x, y) に有る大きさ width height の四角に内接する円弧を描く filloval は塗り潰し 色は setcolor で設定する 使用例 g.drawoval(0, 0, 100, 100);// 中心 (50, 50) 半径 50 の円を描く 書式 補足 drawpolyline drawpolyline(int xpoints[], int ypoints[], int npoints) x 座標の配列 xpoints と y 座標の配列 ypoints で指定された点を結ぶ連続した直線を描く npoints には 点の総数を指定する 始点と終点が一致しない場合は 図形は閉じない 書式 補足 drawimage drawimage(image img, int x, int y, ImageObserver observer) 座標 (x, y) に img で指定されたイメージを描く observer には イメージを描画するプロセスを通知するオブジェクトを指定する イメージ内の透明ピクセルは 背景に影響を及ぼさない 猶 drawimage メソッドで指定するイメージ img は java.applet パッケージの Applet クラスで定義されて居る getimage メソッドを使用して取得する getimage メソッドの書式は 下記の通りで有る getimage(url url, String name) // 記述例 :getimage(getdocumentbase(), "squid.gif") url : イメージのベース位置を示す絶対 URL( アプレットが存在する URL) name : イメージの位置 ( 引数 url との相対位置で指定する ファイル名 ) 亦 getimage メソッドで指定する url は java.applet パッケージの Applet クラスで定義されて居る getdocumentbase メソッドを使用して取得する 此のメソッドには 引数は無く 当該アプレットが組み込まれて居るドキュメント (HTML ファイル ) の URL を戻り値に返す -8-

9 パラメータの設定 パラメータ (parameter) とは Java では UNIX のコマンドのコマンド引数の様に パラメータを指定する事に依り プログラムを制御する事が出来る パラメータの指定は パラメータ 1= 値 1 パラメータ 2= 値 2 と謂う様に変数に値を代入してから アプレットを呼び出すイメージで有る パラメータ設定の方法 パラメータの設定は HTML で アプレットを呼び出す時に行う 通常 何もパラメータを設定しない時は アプレットの呼び出しは 前述した様に 下記の様に記述する <APPLET CODE=" プログラム名 " WIDTH="width" HEIGHT="height"></APPLET> width : アプレットを表示する領域の幅 height : アプレットを表示する領域の高さ プログラム名.class を パラメータ 1= 値 1 パラメータ 2= 値 2 と謂う 2 個のパラメータを指定して呼び出す場合 下記の様に HTML を記述する <APPLET CODE=" プログラム名.class" WIDTH="width" HEIGHT="height"> <PARAM NAME=" パラメータ 1" VALUE=" 値 1"> <PARAM NAME=" パラメータ 2" VALUE=" 値 2"> </APPLET> 猶 パラメータは 必要な丈 幾つでも指定する事が出来る パラメータ制御の出来るアプレットの作成 パラメータの値を取得するメソッドは getparameter メソッドで有る getparameter メソッドは java.applet パッケージの Applet クラスで定義されて居り 書式は 下記の通りで有る 変数 1 = getparameter ( " パラメータ 1" ); 上記の様に記述すると HTML で指定された パラメータ 1 の中身 (= 値 1) が 変数 1 に代入される ( 此の時 パラメータの名前は 大文字と小文字は区別されるので注意が必要で有る ) 亦 getparameter メソッドで取得される値は文字列で有る 若し 数字をパラメータに設定したい場合は 文字列を数字に変換する必要が有る 文字列の数値変換には int 型の場合は java.lang パッケージの Integer クラスで定義されて居る parseint メソッドを使用する i= Integer.parseInt("123"); 上記の様に記述すると 変数 i に整数 123 が代入される 猶 勿論 パラメータのデータ型に応じて Long や Float や Double 等のクラスのメソッドを使用して 文字列を数値に変換する -9-

10 下記のコードを テキストエディタで入力し HelloWorld3.java と謂うファイル名で保存した後 コンパイルして 実行する パラメータ Message で表示する文字列を パラメータ Color で描画色を パラメータ Location で x 座標を指定する事が出来る 猶 パラメータを指定しない場合は 夫々れの規定値が使用される 亦 パラメータ Color で指定出来る色は 赤 青 緑 黄色の4 色で 各々 Red Blue Green Yellow と 文字列定数で指定する import java.applet.applet; import java.awt.graphics; import java.awt.font; import java.awt.color; public class HelloWorld3 extends Applet String message = null; String colorname = null; String location = null; Color textcolor; int xlocation; // パラメータ変数 // パラメータ変数 // パラメータ変数 // 色を表す変数 // 位置を表す変数 // 此の関数はアプレットが最初に画面に現れた時に 1 回丈自動で呼ばれる public void init() message = getparameter("message"); // パラメータ Message の値が代入される if (message == null) // パラメータが無い時の処理 message = "Hello World!"; colorname = getparameter("color"); if (colorname == null) textcolor = Color.black; else if (colorname.equals("red")) textcolor = Color.red; else if (colorname.equals("blue")) textcolor = Color.blue; else if (colorname.equals("green")) textcolor = Color.green; else if (colorname.equals("yellow")) textcolor = Color.yellow; else textcolor = Color.black; location = getparameter("location"); if (location!= null) xlocation = Integer.parseInt(location); else xlocation = 10; // パラメータ Color の値が代入される // パラメータが無い時の処理 // 文字列の比較は斯う記述する // 但し colorname が null の時はエラーが発生 // 定義外の色を指定した時用 // 文字列を数値に変更 public void paint(graphics g) g.setfont(new Font("TimesRoman", Font.PLAIN, 36)); g.setcolor(textcolor); // 色の設定 g.drawstring(message, xlocation, 40); -10-

11 演習 文字列の描画 下記のコードを テキストエディタで入力し DrawString.java と謂うファイル名で保存した後 コンパイルして HTML ファイルから呼び出し ブラウザで表示する import java.applet.*; import java.awt.*; public class DrawString extends Applet Font textfont; String message="king of Squid"; String fontname="timesroman"; Color textcolor; Color bgcolor; Image g2; Graphics OffG; int ms_width; int h_size; int font_size=20; public void init() Dimension d = size(); g2 = createimage( d.width, d.height); OffG = g2.getgraphics(); textfont = new Font( fontname, Font.PLAIN, font_size ); textcolor = Color.red; bgcolor = Color.black; ms_width = getfontmetrics( textfont ).stringwidth( message); h_size = (int)(((d.height-font_size) /2)+ font_size -5); public void paint( Graphics g ) OffG.setColor( bgcolor ); OffG.fillRect( 0, 0, size().width, size().height); OffG.setFont( textfont ); OffG.setColor( textcolor ); OffG.drawString( message, (size().width-ms_width)/2, h_size ); g.drawimage( g2, 0, 0, null); public void update( Graphics g ) paint(g); -11-

12 Dimension d = size( ); HTML から受け取るアプレットの画面サイズを取得する g2 = createimage( d.width, d.height); OffG = g2.getgraphics( ); 描画画面と仮想描画画面を生成する 仮想画面に描画した後 其れを描画画面にコピーする方法を採れば 文字を動かした時等に発生するチラツキを無くす事が出来る ms_width = getfontmetrics( textfont ).stringwidth( message); フォントに依り文字幅が違う為 此の様に文字列の幅を計算する 但し 此の方法は文字幅を個別に計算して居る訳では無い h_size = (int)(((d.height-font_size) /2)+ font_size -5); 文字列の y 軸位置の算出する g.drawimage( g2, 0, 0, null); 仮想画面から アプレットの描画画面にコピーする public void update( Graphics g ) Window が隠れたり サイズが変更された時に此のメソッドが呼び出される 自動的に呼び出されるメソッド init メソッド init メソッドは アプレットが読み込まれた時に 1 度丈 自動的に呼び出される 其の為 此処で パラメータの読み込みや変数の初期化等を行う事が多い paint メソッド paint メソッドは 画面の描き換えが必要な時 (Java の有るサイトへアクセスした時やアイコン化して居たのを元に戻した時等 ) に 自動的に呼び出される 画像を描く命令を paint メソッドの中に記述する丈で プログラムで paint メソッドを呼び出す必要は無い 其の為 メソッド名を他の名前に変えて仕舞う事は出来ない repaint メソッド repaint メソッドは 最初 update メソッドを探しに行き update メソッドが見付かれば update メソッドを 見付からなければ画面をクリアしてから paint メソッドを呼び出す ( 此の説明は正確では無いが 此の様な動作を行うと考えると良い ) -12-