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

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. 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. ソースビューに切り替えます。
2. ソースコードから getOkCommand メソッド (198 行目) を探し、okCommand = new Command("Ok", Command.OK, 0); のあとの // write post-init user code here とある箇所に次のコードを挿入します。

    	                                    
               } else if (command == itemCommand) {
                   
    		/* この部分のコードは表モデルの
            * 値の取得のために使用
            */
            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. 207 行目のエラーマーカー () をクリックし、次の図に示すように、ポップアップメニューから「tableitemexample.MyTableItemMidlet 内にフィールド command を作成」オプションを選択します。



4. ソースコードから getItemCommand メソッド (189 行目) を探し、itemCommand = new Command("Edit Cell", Command.ITEM, 0); のあとの // write post-init 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("");
           } 
   	  

プロジェクトの実行

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