ビジュアルモバイルデザイナのカスタムコンポーネント: Java ME アプリケーションでの表項目の使用

ビジュアルモバイルデザイナ (VMD) を使用すると、コンポーネントのドラッグ&ドロップを使用して Java ME アプリケーションを設計できます。これにより、IDE で提供されるコンポーネントや自分で設計したコンポーネントを使用して、UI のルック & フィールと同様にアプリケーションフローを指定することができます。VMD には多くの標準コンポーネントが用意されており、リスト、警告、フォーム、画像などのアプリケーションの作成に使用できます。また、待機画面、スプラッシュ画面、ログイン画面など、より複雑なコンポーネントを簡単に作成できるカスタムコンポーネントも含まれます。

表項目コンポーネントを使用することで、1 列以上の列から構成される表を短時間で作成できます。列の各レコードには見出し領域とデータ領域が含まれます。この表の縦と横のサイズは、画面より大きくてもかまいません。ユーザーは、カーソルを使用してどちらの方向にもスクロールできます。ビジュアルモバイルデザイナ (VMD) の表項目コンポーネントを使用すると、Java ME アプリケーションのデータ表の設計と実装が簡略化されます。

NetBeans でのモバイルアプリケーション開発に習熟していない場合、次に進む前に「NetBeans Java ME MIDP 開発のクイックスタートガイド」から始めることをお勧めします。

目次

このページの内容は NetBeans IDE 6.9 以降が対象です

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

ソフトウェアまたはリソース 必須バージョン
NetBeans IDE と Java ME version 6.9 以降
Java Development Kit (JDK) version 6 または version 7

表項目コンポーネントの動作方法

この例では、モバイルアプリケーションで表項目コンポーネントおよび表モデルコンポーネントを使用する方法を示します。その中で、これらのコンポーネントの基本的機能と、Java ME アプリケーションでデータを視覚化して操作するために、簡易表モデルコンポーネントの中でそれらを使用する方法を説明します。このチュートリアルで説明する表項目コンポーネントでは、簡易表モデルインタフェースからの表を使用してデータを表示し、ユーザーがそのデータを編集できるようにします。

表項目カスタムコンポーネントに加え、テキストボックスとフォームの 2 つの MIDP コンポーネントを使用する必要があります。VMD パレットに含まれるこれらやその他のカスタムコンポーネントの詳細については、「ビジュアルモバイルデザイナのパレットのガイド」を参照してください。

サンプルアプリケーションのインストールと実行

始める前に、チュートリアルの最終結果を確認します。次の手順で TableItemExample サンプルアプリケーションをインストールします。

  1. TableItemExample.zip ファイルをダウンロードします。
  2. ファイルを展開します。
  3. IDE で、「ファイル」>「プロジェクトを開く」を選択し、展開したファイルがあるフォルダを選択します。
  4. 「プロジェクト」ウィンドウを開きます。画面は次のようになります。

    表項目の例が表示された「プロジェクト」ウィンドウ

  5. 「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「プロジェクトを実行」を選択します (または F6 キーを押す)。アプリケーションが実行されると、エミュレータウィンドウが開き、デフォルトのデバイスエミュレータでアプリケーションが実行されるところが表示されます。
  6. 「エミュレータ」ウィンドウで「起動」の下のボタンをクリックします。次に示すように、エミュレータで表が表示されます。

    サンプル表アプリケーションが表示された DefaultColorPhone エミュレータ

  7. 表を編集します。
    • 選択ボタンの方向矢印を使用して、セル間でカーソルを移動します。
    • セルの内容を編集するには、「Edit Cell」の下のボタンをクリックします。
  8. アプリケーションを終了するには、「Exit」の下のボタンをクリックします。

ページの先頭へ

表項目カスタムコンポーネントを使用した Java ME アプリケーションの作成

ここまでで表項目コンポーネントの使用方法を見てきました。次は、このアプリケーションの作成方法を説明します。アプリケーションを作成するには、次の手順を実行します。

  1. MyTableExample プロジェクトの作成
  2. MyTableExample プロジェクトへのパッケージとビジュアル MIDlet の追加
  3. MyTableMIDlet へのコンポーネントの追加
  4. 簡易表モデルのデザインの編集
  5. フォームコンポーネントとテキストボックスコンポーネントへのコマンドの追加
  6. コンポーネントを接続してアプリケーションフローを作成する
  7. ソースコードの挿入
  8. プロジェクトを実行する

MyTableExample プロジェクトの作成

  1. ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java ME」を選択します。「プロジェクト」で「モバイルアプリケーション」を選択して、「次へ」をクリックします。
  2. 「プロジェクト名」フィールドに「MyTableExample」と入力します。「プロジェクトの場所」をシステム上の任意のディレクトリに変更します。以降、このディレクトリを $PROJECTHOME とします。
  3. 「Hello MIDlet を作成」チェックボックスの選択を解除します。「次へ」をクリックします。
  4. 「エミュレータプラットフォーム」は、「Java Platform Micro Edition SDK 3.0」を選択したままにしておきます。「完了」をクリックします。

MyTableExample プロジェクトへのパッケージとビジュアル MIDlet を追加

  1. 「プロジェクト」ウィンドウで MyTableExample プロジェクトを選択し、「ファイル」>「新規ファイル」(Ctrl-N) を選択します。「カテゴリ」から「Java」を選択します。「ファイルの種類」として「Java パッケージ」を選択します。「次へ」をクリックします。
  2. 「パッケージ名」フィールドに「tableitemexample」と入力します。「完了」をクリックします。
  3. 「プロジェクト」ウィンドウで tableitemexample パッケージを選択し、「ファイル」>「新規ファイル」(Ctrl-N) を選択します。「カテゴリ」にある「MIDP」を選択します。「ファイルの種類」として「ビジュアル MIDIlet」を選択します。「次へ」をクリックします。
  4. 「MIDlet 名」フィールドと「MIDP クラス名」フィールドに「MyTableItemMidlet」と入力します。「完了」をクリックします。

MyTableMIDlet へのコンポーネントの追加

  1. ビジュアル MIDlet を「フロー」ビューに切り替えます。次の画面コンポーネントをコンポーネントパレットからドラッグし、フローデザイナにドロップします。
    • フォーム
    • テキストボックス
  2. textBox」を選択し、「プロパティー」ウィンドウでコンポーネントの「タイトル」を「Edit」に変更します。
  3. form」コンポーネントをダブルクリックして「画面」ビューに切り替えます。
  4. コンポーネントパレットの「項目」セクションから「表項目」コンポーネントをドラッグし、「form」にドロップします。スクリーンデザイナに追加した表項目コンポーネントは、次のようになります。

    「デバイス画面」上に表項目が追加されたスクリーンデザイナの表示

  5. tableItem を選択し、「プロパティー」ウィンドウで、「ラベル」プロパティー値として「TableItem Example」と入力します。
  6. tableItem コンポーネントを右クリックし、ポップアップメニューから「プロパティー」を選択します。
  7. 「表モデル」プロパティーで矢印 (矢印) をクリックし、ドロップダウンリストから「<新規 SimpleTableModel>」を選択します。
  8. 「閉じる」をクリックします。
    simpleTableModel コンポーネントが「リソース」に追加されます。

    追加された simpleTableModel

簡易表モデルのデザインの編集

  1. 「画面」ビューで、<表モデルが指定されていません> コンポーネントをダブルクリックし、「値」ダイアログボックスを開きます。
  2. 「値」ダイアログボックスで、「ヘッダーを使用」オプションをオンにします。
  3. 「行を追加」ボタンと「列を追加」ボタンをそれぞれ 4 回クリックし、行と列の数を 4 つに変更します。
  4. 表ヘッダーの名前を、「column 1」、「column 2」、「column 3」、および「column 4」に変更します。

    表モデル

  5. 「了解」をクリックして完了します。

    表項目コンポーネントに割り当てられた簡易表モデル

フォームコンポーネントとテキストボックスコンポーネントへのコマンドの追加

  1. 「フロー」ビューを開きます。
  2. コンポーネントパレットの「コマンド」セクションで終了コマンドを選択します。これを form コンポーネントにドラッグ&ドロップします。この操作を項目コマンドについて繰り返します。
  3. 「画面」ビューで itemCommand を選択します。「プロパティー」ウィンドウの「ラベル」プロパティーの値を「Edit Cell」に変更します。
  4. 「フロー」ビューで、コンポーネントパレットの「コマンド」セクションで了解コマンドを選択し、textBox コンポーネントにドラッグ&ドロップします。

    コマンドを追加した「フロー」ビューの表示

コンポーネントの接続

「フロー」ビューで、モバイルデバイスの「起動」をクリックし、それを form コンポーネントまでドラッグします。同様に、次の図に示すようにコンポーネントを接続します。

コンポーネントを接続した「フロー」ウィンドウの表示

ソースコードの挿入

  1. 「フロー」ビューで、form コンポーネントの itemCommand を右クリックし、ポップアップメニューから「ソースへ移動」を選択します。
  2. switchDisplayable メソッドの前の // write pre-action user code here という場所に、次のコードを挿入します。
     	                                    
                if (textBox != null) {      
            // 表のカーソルの位置を取得する。      
             int row = tableItem.getSelectedCellRow();      
             int column = tableItem.getSelectedCellColumn() ;
            // 表モデルから値を取得する  
               Object value = simpleTableModel.getValue(column,row); 
            // textBox 文字列値を設定する   
              if (value != null)
              textBox.setString(value.toString());          
                 else  
              textBox.setString("");
            } 
  3. 「フロー」ビューに切り替え、textBox コンポーネントの okCommand を右クリックし、ポップアップメニューの「ソースへ移動」を選択します。
  4. switchDisplayable メソッドの前の // write pre-action user code here という場所に、次のコードを挿入します。
    	            int row = tableItem.getSelectedCellRow();
                    int column = tableItem.getSelectedCellColumn();
                    // 表モデルに新しい値を設定する 
                    simpleTableModel.setValue(column, row, textBox.getString());
                    // 表モデルを画面デバイスに再描画する
                    simpleTableModel.fireTableModelChanged();  
    	  
  5. Ctrl+S キーを押して編集を保存します。

プロジェクトの実行

F6 キーを押して主プロジェクトを実行します。あるいは、「実行」>「主プロジェクトを実行」を選択してもかまいません。

ページの先頭へ

表項目コンポーネントと簡易表モデルコンポーネントの Javadoc

NetBeans IDE には、VMD で使用できるほかのコンポーネントと同様に、表項目コンポーネントや表モデルコンポーネントに関する API Javadoc が用意されています。表項目コンポーネントまたは表モデルコンポーネントの Javadoc を表示するには、次の手順を実行します。

  1. ソースコードの表項目コンポーネントまたは表モデルコンポーネントにカーソルを合わせ、Ctr-Shift- スペースキーを押します (または「ソース」>「ドキュメントを表示」を選択します)。
    この要素の Javadoc がポップアップウィンドウに表示されます。
  2. ポップアップウィンドウで「外部 Web ブラウザにドキュメントを表示」アイコン (「外部 Web ブラウザにドキュメントを表示」) をクリックすると、表項目コンポーネントまたは表モデルコンポーネントについての詳細な情報がブラウザに表示されます。

ページの先頭へ


関連項目

ページの先頭へ

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo