corner imagecorner image
FeaturesPluginsDocs & SupportCommunityPartners

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

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

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

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

目次

このページの内容は NetBeans IDE 6.1、6.5、および 6.7 が対象です

要件

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

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

はじめに: 表項目コンポーネントの動作方法

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

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

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

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

  1. TableItem.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. ソースコードへのアクション前コードの挿入
  9. プロジェクトの実行

MyTableExample プロジェクトの作成

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

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

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

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

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

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

  4. 「tableItem1」をクリックし、「プロパティー」ウィンドウで「ラベル」プロパティーに「TableItem Example」と入力します。
  5. 「textBox1」を選択し、コンポーネントの「タイトル」を「Edit」に変更します。
  6. 「リソース」フォルダを右クリックし、「追加」>「簡易表モデル」を選択します。

表項目コンポーネントへの簡易表モデルの割り当て

  1. 「tableItem1」コンポーネントを「画面」ビューで選択します。
  2. 「プロパティー」ウィンドウの「表モデル」プロパティーをクリックし、一覧から「simpleTableModel1」を選択します。これで、表グリッドが表項目コンポーネントの内側に表示されるようになりました。

    簡易表モデルグリッドが表項目に表示された「デバイス画面」

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

  1. 表項目コンポーネント (スクリーンデザイナ) をダブルクリックし、「表モデル」エディタウィンドウを開きます。
  2. 「表モデル」エディタウィンドウで、列数と行数をそれぞれ 4 に変更します。
  3. 「ヘッダーを使用」オプションを選択します。
  4. 表ヘッダーの名前をそれぞれ「column 1」、「column 2」、「column 3」、および「column 4」に変更します。
  5. 「了解」をクリックして完了します。

    編集中の表モデルを示した図

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

  1. 「フロー」ウィンドウを開きます。
  2. コンポーネントパレットの「コマンド」セクションで終了コマンドを選択します。このコマンドをドラッグし、「フロー」ウィンドウ (form1 コンポーネント) にドロップします。この操作を項目コマンドについて繰り返します。
  3. スクリーンデザイナの「itemCommand1[Command]」を選択します。「プロパティー」ウィンドウの「ラベル」プロパティーの値を「Edit Cell」に変更します。

    割り当てられたコマンドがあるスクリーンデザイナの表示画面

  4. コンポーネントパレットの「コマンド」セクションで了解コマンドを選択し、textBox1 コンポーネントにドラッグ&ドロップします。

コンポーネントの接続

  1. 「フロー」デザインウィンドウで、モバイルデバイスの「起動」をクリックし、form1 コンポーネントまでドラッグします。同様に、次の図に示すようにコンポーネントを接続します。

    「フロー」ウィンドウでコンポーネントをコマンドの線で接続したところ

ソースコードへのアクション前コードの挿入

  1. 「ソース」ウィンドウに切り替えます。
  2. ソースコードの commandAction メソッドを検索し、if (command == okCommand1) { と書かれた okCommand1 直後の //insert pre-action code here コメントがある場所に次のコードを挿入します。
     	  /* この部分のコードは表モデルの値の保存の 
           * ために使用 
           */ 
          // 表内のカーソル位置の取得
              int row = tableItem1.getSelectedCellRow();
              int column = tableItem1.getSelectedCellColumn();
          // 表モデルへの新しい値の設定
          simpleTableModel1.setValue(column,row,textBox1.getString());
          // 画面デバイス上の表モデルの再描画
          simpleTableModel1.fireTableModelChanged(); 
         
  3. } else if (command == itemCommand1) { と書かれた itemCommand1 直後の //insert pre-action code here) コメントがある場所に次のコードを挿入します。
     		/* この部分のコードは表モデルの
             * 値の取得のために使用
             */
             if (textBox1 != null) {      
            // 表内のカーソル位置の取得      
             int row = tableItem1.getSelectedCellRow();      
             int column = tableItem1.getSelectedCellColumn() 
            // 表モデルの値の取得  
               Object value = simpleTableModel1.getValue(column,row); 
            // テキストボックスの文字列値の設定   
              if (value != null)
              textBox1.setString(value.toString());          
                 else  
              textBox1.setString("");
            } 
             

プロジェクトの実行

  1. F6 キーを押して主プロジェクトを実行します。

    「実行」>「主プロジェクトを実行」を選択する方法もあります。

表項目コンポーネントおよび簡易表モデルコンポーネントの詳細

NetBeans IDE には、VMD で使用できるコンポーネントと同様に、表項目や表モデルなどのコンポーネントに関する API ドキュメント (javadocs) が用意されています。表項目コンポーネントおよび表モデルコンポーネントに関する javadocs を読むには、次の手順に従います。

  1. 「ヘルプ」>「Javadoc 参照」>「NetBeans MIDP コンポーネント」を選択します。
  2. org.NetBeans.microedition.lcdui」をクリックすると、コンポーネント情報へのリンクが表示されます。

その他の NetBeans Java ME カスタムコンポーネントチュートリアル