GUIクラス GUI:グラフィカルユーザーインターフェース(GraphicalUserInterface)の 略 画 像 (アイコン,メニュー,ボタンなど)を 利 用 して, 操 作 性 を 高 めたコンピュータとのインターフェース 機 能.Windows,Mac OS など 多 くのパソコン OSで 利 用 されている. GUIを 持 つプログラムの 特 徴 枠 で 囲 まれたウインドウ 上 にボタンやテキスト 入 力 域 などの 部 分 を 表 示 する ユーザーがそれらにマウスやキーボードを 使 って 働 きかける ユーザーからの 働 きかけに 応 じてプログラムが 動 く Javaの 場 合 GUIを 作 成 するための 部 品 やプログラムがクラスとして 存 在 する. GUIクラス (コンピュータ 環 境 (プラットフォーム)に 依 存 しないプログラムの 作 成 が 可 能 ) クラスを 拡 張 して 多 数 の 類 似 するクラス( 部 品 )を 作 成 している 関 連 するクラスやインターフェースをグループごとにまとめている(パッケージ) Javaで 利 用 される GUIパッケージ AWT パッケージ(AbstractWindowsToolkit) GUIの 基 本 クラス 群 Swingパッケージ AWTを 拡 張 して 開 発 されたツールキット. 利 用 時 には Swingも 必 要 コンポーネントの 種 類 教 科 書 図 10.2 Swingが 提 供 するコンポーネントの 階 層 図 (AWTのコンポーネントも 含 まれている) Swingの 全 てのクラスは Containerクラス(AWTコンポーネントのひとつ)のサブクラスである. さらに,J で 始 まるほとんどのクラスは JComponentのサブクラスである.( 例 えば JComponentは Containerを 継 承 して 作 られる ) コンポーネントは 次 の3つに 分 類 される トップレベルコンテナ 画 面 上 に 表 示 するために 必 要 となるコンポーネント. GUIの 内 容 を 表 示 する 領 域 (コンテントペイン)があり,ウィンドウや Webブラウザ 上 に 表 されるコンポーネ ントはコンテントペイン 上 に 置 くこととなる 中 間 コンテナ コンポーネントを 実 際 に 配 置 する( 描 画 する) 場 所 となるコンポーネント( 下 位 レベルのコンポーネントは( 通 常 は) 中 間 コンテナの 中 に 配 置 する. 一 方 中 間 コンテナはトップレベルコンテナのコンテントペインにな る.) アトミックコンポーネント 下 位 レベルのコンポーネント.ボタンやラベルなどの 個 々の GUI 部 品 ( 直 接,トップレベルコンテナに 配 置 されることもある. 特 に,JAppletの 場 合 ) -1-
アトミックコンポーネント ( 部 品 )<ボタン, 文 字 > 中 間 コンテナ ( 部 品 を 置 く 場 所 ) トップレベルコンテナ (GUI を 表 示 するための 場 所.コンテントペイン) Swingコンポーネントを 利 用 する 手 順 サンプル 10.1 (Helo.java)について ( 教 科 書 p103) 1つのラベルと2つのボタンを 作 成 する ( 処 理 内 容 ) mainメソッド 1 Hell oクラスのオブジェクト 作 成 2 Hell oオブジェクトを 表 示 するためのフレーム 3 トップレベルコンテナを 作 成 する 3 そのコンテナに Hell oオブジェクトを 置 く 4 フレームに 対 して packメソッド 5 setvisibleメソッドを 実 行 し, 見 えるようにする L20 L21 L22 L23 L24 L25 プログラム 上 の 手 順 (1) GUIパッケージをインポート L1,2 * は 全 てのコンポーネントをあらわす java.awt.* :: java.awtパッケージに 多 くのクラスのファイルが 存 在 し,それら 全 てを 対 象 とする. javax.swing.*::swingパッケージの 組 み 込 み (2)コンテナを 用 意 L4 Heloクラス 自 身 がコンテナとなる. (Hell oクラスは JPanel( 中 間 コンテナ)のサブクラスなので Heloも 中 間 コンテナと 言 える) (3)コンポーネント(ラベルとボタン)を 作 成 する L9~11 コンテナに 配 置 するコンポーネントの( 具 体 的 な)オブジェクトを 作 成 する(ボタン2つ,ラベル1つ) (4)コンポーネントの 配 置 方 式 の 設 定 レイアウトマネージャの 機 能 に 任 せる 場 合 が 多 い.(デフォルトに 存 在 ) はじめから 配 置 方 式 (レイアウト)が 用 意 されている (ex) 配 置 方 式 の 設 定 Containerクラスの setlayoutメソッドの 利 用 引 数 は レイアウトクラスのオブジェクトを 指 定 L13 レイアウトマネージャ = レイアウトを 自 動 的 に 設 定 し,コンポーネントを 配 置 する 管 理 機 能 クラスとして 存 在 し,そのクラスのオブジェクトを 利 用 する -2-
(5)コンポーネントを 配 置 <コンストラクタ 内 で 実 行 > コンテナにコンポーネントを 置 く Containerクラス(スーパークラス)の( 継 承 された)addメソッドの 利 用 L14-16 (JPanelの addメソッドを 利 用 する) addメソッド( 配 置 するコンポーネント, 配 置 する 領 域 ) (ex)add(b1, BorderLayout.CENTER) b1(ボタン)を BorderLayoutレイアウトの CENTER( 中 央 )に 置 く (6)トップレベルコンテナを 用 意 (mainメソッド 内 で 行 う) L21 中 間 コンテナを 置 くための トップレベルコンテナ を 設 定.メインウィンドウとなる Jframe クラスのオブジ ェクトを 作 成.この 上 に 中 間 コンテナ Heloオブジェクトを 置 く. (7)トップレベルコンテナのコンテントペインを 取 得 L22 中 間 コンテナを 置 くための 場 所 (コンテントペイン)を 設 定 する Jframeのコンテントペインは JframeのオブジェクトメソッドgetContentPaneメソッドを 利 用 し,そしてコン テナ(Containerクラス)のオブジェクトとする (8)トップレベルコンテナのコンテントペインへのコンテナの 配 置 (Containerクラスの addメソッドを 利 用 ) << 教 科 書 P103 リスト10.1>> 1:import java.awt.*; 2:import javax.swing.*; 3: 4:class Hello extends JPanel{ 5: JLabel label; //ラベル 用 の 変 数 6: JButton b1, b2;//ボタン 用 の 変 数 7: 8: Hello( ){ Hell oコンストラクタ ( 中 間 コンテナおよびその 内 部 からなる GUIの 作 成 ) 9: label = new JLabel("こんにちは"); //JLabelオブジェクトの 生 成 10: b1 = new JButton("ボタン1"); //JButton オブジェクトの 生 成 11: b2 = new JButton("ボタン2"); //JButton オブジェクトの 生 成 12: 13: setlayout(new BorderLayout()); // 配 置 方 式 の 設 定 14: add(label, BorderLayout.NORTH); //ラベルを 置 く 15: add(b1, BorderLayout.CENTER); //ボタンを 置 く 16: add(b2, BorderLayout.EAST); //ボタンを 置 く 17: } 18: 19: public static void main(string args[]){ 20: Hello h = new Hello(); //Hello のオブジェクトを 生 成 21: JFrame frame = new JFrame("Hello"); //JFrame オブジェクトを 生 成 22: Container c = frame.getcontentpane(); //フレームの 内 容 表 示 域 を 得 る 23: c.add(h, BorderLayout.CENTER); //フレームにHello オブジェクトを 置 く 24: frame.pack(); //フレームを 必 要 最 小 の 大 きさにする 25: frame.setvisible(true); //フレームを 画 面 に 見 せる 26: } 27:} -3-
JPanel 中 間 コンテナ( 部 品 を 置 く 場 所 ) コンテントペイン c こんにちは add c.add で 配 置 アトミックコンポーネント ( 部 品 )<ボタン, 文 字 > (2)~(6) (7) トップレベルコンテナ の 作 成 (GUI を 表 示 するための 場 所.コンテントペイン) (8) こんにちは プログラム 内 の 処 理 の 流 れ レイアウト 方 式 1レイアウトの 方 法 プログラム(クラス)で 自 動 的 にレイアウトを 設 定 する 機 能 (レイアウトマネージャ) レイアウトマネージャ(コンテナ 内 のコンポーネント( 部 品 )の 相 対 位 置 を 決 める. 大 きさ, 位 置 を 制 御 する) (マウスによって)ウィンドウの 大 きさを 変 えても 自 動 的 に 大 きさを 変 えてくれる 2レイアウトマネージャの 設 定 コンテナにはデフォルトのレイアウトマネージャが 設 定 されている. 自 分 で 設 定 するには, Containerクラスの setlayoutメソッドを 利 用 する ( 引 数 はレイアウトクラスのオブジェクト) Containerc=getContentPane(); c.setlayout(newflowlayout(); L13(Helo.java) 3コンポーネントの 大 きさをの 決 定 ( 通 常 )コンポーネントの 大 きさはレイアウトマネージャが 調 整 して 決 定 する コンポーネントは 予 め, 最 大 サイズ(MaximunSize), 望 むサイズ(PreferedSize), 最 小 サイズ(Minimum Size)の 情 報 をもつ 自 分 でこれらの 大 きさを 設 定 したい 場 合 [ 方 法 1]Jcompontクラスの set***sizeメソッドを 利 用 する (ex) JPanelp=newJPanel(); p.setminimumsize(newdimension(150, 100); 最 小 サイズを 設 定 Dimensionクラス= コンポーネントの 幅, 高 さを 扱 う [ 方 法 2]JComponentのメソッド get***size()をオーバーライド (ex) Dimension getminimumsize(){ // 最 小 値 を 返 す returnnewdimension(150,100); } レイアウト 方 式 の 種 類 ( 後 に 具 体 的 な 処 理 例 ) (1) FlowLayout コンポーネントをPreferredSize 内 で 横 一 行 に 配 置 する.1 行 に 入 らなかった 場 合 は 複 数 行 に 渡 って 配 置 する. 少 数 のコンポーネントの 配 置 向 き コンポーネントの 入 れ 方 add(comp) (compはコンポーネントのオブジェクト) add(comp,2) (compはコンポーネントのオブジェクト,2は 配 置 する 位 置 ) -4-
(ex) setlayout(newflowlayout(flowlayout.left,10,20); 上 の add(comp)は レイアウトの 対 象 となるパネル( 張 り 付 く).add( 張 り 付 く 部 品 ) で 表 示 する (2)BorderLayout コンテナを5つの 領 域 ( 上 部, 下 部, 右, 左, 中 央 )に 分 けて,そのどこかにコンポーネントを 配 置 する. コンポーネントの 配 置 には add(comp, BorderLayout.NORTH) 上 は add( 配 置 するコンポーネント, 位 置 ) (3)GridLayout コンポーネントを 同 じ 大 きさの 格 子 状 に 縦 横 に 配 置 する. 格 子 高 さは 一 番 大 きな Prefered heightに, 幅 は 一 番 大 きな Prefered witdh となる. (ex)コンポーネントをn 行 で 配 置 した 場 合 setlayout(newgridlayout(n,0) (*,*)は 片 方 しか 有 効 でない( 行 優 先 ) 行 数 が 0でない 列 数 =(コンポーネント 数 + 行 数 1)/ 行 数 行 数 が 0 行 数 =(コンポーネント 数 + 列 数 1)/ 列 数 コンポーネント 数 が 10の 場 合 (10,3) の 場 合 列 =(10+10-1)/10=1 (0,5) の 場 合 行 = (10+5-1)/5=2.8=2 (4)BoxLayout コンポーネントを 上 から 下 へ,あるいは 左 から 右 への 配 置. コンストラクタで 並 べる 方 向 を 指 定. 個 々のコンポーネントの 大 きさが 優 先 される 各 コンポーネントの 大 きさが 異 なる 1 高 さ:preferredheightで 高 さを 自 動 的 にあわせる 2 幅 : 一 番 大 きな preferedwidthにそろえる.ただし,maximumsize 以 上 にはならない. 3コンポーネントの 揃 え: JComponent ク ラ ス の setalignmentx メ ソ ッ ド を 実 行 す る. 引 数 は JComponent.LEFT_ALIGNMENTなどを 設 定. 4 並 べる 方 向 : BoxLayoutの 第 2 引 数 (BoxLayout.Y_AXIS: 縦 方 向, BoxLayout.X_AXIS: 横 方 向 ) (ex)setlayout(newboxlayout(this, BoxLayout.Y_AXIS); (5) CardLayout コンテナに 複 数 のコンポーネントを 重 ねて 置 き, 順 次 ( 上 から)コンポーネントを 表 示 するレイアウトマネー ジャ. 複 数 のコンポーネントに 名 前 をつけて, 順 番 にコンテナを 入 れておく. CardLayoutのコンテナにコンポーネントを 入 れる 方 法 aadd(comp,name) aadd(comp,name,index) comp=コンポーネント, name=コンポーネントを 識 別 する 名 前, index=コンポーネントの 山 のどこに 入 れるかの 番 号 大 きさでは 最 大 の preferedheightと preferedweighにあわせる. (ex)slide1~5までの 文 字 列 を 貼 り 付 けた5 個 のラベルをCardLayoutパネルに 配 置 する -5-
JPanelp=newJPanel( ); CardLayoutlayout=newCardLayout(); p.setlayout(layout); for(inti=1;i<=5; i++){ p.add(newjlabel( SLIDE +i), SLIDE +i); } 次 のラベルを 表 示 する 場 合 :: layout.next(p); アイコンイメージの 表 示 アイコンの 貼 り 付 け アイコン = 固 定 サイズの 絵 (GIFあるいは JPEG 形 式 ) ファイルとして 存 在 する JButton,JLabelにアイコンを 貼 り 付 けられる 貼 り 付 ける 方 法 1イメージファイルを 指 定 して ImageIconのオブジェクトを 作 成 2JButtonのコンストラクタに 渡 す. ImageIcon icon =newimageicon( dance.gif ); // dance.gif がアイコン JButtonb=newJButon(icon); (あるいは JButton b=newjbutton(stringtext, Iconicon);など) JLabel l1=newjlabel(icon); // 教 科 書 P115 JLabel l2=newjlabel( 文 字, icon, SwingContents.Center); Swing コンポーネントの 種 類 ラベル JLabel: 文 字 列 とアイコン( 固 定 サイズの 絵 )を 表 示 するための 領 域 ( 入 力 は 受 け 付 けない) ボタン (1)AbstractButonクラス 押 す などの 操 作 により 処 理 が 行 われる 道 具 として 以 下 のクラス(AbstractButtonクラスのサブクラ ス)がある JButton,JcheckBox,JradioButon,JtoggleButon など 教 科 書 p101 図 10.2 参 照 のこと 具 体 的 なサブクラスの 例 ( 通 常,これらを 利 用 ) (2)JButton 文 字 列 とアイコンイメージを 貼 り 付 けられる 四 角 のボタン (3)JCheckBox 選 択 されている(true)か,いないか(false)の2つの 状 態 を 持 つボタン. 小 さな 四 角 でボタンを 選 択 すると チェックマークがつく JPanelクラス コンポーネントを 入 れるためにコンテナパネル. いくつかのコンポーネントをまとめてパネルに 配 置 することにより グループとして 扱 える. JPanelの 中 にコンポーネントを 入 れるためには Containerクラスから 継 承 した addメソッドを 使 う(デフ ォルトのレイアウトマネージャは FlowLayout) -6-
JFrame クラス JFrameのオブジェクトはウィンドウ(フレーム)である. ウィンドウは 境 界 線,タイトルやボタンを 持 った 画 面 枠 このクラスによって 画 面 上 に 表 示 するための 場 (Window)を 作 成 する (デフォルトのレイアウトマネージャは BorderLayout) JFrameはトップレベルコンテナに 相 当 する JFrame 上 のコンテントペインの 上 にコンポーネントを 置 く (1)JFrame 上 のコンテントペイン 上 にコンポーネントを 置 くには Container c=frame.getcontent(); //コンテントペインの 取 得 c.add(comp,border.) // compは 貼 り 付 けるコンポーネント (2)JFrameのインスタンスは 作 っただけでは 見 えないので setvisibleメソッドで 可 視 化 する (3)packメソッド フレームの 大 きさをコンポーネントの 望 むタイプを 表 示 するための 最 小 限 の 大 きさに する. コンポーネントの 色 とフォントの 設 定 ( 教 科 書 p123) 1. 色 の 設 定 (1) 背 景 色 (Background) (2) 描 画 色 (Foreground) 背 景 色 : JComponentの setbackground (colorc) 描 画 色 : JComponentの setforeground(colorc) 具 体 的 な 色 を 指 定 する 場 合 は Colorクラスのオブジェクトを 利 用 する setforeground(color,green) setforeground(newcolor(0,255,0) (**, **,**)は 左 からR( 赤 ),G( 緑 ),B( 青 )の 輝 度 を0~255 の 値 で 色 を 設 定 する (0,0,0) 黒, (255,25,255) 白 2.フォントの 指 定 文 字 フォントは JComponent の setfontメソッドを 利 用 する (ex) comp.setfont(newfont( Serif, Font.PLAIN,32); Layout マネージャーの 実 行 例 プログラムは 教 科 書 リスト 10.1 Hello.java を 利 用 /* BorderLayout */ setlayout(new BorderLayout( )); // 配 置 方 式 の 設 定 add(label, BorderLayout.NORTH); //ラベルを 置 く add(b1, BorderLayout.CENTER); //ボタンを 置 く add(b2, BorderLayout.EAST); //ボタンを 置 く -7-
/* FlowLayout */ setlayout(new FlowLayout(FlowLayout.LEFT, 10, 2)); // 配 置 方 式 の 設 定 ( 左 寄 せ, 部 品 間 の 水 平 方 向 の 隙 間 10, 垂 直 方 向 の 隙 間 2) add(label); // label の 配 置 add(b1,0); // b1 を 先 頭 に 配 置 add(b2); // b2 の 配 置 /* GridLayout */ setlayout(new GridLayout(2, 0)); // 配 置 方 式 の 設 定 (2 行 の 表 示 ( 列 は 部 品 数 で 決 定 するため 任 意 の 数 で 可 能 ) add(label); add(b1); add(b2); /* BoxLayout */ setlayout(new BoxLayout(this, BoxLayout.Y_AXIS)); // 配 置 方 式 の 設 定 (Y 方 向 に 表 示 ) add(label); add(b1); add(b2); /* CardLayout */ //-- フィールドに 以 下 を 追 加 static CardLayout layout; //-- Hello( ) 内 で 以 下 を 記 述 layout= new CardLayout(); setlayout(layout); // 配 置 方 式 の 設 定 add(label, "No.1"); // 引 数 第 2 項 によりコンポーネントの 名 前 を 設 定 add(b1, "No.2"); add(b2, "No.3"); //-- main( ) 内 で 以 下 を 記 述 for(int i=0;i<2;i++){ try{ Thread.sleep(2000); layout.next(h); }catch(exception e){ } } 2 秒 後 2 秒 後 -8-