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

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 コンポーネントが「リソース」に追加されます。

   

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

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

   

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

   

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

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

   

コンポーネントの接続

ソースコードの挿入

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