ウィンドウアプリ開発超入門









ウィンドウアプリ
開発超入門



この教科書はBookletを利用して作成している。
本書の見方
ページをめくる
左(右)ページの左(右)端クリックまたはドラッグする
左(右)矢印キーを押す
1ページ分の移動
左右上端にある[Next]、[Previous]タブをクリックする
章の頭に移動
右上の【章の移動】タブをクリックし、現れた章を選ぶ
ページのジャンプ
右上のページ番号表示タブをクリックし、現れたページを選ぶ
画像の拡大およびリンク先への移動
画像やリンク先をクリックすれば、別ウィンドウ(タブ)で表示される

ウィンドウアプリの開発

【この章のポイント】
簡単なウィンドウアプリケーションの作成を通して、アプリケーションがどのように作成されるのかをみてゆこう。作成には、NetBeansというJava言語を使ったアプリケーション作成のためのビジュアルな統合開発環境を用いる。NetBeansでは、実際に作成されるウィンドウ画面を見ながら、比較的容易にウィンドウアプリケーションを作成できる。
 作成するアプリケーションサンプル:ツールバーの左端をドラッグして移動させてから操作するとよい
ここで作るお絵かきプログラムはこちらからダウンロードできる。

【この章の目標】学習後、以下のことが身についたかチェックしよう。
  1. NetBeansを利用したJavaアプリケーション開発の手順を理解する

【この章の構成】
    1.準備
    2.外観の設計
    3.動作の記述

0節 準備

0.1 NetBeansのインストール

NetBeansのダウンロード
NetBeans はフリーで手に入る。興味のある者は日本語サイトから自宅パソコンにJDK+NetBeansをダウンロードするとよい。大学のNetBeansとはバージョンが異なる場合もあるが問題はないだろう。

0.2 クラスとオブジェクト

 Javaはオブジェクト指向言語である。以下でよく現れるクラスとオブジェクトとついて説明しよう。
 例えばデスクトップ(パソコン画面上)で適当な「対象」にマウスを合わせて、右(ボタンを)クリックしてみよう。すると対象(の種類)に応じたメニューが現れ、その対象に対して可能なメソッド(操作・指令)の一覧が表示される。最下段にはプロパティ項目があり、対象に関するデータを見ることができる。このように対象(オブジェクト)が主で、操作・指令を付随させる考え方をオブジェクト指向という。
 ウィンドウアプリケーションでは、ボタンなどの様々な部品が配置されている。この時、個々のボタンはボタンクラスのオブジェクトであるという。すなわち、クラスはオブジェクトの「ひな型」であり、そのひな型にしたがって作られた個々の「もの」をオブジェクトという。
 ところで、ボタンはそれぞれ、大きさや位置、色などのプロパティを持つ。どのような種類のプロパティを持つかはクラス(ひな型)で定められていて、オブジェクトは作られたときに各プロパティの値が設定される。
 また、ボタンには様々な「機能(受付可能な操作・指令)」がある。オブジェクトが持つ「機能」をメソッドといい、やはりそれが属するクラスで定まっている。

0.3 イベント駆動

 ウィンドウアプリケーションは、起動するとウィンドウが表示され、そこでユーザーの入力(操作)を待ち、入力に応答する。ユーザ入力等のイベントに応答して動作する形態をイベント駆動という。一般にイベントはユーザからの入力に限らず、様々なものがある。

1節 NetBeansの起動

 本節ではNetBeansを起動しウィンドウアプリケーション開発の準備を行う。
実習.プロジェクトの作成まで
プロジェクト 1.[スタート]→[プログラム]→[NetBeans]を起動
2.プロジェクトの作成
1)[ファイル]→[新規プロジェクト]で、
 カテゴリ=Java
 プロジェクト=Javaアプリケーション
 を指定して[次へ]
2)プロジェクト名を適宜英数字で指定し、
 プロジェクトの場所を授業用フォルダに指定し、
3)メインクラスを作成のチェックを外して(重要!) [完了]
実習.アプリケーションファイルの指定
アプリケーションファイル 1)【ファイル】→【新規ファイル】で新規ファイルウィザードを開く
2) SwingGUIフォーム →JFrameフォーム を選択して【次へ】
3) クラス名(例えば Oekaki とプロジェクト名)を指定して【完了】
 この結果、デザインエディタが現れ、コンポーネントパレットから部品を配置したり、プロパティを設定して、アプリケーショ ンの外観を設計することができる。また、この操作で JFrameクラスを拡張した、例えば Oekaki(クラスのオブジェクト)を生成し実行するプログラムが(自動的に)作成されるので、これを実行できる。
4) メインクラスの設定:プロジェクトの実行()をすると、メインクラスを聞いてくるので、Oekaki を指定する。

 なお、Webページ上で動作するアプリケーションを作成する場合は2)で
  SwingGUIフォーム →JAppletフォーム
を選び、文字ベースの入出力によるプログラムを作成する場合は2)で
  Javaクラス→Java主クラス
を選択する。

2節 外観の設計

oekaki 本節ではアプリケーションに必要な部品を、コンポーネントパレットから選んで、その部品(クラス)のオブジェクトをフォームに配置し、それらのプロパティを設定する。

2.1 部品の配置

 コンポーネントパレット上で目的の部品をクリックしてから、フォーム上の置きたい場所をクリックする。配置したオブジェクトには、jPanel1やjButton1のように部品クラス名に番号が付いた名前がつき、
移動コンポーネントをドラッグ
サイズ変更コンポーネントをクリックしてをドラッグ
削除コンポーネントをクリックしてDeleteキー
が行えるので、大きさや場所などを調整するとよい。

実習.部品の配置
お絵描きアプリケーションを作成するために、JButtonオブジェクトを載せたJToolBarオブジェクトをフォーム上の適当な位置に配置しよう。
  1. JToolBarを(Swingコンテナ中にある)をフレームに載せる
  2. JButton(Swingコントロール中にある)をJToolBarに載せる。
また、部品の配置(関係)はナビゲータウィンドウでも調整できる。

2.2 プロパティの設定

 フレーム(Oekakiクラス)およびフレーム上の配置した部品オブジェクトに対し、位置やサイズ以外にも種々のプロパティを設定できる。設定方法には、直接入力[…]クリックで開くプロパティエディタで設定の2通りがある。
実習.プロパティ設定
  1. オブジェクトjButton1をクリックせよ(ナビゲータ上で反転表示されることを確認せよ)。
  2. プロパティタグの text欄をクリックし、右側の欄に「描画」と入力せよ。

2.3 アプリケーションの実行

 作成したアプリケーションを実行するには、ソースエディタ上で
  ・マウスの右ボタンクリック→ファイルの実行を選ぶか
  ・シフトキーとF6キーを同時におす(Shift+F6)
  ・F6キーあるいはプロジェクトの実行()でメインクラスが実行される。
ただし、この時点では、まだ何も動作を記述していないので、(ウィンドウ右上の最小化、最大化、閉じるボタンを除いて)何も反応しない。
 ソースファイルは、実行と同時に自動的に、プロジェクトフォルダー中のsrcフォルダに、保存される。実際に保存されていることを確認せよ。

2.4 NetBeansの終了と再開

 NetBeansをいったん終了し、再起動して、プロジェクトを再開するには、ファイルを開くのではなくプロジェクトを開くことが重要である。

実習.保存したプロジェクトの再開
以下の手順で、プロジェクトを再開せよ。
  1. NetBeans をいったん終了する。プロジェクトは(実行時に)自動的に保存されるので、通常保存作業は不要である。
  2. NetBeans を起動する。
  3. ファイルメニュー→「プロジェクトを開く」
  4. 現れた「プロジェクトを開く」ウィンドウで、プロジェクトフォルダを指定
  5. 【プロジェクトフォルダを開く】ボタンをクリック
  6. 左上のプロジェクトウィンドウで、ソースパッケージ→デフォルトパッケージを展開し、現れたjavaファイルをダブルクリック

3節 動作の記述

 前節で、アプリケーションの外観を整えることはできたが、まだ何の動作もしない。本節では、ウィンドウアプリケーションの動作を記述する方法を学ぶ。ウィンドウアプリケーションは、通常ユーザからの操作(ボタンのクリック、マウス操作、キー入力等)を待機していて、これらの操作に応答するかたちで動作する。このようなユーザ操作を含む種々の出来事をイベントと言い、イベントに対して応答メソッドをOekakiクラスに追加することによって、動作を実現する。これをイベント駆動型プログラミングという。

実習.長方形の描画
以下の手順で、【描画】ボタンのクリックで、フォーム上に長方形を描くようにせよ。
  1. jButton1をクリックする(プロパティウィンドウのタイトルを確認せよ)。
  2. イベントタグをクリックし、actionPerformed(イベント最上段)の右の▼をクリックしてイベントメソッドを選択する。
    (この操作で、jButton1ActionPerformed というメソッドが Oekaki クラスに追加され、jButton1 のクリックに反応して実行されるようになる)
  3. 現れたソースエディタで、jButton1ActionPerformedメソッドの中身(下の紫字部分)だけを入力する。
    記述した命令の意味は、フォームのグラフィックスを取得(getGraphics())し、それを使って、色を赤に設定し(setColor(java.awt.Color.RED))、長方形を描く(fillRect(100,100,200,100))ということである。
    少し見にくいが、命令の最後の;(セミコロン)を忘れないように注意せよ。
  private void jButton1ActionPerformed(java.awt.event.ActionEvent evt) {
   java.awt.Graphics g=getGraphics();
   g.setColor(java.awt.Color.RED);
   g.fillRect(100,100,200,100);
   }                                                                     
 ここでは、メソッドの外枠をNetBeansに用意させ、中身だけを入力する点が重要である。自分でこのメソッド全体を入力しても、(jButton1の)イベントと連結されないので正しく動かない。
 また、このアプリケーションの実行時には、長方形を書かせる前に、ツールバーを横にどけておくとよい。
実習.ペンの実現
マウスのドラッグ操作でフレーム上に絵を描く機能を追加しよう。
  1. 最初に、(後の拡張のために)マウス位置に描く楕円の半径を格納する変数rを設定しておく。これをソース中の適当な位置(例えばmainメソッドの手前)に記入する。
    int r=5;//半径r
  2. JFrameをクリックする(プロパティウィンドウのタイトルを確認せよ)。
  3. イベントタグをクリックし、mouseDraggedイベントの右の▼をクリックして現れたイベントハンドラを選択する。
  4. 現れたソースエディタで、formMouseDraggedメソッドの中身(下図の紫字部分)を入力する。
private void formMouseDragged(java.awt.event.MouseEvent evt) {
   java.awt.Graphics g=getGraphics();
   g.setColor(java.awt.Color.BLUE);
   g.fillOval(evt.getX()-r,evt.getY()-r, 2*r, 2*r);
   }                                                                

 記述した命令は、マウス位置の座標を取得(getX(),getY())し、そこを中心に半径rの円を描く(fillOval(,))。これによって、Frame上でマウスをドラッグするたびにマウス位置に円が描画される。繰り返しになるが、メソッドをNetBeansに用意させ中身だけを入力する点が重要である。

実習.色選択の実現と下塗ボタンの作成
前回作成した描画ボタンを、下塗ボタンに変更しよう。
  1. jButton1のtextプロパティを「描画」から「下塗」に変更する
  2. jToolBar1のサイズを十分大きくしてから、jToolBar1上に色選択部品(JColorChooser)を配置する
  3. 描かれる長方形の色を、色選択部品で設定した色になるようにしよう。そのため、jButton1のイベントメソッド中の色設定命令を
    g.setColor(jColorChooser1.getColor());
    として、グラフィックgが使う色(Color)をjColorChooser1から取得した色に設定する。
  4. 次に、描く長方形を、フォームいっぱいの大きさにする。それには、
    g.fillRect(0,0,getWidth(),getHeight());
    とする。

実習.筆の色と太さの変更
1.筆の色を上で配置した色選択部品(jColorChooser1)から設定できるようにせよ。
2.筆の太さの設定
 JScrollBar部品を使って筆の太さ(円の半径)を変えられるようにしよう。
  1. jToolBar1上にJScrollBarを配置する。
  2. jScrollBar1のadjustmentValueChangedイベントの右側の▼をクリックしてイベントメソッドを選択し、現れたソースエディタで、次のように記述する。
private void jScrollBar1AdjustmentValueChanged(…) {
   r=jScrollBar1.getValue();
}                                                 
3.JFormのTitleプロパティに作成者の学籍番号・氏名を表示させよ。
4.結果の確認:ファイルを実行して、意図通り動くか結果を確認せよ。

コラム.起動ファイルの作成
いちいちNetBeansを開いたりせずに、ファイルを直接ダブルクリックすることで実行できないと不便である。ここでは、ダブルクリックで単独実行可能なファイル(プロジェクト名.jar)の作成手順を説明しておこう。
  1. メインクラスの指定プロジェクトを右クリックし、プロパティ→実行で、メインクラスに目的のWindowsアプリケーションを指定する。
  2. 起動ファイルの構築メニュー→実行→主プロジェクトを削除して構築する
  3. 起動ファイルの場所プロジェクトフォルダ内のdistフォルダに、プロジェクト名.jarファイルができる。