| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | |
| <!-- Copyright (c) 2009, 2010, Oracle and/or its affiliates. All rights reserved. --> | |
| <!-- Use is subject to license terms.--> | |
| <html> | |
| <head> | |
| <title>ビジュアルモバイルデザイナのカスタムコンポーネント: Java ME アプリケーションでの表項目の使用 - NetBeans IDE チュートリアル</title> | |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> | |
| <meta name="Karol Harezlak" content="NetBeans Visual Mobile Designer"> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > | |
| </head> | |
| <body> | |
| <a name="top"></a> | |
| <h1>ビジュアルモバイルデザイナのカスタムコンポーネント: Java ME アプリケーションでの表項目の使用</h1> | |
| <p> ビジュアルモバイルデザイナ (VMD) を使用すると、コンポーネントのドラッグ＆ドロップを使用して Java ME アプリケーションを設計できます。これにより、IDE で提供されるコンポーネントや自分で設計したコンポーネントを使用して、UI のルック & フィールと同様にアプリケーションフローを指定することができます。VMD には多くの標準コンポーネントが用意されており、リスト、警告、フォーム、画像などのアプリケーションの作成に使用できます。また、待機画面、スプラッシュ画面、ログイン画面など、より複雑なコンポーネントを簡単に作成できるカスタムコンポーネントも含まれます。 </p> | |
| <p>表項目コンポーネントを使用することで、1 列以上の列から構成される表を短時間で作成できます。列の各レコードには見出し領域とデータ領域が含まれます。この表の縦と横のサイズは、画面より大きくてもかまいません。ユーザーは、カーソルを使用してどちらの方向にもスクロールできます。ビジュアルモバイルデザイナ (VMD) の表項目コンポーネントを使用すると、Java ME アプリケーションのデータ表の設計と実装が簡略化されます。 </p> | |
| <p>NetBeans でのモバイルアプリケーション開発に習熟していない場合、次に進む前に「<A HREF="quickstart.html">NetBeans Java ME MIDP 開発のクイックスタートガイド</A>」から始めることをお勧めします。</p> | |
| <!--<p class="notes"><b>注:</b> NetBeans IDE 6.8 を使用している場合、<a href="../../68/javame/tableitem.html">「Java ME アプリケーションでの表項目の使用」(NetBeans IDE 6.8)</a> チュートリアルを参照してください。</p>--> | |
| <h3>目次</h3> | |
| <img src="../../../images_www/articles/69/netbeans-stamp-69-70-71.png" class="stamp" alt="このページの内容は NetBeans IDE 6.9 以降が対象です" title="このページの内容は NetBeans IDE 6.9 以降が対象です" > | |
| <ul> | |
| <li><a href="#intro" title="表項目コンポーネントの動作方法">表項目コンポーネントの動作方法</a></li> | |
| <li><a href="#sample" title="サンプルアプリケーションのインストールと実行">サンプルアプリケーションのインストールと実行</a></li> | |
| <li><a href="#creating" title="表項目カスタムコンポーネントを使用した Java ME アプリケーションの作成">表項目カスタムコンポーネントを使用した Java ME アプリケーションの作成</a> | |
| <ul> | |
| <li> <a href="#create">MyTableExample プロジェクトの作成</a> </li> | |
| <li><a href="#add">MyTableExample プロジェクトへのパッケージとビジュアル MIDlet の追加</a></li> | |
| <li><a href="#addcomponent">MyTableMIDlet へのコンポーネントの追加</a></li> | |
| <li><a href="#edit">簡易表モデルのデザインの編集</a></li> | |
| <li><a href="#addcommands">フォームコンポーネントとテキストボックスコンポーネントへのコマンドの追加</a></li> | |
| <li><a href="#connect">コンポーネントを接続してアプリケーションフローを作成する</a></li> | |
| <li><a href="#insert">ソースコードの挿入</a></li> | |
| <li><a href="#run">プロジェクトの実行</a></li> | |
| </ul></li> | |
| <li><a href="#nextsteps" title="関連項目">関連項目</a></li> | |
| </ul> | |
| <p><b>このチュートリアルを完了するには、次のソフトウェアとリソースが必要です。</b></p> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <th class="tblheader" scope="col">ソフトウェアまたはリソース</th> | |
| <th class="tblheader" scope="col">必須バージョン</th> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE と Java ME</a></td> | |
| <td class="tbltd1">version 6.9 以降</td> | |
| </tr> | |
| <tr> | |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> | |
| <td class="tbltd1">version 6 または version 7</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2><a name="intro"></a>表項目コンポーネントの動作方法</h2> | |
| <p>この例では、モバイルアプリケーションで表項目コンポーネントおよび表モデルコンポーネントを使用する方法を示します。その中で、これらのコンポーネントの基本的機能と、Java ME アプリケーションでデータを視覚化して操作するために、簡易表モデルコンポーネントの中でそれらを使用する方法を説明します。このチュートリアルで説明する表項目コンポーネントでは、簡易表モデルインタフェースからの表を使用してデータを表示し、ユーザーがそのデータを編集できるようにします。</p> | |
| <p>表項目カスタムコンポーネントに加え、テキストボックスとフォームの 2 つの MIDP コンポーネントを使用する必要があります。VMD パレットに含まれるこれらやその他のカスタムコンポーネントの詳細については、「<a href="http://wiki.netbeans.org/VisualMobileDesignerPalatteReference">ビジュアルモバイルデザイナのパレットのガイド</a>」を参照してください。</p> | |
| <h2><a name="sample"></a>サンプルアプリケーションのインストールと実行</h2> | |
| <p> 始める前に、チュートリアルの最終結果を確認します。次の手順で <code>TableItemExample</code> サンプルアプリケーションをインストールします。</p> | |
| <ol> | |
| <li><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Mobile/TableItemExample.zip">TableItemExample.zip</a> ファイルをダウンロードします。</li> | |
| <li> ファイルを展開します。 </li> | |
| <li> IDE で、「<tt>ファイル</tt>」>「<tt>プロジェクトを開く</tt>」を選択し、展開したファイルがあるフォルダを選択します。 </li> | |
| <li>「プロジェクト」ウィンドウを開きます。画面は次のようになります。 | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-project-window.png" border=1 alt="表項目の例が表示された「プロジェクト」ウィンドウ" ></p> | |
| </li> | |
| <li>「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「プロジェクトを実行」を選択します (または F6 キーを押す)。アプリケーションが実行されると、エミュレータウィンドウが開き、デフォルトのデバイスエミュレータでアプリケーションが実行されるところが表示されます。 </li> | |
| <li>「エミュレータ」ウィンドウで「起動」の下のボタンをクリックします。次に示すように、エミュレータで表が表示されます。 | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-emulator.png" border=1 alt="サンプル表アプリケーションが表示された DefaultColorPhone エミュレータ" > </p> </li> | |
| <li>表を編集します。 | |
| <ul> | |
| <li>選択ボタンの方向矢印を使用して、セル間でカーソルを移動します。</li> | |
| <li>セルの内容を編集するには、「Edit Cell」の下のボタンをクリックします。</li> | |
| </ul></li> | |
| <li>アプリケーションを終了するには、「Exit」の下のボタンをクリックします。 </li> | |
| </ol> | |
| <p class="align-center"><a href="#top">ページの先頭へ</a></p> | |
| <h2><a name="creating"></a>表項目カスタムコンポーネントを使用した Java ME アプリケーションの作成 </h2> | |
| <div class="indent"> | |
| <p>ここまでで表項目コンポーネントの使用方法を見てきました。次は、このアプリケーションの作成方法を説明します。アプリケーションを作成するには、次の手順を実行します。 </p> | |
| </div> | |
| <ol> | |
| <li> <a href="#create">MyTableExample プロジェクトの作成</a> </li> | |
| <li><a href="#add">MyTableExample プロジェクトへのパッケージとビジュアル MIDlet の追加</a></li> | |
| <li><a href="#addcomponent">MyTableMIDlet へのコンポーネントの追加</a></li> | |
| <li><a href="#edit">簡易表モデルのデザインの編集</a></li> | |
| <li><a href="#addcommands">フォームコンポーネントとテキストボックスコンポーネントへのコマンドの追加</a></li> | |
| <li><a href="#connect">コンポーネントを接続してアプリケーションフローを作成する</a></li> | |
| <li><a href="#insert">ソースコードの挿入</a></li> | |
| <li><a href="#run">プロジェクトを実行する</a></li> | |
| </ol> | |
| <div class="indent"> | |
| <h3 class="tutorial">MyTableExample プロジェクトの作成<a name="create"></a></h3> | |
| <ol> | |
| <li> 「<tt>ファイル</tt>」>「<tt>新規プロジェクト</tt>」(Ctrl-Shift-N) を選択します。「カテゴリ」から「Java ME」を選択します。「プロジェクト」で「モバイルアプリケーション」を選択して、「次へ」をクリックします。 </li> | |
| <li> 「プロジェクト名」フィールドに「<code>MyTableExample</code>」と入力します。「プロジェクトの場所」をシステム上の任意のディレクトリに変更します。以降、このディレクトリを <tt>$PROJECTHOME</tt> とします。 </li> | |
| <li> 「Hello MIDlet を作成」チェックボックスの選択を解除します。「次へ」をクリックします。 </li> | |
| <li> 「エミュレータプラットフォーム」は、「Java Platform Micro Edition SDK 3.0」を選択したままにしておきます。「完了」をクリックします。 </li> | |
| <!--li> Click Finish. The project folder contains all of your sources and project metadata, such | |
| as the project Ant script. The application itself is displayed in the Flow Design window of the Visual Mobile Designer. </li--> | |
| </ol> | |
| <h3 class="tutorial">MyTableExample プロジェクトへのパッケージとビジュアル MIDlet を追加<a name="add"></a></h3> | |
| <ol> | |
| <li> 「プロジェクト」ウィンドウで <code>MyTableExample</code> プロジェクトを選択し、「<tt>ファイル</tt>」>「<tt>新規ファイル</tt>」(Ctrl-N) を選択します。「カテゴリ」から「Java」を選択します。「ファイルの種類」として「Java パッケージ」を選択します。「次へ」をクリックします。 </li> | |
| <li> 「パッケージ名」フィールドに「<code>tableitemexample</code>」と入力します。「完了」をクリックします。 | |
| </li> | |
| <li> 「プロジェクト」ウィンドウで <code>tableitemexample</code> パッケージを選択し、「<tt>ファイル</tt>」>「<tt>新規ファイル</tt>」(Ctrl-N) を選択します。「カテゴリ」にある「MIDP」を選択します。「ファイルの種類」として「ビジュアル MIDIlet」を選択します。「次へ」をクリックします。 </li> | |
| <li> 「MIDlet 名」フィールドと「MIDP クラス名」フィールドに「<code>MyTableItemMidlet</code>」と入力します。「完了」をクリックします。 </li> | |
| </ol> | |
| <h3 class="tutorial">MyTableMIDlet へのコンポーネントの追加<a name="addcomponent"></a></h3> | |
| <ol> | |
| <li> ビジュアル MIDlet を「フロー」ビューに切り替えます。次の画面コンポーネントをコンポーネントパレットからドラッグし、フローデザイナにドロップします。 | |
| <ul> | |
| <li> | |
| <div class="indent"> フォーム</div> | |
| </li> | |
| <li> | |
| <div class="indent">テキストボックス</div> | |
| </li> | |
| </ul></li> | |
| <li>「<tt>textBox</tt>」を選択し、「プロパティー」ウィンドウでコンポーネントの「タイトル」を「<tt>Edit</tt>」に変更します。</li> | |
| <li>「<tt>form</tt>」コンポーネントをダブルクリックして「画面」ビューに切り替えます。 </li> | |
| <li>コンポーネントパレットの「項目」セクションから「<tt>表項目</tt>」コンポーネントをドラッグし、「<tt>form</tt>」にドロップします。スクリーンデザイナに追加した<tt>表項目</tt>コンポーネントは、次のようになります。 | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-tableitemform.png" border=1 alt="「デバイス画面」上に表項目が追加されたスクリーンデザイナの表示" ></p> | |
| </li> | |
| <li><tt>tableItem</tt> を選択し、「プロパティー」ウィンドウで、「ラベル」プロパティー値として「<code>TableItem Example</code>」と入力します。</li> | |
| <li><tt>tableItem</tt> コンポーネントを右クリックし、ポップアップメニューから「プロパティー」を選択します。</li> | |
| <li>「表モデル」プロパティーで矢印 (<img src="../../../images_www/articles/71/mobility/tableitem/arrow.png" border=1 alt="矢印">) をクリックし、ドロップダウンリストから「<tt><新規 SimpleTableModel></tt>」を選択します。</li> | |
| <li>「閉じる」をクリックします。<br><tt>simpleTableModel</tt> コンポーネントが「リソース」に追加されます。 | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/resources.png" border=1 alt="追加された simpleTableModel" ></p></li> | |
| </ol> | |
| <h3 class="tutorial">簡易表モデルのデザインの編集<a name="edit"></a></h3> | |
| <ol> | |
| <li> 「画面」ビューで、<tt><表モデルが指定されていません></tt> コンポーネントをダブルクリックし、「値」ダイアログボックスを開きます。 </li> | |
| <li>「値」ダイアログボックスで、「ヘッダーを使用」オプションをオンにします。</li> | |
| <li> 「行を追加」ボタンと「列を追加」ボタンをそれぞれ 4 回クリックし、行と列の数を 4 つに変更します。</li> | |
| <li> 表ヘッダーの名前を、「<tt>column 1</tt>」、「<tt>column 2</tt>」、「<tt>column 3</tt>」、および「<tt>column 4</tt>」に変更します。 | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-values-editor.png" border=1 alt="表モデル" > </p></li> | |
| <li>「了解」をクリックして完了します。 | |
| <p class="align-center"> <img src="../../../images_www/articles/71/mobility/tableitem/ti-screeneditor_form1.png" border=1 alt="表項目コンポーネントに割り当てられた簡易表モデル" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">フォームコンポーネントとテキストボックスコンポーネントへのコマンドの追加<a name="addcommands"></a></h3> | |
| <ol> | |
| <li>「フロー」ビューを開きます。</li> | |
| <li>コンポーネントパレットの「コマンド」セクションで<tt>終了コマンド</tt>を選択します。これを <tt>form</tt> コンポーネントにドラッグ＆ドロップします。この操作を<tt>項目コマンド</tt>について繰り返します。</li> | |
| <li>「画面」ビューで <tt>itemCommand</tt> を選択します。「プロパティー」ウィンドウの「ラベル」プロパティーの値を「<tt>Edit Cell</tt>」に変更します。 | |
| </li> | |
| <li>「フロー」ビューで、コンポーネントパレットの「コマンド」セクションで<tt>了解コマンド</tt>を選択し、<tt>textBox</tt> コンポーネントにドラッグ＆ドロップします。 | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flow.png" border=1 alt="コマンドを追加した「フロー」ビューの表示" > </p></li> | |
| </ol> | |
| <h3 class="tutorial">コンポーネントの接続<a name="connect"></a></h3> | |
| <div> | |
| <p>「フロー」ビューで、モバイルデバイスの「<tt>起動</tt>」をクリックし、それを <tt>form</tt> コンポーネントまでドラッグします。同様に、次の図に示すようにコンポーネントを接続します。</p> | |
| <p class="align-center"><img src="../../../images_www/articles/71/mobility/tableitem/ti-flowdesigner.png" border=1 alt="コンポーネントを接続した「フロー」ウィンドウの表示" ></p> | |
| </div> | |
| <h3 class="tutorial">ソースコードの挿入<a name="insert"></a></h3> | |
| <ol> | |
| <li>「フロー」ビューで、<tt>form</tt> コンポーネントの <tt>itemCommand</tt> を右クリックし、ポップアップメニューから「ソースへ移動」を選択します。</li> | |
| <li><tt>switchDisplayable</tt> メソッドの前の <tt>// write pre-action user code here</tt> という場所に、次のコードを挿入します。 | |
| <pre class="examplecode"> | |
| 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(""); | |
| } </pre> | |
| </li> | |
| <li>「フロー」ビューに切り替え、<tt>textBox</tt> コンポーネントの <tt>okCommand</tt> を右クリックし、ポップアップメニューの「ソースへ移動」を選択します。</li> | |
| <li><tt>switchDisplayable</tt> メソッドの前の <tt>// write pre-action user code here</tt> という場所に、次のコードを挿入します。 | |
| <pre class="examplecode"> | |
| int row = tableItem.getSelectedCellRow(); | |
| int column = tableItem.getSelectedCellColumn(); | |
| // 表モデルに新しい値を設定する | |
| simpleTableModel.setValue(column, row, textBox.getString()); | |
| // 表モデルを画面デバイスに再描画する | |
| simpleTableModel.fireTableModelChanged(); | |
| </pre></li> | |
| <li>Ctrl+S キーを押して編集を保存します。</li> | |
| </ol> | |
| <h3 class="tutorial">プロジェクトの実行<a name="run"></a></h3> | |
| <p>F6 キーを押して主プロジェクトを実行します。あるいは、「<tt>実行</tt>」>「<tt>主プロジェクトを実行</tt>」を選択してもかまいません。</p> | |
| </div> | |
| <p class="align-center"><a href="#top">ページの先頭へ</a></p> | |
| <h2>表項目コンポーネントと簡易表モデルコンポーネントの Javadoc</h2> | |
| <P>NetBeans IDE には、VMD で使用できるほかのコンポーネントと同様に、<tt>表項目</tt>コンポーネントや<tt>表モデル</tt>コンポーネントに関する API Javadoc が用意されています。<tt>表項目</tt>コンポーネントまたは<tt>表モデル</tt>コンポーネントの Javadoc を表示するには、次の手順を実行します。</P> | |
| <OL> | |
| <li>ソースコードの<tt>表項目</tt>コンポーネントまたは<tt>表モデル</tt>コンポーネントにカーソルを合わせ、Ctr-Shift- スペースキーを押します (または「<tt>ソース</tt>」>「<tt>ドキュメントを表示</tt>」を選択します)。<br> | |
| この要素の Javadoc がポップアップウィンドウに表示されます。 </li> | |
| <li>ポップアップウィンドウで「外部 Web ブラウザにドキュメントを表示」アイコン (<img src="../../../images_www/articles/71/mobility/smscomposer/show-doc-button.png" alt="「外部 Web ブラウザにドキュメントを表示」">) をクリックすると、<tt>表項目</tt>コンポーネントまたは<tt>表モデル</tt>コンポーネントについての詳細な情報がブラウザに表示されます。</li> | |
| </OL> | |
| <p class="align-center"><a href="#top">ページの先頭へ</a></p> | |
| <div class="feedback-box"><a href="/about/contact_form.html?to=6&subject=VMD%20Custom%20Components:%20Using%20Table%20Items">ご意見をお寄せください</a> </div><br style="clear:both;" > | |
| <h2><a name="nextsteps"></a>関連項目</h2> | |
| <ul> | |
| <li><a href="smscomposer.html">ビジュアルモバイルデザイナのカスタムコンポーネント: SMS コンポーザアプリケーション</a></li> | |
| <li><a href="filebrowser.html">ビジュアルモバイルデザイナのカスタムコンポーネント: モバイルデバイスのファイルブラウザの作成</a></li> | |
| <li><a href="pimbrowser.html">ビジュアルモバイルデザイナのカスタムコンポーネント: PIM (Personal Information Manager) アプリケーションの作成</a></li> | |
| <li><a href="loginscreen.html">ビジュアルモバイルデザイナのカスタムコンポーネント: モバイルログイン画面の作成</a></li> | |
| <li><a href="waitscreen.html">ビジュアルモバイルデザイナのカスタムコンポーネント: モバイルアプリケーション用の待機画面の作成</a></li> | |
| <li><a href="splashscreen.html">ビジュアルモバイルデザイナのカスタムコンポーネント: Java ME アプリケーションでのスプラッシュ画面の使用</a></li> | |
| </ul> | |
| <p class="align-center"><a href="#top">ページの先頭へ</a></p> | |
| </body> | |
| </html> |