Java ME デバイス用のタッチ対応 SVG UI の作成

このチュートリアルでは、SVG UI ウィジェットを使用して、Java ME ベースのタッチ画面デバイス用の機能豊富な UI を開発する方法を示します。Samsung の Omnia や Instinct、Nokia 5800 Xpress Music、Blackberry Storm などの Java ME ベースのタッチ画面デバイスの急増により、モバイルアプリケーションの開発者は、これらのデバイスの開発を学習する必要があります。リッチ SVG UI ウィジェットは、タッチ画面のないデバイスでもサポートされるため、このチュートリアルで作成するアプリケーションは J2ME (JSR226) 向けの SVG API をサポートするほとんどのデバイスで動作します。

注: NetBeans IDE 6.8 を使用している場合は、「Java ME デバイス用のタッチ対応 SVG UI の作成」チュートリアル (NetBeans IDE 6.8 ドキュメント) を参照してください。

目次

• チュートリアルの要件
• プロジェクト環境設定の開始
• SVG コンポーザでの UI の作成
• 背景情報
• SVG ウィジェットと機能入門
• SVG UI を作成する手順
• ビジュアルモバイルデザイナでの MIDlet の作成
• ビジュアルモバイルデザイナを使用したアプリケーションフローの作成
• アプリケーションロジックの UI への追加
• 背景情報
• カスタム SVGList モデルの作成
• 「Next」ボタンおよび「Previous」ボタンのロジック
• タッチ画面デバイスエミュレータでのアプリケーションのテスト
• まとめ
• 関連項目

要件

このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース	必須バージョン
NetBeans IDE と Java ME	version 6.9 以上
Java Development Kit (JDK)	version 6
連絡先ブラウザの例	NetBeans プロジェクト
SVG UI スニペット	NetBeans プラグイン

Java ME 機能が有効になっていることを確認するため、カスタムインストールを実行し、IDE のインストール中はオンデマンド機能コンポーネントの選択を解除することをお勧めします。

プロジェクト環境設定の開始

前出の一覧表示された必須ソフトウェアに加え、次のものもコンピュータにインストールしておくようにしてください。

• ContactBrowser.zip ファイルは、NetBeans プロジェクトフォルダに展開するようにします。
• 次の手順に従って、SVG スニペットプラグインをダウンロードして NetBeans にインストールするようにします。
1. IDE で「ツール」>「プラグイン」に移動します。「ダウンロード済み」タブをクリックし、「プラグインの追加」をクリックします。
2. svg-snippets.nbm ファイルが含まれているローカルフォルダに移動し、ファイルを選択して「インストール」をクリックします。
• 「インストール」をクリックすると、プラグインをインストールするための手順が表示されます。プラグインのインストール後、IDE を再起動する必要があります。
• IDE を再起動したら、「ツール」>「オプション」に移動します。「オプション」ダイアログウィンドウの「その他」をクリックし、「SVG」タブをクリックします。
• 「SVG リッチコンポーネントスニペット」セクションで、「スニペット」ドロップダウンメニューを開き、「J1 HOL SVG Snippets」を選択します。「了解」をクリックします。

  

ページの先頭へ

SVG コンポーザでの UI の作成

SVG ベースの基本的なアプリケーション UI を作成します。このアプリケーションはとても簡単なものですが、Java ME アプリケーションを新規作成する方法、SVG コンポーザからビジュアル MIDlet に SVG 画像をインポートする方法、MIDP デバイスエミュレータでプロジェクトを実行する方法がわかります。

背景情報

SVG: JSR-226 では、スケーラブルな 2 次元のベクトルグラフィックスを XML で描画するための API を指定します。GIF 形式や JPG 形式のように各ピクセルの内容をエンコーディングする代わりに、ベクトルグラフィックスには各ピクセルの描画命令のみが含まれています。これはベクトル画像にとって、いくつかの利点があります。

• スケーラブルなので、サイズや解像度が異なっても、表示される画像の質が保たれます。また、質を損なわずに画像を拡大、反転、または裏返しできます。
• スクリプトおよびアニメーションがサポートされているため、対話式でデータ駆動型のグラフィックスに最適です。
• サイズが小さく収まります。ベクトルベースの画像は、GIF または JPEG 形式の同じ画像の 10 分の 1 までのサイズになります。この重要な利点によって、リソースが限られている携帯型デバイス向けに、グラフィック機能の豊富なアプリケーションを作成できます。
• これを活用することで、画像コンテンツとユーザーとの対話が可能になります。
• これらは検索可能なので、ユーザーが画像の中のテキストを検索できます。たとえば、ユーザーが特定の通りの名前を地図から検索したり、レストランのメニューから好みの品を探したりできます。

モバイルデバイス向けの機能が完備された SVG のサブセットは SVG Tiny と呼ばれ、JSR-226 は J2ME ベクトルグラフィックスの公式ファイル形式として SVG Tiny プロファイルの version 1.1 を採用しています。

SVG ウィジェットと機能入門

ユーザーインタフェースは、NetBeans で SVG コンポーザおよび SVG フォームリッチ UI コンポーネントを使用すると、簡単に作成できます。

SVG コンポーザパレットにある SVG UI スニペットの概要は次のとおりです。

• SVG リスト - 開発者が、UI に必要な UI 要素のリストを作成できます。
• SVG ラジオボタン - SVG スニペットで使用することで、ユーザーが性別を選択できるようにします。
• SVG コンボボックス - ドロップダウンリストメニュー用の UI コンポーネントです。
• SVG テキスト - 人名や製品 ID などのテキストを表示できるフィールドです。
• SVG ボタン - 「Next」、「Previous」、「OK」などの UI 機能に使用するボタンです。
• SVG スピナ - ユーザーが上下ボタンを使用して変数をスクロールできるようにします。
• SVG スライダ - ユーザーが可変的な特徴を調整できるようにします。たとえば、明るいから濃い、0% - 100% などです。
• SVG ラベル - ユーザーがテキストフィールドやその他の UI コンポーネントにラベルを付けられるようにします。

この説明は、SVG UI リッチコンポーネントの概要を簡潔に述べただけのものです。詳細については、NetBeans ビジュアルモバイルデザイナの Wiki ページを参照してください。

SVG UI を作成する手順

すぐに始めるには、前もって用意されている ContactBrowser プロジェクトを開きます。このプロジェクトを、プロジェクト作成の基礎として使用します。

1. 提供された ContactBrowser Java ME プロジェクトを、NetBeans IDE で開きます。

ContactBrowser プロジェクトの概要



2. employeeList.svg 画像を SVG コンポーザで開き、次に示すように、2 つの SVG ボタンと 1 つの SVG リストフォームコンポーネントをパレットから「プレビュー」キャンバスにドラッグ＆ドロップします。ボタンの名前は、このチュートリアルの後半で変更します。

次のコンポーネントが追加され、完了したフォームを次に示します。

• 2 つのボタン
• 1 つのリスト



3. 「プレビュー」ウィンドウで、左上の「OK」ボタン内のテキストをクリックし、次のスクリーンショットに示すように左側にドラッグします。こうすると、UI ボタン上に「Select」という語が正しく表示されます。



4. この SVG UI には追加の SVG ファイル (employeeForm.svg) が必要なため、再度ファイルを開き、ボタン、テキストフィールド、ラベルをパレットから SVG コンポーザの画像に追加し、これらの名前を変更して UI を作成します。完了すると、次の画像のような外観になるはずです。
• 追加されたコンポーネント
• 3 つのボタン
• 4 つのラベル
• 2 つのテキストフィールド
• 1 つのラジオボタン
• 1 つのスピナ



5. 「プレビュー」ウィンドウで、左下の「OK」ボタン内のテキストをクリックし、次のスクリーンショットに示すように左側にドラッグします。こうすると、UI ボタン上に「Previous」という語が正しく表示されます。



6. 「プロパティー」ビューで、各ボタンの「テキスト」プロパティーを変更します。次のスクリーンショットに示すように、左下の「OK」ボタンのテキストを左側にドラッグします。こうすると、UI ボタン上に「Previous」という語が正しく表示されます。

ビジュアルモバイルデザイナでの MIDlet の作成

SVG リッチ UI コンポーネントフレームワークは、次の 2 つの部分に分けられます。

• SVG スニペットは、SVG コンポーザまたはその他の SVG エディタで UI を構築するために使用します。
• UI 機能をサポートする Java ME ライブラリ

SVG コンポーザとスニペットについては、すでに説明をしました。次の手順では、SVG 画像を Java ME ソースコードのアプリケーションロジックとマージするのに役立つ実行時ライブラリをビジュアルモバイルデザイナで見ていきます。

1. 新しいビジュアル MIDlet を作成するには、「ファイル」>「新規ファイル」を選択し、「カテゴリ」の下の「新規ファイル」ダイアログボックスで「MIDP」を選択し、「ファイルの種類」の「ビジュアル MIDlet」を選択します。新しいファイルは org.netbeans.lab.ui.svg パッケージの一部になるはずです。

   

2. 新しく作成した MIDlet 内で、「フロー」ビューに切り替えます。パレットの「SVG コンポーネント」セクションから、2 つの SVG フォームコンポーネントをドラッグして「フロー」ビューのデザインキャンバスにドロップし、右クリックして表示されるコンテキストメニューを使用してそれらの名前を employeeList および employeeForm に変更します。

   

3. 次の手順では、SVG 画像をソースコードに接続します。SVG UI コンポーネントをソースコードに接続するには、employeeList.svg ファイルを「プロジェクト」ウィンドウからドラッグして employeeList コンポーネントにドロップし、employeeForm.svg を employeeForm にドラッグして、この操作を繰り返します。

   

4. 次に svgButtons のインスタンス名を、実行するアクションに対応する名前に変更します。この操作でボタンの UI が変更されることはありません。変更はあとで行います。svgButtons のインスタンス名を変更するには、このボタンを右クリックし、コンテキストメニューから「名前を変更」を選択します。「インスタンス名を変更」ダイアログの「新しい名前」フィールドに、svgButtons インスタンスに対するアクション名を入力します。

   注: UI コンポーネントのインスタンス名を変更する場合、新しい名前は UI ボタンの機能と対応するようにしてください。

   

5. 次の手順で、ボタンとテキストフィールドのデフォルトの SVG ラベルを ContactBrowser アプリケーションで表示される情報と一致するように変更する必要があります。これを行うには、「画面」ビューに切り替えて、employeeForm を表示します。「画面」ビューの「ラベル」項目を選択し、各ラベルとボタンのテキストプロパティーを変更します。変更後は、次のスクリーンショットのようになります。



6. また、SVG テキストフィールドのインスタンス名も変更する必要があります。「First Name」を右クリックし、コンテキストメニューから「名前を変更」を選択して、この名前を svgTextFieldFirstName に変更します。この手順を「Last Name」フィールドに対して繰り返し、名前を svgTextFieldLastName に変更します。
7. IDE プロジェクトウィンドウのドロップダウンメニューで「employeeForm」から「employeeList」に切り替え、ボタン名を次のスクリーンショットに示すように変更します。変更結果は、「プロパティー」ウィンドウの「テキスト」フィールドで確認できます。

ページの先頭へ

ビジュアルモバイルデザイナを使用したアプリケーションフローの作成

これで、ビジュアルモバイルデザイナの「フロー」ビューを使用し、アプリケーションフローを作成する準備ができました。

1. IDE の「画面」ビューから「フロー」ビューに切り替えます。
2. 次に示すように、コンポーネントを接続します。「モバイルデバイス」要素の「起動」をクリックして開始し、マウスを「employeeList」要素にドラッグします。ほかのコンポーネントの接続でも、この方法を繰り返します。

   

「ソース」ビューで、SVG XML UI コンポーネントスニペットを Java ME 実行時ライブラリとバインドする仕組みを確認できます。次の例に、SVG ボタンスニペットを Java ME オブジェクトとバインドする方法を示します。SVG コンポーネントは XML スニペット ID に基づいて認識されます。この例では、その ID は button_0 です。

アプリケーションの実行

アプリケーションロジックを追加する前に、エミュレータ上で Contact Browser UI をテストするようにします。

メニューから「主プロジェクトを実行」(F6) を選択し、エミュレータの起動後、UI を確認してテストできます。アプリケーションロジックをまだ実装していませんが、ビジュアルモバイルデザイナで行った作業に基づいて、UI が予想どおりに表示されることを確認できます。

ページの先頭へ

アプリケーションロジックの SVG ユーザーインタフェースへの追加

これで、これまでの手順で作成した UI に対し、ビジュアルモバイルデザイナを使用してアプリケーションロジックを作成できるようになりました。ここでいくつかの追加のコンポーネントとメソッドを使用して、Java ME SDK 3.0 エミュレータでのアプリケーションの実行を完了します。

