端到端Web服务教程:移动Dilbert应用程序

本教程将介绍如何使用 NetBeans IDE 创建使用 web 服务的移动客户机应用程序。我们将创建这样一个应用程序,它可通过实时在线 Web 服务提取每日 Dilbert 连环漫画,并将图形转换为空间节省格式,然后在移动设备上显示漫画。

在本教程中,我们首先将在移动应用程序中创建一个 Web 服务客户机,用于连接在线 DailyDilbert 服务。然后,我们将演示如何使用 Visual MIDlet Designer 以图形化的方式来设计应用程序布局。接下来,添加代码将漫画的图形格式由 GIF 转换为移动设备支持的 PNG 格式 。最后,使用模拟器在 IDE 中欣赏连环漫画。

本教程所需要的软件

开始之前,需要在您的计算机上下载并安装以下软件:

Java Standard Development Kit(JDK)版本 5.0 或 6.0

NetBeans IDE 6.0 的完整发行版

GlassFish 或 Tomcat 等 Java EE 5 服务器,可以与上述项目一起安装。

创建 Web 服务客户机

首先,我们需要创建一个新的 Web Application 项目。该项目将包含所需的 Web 服务客户机。

选择 File > New Project 选项。从 Categories 列表中,选择 Web 选项。从 Projects 列表中,选择 Web Application 选项。单击 Next 按钮。

将项目命名为 DilbertWebApplication 并选择 Java EE 5 选项,如下所示。

单击 Finish 按钮,IDE 将创建应用程序。

成功创建了应用程序,Projects 窗口应如下所示:

使用 Web Service Client 向导

现在,我们将添加一个 Web 服务客户机,并让它使用 DailyDilbert 服务。

右键单击 DilbertWebApplication 项目节点,然后选择 New > Web Service Client。或者,你也可以从 New File 向导中选择此向导 ,如下所示:

此时将显示 Web Service Client 向导。

选择 WSDL URL 并输入以下 URL:

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

注意: Web 服务的拼写是错误的,正确拼写应 为 DailyDilbert.asmx,而它实际上是 DailyDiblert.asmx。记住要错误拼写,否则本教程 将不会运行!

将包命名为 dilbert。现在您应该看到以下内容:

单击 Finish 按钮。

IDE 将下载 WSDL 文件,并创建客户端工件,可以在 Files 窗口的 build 文件夹中查看这些工件。Projects 窗口显示的逻辑视图如下所 示:

创建移动客户机

在本节中,我们将创建一个新的 Mobile Application 项目。然后,我们使用 Mobile Client to Web Application 向导将应用程序连接到  DailyDilbert 服务。

选择 File > New Project 选项。从 Categories 列表中,选择 Mobility 选项。从 Projects 列表中选择 MIDP Application 选项, 如下所示:

单击 Next 按钮。

在 Project Name 字段中输入 DilbertViewer,然后取消选中 Create Hello MIDlet 复选框。

单击 Finish 按钮,创建 MIDlet。

成功创建了移动应用程序,Projects 窗口应如下所示:

使用 Mobile Client to Web Application 向导

Mobile Client to Web Application 向导会生成一个 Servlet,它可连接到包含 Web 服务客户机的 Web 应用程序。

在 Projects 窗口中,右键单击 DilbertViewer 项目节点并选择 New > Mobile Client to Web Application 选项,如下所示:

单击 Next 按钮。

DibertWebApplication 应作为 Web 应用程序列出。将 Servlet 名称改为 DilbertServlet,然后将包命名为 dilbert。在 Mobile Client Uses 区域中,先选择 Web Service Client in Web Application,然后选择 DailyDiblert.asmx,如下所示:

单击 Next 按钮。

选择 DailyDilbertImage,如下所示:

单击 Next 按钮。

将 Client Name 更改为 DilbertViewer,在包中添加 dilbert 名称,如下所示:

单击 Finish 按钮。

新工件已创建完成。Project 窗口现在会显示应用程序的逻辑视图,如下所示:

创建可视 MIDlet

在本节中,我们将创建一个可视 MIDlet,然后使用设计器来添加组件并将它们互相连接起来。

右键单击项目节点,然后选择 New > Visual MIDlet 选项。

将文件命名为 DilbertVisualMIDlet,并指定 dilbert 作为包名,如下所示:

单击 Finish 按钮。

