ビジュアルモバイルデザイナのカスタムコンポーネント: ログイン画面の作成

ビジュアルモバイルデザイナ (VMD) は NetBeans Mobility に含まれるグラフィカルインタフェースで、コンポーネントのドラッグ&ドロップを使用することでモバイルアプリケーションをデザインできます。VMD を使用すると、IDE に含まれるコンポーネントまたは独自にデザインしたコンポーネントを使用して、アプリケーションフローを定義し、GUI をデザインできます。VMD には、リスト、警告、フォーム、画像など、アプリケーションの作成に使用できる標準のユーザーインタフェース (UI) コンポーネントが多数含まれます。また、待機画面、スプラッシュ画面、表項目など、より複雑な機能を簡単に作成できるカスタムコンポーネントも含まれます。

ログイン画面のカスタムコンポーネントは、ユーザー名フィールド、パスワードフィールド、およびログインボタンなどの標準の要素を持つ便利なユーザーインタフェースを提供します。このカスタムコンポーネントを使用して、GSM による銀行業務などの保護された機能にアクセスするためのログインインタフェースを作成できます。

NetBeans Mobility または J2EE に習熟していない場合、次に進む前に「NetBeans Java ME MIDP 開発のクイックスタートガイド」から始めることをお勧めします。

目次

このページの内容は NetBeans IDE 6.9 以降が対象です

このチュートリアルに従うには、次に示すソフトウェアとリソースが必要です。

ソフトウェアまたはリソース 必須バージョン
NetBeans IDE と Java ME version 6.9 以降
Java Development Kit (JDK) version 6 または version 7
GlassFish または Tomcat IDE の「Java EE」および「すべて」のインストールに含まれています

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

始める前に、チュートリアルの最終結果を確認します。

この例では、クライアントアプリケーション内で「ログイン画面」カスタムコンポーネントを使用する方法と、認証アクセスを使用してコンポーネントをサーバーリソースに接続する方法を示します。NetBeans Mobility プロジェクトのほかに、NetBeans Web プロジェクトを使用する必要があります。このチュートリアルの手順を実行するには、NetBeans Web プロジェクトの操作方法を理解していて、また GlassFish や Tomcat などの Web アプリケーションサーバーにローカルまたはリモートでアクセスできる必要があります。

次の手順で LoginScreenExample アプリケーションをインストールします。

  1. LoginScreenExample.zip をダウンロードします。このダウンロードには、完成した NetBeans Mobility プロジェクトが含まれます。
  2. LoginScreenServletExample.zip をダウンロードします。このダウンロードには、完成した NetBeans Web プロジェクトが含まれます。
  3. ファイルを展開します。
  4. IDE で、「ファイル」>「プロジェクトを開く」を選択し、LoginScreenExample プロジェクトの展開したファイルがあるフォルダを参照します。
  5. 「プロジェクトを開く」をクリックします。
  6. 上記の手順 4 と 5 を繰り返して LoginScreenServletExample プロジェクトを開きます。
  7. 「プロジェクト」ビューは次のように表示されるはずです。

    ログイン画面とログイン画面サーブレットの例を開いた「プロジェクト」ウィンドウ

  8. 「プロジェクト」ウィンドウで LoginScreenServletExample プロジェクトのノードを右クリックし、「プロジェクトを実行」を選択します (または F6 キーを押す)。
  9. LoginScreenExample プロジェクトのノードを右クリックし、「プロジェクトを実行」を選択します。アプリケーションが実行されると、エミュレータウィンドウが開き、デフォルトのデバイスエミュレータでアプリケーションが実行されるところが表示されます。
  10. 「エミュレータ」ウィンドウで「起動」の下のボタンをクリックします。
    エミュレータにスプラッシュ画面コンポーネントが表示されてから、次に示すログイン画面が表示されます。

    サンプルのログイン画面アプリケーションが表示された WTK 2.5 エミュレータ

  • カーソルを上下に移動すると、ログインフィールドとパスワードフィールドの間を移動できます。
  • 中央のボタンをクリックすると、選択されたテキストフィールドの編集が有効になります。
  • エミュレータで「Username」フィールドをクリックして「john」と入力し、「OK」ボタンをクリックします。
  • エミュレータで「Password」フィールドをクリックして「peanuts」と入力し、「OK」ボタンをクリックします。
  • 終了するには、「Login」の下のボタンをクリックします。
  • アプリケーションがサーバーに接続したら、「Login Successful」というメッセージを示す alert1 コンポーネントが画面に表示されます。

ページの先頭へ

「ログイン画面」カスタムコンポーネントを使用したアプリケーションの作成

ログイン画面コンポーネントが実際に動作するところを確認できたので、最初に戻ってこのアプリケーションを新規に作成します。このチュートリアルでは、NetBeans Mobility Pack を使用して単に Java ME クライアントを作成します。このアプリケーションのサーバー側の処理については、LoginScreenServletExample プロジェクトのソースを参照してください。Java ME クライアントアプリケーションを作成するには、次の手順を実行します。

  1. LoginScreenExample プロジェクトを作成する
  2. LoginScreenExample プロジェクトにパッケージとビジュアル MIDlet を追加する
  3. LoginScreenExample にコンポーネントを追加する
  4. ログイン画面コンポーネントにコマンドを追加する
  5. コンポーネントを接続してアプリケーションフローを作成
  6. ソースコードを追加する
  7. プロジェクトを実行する

LoginScreenExample プロジェクトの作成

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

    注: このプロジェクトフォルダには、ソースおよび、プロジェクトの Ant スクリプトなどのプロジェクトメタデータのすべてが含まれます。アプリケーションはビジュアルモバイルデザイナの「フローデザイン」ウィンドウに表示されます。

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

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

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

  1. ビジュアル MIDlet を「フローデザイナ」ウィンドウに切り替えます。次のコンポーネントをコンポーネントパレットからドラッグし、フローデザイナにドロップします。
    • スプラッシュ画面
    • 待機画面
    • ログイン画面
    • 警告 (x2)
  2. splashScreen をクリックし、「プロパティー」ウィンドウで「テキスト」プロパティーの値を「null」から「Login Screen Example」に変更します。
  3. 警告コンポーネントを右クリックし、ポップアップメニューから「名前を変更」を選択します。
  4. 「名前を変更」ダイアログボックスで、「alertFailure」と入力して「了解」をクリックします。
  5. alert1 コンポーネントについて手順 3 と 4 を繰り返し、名前を「alertSuccess」に変更します。
  6. alertFailure コンポーネントに戻り、「プロパティー」ウィンドウで「文字列」プロパティーの値を「Error」に変更します。
  7. waitScreen コンポーネントをクリックし、「プロパティー」ウィンドウで「テキスト」プロパティーの値を「Please Wait...」に変更します。
  8. waitScreen コンポーネントの「プロパティー」ウィンドウで、「タスク」プロパティーの省略符号ボタン (省略符号ボタン) をクリックします。
  9. 「タスク」ダイアログボックスで「追加」をクリックします。
    task1 コンポーネントが追加されます。
  10. 「ソースへ移動」をクリックします。
    「ソース」ビューには getTask () メソッドのコードが表示されます。
  11. 「了解」をクリックして「タスク」ダイアログボックスを閉じます。
  12. 「ソース」ビューで、// write task-execution user code here というセクションを探し、login(); に置き換えます。
  13. Ctrl+S キーを押して編集を保存します。

LoginScreenExample へのコマンドの追加

  1. 「フロー」ビューを開きます。
  2. コンポーネントパレットの「コマンド」セクションで終了コマンドを選択します。これを「フロー」ビューの loginScreen コンポーネントにドラッグ&ドロップします。

コンポーネントの接続

「フロー」ビューで、モバイルデバイスの「起動」テキストをクリックし、それを splashScreen コンポーネントまでドラッグします。同様に、次の図に示すようにコンポーネントを接続します。

フローデザイナでコンポーネントをコマンドの線で接続したところ

ソースコードの追加

  1. LoginScreenExample.java ソースコードの宣言セクションに private boolean login = false; というコードを追加します。
  2. ソースコードの末尾に次のコードをペーストします。
     private void login() throws IOException {
       //URL
       String url = "http://localhost:8084/LoginScreenExample/"
                    + "?username=" + getLoginScreen().getUsername()
                    + "&password=" + getLoginScreen().getPassword();
       //Clean up alertSuccess 
       getAlertSuccess().setString("");
       //Connect to the server
       HttpConnection hc = (HttpConnection) Connector.open(url);
       //Authentication
       if (hc.getResponseCode() == HttpConnection.HTTP_OK) {
            login = true;
       }
       //Closing time...
       hc.close();
       //Take action based on login value
       if (login) {
            getAlertSuccess().setString("Login Succesfull");
       } else {
            getAlertFailure().setString("Wrong Username or Password");
       }
       login = false;
     }

    このコードは、ユーザー名とパスワードに関する情報とともに要求をサーバーに送信し、ログイン処理に成功した場合に回答を受信します。Ctrl+Shift+I を押してソースコードのインポート文を修正できます。

プロジェクトの実行

クライアントアプリケーションを実行する前に、サーバー側アプリケーションが配備され、実行中であることを確認します。

モバイルクライアントアプリケーションを実行するには、「実行」>「主プロジェクトを実行」を選択するか、F6 キーを押して主プロジェクトを実行します。

ページの先頭へ

ログイン画面コンポーネントの Javadoc

NetBeans IDE には、ログイン画面コンポーネントや、VMD で使用できるその他のコンポーネントに関する API Javadoc が用意されています。ログイン画面コンポーネントの Javadoc を表示するには、次の手順を実行します。

  1. ソースコードの LoginScreen コンポーネントにカーソルを合わせ、Ctr-Shift- スペースキーを押します (または「ソース」>「ドキュメントを表示」を選択します)。
    この要素の Javadoc がポップアップウィンドウに表示されます。
  2. ポップアップウィンドウで「外部 Web ブラウザにドキュメントを表示」アイコン (「外部 Web ブラウザにドキュメントを表示」) をクリックすると、LoginScreen コンポーネントについての詳細な情報がブラウザに表示されます。

ページの先頭へ


関連項目

ページの先頭へ

get support for the NetBeans

Support