背景情報

• SVG ListModel: SVGList のようなコンポーネントでリスト内の各セルの値を取得するために使用するメソッドと、表示に必要なセルの数の計算が定義されます。論理的にこのモデルはベクトルであり、指数は 0 から ListDataModel.getSize() - 1 まで変化します。この内容またはデータモデルの長さが変更された場合、変更内容が SVGList のすべての DataListener に通知される必要があります。Swing の JList モデルに習熟している場合、SVGListModel は理解しやすいはずです。
• エントリポイントコンポーネント: エントリポイントコンポーネントを使用して、デザインしたクラスにメソッドを表すことができます。このメソッドには、メソッドに割り当てられたアクションで指定されたコードが格納されます。このメソッドは、アプリケーション画面の切り替え時にコードを実行する必要がある場合や、この例であれば、ビジュアル MIDlet の「フロー」ビューに SVG ボタンロジックを表現する場合に大変役立ちます。

カスタム SVGList モデルの作成

この手順では、独自の SVGListModel の実装を作成します。ここで作成する SVGListModel の実装は、getSvgList メソッドの内部の匿名クラスです。

1. 「ナビゲータ」(表示されていない場合は Ctrl+7) を使用して、右クリックしてコンテキストメニューから「ソースへ移動」を選択することで employeeList コンポーネントの getSvgList 要素を検索します。
2. getSVGList メソッドの内部で、svgList = new SVGList(getEmployeeList(), "list_0"); のあとに次のコードを追加します。

		    //新しい SVGListModel を匿名クラスとして作成し、追加する。Implementation of ListModel
            svgList.setModel(new SVGList.ListModel() {
                //連絡先データを EmployeeData クラスから Vector として取得
                Vector data = EmployeeData.getData();  
                                
                /**
                 * メソッドは文字列の組み合わせを返す: 名 + 姓
                 * @return Employee name as String
                 */
                public Object getElementAt(int index) {
                    //名の文字列を取得
                    String firstName = ((Employee) data.elementAt(index)).getFirstName();
                    //姓の文字列を取得
                    String lastName = ((Employee) data.elementAt(index)).getLastName();
                    
                    return firstName + " " + lastName;
                }
                 /**
                 * 従業員数
                 * @return number of employees
                 */
                public int getSize() {
                    return data.size();
                }
                //使用しない
                public void addDataListener(DataListener listener) { }               
                
                //使用しない
                public void removeDataListener(DataListener listener) { }                          
            });

注: IDE でコード補完機能を使用して自力でコードを入力できます。

「Next」ボタンおよび「Previous」ボタンのロジック

この手順では、employeeForm の一部である SVG ボタンロジックを追加します。これらのボタンを使用することで、ユーザーは従業員データ間を移動できます。「Next」をクリックすると、ユーザーは次の従業員の連絡先にジャンプできます。「Previous」ボタンをクリックすると、ユーザーには前の従業員レコードが表示されるはずです。この手順では、前の手順で説明したエントリポイント要素を使用します。

1. 「フロー」ビューに切り替えて、パレットの「フロー」カテゴリから 2 つの「エントリポイント」コンポーネントを追加します。コンポーネントを右クリックし、次に示すように名前を「nextMethod」および「previousMethod」に変更します。

   

2. 次に、グローバルな非公開整数のプロパティー索引をビジュアル MIDlet に追加する必要があります。「ソース」ビューに戻り、生成されたフィールドの保護されたブロックの下に次のコードを追加します。

private int index = 0;

3. 次は、UI を更新するロジックを employeeForm に追加します。ここで使用するメソッドによって、employeeForm コンポーネント内の SVG UI 要素が更新されます。「ソース」エディタで、クラスの最後に次のメソッドを追加します。

   注: IDE のコード補完機能を使用してコードを入力できます。

	        //**メソッドは従業員 UI フォームに従業員についての情報を入力する処理を行う。
            private void updateEmployeeFormUI() {
              //現在選択されている従業員を取得
              final Employee employee = (Employee) EmployeeData.getData().elementAt(index);
              //名を設定
              getSvgTextFieldFirstName().setText(employee.getFirstName());
              //姓を設定
              getSvgTextFieldLastName().setText(employee.getLastName());
              //性別を設定
              if (employee.getGender()) {
                  getSvgRadioButton().setSelected(false);
                  getSvgRadioButton1().setSelected(true);
              } else {
                  getSvgRadioButton().setSelected(true);
                  getSvgRadioButton1().setSelected(false);
              }    
              //年齢を設定
              getSvgSpinner().getModel().setValue(new Integer(employee.getAge()));
            }  
	  

これで、nextMethod および previousMethod にロジックを追加できるようになりました。

4. 「フロー」ビューに切り替えて、「nextMethod」エントリポイントを右クリックし、ポップアップメニューから「ソースへ移動」オプションを選択します。
5. ソースエディタで、nextMethod() メソッド内の switchDisplayable(null, getEmployeeForm().getSvgCanvas()); の前に次のコードを追加します。このコードによって、従業員データレコードのキュー内の次のレコードが表示されます。また、表示する情報を更新する UI を呼び出します。

// 次の従業員レコードに移動
        if (index < EmployeeData.getData().size() - 1) {
            //インデックスを更新。
            index++;
        }
        //UI を更新 - 従業員フォーム
        updateEmployeeFormUI();
        //employeeForm に戻る
		

6. 「フロー」ビューに切り替えて、「previousMethod」エントリポイントを右クリックし、ポップアップメニューから「ソースへ移動」オプションを選択します。
ソースエディタで、previousMethod() メソッド内の switchDisplayable(null, getEmployeeForm().getSvgCanvas()); の前に次のコードを追加して、データ表示機能の動作を有効にします。

// 前の従業員レコードに移動
        if (index > 0) {
            //インデックスを更新
            index--;
        }
        //UI を更新
        updateEmployeeFormUI();
        //employeeForm に戻る
	  

次に、employeeForm の呼び出し時に UI が更新され、従業員リストで実行される選択操作に基づいてグローバル索引が設定されることを確認する必要があります。

7. 「フロー」ビューに切り替えて、employeeList 内の「選択」ボタンを右クリックし、ポップアップメニューから「ソースへ移動」を選択します。
8. ソースエディタで、getSelect() メソッド内の public void actionPerformed(SVGComponent svgComponent) { のあとに次のコードを追加します。

 //グローバルインデックスを更新
                    index = getSvgList().getSelectionModel().getSelectedIndex();
                    //選択が行われたあとに UI を更新
                    updateEmployeeFormUI();
                    //employeeForm への切り替え

ページの先頭へ

タッチ画面デバイスエミュレータでのアプリケーションのテスト

この時点で、NetBeans IDE インストーラにバンドルされた、Java ME SDK 3.0 の DefaultFxTouchPhone1 デバイスエミュレータでアプリケーションをテストする準備ができました。アプリケーションを起動するためには、プロジェクトのプロパティーを編集する必要があります。

1. プロジェクトのノードを右クリックし、コンテキストメニューから「プロパティー」を選択します。「プロジェクト」ダイアログの「カテゴリ」の下で「プラットフォーム」を選択し、次に「エミュレータプラットフォーム」ドロップダウンメニューから「Java Platform Micro Edition SDK 3.0」を選択します。
2. 次に示すように、タッチ画面デバイスエミュレーションに対して「デバイス」ドロップダウンメニューから「DefaultFxTouchPhone1」を選択し、「了解」をクリックします。



3. 「実行」>「プロジェクトを実行」(F6) に移動して、エミュレータでアプリケーションを起動します。SVG コンポーネントにマウスポインタを重ねることで、タッチ画面のプロパティーが有効であることを確認できます。画面内でマウスカーソルを動かして、ユーザーが指先で操作するのと同様にアプリケーションメニューを操作できます。
4. エミュレータ内で、UI 要素が正しく動作することを確認するための「Previous」または「Next」ボタンの使用など、いくつかの基本的な UI テストを実行できます。

まとめ

このチュートリアルでは、NetBeans IDE を使用して、SVG ベースでタッチ画面に対応した、Java ME デバイス用の UI を作成する方法を学びました。

ページの先頭へ

関連項目

• リッチ SVG UI コンポーネントの参照
• リッチ SVG UI アプリケーション
• SVG リッチ UI コンポーネントの使用
• 参照: ビジュアルモバイルデザイナのパレットのガイド
• NetBeans Java ME アプリケーションの学習

ページの先頭へ