这样将创建一个新的可视 MIDlet 文件,并在 Visual MIDlet Designer 中打开。

现在,使用 Palette(Ctrl-Shift-8)拖放一个 Alert 组件和一个 Wait Screen 组件到画布上,如下所示:

您可以将这些组件放在设计器的任意位置。

在下一节中,我们将创建一个新的组件,并将它添加到组件面板中。然后,我们再将它拖放到设计器上。接下来,我们将这些组件互相连接 起来,建立它们之间的关系。

创建画布组件

在本节中,我们将创建一个自定义画布组件用于显示图形文件。

右键单击 DilbertViewer 项目节点并选择 New > Other 选项。在 Categories 列表中,选择 MIDP 选项。在 File Types 列表中,选 择 MIDP Canvas 选项,如下所示:

ty/dilbert/dilbert-mob6.png” border=”1″ alt=”Mobile application”>

单击 Next 按钮。

在 MIDP Class Name 字段中输入 DilbertCanvas,并将包命名为 dilbert 。单击 Finish 按钮。

在 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) {         coordX -= 10;       }     } else if (key == LEFT) {       if (coordX < 0) {         coordX += 10;       }     }     repaint();   }     }

右键单击 DilbertCanvas 项目节点,然后选择 Build Project 选项。现在,我们已经构建并编译了画布组件。

在下一节中,我们将组件添加到组件面板上,然后再将它从组件面板拖放到设计器上。

将画布组件添加到组件面板

接下来,我们将画布组件添加到调色板上,然后将画布组件整合到应用程序中。

在编辑器中打开 DilbertVisualMIDlet 文件,然后打开 Palette (Ctrl-Shift-8)。在 Palette 中单击鼠标右键,然后选择 Palette Manager 选项。此时将出现 Palette Manager,如下所示:

单击 Add to Palette 按钮。此时将出现 Add to Palette 向导,如下所示。其中的移动应用程序包含您要添加到组件面板的 Java 类:

单击 Next 按钮。

选择 dilbert.DilbertCanvas 选项。

单击 Finish 按钮。

检查所看到的新增画布类,它应如下所示:

使用画布组件

打开可视 MIDlet 和 Palette(Ctrl-Shift-8)。在组件面板中,将 Custom 类别中的 DilbertCanvas 项目拖放到设计器中。

右键单击所拖放的画布组件,然后选择 New/Add > OK 命令,如下所示:

在 NavigaTor(Ctrl-7)中,您将看到以下内容:

通过将这些组件连接起来创建一个流程,如下所示:

将 Mobile Device 的 Started 点连接到 waitScreen 组件。

将 waitScreen 组件的 Success 命令连接到 dilbertCanvas 组件。

将 waitScreen 组件的 Failure 命令连接到 alert 组件。

将 dilbertCanvas 组件的 okCommand 连接到 Mobile Device。

此时,您将看到以下内容:

切换到 Source 视图中,然后修改 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 格式,这对于许多不同显示尺寸的移动设备来说小很多,而且更容易调节大小。

打开 DailyDilbert_Proxy 文件,如下所示:

修改 dailyDilbertImage() 方法,在其中添加以下突出显示的代码:

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

部署应用程序

首先,我们需要部署 Web 应用程序。然后将运行移动应用程序。

在 Projects 窗口中,右键单击 DilbertWebApplication 项目节点,然后选择 Deploy Application 选项。如果服务器还没有运行,那么 它将会启动。然后将应用程序部署到服务器中。可以在 Services 窗口中查看应用程序是如何部署的,如下所示:

右键单击移动项目,然后选择 Run 选项。运行移动应用程序。此时将打开设备仿真器。在设备仿真器屏幕中,单击 Launch 下面的按钮。 然后单击 Select 按钮。应用程序将转至互联网,然后返回最新的 Dilbert 漫画,如下所示:

结束语

本教程展示了如何使用 Mobile Client to Web Application 快速创建一个使用 Web 服务的 MIDlet。

本教程还演示了如何创建一个自定义组件,以及如何使用可视 Mobile 设计器(Visual Mobile Designer )将其添加到应用程序中。

勇敢的冷静的理智的去接受失败,有时不但是必要的,而且是很有必要的。

端到端Web服务教程:移动Dilbert应用程序

相关文章:

你感兴趣的文章:

标签云: