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

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 キーを押して主プロジェクトを実行します。

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