OSSによる実用アプリ開発講座第1回
「SWTを用いたGUIプログラミング」

軽快動作が売りのSWTを用いたGUI開発

JavaによるGUI(SWT)プログラミングのお勧めTipsです。

- Last Update:2006/02/11

「SWTを用いたGUIプログラミング」の概要

 Eclipseが登場する以前までのJava統合開発環境は、GUIの操作をしたときに反応が悪く使い物にならないという印象をお持ちの方もいると思います。いまやJava統合開発環境のデファクトスタンダードとも言える存在となったEclipseは、GUIの操作にも反応がよく軽快に動作すると感じると思います。 その原因の一つが統合開発環境の画面を構成しているGUIライブラリの違いと言えると思います。GUIライブラリであるSWTの特徴を簡単に列挙します。
  1. 軽快な動作(OSのネイティブAPIを利用しているため)
  2. ネイティブ(OS)と同様のルック&フィールドの提供
  3. 柔軟なライセンス(無償で利用でき、再配布も特に制約なし)
 今回は、Java+SWTで簡単なサンプルの開発を行いたいと思います。

「SWTによるGUIアプリを開発しよう 〜導入編〜


以下のソフトウェアを用いて、簡単なGUIアプリ(テキストフィールドに文字列を入力した後ボタンを押すと、別のテキストフィールドにその文字列がコピーされる)を開発してみましょう。
ソフトウェア説明インストールフォルダ
JDK ver.1.4.2Javaのプログラムを動作させるための基本ソフト%JAVA_HOME%
SWT ver.3.1.1(*1)GUIライブラリ%ECLIPSE_HOME%



「開発手順」


Eclipseの起動

 Windowsの「エクスプローラ」から"C:\eclipse\eclipse.exe"をダブルクリックすると、起動します。

プロジェクトの作成

 このツールでは、開発したいアプリごとにプロジェクトという単位で開発を進めることになるので、まず、今回のGUIアプリ用のプロジェクトを作成しましょう。

 ツールの起動後、メニューから「File」->「New」->「Project」を選択すると、プロジェクト作成画面が表示されます。今回は、「Java Project」として、プロジェクト名「VisualEditor-Test」と入力してください。さらに、GUI(SWT)アプリを開発していくための雛形(テンプレート)を作成するために、「File」->「New」->「Other」から、「Java」->「Visual Class」として、「Style」欄では「SWT」->「Application」を選択、「puclic static void main」にチェック、クラス名には「HelloSWTApp」と入力してください。また、



クラスパス、パスの設定

 この状態ではGUI(SWT)アプリをコンパイル、実行するために必要なクラスパス、ライブラリパスが設定されていないので、設定しましょう。

 SWTのAPIを利用するには通常swt.jarをクラスパスに追加する必要がありますが、Visual Editorでは、Visual Classの作成時に自動的にswt.jarがクラスパスに追加されるため、設定は不要です。ライブラリパスの設定は、メニューから「実行」->「実行」から、「HelloSWTApp」を選択し、「引数」->「VM引数」から、"-Djava.library.path="I:\shared_eros00\eclipse_v301\plugins\org.eclipse.swt.win32_3.0.1\os\win32\x86"を設定すればOKです。

 クラスパスが正しく設定されていないとコンパイル時に、ライブラリパスが正しく設定されていないと実行時にエラーがでますので、間違えないように設定してください。

ユーザインタフェースの作成

 GUIアプリの顔とも言えるユーザインタフェースの作成を行います。この箇所が、今回利用したプラグインVisual Editorが担ってくれる機能です。

 画面中央部に、アプリのUIを開発するフィールド(Palette)が表示されているはずです。下図のように、ラベル(Label)、ボタン(Button)、テキストフィールド(Text)を配置してください。部品を配置するには、「Pallete」をクリックすると表示されるコンポーネントの一覧から配置したいものを選択し、アプリケーションのFormにドラッグ&ドロップするだけです。

 これで、GUIアプリのUIは完成です。



イベントの作成

 次に、ボタンを押したときに、テキストフィールドへの入力内容が、ラベルにコピーされるようにイベント発生時の処理を記述していきましょう。

 UIデザイナからボタンを選択した後、「Events」->「Add Events」を選択後、"Selection Listener"を追加しましょう。すると、自動的にソース編集画面に切り替わり、メソッドが自動的に加わると思います。このメソッド内に記述した処理は、ボタン押下時(イベント発生時)に処理されることになります。

 さらに、メソッド内容は以下のようにしましょう。
button.addSelectionListener(new SelectionListener() { 
	public void widgetSelected(SelectionEvent e) {
		label.setText(text.getText());
}
以上でアプリの開発は完了です。この程度のGUIアプリなら、操作に慣れてくると数分で作成することも可能になります。

「設定・実行手順」


 ここからは、サンプルの実行手順に話を進めましょう。メニューから「Run」->「Run」から、「HelloSWTApp」を選択し、「実行」ボタンを押しましょう。するとサンプルアプリが自動的に画面に表示されるはずです。

 正しく表示されたら、テキストフィールドに適当な文字列(e.g."みなとみらい")を入力した後、ボタンを押してください。すると入力した文字列がラベルに表示されるはずです。正しく表示されない場合は、手順をもう一度見直してみましょう。


「EclipseでGUI(SWT)アプリを開発しよう(2) 〜Jigloo編〜


ソフトウェア説明インストールフォルダ
JDK ver.1.4.2Javaのプログラムを動作させるための基本ソフト%JAVA_HOME%
Eclipse ver.2.1.3(*1)Java統合開発環境%ECLIPSE_HOME%
Jigloo ver.2.7.2GUI開発支援を可能とするEclipse用プラグイン%JIGLOO_HOME%

*1:デフォルトではメニューなどが英語のため、日本語化したい場合は、Language Packsを別途導入してください。


 Jiglooのインストールは、以下の2つの方法に対応していますので、お好きな方で導入してください。
  1. Update Manager:Help->Software Updateから、新しいサイトブックマーク"http://cloudgarden.soft-gems.net/update-site/"の作成
  2. ZIPの解凍:Jiglooのサイトから、jigloo272.zipをダウンロードして、%ECLIPSE_HOME%\pluginsに解凍

「フォルダ構成」


一式ダウンロードしていただくこともできますが、GUIベースでさくさくと開発できますので、以下の手順に従い実際にツールに触れてみることをお勧めします。
GUIサンプルアプリ(Jigloo)のダウンロード


「開発手順」


Eclipseの起動

 Windowsの「エクスプローラ」から"C:\eclipse\eclipse.exe"をダブルクリックすると、起動します。

プロジェクトの作成

 このツールでは、開発したいアプリごとにプロジェクトという単位で開発を進めることになるので、まず、今回のGUIアプリ用のプロジェクトを作成しましょう。

 ツールの起動後、メニューから「ファイル」->「新規」->「プロジェクト」を選択すると、プロジェクト作成画面が表示されます。今回は、「Java」->「Javaプロジェクト」として、プロジェクト名「Jigloo-Test」と入力してください。さらに、GUI(SWT)アプリを開発していくための雛形(テンプレート)を作成するために、「ファイル」->「新規」->「その他」から、「GUI Forms」->「SWT Main Application」として、クラス名「HelloSWTApp」と入力してください。



クラスパス、パスの設定

 この状態ではGUI(SWT)アプリをコンパイル、実行するために必要なクラスパス、ライブラリパスが設定されていないので、設定しましょう。

 クラスパスの設定は、パッケージ・エクスプローラから「Jigloo-Test」を選択後右クリックし、「Javaのビルドパス」->「ライブラリ」->「外部JARの追加」から、"%ECLIPSE_HOME%\plugins\org.eclipse.swt.win32_2.1.3\ws\win32\swt.jar"を設定すればOKです。ライブラリパスの設定は、メニューから「実行」->「実行」から、「HelloSWTApp」を選択し、「引数」->「VM引数」から、"-Djava.library.path="M:\shared_eros00\eclipse\plugins\org.eclipse.swt.win32_2.1.3\os\win32\x86"を設定すればOKです。

 クラスパスが正しく設定されていないとコンパイル時に、ライブラリパスが正しく設定されていないと実行時にエラーがでますので、間違えないように設定してください。

ユーザインタフェースの作成

 GUIアプリの顔とも言えるユーザインタフェースの作成を行います。この箇所が、今回利用したプラグインJiglooが担ってくれる機能です。

 パッケージ・エクスプローラから「HelloSWTApp.form」を選択して、下図のように、ラベル(Label)、ボタン(Button)、テキストフィールド(Text)を配置してください。部品を配置するには、コンポーネントが並んでいるエリアから配置したいものを選択し、アプリケーションのFormにドラッグ&ドロップするだけです。

 ただし、下図のようにボタンを中央に配置したいなど細かなレイアウトを利用したい場合は、Formのレイアウトを絶対座標位置指定にしておくと楽です。設定は、UIデザイナからFormを選択した後、Layoutタブから"Absolute"を選択してください。こうしない場合は、デフォルトのレイアウトマネージャ(コンポーネントを任意のルールで自動は位置する機構)の"Grid"が有効となってしまいます。これで、GUIアプリのUIは完成です。



イベントの作成

 次に、ボタンを押したときに、テキストフィールドへの入力内容が、ラベルにコピーされるようにイベント発生時の処理を記述していきましょう。

 UIデザイナからボタンを選択した後、Eventタブから「SelectionListener」->「widgetSelected」を選ぶと、イベント発生時のメソッドを作成するかどうか聞かれますので、"handle"を選びましょう。すると、自動的にソース編集画面に切り替わり、"protected void button1WidgetSelected(SelectionEvent evt)"なるメソッドが自動的に加わると思います。このメソッド内に記述した処理は、ボタン押下時(イベント発生時)に処理されることになります。

 さらに、メソッド内容は以下のようにしましょう。
protected void button1WidgetSelected(SelectionEvent evt){
	label1.setText(text1.getText());
}
以上でアプリの開発は完了です。この程度のGUIアプリなら、操作に慣れてくると数分で作成することも可能になります。

「設定・実行手順」


 ここからは、サンプルの実行手順に話を進めましょう。メニューから「実行」->「実行」から、「HelloSWTApp」を選択し、「実行」ボタンを押しましょう。するとサンプルアプリが自動的に画面に表示されるはずです。

 正しく表示されたら、テキストフィールドに適当な文字列(e.g."みなとみらい")を入力した後、ボタンを押してください。すると入力した文字列がラベルに表示されるはずです。正しく表示されない場合は、手順をもう一度見直してみましょう。

「Eclipse & Visual Editor / Jigloo」関連URL


その他