NetBeansではじめてのGUIアプリケーション

NetBeansを使って学ぶちょっと視点の違うJava入門の第2回です。前回のエントリーでは、NetBeansのインストールと簡単なプログラムを作成してみました。これはいわゆるHello Worldプログラムと呼ばれる、どんなプログラミング言語でも最初に学ぶ儀式のようなものです。通常の流れであれば、Hello Worldで簡単なメッセージを表示するだけのプログラムを学び、変数、条件式、配列、繰り返し処理・・・といった順番で学習していきます。しかし、斜め上を行くことで定評のあるやさしいデスマーチでは変数などという難しい事は学ばずに画面を作成していこうと思います。

はじめてのGUIアプリケーション

それでは早速Javaを使って簡単なGUIアプリケーションを作成してみましょう。

GUICUIについて
ユーザがコンピュータを操作する仕組みには大きくGUI(Graphical User Interface)とCUI(Character User Interface)があります。ユーザインターフェイスとはコンピュータなどをユーザ(人)が操作をする為の仕組みです。その中でWindowsのようにグラフィカルな画面とマウスとキーボードによる操作で行うインターフェイスGUIと呼びます。これに対してCUIはコンソールなどを使って文字を入力するだけで操作する仕組みです。GUIの場合、操作結果もグラフや画像などグラフィカルに表示されますが、CUIの場合は色はついているかも知れませんが基本的には文字で操作結果も表示されます。一昔前まではコンピュータと言えばCUIしかありませんでしたが、WindowsMacが普及してくるに従い一般の人がCUIを扱う事は少なくなっています。
プログラミングでも、実行や結果を全て文字で行うアプリケーションを作る場合と、それらをグラフィカルに行うアプリケーションの両方を作ることができます。しかし、ユーザが使うにはGUIの方が楽なのですが、プログラムを作るとなるとGUIは非常に難しいと言わざるを得ません。ですが、作っていて楽しいのはGUIであることも事実です。複雑な計算をさせたり、文字列を表示させても何も面白くありませんから!

NetBeansを起動したならば前回と同じようにJavaのプロジェクトを作成します。今回はプロジェクト名に「JavaTutorial2」と入力します。今回はGUIアプリケーションの作成になるので、「主クラスを作成」のチェックは外します。

尚、Main.javaが作成されてしまったらを削除して構いません。右クリックから削除するか、選択してからDeleteキーで削除できます。

ダイアログが出ますが、無視して「了解」を押してください。

次にソースパッケージと書かれている場所で右クリックを行い、新規からJFrameフォームを選択します。

新規JFrameフォームのダイアログが開きますので、クラス名を「MyFrame」と変更します。

また、下のほうに「警告:Javaクラスをデフォルトパッケージに含めないようにすることを強く推奨します」と警告が出ています。パッケージとはディレクトリのようなもので、Javaではデフォルト(一番上)の階層に置くことが推奨されていません。ここでは、パッケージに「javatutorial2」と入力してからて「完了」をクリックします。

なにやらデザインという心躍るような画面になったでしょうか?

プログラムの実行

早速ですがプログラムを実行してみましょう。プログラミングでは、直ぐに動かして試すことが重要です。
プログラムを実行するには、前回と同じように実行ボタンをクリックするだけです。もし、下のようなメッセージがでた場合は、そのまま「了解」をクリックしてください。

すると画面の左上の方に何もないただのウィンドウが表示されると思います。

これはJavaのSwingと呼ばれるGUIのライブラリ(プログラム用の部品の集まり)を使ったウィンドウ(画面)です。NetBeansではこのように簡単にGUIの雛形を作ることができます。
表示された画面はWindowsの他のアプリケーションと同様にサイズを変更したり、移動したり、最大/最小化したりする事ができます。また、終了させたくなったならば、右上の×ボタンをクリックしてください。

タイトルを設定する

