広告

■□■□■□■□■□■□■□■□■□■□■□■□■□■□■
                      2010年11月21日

    Java総合講座 - 初心者から達人へのパスポート
                  2009年11月開講コース 030号

                                セルゲイ・ランダウ
 バックナンバー: http://www.flsi.co.jp/Java_text/
■□■□■□■□■□■□■□■□■□■□■□■□■□■□■


-------------------------------------------------------
・現在、このメールマガジンは以下の2部構成になっています。
[1] 当初からのコース:vol.xxx(xxxは番号)が振られています。
   これは現在、中級レベルになっています。
[2] 2009年11月開講コース:xxx号(xxxは番号)が振られています。
   これは現在、初心者向けのレベルになっています。
・このメールマガジンは、画面を最大化して見てください。
小さな画面で見ていると、不適切な位置で行が切れてしまう
など、問題を起すことがあります。
・このメールマガジンに掲載されているソース・コード及び
文章は特に断らない限り、すべて筆者が著作権を所有してい
ます。また、これらのソース・コードは学習用のためだけに
提供しているものです。
-------------------------------------------------------


========================================================
◆ 01.データベースを使用するアプリケーションの開発(続き)
========================================================

では、再びEclipseを起動して、ボタン(JButton)のプロパティーを
いじってみましょう。

もしHumanResourceJFrame.javaのエディターを閉じてしまった人
は、パッケージ・エクスプローラーの中のJStudy1の中のsrcの中の
jp.co.flsi.lecture.uiの中のHumanResourceJFrame.javaをダブル・
クリックすればVisualEditorのエディターが開きます。

前回貼り付けたJButtonのプロパティーを編集するためには、
JFrameの画像に張り付いているJButtonをクリックするか、あるい
は「Java Beans」タブの下のjButtonを選択(クリック)してから、
「プロパティー」タブをクリックします。

プロパティーのリストの下のほう(下のほうにスクロールしてみて
ください)に「text」というプロパティーがありますので、その
右側に「テスト・ボタン」という値を入力してみてください。

入力してEnterキーを押すと上のJFrameの画像に張り付いたJButtonに
「テスト・ボタン」という文字が表示されます。要するに、これは
ボタンのラベルのプロパティーです。
(なお、ラベルを変更するには、GUI部品をクリックして選択状態に
してから再度クリックするとその先頭に入力域が表示されるので、
そこを書き換えるという方法もあります。)

ちなみにソース・コードを見ると

jButton.setText("テスト・ボタン");

という行ができていて、ソース・コードにも反映されていることが
わかりますね。

ついでにお話しておくと、「text」プロパティーの下にリストされて
いる「toolTipText」というプロパティーは、そのGUI部品(ここでは
JButton)にマウス・ポインターを乗せると簡単な説明文を表示する
ためのものです。

こういった細かい芸当が簡単に利用できるのもSwingのおかげです。

ちょっと、試してみましょう。

「toolTipText」の右側に「このボタンを押しても何もしません。」と
いう値を入力してみてください。

保管(Ctrl + S)してから、HumanResourceJFrameを実行してみましょう。
(パッケージ・エクスプローラーの中のHumanResourceJFrameを右クリックし、
「実行」→「Javaアプリケーション」を選択する。)

JFrameのウィンドウが開いたら、ボタンの上にマウス・ポインターを乗せて、
ちょっと待ってみてください。
「このボタンを押しても何もしません。」という表示が出ますね。

では、それが確認できたら、このJFrameのウィンドウは(×ボタンをクリッ
クして)閉じてください。


では、今度はボタンに色をつけてみましょうか。

JButtonのプロパティー(ボタンをクリックしてから「プロパティー」タブを
クリックする)の中の「background」プロパティーの値を変更して、RGBの値
を255,170,0に変えてみてください。変更の仕方は、前回のJPanelの色を変更
したのと同じです。やり方を忘れた人は前回のメールを復習してください。

次に同様に「foreground」のほうを赤色にしてみましょう。RGBの値を255,0,0
にするわけですが、「Java Property Editor」ウインドウを開いたときに
「Named Colors」タブをクリックして色の名前のリストの中から選択するとい
う方法もありますので試してみてください。

「foreground」の値を変更すると、文字の色が変わることがわかりますね。


あと、ボタンのプロパティーで確認しておいたほうがいいものといったら、
フォントの設定くらいでしょう。

JButtonの「font」プロパティーの値を選択してみてください。その右側に表示
される小さなボタンをクリックすると、「Java Property Editor」ウインドウ
が表示され、「Name」と「Style」と「Size」がリストされていますね。

いうまでもなく「Name」はフォントの名前で、「Size」はフォントのサイズです。

「Style」のうちのboldは太字、italicは斜体字、bold italicは太字でかつ斜体字、
plainは普通の字体を意味します。

試しに「Style」をitalicに変更してみてください。
ボタンの文字が斜体字に変わりますね。

なお、「Name」を変更する場合は、間違って英語専用のフォント名を選んでしま
うと日本語の文字が文字化けしてしまいますので、注意してください。


では、次にレイアウト・マネジャーを変更してみましょう。

その前に、現時点のJPanelのレイアウト・マネジャーを確認してみましょう。
ソース・コードの中で、getJContentPane()メソッドの部分

--------------------------------------------------------
   private JPanel getJContentPane() {
      if (jContentPane == null) {
         jContentPane = new JPanel();
         jContentPane.setLayout(new BorderLayout());
         jContentPane.setForeground(new Color(51, 51, 51));
         jContentPane.setBackground(Color.green);
         jContentPane.add(getJButton(), BorderLayout.NORTH);
      }
      return jContentPane;
   }
--------------------------------------------------------

の4行目をを見ると

jContentPane.setLayout(new BorderLayout());

となっていましたね。つまり、BorderLayoutになっているのでしたね。

HumanResourceJFrameを実行して、動きを見てみましょう。

HumanResourceJFrameを実行して表示されるJFrameのウインドウのサイズを変えて
みてください。あるいはウインドウを最大化してみてください。

中に張り付いているGUI部品(ここではJButton)もウインドウのサイズに合わせ
てサイズが変わりますね。

では、このJFrameのウインドウをいったん閉じましょう。

続いて、レイアウト・マネジャーを変更してみましょう。

ソース・コードの中で先ほどの

--------------------------------------------------------
   private JPanel getJContentPane() {
      if (jContentPane == null) {
         jContentPane = new JPanel();
         jContentPane.setLayout(new BorderLayout());
         jContentPane.setForeground(new Color(51, 51, 51));
         jContentPane.setBackground(Color.green);
         jContentPane.add(getJButton(), BorderLayout.NORTH);
      }
      return jContentPane;
   }
--------------------------------------------------------



--------------------------------------------------------
   private JPanel getJContentPane() {
      if (jContentPane == null) {
         jContentPane = new JPanel();
         jContentPane.setLayout(null);
         jContentPane.setForeground(new Color(51, 51, 51));
         jContentPane.setBackground(Color.green);
         jContentPane.add(getJButton(), null);
      }
--------------------------------------------------------

に書き換えて保管(Ctrl + S)してみましょう。

(注意:ソース・コードを書き換えたときに、VEエディターが不安定
になり画像がおかしくなることがあります。そのときは、いったん
Eclipseを終了したあと、再度Eclipseを起動してみてください。)

つまり、レイアウト・マネジャーをnullに変更してみたわけです。


続いて、張り付いているボタン(JButton)をVEエディター上でドラッグ
して少し下のほうに移動してみて下さい。
BorderLayoutのときと違って、どこにでもGUI部品(ここではボタン)
を配置できることがわかりますね。(BorderLayoutのときは、
北(North)(=上)、南(South)(=下)、西(West)(=左)、東(East)(=右)、
中央(Center)という決まった位置にしか配置できませんでしたね。)


そして再度保管し、HumanResourceJFrameを実行してみてください。

今度はJFrameのウインドウのサイズを変えてみても、中に張り付いているGUI部品
のサイズは変わりませんね。

このようにnullのレイアウトでは、中に張り付いているGUI部品のサイズがその
土台になっているコンテナーのサイズとは無関係に固定されてしまいます。

これでは、ウインドウの中身全部を大きくしたいと思ってウインドウを最大化し
ても、中身がちっとも大きくならないわけですから、nullレイアウトはあまり好ま
れません。

というわけで、今回のアプリケーションでは他のレイアウト・マネジャーを使用
します。

では、実行していたJFrameウインドウは閉じましょう。


「テスト・ボタン」というラベルが書かれているJButtonは、操作の練習のために
貼り付けただけなので、いったん削除しておきましょう。

そのためにはVEエディター上で、張り付いているJButtonをクリックして、キーボード
のDeleteキーを押してください。これで、JButtonが削除されます。

なお、間違えてJPanelまで削除してしまわないように注意してください。

間違えてJPanelを削除してしまった人はCtrl + Zで削除する前の状態に戻すか、
あるいは再度JPanelを貼り付け(JPanelの部品は右側のパレットの
「Swingコンテナー」の中にある)てください。


ここで、レイアウト・マネジャーの種類について簡単に解説しておきましょう。

BorderLayoutはすでに説明済みなので省略します。

レイアウト・マネジャーには他にもBoxLayout、FlowLayout、GridLayout、
GridBagLayout、CardLayoutというのがあります。

BoxLayoutはGUI部品を縦方向、または横方向に一列に並べるものです。

FlowLayoutはGUI部品を横方向に一列に並べていくものですが、1行に収まらな
い場合は、2行、3行と、複数行に渡って並べられます。

GridLayoutは、GUI部品を格子状に並べていくものです。

GridBagLayoutもGUI部品を格子状に並べていくものですが、GridLayoutと違って
貼り付けるGUI部品の場所に応じて、コンテナーのサイズの変化に対するGUI部品
のサイズの変化の度合いを変えたり、複数の格子にまたがってGUI部品を貼り付け
られるなど、かなり自由度の高いレイアウトになっています。

なお、レイアウト・マネジャーはJPanelなどのコンテナーに対して指定するもの
ですが、コンテナー自体もGUI部品であるため、コンテナーの中にもコンテナー
を貼り付けることができ、外側のコンテナーと内部のコンテナーにそれぞれ別の
レイアウト・マネジャーを指定することができます。

CardLayoutは、貼り付けた複数のGUI部品を、紙芝居の紙を差し替えるように入れ
替えて表示するものです。通常は、CardLayoutのコンテナーの中に別のコンテナー
を複数貼り付け、そのそれぞれのコンテナーの中にGUI部品を配置して、複数のコ
ンテナーを必要に応じて入れ替えて使用します。


これらのうち、GridBagLayoutとCardLayoutの使い方を覚えれば、他のレイアウト・
マネジャーは苦も無く使えるようになるはずなので、GridBagLayoutとCardLayout
の使い方を説明していきましょう。


というところで時間が来てしまいましたので(何の時間だかわからないけど)
今日は、ここまでにします。

いったん保管(Ctrl + S)してからEclipseを終了してください。

では、また来週。



┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
★ホームページ:
      http://www.flsi.co.jp/Java_text/
★このメールマガジンは
     「まぐまぐ(http://www.mag2.com)」
 を利用して発行しています。
★バックナンバーは
      http://www.flsi.co.jp/Java_text/
 にあります。
★このメールマガジンの登録/解除は下記Webページでできます。
      http://www.mag2.com/m/0000193915.html
★このメールマガジンへの質問は下記Webページにて受け付けて
 います。わからない所がありましたら、どしどしと質問をお寄
 せください。
      http://www.flsi.co.jp/Java_text/
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Copyright (C) 2010 Future Lifestyle Inc. 不許無断複製