目次

• Web サービスクライアントの作成
• モバイルクライアントの作成

チュートリアルに必要なソフトウェア

開始する前に、次のソフトウェアをダウンロードするか、コンピュータにインストールしてください。

• Java Standard Development Kit (JDK) version 5.0 または 6.0 (ダウンロード)
• NetBeans IDE 6.0 のフルディストリビューション (ダウンロード)
• GlassFish や Tomcat などの Java EE 5 サーバー。前出の項目と同時にインストールできます。

「Web サービスクライアント」ウィザードの使用

次に、DailyDilbert サービスを利用する Web サービスクライアントを追加します。

1. DilbertWebApplication プロジェクトノードを右クリックし、「新規」>「Web サービスクライアント」を選択します。次に示すように「新規ファイル」ウィザードからこのウィザードを選択することもできます。



「Web サービスクライアント」ウィザードが表示されます。

2. 「WSDL URL」を選択し、次の URL を入力します。

   http://www.esynaps.com/WebServices/DailyDiblert.asmx?WSDL

   注: この Web サービスはつづりが間違っています。「DailyDilbert.asmx」であるべきところ、実際には「DailyDiblert.asmx」になっています。間違ったつづりを使用しないと、チュートリアルは機能しないことに注意してください。

3. パッケージ名を dilbert にします。画面は次のようになります。



4. 「完了」をクリックします。

IDE によって WSDL ファイルがダウンロードされ、クライアント側アーティファクトが作成されます。これらのアーティファクトは「ファイル」ウィンドウ内の「build」フォルダ内に表示されます。次に示すように「プロジェクト」ウィンドウに論理ビューが表示されます。

「モバイルクライアントから Web アプリケーションへの接続」ウィザードの使用

「モバイルクライアントから Web アプリケーションへの接続」ウィザードを使用して、Web サービスクライアントを含む Web アプリケーションに接続するサーブレットを生成することができます。

1. 「プロジェクト」ウィンドウで DilbertViewer プロジェクトノードを右クリックし、次に示すように「新規」>「モバイルクライアントから Web アプリケーションへの接続」を選択します。



「次へ」をクリックします。

2. Web アプリケーションとして DibertWebApplication が表示されます。サーブレット名を DilbertServlet に変更し、パッケージ名を dilbert にします。次に示すように、「モバイルクライアントの使用」で「Web アプリケーション内の Web サービスクライアント」を選択し、「DailyDiblert.asmx」を選択します。



「次へ」をクリックします。


3. 次に示すように「DailyDilbertImage」を選択します。



「次へ」をクリックします。

4. 次に示すように、クライアント名を DilbertViewer に変更し、パッケージ名を dilbert にします。



5. 「完了」をクリックします。

新しいアーティファクトが作成され、次に示すように「プロジェクト」ウィンドウにアプリケーションの論理ビューが表示されます。

ビジュアル MIDlet の作成

この節では、ビジュアル MIDlet を作成し、デザイナを使用してコンポーネントを追加し、コンポーネントを相互に接続します。

1. DilbertViewer プロジェクトノードを右クリックし、「新規」>「ビジュアル MIDlet」を選択します。
2. 次に示すように、ファイル名を DilbertVisualMIDlet にし、パッケージ名を dilbert にします。



「完了」をクリックします。

新しいビジュアル MIDlet ファイルが作成され、ビジュアル MIDlet デザイナで開きます。

3. パレット (Ctrl-Shift-8) を使用して、次に示すように警告コンポーネントと待機画面コンポーネントをキャンバスにドラッグ＆ドロップします。



コンポーネントはデザイナ内の任意の位置に配置します。

次の節では、新しいコンポーネントを作成し、パレットに追加します。そして、そのコンポーネントをデザイナまでドラッグします。その後、コンポーネントを相互に接続してコンポーネント間の関係を確立します。

キャンバスコンポーネントの作成

この節では、グラフィックファイルを表示するためのカスタムキャンバスコンポーネントを作成します。

1. DilbertViewer プロジェクトノードを右クリックし、「新規」>「その他」を選択します。「カテゴリ」で「MIDP」を選択します。次に示すように、「ファイルの種類」で「MIDP キャンバス」を選択します。



「次へ」をクリックします。

2. MIDP クラス名として DilbertViewer と入力し、パッケージ名として dilbert と入力します。「完了」をクリックします。
3. 新規に作成したファイルを IDE で開き、次のようなコードを挿入します。

package dilbert;

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

public class DilbertCanvas extends Canvas {

    private int coordX,  coordY;
    private int imageWidth,  imageHeight;
    private Image image;
    private int screenWidth,  screenHeight;

    /** Creates a new instance of DilbertCanvas */
    public DilbertCanvas() {
        screenHeight = getHeight();
        screenWidth = getWidth();
    }

    public void setImage(Image image) {
        this.imageWidth = image.getWidth();
        this.imageHeight = image.getHeight();
        this.image = image;
    }

    protected void paint(Graphics graphics) {
        graphics.setColor(255, 255, 255);
        graphics.fillRect(0, 0, getWidth(), getHeight());
        graphics.drawImage(image, coordX, coordY, Graphics.LEFT | Graphics.TOP);
    }

    protected void keyPressed(int keyCode) {
        int key = getGameAction(keyCode);
        if (key == DOWN) {
            if (coordY - screenHeight + imageHeight > 0) {
                coordY -= 10;
            }
        } else if (key == UP) {
            if (coordY < 0) {
                coordY += 10;
            }
        } else if (key == RIGHT) {
            if (coordX - screenWidth + imageWidth > 0) {
                coordX -= 10;
            }
        } else if (key == LEFT) {
            if (coordX < 0) {
                coordX += 10;
            }
        }
        repaint();
    }
        }

4. DilbertViewer を右クリックし、「プロジェクトを構築」を選択します。これでキャンバスコンポーネントが構築、コンパイルされます。

次の節では、このコンポーネントをパレットに追加し、パレットからデザイナにドラッグ＆ドロップします。

パレットへのキャンバスコンポーネントの追加

次に、キャンバスコンポーネントをパレットに追加してから、キャンバスコンポーネントをアプリケーションに組み込みます。

1. DilbertVisualMIDlet ファイルをエディタで開き、パレットを開きます (Ctrl-Shift-8)。パレット内で右クリックし、「パレットマネージャー」を選択します。次に示すようにパレットマネージャーが表示されます。



2. 「パレットに追加」をクリックします。次に示すように「パレットに追加」ウィザードが開き、パレットに追加する Java クラスが含まれるモバイルアプリケーションが表示されます。



「次へ」をクリックします。

3. 「dilbert.DilbertCanvas」を選択します。



「完了」をクリックします。

4. 次に示すように、キャンバスクラスが追加されたことを確認します。

キャンバスコンポーネントの使用

1. ビジュアル MIDlet とパレット (Ctrl-Shift-8) を開きます。「DilbertViewer」項目をパレットの「カスタム」カテゴリからデザイナまでドラッグします。



2. ドロップしたキャンバスコンポーネントを右クリックし、「新規または追加」>「了解コマンド」を選択します。



ナビゲータ (Ctrl-7) に次のように表示されます。



3. コンポーネントを次のように接続し、フローを作成します。
   • モバイルデバイスの「起動」から waitScreen コンポーネントまで接続します。
   • waitScreen コンポーネントの SUCCESS_COMMAND から dilbertCanvas コンポーネントまで接続します。
   • waitScreen コンポーネントの FAILURE_COMMAND から alert コンポーネントまで接続します。
   • dilbertCanvas コンポーネントの okCommand からモバイルデバイスまで接続します。

この時点で、コンポーネント間の接続は次のようになります。



4. 「ソース」ビューに切り替え、getTask() メソッドを次に太字で示すように変更します。

   private byte[] dailyDilbertImage_returnValue;

   public SimpleCancellableTask getTask() {
        if (task == null) {
            // write pre-init user code here
            task = new SimpleCancellableTask();
            task.setExecutable(new org.netbeans.microedition.util.Executable() {
                public void execute() throws Exception {

                    if (dailyDilbertImage_returnValue == null) {
                        DilbertViewer client = new DilbertViewer();
                        dailyDilbertImage_returnValue = client.dailyDilbertImage();
                        Image dilbertImage = Image.createImage(dailyDilbertImage_returnValue, 0, dailyDilbertImage_returnValue.length);
                        getDilbertCanvas().setImage(dilbertImage);
                    }
                }
            });
        // write post-init user code here
        }
        return task;
   }
        

画像の変換

これで、毎日の画像を受信するクライアントアプリケーションが完成しました。ただし受信する画像は GIF 形式なので、メモリー容量が限られているモバイルデバイスには大きすぎます。したがって、画像を PNG 形式に変換する必要があります。PNG 形式は GIF 形式よりもサイズが小さく、モバイルデバイスの多数の異なるディスプレイサイズに合わせて簡単にサイズを調整できます。

1. 次に示す DailyDilbert_Proxy ファイルを開きます。



2. 次に太字で示すコードを追加して dailyDilbertImage() メソッドを変更します。その後、Shift+Ctl+I を押してインポートを修正します。
   

   public byte[] dailyDilbertImage() throws RemoteException, Exception {
       try {
           ByteArrayInputStream in = new ByteArrayInputStream(getService().getDailyDilbertSoap().dailyDilbertImage());
           BufferedImage image = ImageIO.read(in);
           ByteArrayOutputStream out = new ByteArrayOutputStream();
           ImageIO.write(image, "png", out);
           return out.toByteArray();
       } catch (java.rmi.RemoteException ex) {
           throw ex;
       } catch (Exception ex) {
           throw ex;
       }
           }

アプリケーションの配備

まず、Web アプリケーションを配備します。次にモバイルアプリケーションを実行します。

1. 「プロジェクト」ウィンドウで DilbertWebApplication を右クリックし、「配備の取り消しおよび配備」を選択します。サーバーがまだ起動していない場合は、しばらくしてから起動します。そしてアプリケーションがサーバーに配備されます。配備されていることを確認するには、次に示すように「サービス」ウィンドウを確認します。



2. モバイルプロジェクトを右クリックし、「実行」を選択します。モバイルアプリケーションが実行されます。デバイスのエミュレータが開きます。デバイスのエミュレータ画面で、「起動」の下のボタンをクリックします。次に「選択」ボタンをクリックします。アプリケーションがインターネットにアクセスし、次に示すように、Dilbert の最新の漫画を返します。