画面を作ることはできましたが、タイトルがないとどうも寂しいです。まずはタイトルをつけてみましょう。
NetBeansに戻りMyFrameのデザインが表示されていることを確認したならば、デザインの灰色の枠の中を1回クリックしてください。次に[JFrame]-プロパティと書かれた場所を探します。もし、表示されていないようであれば上部メニューのウィンドウからプロパティを選択すれば表示されるはずです。見つからない場合も同じようにすれば見つかるでしょう。
プロパティとは何かの要素に定義された属性の事です。CSSである要素に対して属性(widthなど)と値(300px)を指定するのと同じ感覚です。JavaのSwingではJFrameというものが外枠にあたり、そのtitle属性を指定することで、ウィンドウのタイトルが表示されるような仕組みなっているのです。さっそくtitleと書かれた場所を探し、「はじめてのGUIアプリケーション」といった感じで文字を入力してみてください。

もう1度、アプリケーションを実行します。

タイトルが設定されました。また、Windowsのタスクバーにもタイトルが反映されています。なんとなくWindowsアプリケーションっぽくなってきました。

メッセージを表示する

次に画面の内部に何かメッセージを表示してみましょう。
SwingではHTMLの要素にあたるものはコンポーネントとかコントロールと呼ばれています*1NetBeansではパレットと呼ばれるビューのSwingコントロールという場所に各種コンポーネントが管理されています。

ボタンやテーブルなど色々なコンポーネントが用意されていると思いますが、ここはぐっとこらえて「ラベル」を選択してください。ラベルを選択したならば、そのままドラッグし、JFrameの上でドロップします。

ラベルは文字を表示するシンプルなコンポーネントです。デフォルトではjLabel1となっていますが、これを書き換えましょう。タイトルを設定したときと同じように、ラベルの文字列もプロパティで管理されています。ラベルを選択した状態で、プロパティを確認してください。textと書かれた場所がラベルに表示される文字列になります。ここを「文字列を表示します」と書き換えてみましょう。

デザイン側にも反映されていると思います。

プレビュー機能

ラベルを作成したならば、もう1度実行すればラベルが表示されますが、もっと簡単に表示確認する機能があります。デザインの横にある目のアイコンです。

このボタンを押す事で簡単にプレビューを表示することが出来ます。プレビューとプログラムの実行の違いは、ボタンなどを実行したときに処理が行われるか否かです。今のところは表示に関連するものしか作っていませんので、プレビューでもプログラムの実行でも大きな違いはありません。

ラベルの位置を調整する

ラベルは設置後にドラッグすることで、自由に位置を設定することができます。複数のラベルを設置したならばそれぞれのラベルの位置を調整するガイドラインが表示されるので調整も簡単です。

ラベルのその他のプロパティ

ラベルのプロパティを眺めてみると、fontなどおおよそ検討のつくプロパティがあると思います。壊れることはありません。適当にクリックして色々設定してみてください。そして都度、プレビューしてみてください。
ただし、ラベルのbackground(背景色)だけはちょっと特殊です。ラベルはデフォルトでは背景色は透明となっているので、背景色を設定しても反映されません。ラベルの背景色を指定したい場合は、合わせてopaqueのチェックを入れる必要があります。opaque(オペイク=不透明)にチェックがないコンポーネントは透明担ってしまうため、背景色が無効になるのです。
尚、paddingを設定するにはinsetsプロパティ、borderを指定するにはborderプロパティを使用します。marginに関してはコンポーネントの配置に関わる属性であるためラベルのプロパティでは指定できません。

まとめ

NetBeansではプログラミングが解らなくてもGUIアプリケーションを作ることができます。次回はボタンを設置してちょっとした処理を行ってみる予定です。

2009/05/31 22:25 修正

Twitterにてid:nowokayこときしださんに指摘された部分(主クラスやパッケージ関連)を修正しました。ありがとうございます!

*1:HTMLと同じようにコンポーネントはネストさせていく事が可能で複雑なレイアウトもできますが、ちょっと難しいのでネストする方法は割愛します