HOME / Docs & Support / NetBeans 6.0 / Mobility Documentation

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

執筆: Karol Harezlak

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

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

アプリケーションの概要

この例では、クライアントアプリケーション内で「ログイン画面」カスタムコンポーネントを使用する方法と、認証アクセスを使用してコンポーネントをサーバーリソースに接続する方法を示します。NetBeans Mobility プロジェクトのほかに、NetBeans Web プロジェクトを使用する必要があります。このチュートリアルの手順を実行するには、NetBeans Web プロジェクトの操作方法を理解していて、また GlassFish や Tomcat などの Web アプリケーションサーバーにローカルまたはリモートでアクセスできる必要があります。 NetBeans Mobility または J2EE をはじめて使用する場合は、先に NetBeans 6.0 CLDC/MIDP 開発のクイックスタートガイドと Visual Web JSF アプリケーション開発入門をご覧ください。

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

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

要件

次のソフトウェアをコンピュータにインストールしてある必要があります。

Mobility Pack、J2EE、および Web のサポートを含む NetBeans IDE 6.0 (ダウンロード)
Java Standard Development Kit (JDK) version 6.0 (ダウンロード)
Web アプリケーションサーバーへのリモートまたはローカルのアクセス

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

LoginScreenExample.zip をダウンロードします。このダウンロードには、NetBeans Mobility プロジェクトが含まれます。
LoginScreenServletExample.zip をダウンロードします。このダウンロードには、NetBeans Web プロジェクトが含まれます。
ファイルを展開します。
IDE で、「ファイル」>「プロジェクトを開く」を選択し、展開したプロジェクトのファイルが含まれるフォルダまで移動して、両方のプロジェクトを開きます。
「プロジェクト」ウィンドウは次のようになります。
Mobility プロジェクト LoginScreenExample の「ナビゲータ」ウィンドウは次のようになります。
「プロジェクト」ウィンドウで LoginScreenServletExample プロジェクトのノードを右クリックし、「プロジェクトを実行」を選択するか、F6 キーを押します。アプリケーションサーバーがポート 8080 で機能することを確認します。次に LoginScreenExample プロジェクトのノードを右クリックし、「プロジェクトを実行」を選択します。アプリケーションが実行されると、エミュレータウィンドウが開き、デフォルトのデバイスエミュレータでアプリケーションが実行されるところが表示されます。
「エミュレータ」ウィンドウで「起動」の下のボタンをクリックします。
エミュレータにスプラッシュ画面コンポーネントが表示されてから、次に示すログイン画面が表示されます。

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

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

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

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

LoginScreenExample プロジェクトの作成

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

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

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

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

ビジュアル MIDlet を「フローデザイナ」ウィンドウに切り替えます。次のコンポーネントをコンポーネントパレットからドラッグし、フローデザイナにドロップします。

スプラッシュ画面
待機画面
ログイン画面
警告 (2 回)

splashScreen をクリックし、「プロパティー」ウィンドウで「テキスト」プロパティーの値を「null」から「Login Screen Example」に変更します。
alert コンポーネントをクリックし、「プロパティー」ウィンドウで「インスタンス名」プロパティーの値を「alertError」に変更します。同様に、alert1 の「インスタンス名」プロパティーの値を「alertSuccess」に変更します。
alertError コンポーネントに戻り、「プロパティー」ウィンドウで「文字列」プロパティーの値を「Error」に変更します。
waitScreen コンポーネントをクリックし、「プロパティー」ウィンドウで「テキスト」プロパティーの値を「Please Wait...」に変更します。

LoginScreenExample へのコマンドの追加

「フローデザイナ」ウィンドウを開きます。
コンポーネントパレットの「コマンド」セクションで終了コマンドを選択します。このコマンドをドラッグし、「フローデザイナ」ウィンドウ (loginScreen コンポーネント) にドロップします。

コンポーネントの接続

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

ソースコードの追加

LoginScreenExample.java ソースコードの宣言セクションに private boolean login = false; というコードを追加します。
ソースコードの末尾に次のコードをペーストします。

 private void login() throws IOException {
   //URL
   String url = "http://localhost:8080/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 {
        getAlertSuccess().setString("Wrong Username or Password");
   }
   login = false;
 }

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

プロジェクトの実行

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

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

ログイン画面コンポーネントの詳細情報

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

「ヘルプ」>「Javadoc 参照」>「org.netbeans.microediton.lcdui」を選択します。ファイルは Web ブラウザで開きます。
org.netbeans.microedition.lcdui をクリックすると、コンポーネント情報へのリンクが表示されます。

ご意見をお寄せください