Conteúdo

• Criando o cliente de serviços Web
• Criando o cliente móvel

Software necessário para o tutorial

Antes de começar, você deve baixar ou instalar o seguinte software no seu computador:

• Java Standard Development Kit (JDK) versão 5.0 ou 6.0 (download)
• A distribuição completa do NetBeans IDE 6.0 (download)
• Um servidor Java EE 5, tal como GlassFish ou Tomcat, que pode ser instalado junto com o item acima.

Usando o assistente para Cliente de serviços Web

Agora, adicionaremos um cliente de serviços Web para consumir o serviço DailyDilbert.

1. Clique com o botão direito do mouse no nó do projeto DilbertWebApplication e escolha Novo > Cliente de serviços Web. Como alternativa, você também pode selecionar este assistente no assistente para Novo arquivo, como mostrado aqui:



O assistente Cliente de serviços Web será exibido.

2. Selecione a URL WSDL e indique a URL seguinte:

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

   Observação: o serviço Web está com ortografia incorreta, ele deve ser "DailyDilbert.asmx", enquanto, na verdade, ele é "DailyDiblert.asmx". Lembre-se de escrevê-lo incorretamente, caso contrário, o tutorial não funcionará!

3. Chame o pacote de dilbert. Agora você deve ver o seguinte:



4. Clique em Terminar.

O IDE baixa o arquivo WSDL e cria os artefatos do lado do cliente, que você pode ver na pasta de construção, na janela Arquivos. A janela Projetos exibe a visualização lógica mostrada aqui:

Usando o assistente para Cliente móvel para aplicação Web

O assistente para Cliente móvel para aplicação Web gera um servlet que se conecta a uma aplicação Web que inclui um cliente de serviço Web.

1. Na janela Projetos, clique com o botão direito do mouse no projeto DilbertViewer e escolha Novo > Cliente móvel para aplicação Web, como mostrado abaixo:



Clique em Próximo.

2. DibertWebApplication deve ser listado como a aplicação Web. Altere o nome Servlet pra DilbertServlet e chame o pacote de dilbert. Para Usos de cliente móvel, selecione Cliente de serviço Web na aplicação Web e selecione DailyDiblert.asmx, como mostrado abaixo:



Clique em Próximo.


3. Selecione DailyDilbertImage, como mostrado abaixo:



Clique em Próximo.

4. Altere o Nome do cliente para DilbertViewer, em um pacote chamado dilbert, como abaixo:



5. Clique em Terminar.

Os novos artefatos são criados e a janela Projetos agora exibe a visualização lógica da aplicação, como abaixo:

Criando o Visual MIDlet

Nesta seção, você criará um MIDlet visual e usará o designer para adicionar componentes e conectá-los a entre si.

1. Clique com o botão direito do mouse no nó do projeto e escolha Novo > Visual MIDlet.
2. Chame o arquivo de DilbertVisualMIDlet e especifique dilbert como o nome do pacote, como mostrado abaixo:



Clique em Terminar.

Um novo arquivo de MIDlet visual é criado e aberto no the Visual MIDlet Designer.

3. Agora, use a Paleta (Ctrl-Shift-8) para arrastar e soltar um componente Alerta e um componente Tela de espera na tela, da seguinte forma:



Você pode colocar os componentes em qualquer lugar desejado no designer.

Na próxima seção, criaremos um novo componente e o adicionaremos à paleta. Em seguida, o arrastaremos para o designer. Em seguida, conectaremos os componentes entre si para estabelecer os relacionamentos entre eles.

Criando o componente Tela

Nesta seção, criarmos um componente Tela personalizado para exibir o arquivo gráfico.

1. Clique com o botão direito do mouse no nó do projeto DilbertViewer e escolha Novo > Outro. Em Categorias, escolha MIDP. Em Tipos de arquivo, escolha Tela MIDP, como mostrado aqui:



Clique em Próximo.

2. Indique DilbertCanvas para o Nome de classe MIDP e dilbert para o nome do pacote. Clique em Terminar.
3. Abra o arquivo recém-criado no IDE e insira o código de forma que ele tenha a seguinte aparência:

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. Clique com o botão direito do mouse em DilbertCanvas e escolha Construir projeto. Agora você construiu e compilou o componente Tela.

Na próxima seção, adicionamos o componente à paleta e, em seguida, o arrastamos de lá e soltamos no designer.

Adicionando o componente Telas à Paleta

Em seguida, você adiciona o componente Tela à paleta e, em seguida, incorpora o componente Tela à aplicação.

1. Abra o arquivo DilbertVisualMIDlet no editor e, em seguida, abra a Paleta (Ctrl-Shift-8). Clique com o botão direito do mouse na Paleta e escolha Gerenciador da paleta. O gerenciador da Paleta aparece, como mostrado abaixo:



2. Clique em Adicionar à Paleta. O assistente para Adicionar à Paleta aparece, como mostrado abaixo, exibindo a aplicação móvel que contém a classe Java que você deseja adicionar à paleta:



Clique em Próximo.

3. Selecione dilbert.DilbertCanvas.



Clique em Terminar.

4. Verifique se você vê a adição da classe da tela, como mostrado abaixo:

Usando o componente Tela

1. Abra o MIDlet visual e a Paleta (Ctrl-Shift-8). Arraste o item DilbertCanvas da categoria Personalizado na Paleta para o designer.



2. Clique com o botão direito do mouse no componente Tela solto e escolha Novo/Adicionar > comando OK, como mostrado abaixo:



No Navegador (Ctrl-7), agora você deve ver o seguinte:



3. Crie um fluxo entre os componentes, conectando-os da seguinte forma:
   • Conecte a partir do Ponto de início do dispositivo móvel ao componente waitScreen.
   • Conecte a partir do comando Sucesso do componente waitScreen ao componente dilbertCanvas.
   • Conecte a partir do comando Falha do componente waitScreen ao componente alert.
   • Conecte a partir do okCommand do componente dilbertCanvas ao dispositivo móvel.

Neste ponto, você deve ver o seguinte:



4. Alterne para a visualização Código-fonte e altere o método getTask() como mostrado abaixo em negrito:

   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;
   }
        

Transformando a imagem

Agora temos uma aplicação cliente para receber a imagem diariamente. Mas a imagem recebida está no formato GIF, que é muito grande para dispositivo móveis com memória limitada. Sendo assim, precisamos transformar a imagem para o formato PNG, que é menor e mais facilmente dimensionado para os muitos tamanhos de exibição diferentes disponíveis para dispositivos móveis.

1. Abra o arquivo DailyDilbert_Proxy, mostrado abaixo:



2. Altere o método dailyDilbertImage(), adicionando o código realçado abaixo:
   

   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;
       }
           }

Implantando a aplicação

Primeiro, implantamos a aplicação Web. Em seguida, executamos a aplicação móvel.

1. Na janela Projetos, clique com o botão direito do mouse em DilbertWebApplication e escolha Implantar > Outro. Depois de um momento, o servidor se inicia, caso ainda não esteja em execução. Em seguida, a aplicação é implantada no servidor. Para vê-la implantada, observe na janela Serviços, como abaixo:



2. Clique com o botão direito do mouse no projeto móvel e escolha Executar. A aplicação móvel é executada. Um emulador de dispositivo se abre. Na tela do emulador do dispositivo, clique no botão abaixo de Iniciar. Em seguida, clique no botão Selecionar. A aplicação acessará a internet e retornará a faixa mais recente do Dilbert, como mostrado abaixo: