| 広告 |
|---|
| ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■ 2010年11月03日 Java総合講座 - 初心者から達人へのパスポート 2009年11月開講コース 029号 セルゲイ・ランダウ バックナンバー： http://www.flsi.co.jp/Java_text/ ■□■□■□■□■□■□■□■□■□■□■□■□■□■□■ ------------------------------------------------------- ・現在、このメールマガジンは以下の2部構成になっています。 [1] 当初からのコース：vol.xxx(xxxは番号)が振られています。 これは現在、中級レベルになっています。 [2] 2009年11月開講コース：xxx号(xxxは番号)が振られています。 これは現在、初心者向けのレベルになっています。 ・このメールマガジンは、画面を最大化して見てください。 小さな画面で見ていると、不適切な位置で行が切れてしまう など、問題を起すことがあります。 ・このメールマガジンに掲載されているソース・コード及び 文章は特に断らない限り、すべて筆者が著作権を所有してい ます。また、これらのソース・コードは学習用のためだけに 提供しているものです。 ------------------------------------------------------- ======================================================== ◆ ０１．データベースを使用するアプリケーションの開発（続き） ======================================================== それでは、前回インストールしたVisualEditorを使ってみましょう。 以前、GUIの部品を提供するAPIとしてAWTとSwingを紹介しましたが、 これまでは、説明を簡単に済ませるために、AWTしか使いませんでし た。 しかし、本格的なアプリケーションを作るときにはSwingを使うのが 普通です。 というわけで、これからは、主にSwingを使ってプログラミングを行っ ていきます。 SwingはAWTに比べてはるかに表現力があり、部品数も多いのですが、 VisualEditorを使うことによって、プログラミングを簡単にし、説明 も簡略化していきます。 ところで、これまでAWTでウインドウのプログラミングをしたときには Frameというクラスを使いましたが、Swingのクラス名では先頭にJがつ き、JFrameというクラス名になります。 また、Swingの部品はjavax.swingというパッケージにはいっています。 というわけで、これからJFrameを使ってプログラミングをしていきま しょう。 では、これからVisualEditorの使い方を説明していきます。 まず、Eclipseを起動して、以下のような操作を行ってください。 (1) パッケージ・エクスプローラー（標準ではEclipseの画面左側にある） の中のプロジェクトJStudy1の下のsrc配下のパッケージjp.co.flsi.lecture.ui のところにマウス・ポインターを持っていって右クリックします。 (2) 「新規」→「その他」を選択します。（VisualEditorを使うためには 「クラス」を選択してはいけません。） (3) 「Java」の左側の「+」をクリックし、その下にリストされた「Swing」 の左側の「+」をクリックし、さらにその下にリストされた 「JFrameビジュアル・クラス」を選択（クリック）します。 (4) 「次へ」ボタンをクリックします。 (5) 「ソース・フォルダー」に「JStudy1/src」、 「パッケージ」に「jp.co.flsi.lecture.ui」が入力されていること を確認し、「名前」の欄に HumanResourceJFrame と入力しましょう。 (6) 「修飾子」は「public」が選択されていることを確認し、「スーパー クラス」が「javax.swing.JFrame」になっていることを確認し、 「public static void main(String[] args)」にチェックマークを入れて、 「完了」ボタンをクリックします。 HumanResourceJFrame.javaの編集画面になりますね。（パソコンの性能に よっては表示までにちょっと時間がかかる場合もあります。） いつものJavaのエディターと違って、JFrameのウインドウの画像が表示さ れますね。これがVisualEditorのエディターです。 VisualEditorでは、このウインドウの画像の上にGUI部品をビジュアル （視覚的）に貼り付けていったり、貼り付けた部品をマウスで操作したり しながら、視覚的に編集を行うことができます。 そしてその編集内容は、その下に表示されているソース・コードに自動的に 反映されます。 逆にソース・コードのほうを編集すると、その内容に応じてウインドウの 画像も自動的に変わります。 ソース・コードの下には「Java Beans」というタブと「プロパティー」と いうタブがありますね。 「Java Beans」については詳しくは後述するとして、ここではJavaBeansは GUIなどの部品あるいはクラスのことだと思ってください。 「Java Beans」タブをクリックするとその下に this - "JFrame" jContentPane という2行が表示されていると思いますが、これは現在編集しているクラス がJFrame型（JFrameのサブクラス）で、その中にjContentPaneというフィー ルド名（属性の変数名）で組み込まれているGUI部品があることを示してい ます。 このjContentPaneという文字をクリックしてみてください。 ソース・コードの中のjContentPaneという変数名が色付けされると同時に その上の画像のほうでも黒線で縁取りされて4角（すみ）に黒い小さな四角形 が表示された部分がありますね。この縁取りされた部分がjContentPaneで 表されるGUI部品です。 ソース・コード -------------------------------------------------------- /** * */ ・・・・・（中略）・・・・・ private JPanel jContentPane = null; ・・・・・（中略）・・・・・ private JPanel getJContentPane() { if (jContentPane == null) { jContentPane = new JPanel(); jContentPane.setLayout(new BorderLayout()); } return jContentPane; } } -------------------------------------------------------- を見るとわかるようにこのjContentPaneの実態はJPanelというGUI部品の インスタンスです。 このJPanelは以前お話したコンテナーの一種で、GUI部品を貼り付け ていく土台になります。 そしてソース・コードを見るとわかるようにそのレイアウトがBorderLayout に設定されています。 BorderLayoutというのはGUI部品を上(North)下(South)左(West)右(East) および中央(Center)の４箇所の位置に貼り付けられるコンテナーでしたね。 このソース・コードを -------------------------------------------------------- /** * */ ・・・・・（中略）・・・・・ private JPanel jContentPane = null; ・・・・・（中略）・・・・・ private JPanel getJContentPane() { if (jContentPane == null) { jContentPane = new JPanel(); jContentPane.setLayout(new BorderLayout()); jContentPane.setForeground(new Color(51, 51, 51)); jContentPane.setBackground(new Color(255, 255, 0)); } return jContentPane; } } -------------------------------------------------------- のように書き換えてみましょう。 つまり、 jContentPane.setLayout(new BorderLayout()); の行の下に jContentPane.setForeground(new Color(51, 51, 51)); jContentPane.setBackground(new Color(255, 255, 0)); という2行を追加します。 Colorについては、コンテンツ・アシストの機能（忘れた人は006号 を復習のこと）を使ってjava.awt.Colorを選択して下さい。 （コンテンツ・アシストを使えば自動的にimport文が挿入されます。） これら2行のコードでは、このコンテナーの前景色（Foreground = 文字の色） と背景色（Background）が設定されています。 Color()というのは色を表現するクラスのコンストラクターで、引数が3つある のはそれぞれRGBすなわちRed（赤）、Green（緑）、Blue（青）の３原色の量を 表す数値です。 各原色は0から255までの数値を指定でき、数値が大きいほど明るくなります。 たとえばすべて255を指定すると真っ白になるし、すべて0を指定すると真っ黒 になります。 上のソース・コードのようにRed（赤）を255としGreen（緑）を255とし、 Blue（青）を0とすると、赤と緑が等量混ざった色すなわち黄色になることが、 画像を見てもわかるでしょう。 これらの設定を変えたいときはソース・コードを直接編集しても変更できま すが、「プロパティー」タブで変更することもできます。 jContentPaneを選択（「Java Beans」タブで選択するか、もしくはVisualEditor エディターの画像の中でJPanelの部分をクリックして選択してもよい）した 状態で「プロパティー」タブをクリックしてみてください。 プロパティー（今のところはクラスの属性のことだと思っていてください。 詳しくは後述）のリストが表示されますが、その先頭あたりに「background」 というのがありますね。 その右側に背景色の値（Color:yellow）が表示されているはずです。そこを クリックしてみてください。 その右側に小さなボタンが表示されますから、それをクリックしてみてくださ い。 「Java Property Editor」というウインドウが開きますね。 この中の「RGB」というタブをクリックしましょう。 ここで、赤、緑、青の各スライダーを滑らせるか、あるいは数値を直接変更す ると下のプレビューに表示される色が変わりますね。 たとえば、赤を0にしてみましょう。赤色が完全に抜けてしまって緑色に なりますね。 ここで「OK」ボタンをクリックすると、ソース・コードのほうにも反映される し、その上のVisualEditorエディターの画像のほうにもちゃんと反映している （色がついている）ことがわかりますね。 代わりにソース・コードのほうを直接編集して保管（Ctrl + S）しても同じよ うに反映されます。 では、次にGUI部品をJPanelの上に貼り付けてみましょう。 JFrameの画像の右側のほうに小さな左向きの三角形のアイコンがあるはず ですので、それをクリックしてください。 すると、「パレット」という縦長の領域が開きますね。 ちなみに、この三角形のアイコンを再度クリックすると、この「パレット」 は閉じます。 この「パレット」の中に「Swingコンポーネント」という行があって、その行 をクリックするたびに、その下にSwingのGUI部品がリストされたり、リスト が閉じたりしますね。 そのリストの中のJButtonをクリックしてみてください。 そしてJFrameの画像の中のJPanelの部分にマウス・ポインターを持っていきま しょう。 「北」（North）やら「中央」（Center）やら、レイアウト上の位置に応じた名称が 表示されますね。 （これまで上(North)、下(South)、左(West)、右(East)と書いていたものが このVisualEditor上では北、南、西、東というように直訳の訳語に変換されて います。） 「北」が表示された位置でクリックしてみましょう。 いったん「Bean名」（後述）というのを聞いてきますが、デフォルトの 値（jButton）そのままにして「OK」ボタンをクリックしてみましょう。 横長のボタンが張り付きますね。 （もし、「中央」（Center）の位置に貼り付けてしまうと、ボタンがJPanel全体 に広がってしまいます。これだとボタンには見えないかもしれませんが、 これでもボタンが張り付いた状態です。） 今日は、ここまでにします。いったん保管（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. 不許無断複製 |