Alavancando o pureXML em um Aplicativo Flex de Microblog, Parte 2: Criando a interface com usuário do aplicativo com o Flex

Use o Flex e o ActionScript para uma interface com o usuário que se conecta aos serviços da Web ativados por DB2

Os recursos pureXML® do IBM DB2® permitem que você armazene XML na forma nativa em um banco de dados sem modificação, enquanto aplicativos Adobe® Flex® podem ler XML diretamente e preencher as interfaces com o usuário do Flex. Nesta série de artigos de três partes, você criará um aplicativo de microblog que tira vantagem do pureXML, serviços da Web e Adobe Flex; e também permitirá que você publique suas atualizações do microblog no Twitter. Na Parte 1 desta série, você aprendeu sobre serviços da Web e como eles são ativados pelo DB2 pureXML ao criar e testar um banco de dados de microblog. Neste artigo, Parte 2 da série, você usará o Adobe Flex e o ActionScript® para criar a interface com o usuário do aplicativo.

Joe Lennon, Software developer, Core International

Joe Lennon photoJoe Lennon, 24 anos, é desenvolvedor de software em Cork, Irlanda. Autor do livro Beginning CouchDB da Apress (ainda não publicado), tem colaborado com o IBM developerWorks com diversos artigos técnicos e tutoriais. Em seu tempo livre, Joe gosta de jogar futebol, mexer em pequenos mecanismos e bater seus recordes em seu Xbox 360.



18/Nov/2009 (Primeira publicação 18/Nov/2009)

Pré-requisitos

Nesta série, você usará o software livre Flex SDK para criar nosso aplicativo de amostra. Consulte Recursos para obter um link para a página do produto Adobe Flex. É necessário instalar o servidor de banco de dados DB2—a edição Express-C do DB2. Para obter informações sobre como fazer download e instalar o DB2 Express-C, consulte Recursos. Você também utilizará o IBM® Data Studio e o WebSphere® Application Server Community Edition (doravante denominado Community Edition) para implementar os serviços em um servidor da Web. Consulte Recursos para obter informações sobre download.


Introdução ao Flex

Acrônimos usados frequentemente

  • Ajax: Asynchronous JavaScript + XML
  • HTML: Hypertext Markup Language
  • HTTP: Hypertext Transfer Protocol
  • IDE: Integrated Development Environment
  • MXML: Minimal XML
  • REST: REpresentational State Transfer
  • RSS: Really Simple Syndication, ou Organização Bem Simples
  • SDK: Software Development Kit
  • UI: User interface
  • XML: Extensible Markup Language, ou Linguagem de Marcação Extensível

O Adobe Flex é uma estrutura de desenvolvimento de aplicativo de software livre que facilita o desenvolvimento de Rich Internet Applications (RIAs), quais podem ser implementados em qualquer computador que suporte o Adobe Flash®. Esses aplicativos podem ser tanto baseados na Web, o que requer a instalação do plug-in do Adobe Flash Player no navegador do usuário, quanto baseados em desktop, normalmente implementados usando a plataforma Adobe AIR™.

Um benefício importante de usar o desenvolvimento Flex para RIA, em vez do desenvolvimento com base em Ajax, é que você não precisa se preocupar em assegurar que o seu aplicativo funcionará de modo consistente em todos os navegadores da Web e sistemas operacionais. A aparência de um aplicativo Flex será a mesma, independentemente do ambiente em que for utilizado—desde que o Adobe Flash esteja instalado.

Há duas opções principais para desenvolver aplicativos Flex. Uma delas é fazer download do Flex SDK de software livre disponível gratuitamente que contém as ferramentas necessárias para compilar e depurar aplicativos Flex. A outra é comprar o Flex Builder IDE do Adobe, que fornece muitas ferramentas úteis para o desenvolvimento de aplicativos Flex, inclusive o design de interface com o usuário do tipo arraste e solte. Esse IDE é construído sobre a plataforma de software livre do Eclipse e também está disponível como um plug-in do Eclipse.

Flex e XML

Normalmente, o desenvolvimento de aplicativo Flex divide-se em duas áreas:

  • Definição da interface com o usuário do aplicativo em MXML
  • Definição da lógica do aplicativo em ActionScript

O Flex dá suporte ao ActionScript 3.0, mais conhecido pelo seu uso no desenvolvimento de Flash. Essa linguagem de script suporta dados XML por meio de um grupo de classes em conformidade com a especificação ECMAScript for XML (E4X). Com essas classes, é simples desenvolver aplicativos Flex que trabalhem com dados XML.

Em vez de se comunicarem diretamente com um servidor de banco dados, os aplicativos Flex normalmente trabalham com dados usando serviços da Web acessíveis usando uma interface RESTful HTTP ou SOAP. Você verá um exemplo prático disso quando criar o aplicativo de amostra mais adiante neste artigo.

O aplicativo de amostra

O aplicativo de amostra é uma interface com o usuário simples para aplicativo de microblog. Ele permite:

  • Criar uma nova atualização de status
  • Visualizar atualizações de status anteriores

O primeiro estágio de desenvolvimento do aplicativo é criar a interface com o usuário usando MXML e definir a lógica para o aplicativo usando ActionScript. Você verá, então, como armazenar os dados do aplicativo em um arquivo XML. Por fim, configurará o aplicativo para que ele se comunique com o serviço da Web criado na Parte 1 desta série, de modo que haja os dados para o aplicativo sejam armazenados e recuperados de um banco de dados DB2 pureXML.

O aplicativo final se parecerá com a captura de tela na Figura 1.

Figura 1. A interface com o usuário do aplicativo Flex de microblog
Screen capture of the Flex microblog application UI with status update and previous updates fields

Instalando o Flex SDK

Nesta série, você usará o software livre Flex SDK para construir um aplicativo de amostra. Este é o momento para fazer o download e instalar o Flex SDK. Na página do produto Adobe Flex (consulte Recursos para obter um link), você encontrará um link à direita para "Get the Free Flex 3.x SDK", como destacado na Figura 2. Faça download do SDK na página de destino desse link.

Figura 2. Página do produto Adobe Flex
Screen capture of Adobe Flex product page with highlighted 'Get the Free Flex 3.x SDK' link

Depois de fazer com sucesso o download do arquivo zip (pode demorar um pouco -- o que fiz download tinha um tamanho de 120 megabytes), extraia seu conteúdo para a pasta C:\flex. Não há nenhum instalador ou algo parecido para ser executado. Antes de seguir em frente, porém, inclua o diretório que contém o compilador do Flex no caminho do sistema. Isso permitirá compilar o código de origem do Flex sem a necessidade de especificar a localização do compilador do Flex todas as vezes.

No Control Panel, abra System e clique na guia Advanced. Clique em Environment Variables, próximo à parte inferior da janela, como ilustrado na Figura 3

Figura 3. Environment Variables
Screen capture of the Advanced tab on the System Properties dialog with highlighted 'Environment Variables' button

Na seção System variables, na metade inferior do diálogo Environment Variables, role a lista até a variável Path, como na Figura 4.

Figura 4. Variável de ambiente Path
Screen capture of the highlighted Path environment variable on the Environment Variables dialog

Dê um clique duplo na variável Path para abrir o diálogo Edit System Variable. No campo Variable value, preserve o valor atual e acrescente o seguinte no final: ;c:\flex\bin. Para obter um exemplo, veja a Figura 5.

Figura 5. Diálogo Edit Path Variable
Screen capture of the updated Variable value field on the Edit Path Variable dialog

Pressione OK para fechar todas as caixas de diálogo abertas. Agora você está pronto para começar a desenvolver alguns aplicativos Flex! Vamos testar se o compilador do Flex está no seu Path e ver como é desenvolver um aplicativo Hello World. Crie uma nova pasta no seu computador, c:\flexapps, onde o código de origem do aplicativo será armazenado. Agora crie a subpasta chamada hello: c:\flexapps\hello. Abra um editor de texto simples (como o Bloco de notas), insira o código na Listagem 1 e salve o arquivo com o nome hello.mxml na pasta hello.

Dica: Se estiver usando o Bloco de notas, ao salvar, coloque o nome do arquivo entre aspas (por exemplo, "hello.mxml") para impedir que o Bloco de notas acrescente a extensão .txt ao nome do arquivo.

Listagem 1. hello.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="center" verticalAlign="center"
  width="400" height="300">
    <mx:Script>
      <![CDATA[
        import flash.events.MouseEvent;

        private function helloHandler(event:MouseEvent):void {
          if(btnHello.label == "Hello!") {
            btnHello.label = "World!";
          } else {
            btnHello.label = "Hello!";
          }
        }
      ]]>
      </mx:Script>
      <mx:Button id="btnHello" label="Hello!"
        click="helloHandler(event);" />
</mx:Application>

Discorrerei brevemente sobre esse código de origem. Primeiro, a declaração XML informa ao compilador que esse arquivo é um documento XML que usa a codificação UTF-8. Em seguida, abre a tag principal do aplicativo MXML (mx:Application), que informa propriedades como largura, altura e alinhamento para definir o tamanho e o layout do aplicativo. A próxima seção, na Listagem 1, é um bloco do Script MXML (mx:Script) contendo o código do ActionScript. Neste exemplo, o ActionScript simplesmente define uma função, que será acionada quando determinado botão for clicado por um usuário. A função verifica qual texto que o botão está exibindo no momento e o altera.

Depois de fechar a tag mx:Script, crie uma tag Button do MXML (mx:Button), associando um atributo id que permitirá que o código ActionScript seja facilmente localizado. Além disso, crie um atributo label, que define o texto que será exibido no botão, e um manipulador de eventos; neste exemplo, você solicita ao evento click para que chame a função helloHandler.

Agora, compile o código usando o compilador Flex. Abra o prompt de comando (Start>Programs>Accessories>Command Prompt). Para alternar para a pasta do projeto hello, emita o comando: cd \flexapps\hello.

Para compilar o arquivo MXML, emita o seguinte comando: mxmlc hello.mxml.

O resultado deverá ser similar àquele na Figura 6. (Consulte a versão somente texto da Figura 6.)

Figura 6. Compilando seu primeiro aplicativo
Screen capture of results from compiling the Hello World Flex application

Um novo arquivo foi criado na pasta hello chamado hello.swf. Para abri-lo no prompt de comando, simplesmente digite seu nome ou, no Windows® Explorer, dê um clique duplo no arquivo.

Dica: Caso você não tenha uma instalação independente do Adobe Flash Player, use o navegador da Web para abrir o arquivo SWF. Como alternativa, é possível fazer o download das compilações de depuração e release de um Adobe Flash Player independente (a versão de depuração é excelente para localizar erros em aplicativos Flex). Consulte Recursos para obter um link.

O aplicativo deve ser parecido com aquele da Figura 7.

Figura 7. Nosso primeiro aplicativo
Screen capture of Hello World application in Adobe Flash Player window

Para alternar o texto no botão do aplicativo na Figura 7, clique em Hello! para alterar o texto para "World!", e clique em World! para retorná-lo a "Hello!". Na próxima seção, você criará a interface do aplicativo de amostra principal.


Desenvolvendo o aplicativo de amostra

Vamos continuar e iniciar o desenvolvimento do aplicativo de microblog. A primeira coisa a fazer é criar uma nova pasta para o aplicativo: c:\flexapps\microblog. Agora use um editor de texto para criar um novo arquivo e salve esse arquivo como microblog.mxml na pasta recém criada. Você colocará o código do seu aplicativo nesse arquivo. Passemos, agora, à interface com o usuário!

Criando a interface com o usuário

A primeira etapa no desenvolvimento de um aplicativo Flex é criar a interface com o usuário. Embora haja diferentes modos para trabalhar com UIs no Flex, serão usados os componentes MXML para traçar o layout do aplicativo. Até o fim desta seção, você deverá ter um aplicativo parecido com aquele ilustrado na Figura 8, completado com a funcionalidade de contagem de caractere restante.

Figura 8. A UI do aplicativo de microblog
Screen capture of the microblog application with text in the status update field and remaining character count

Para criar essa interface, insira o código da Listagem 2 no arquivo microblog.mxml.

Listagem 2. microblog.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400">
    <mx:Script>
    <![CDATA[
      import flash.events.Event;

      private function statusChangeHandler(event:Event):void {
        remaining.text = String(140 - status.length);
      }
    ]]>
    </mx:Script>
    <mx:Panel layout="absolute" left="10" right="10"
      top="10" bottom="10" title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
            maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">

        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"/>
    </mx:Panel>
</mx:Application>

Agora, abra o prompt de comando e navegue para a pasta microblog com o seguinte comando: cd \flexapps\microblog.

Emita o comando abaixo para compilar o código de origem do aplicativo: mxmlc microblog.mxml.

Se a compilação for bem-sucedida, deve haver agora um arquivo microblog.swf na pasta do projeto. Abra esse arquivo usando o Flash Player (ou um navegador da Web com o plug-in do Flash Player instalado) e você deverá ver uma tela como aquela vista anteriormente na Figura 8.

Esse arquivo não é muito mais complicado do que o aplicativo Hello World desenvolvido anteriormente neste artigo. Você usou posicionamento absoluto para posicionar os controles da UI usando as coordenadas x e y — e introduziu alguns outros controles Flex—mx:Panel, mx:Label, mx:TextArea e mx:VBox. O mx:Panel é um controle de contêiner usado para fins de layout. Neste caso, você o usou como um contêiner estilo janela para o aplicativo. O controle mx:Label é simplesmente um rótulo de texto descritivo. Um dos rótulos usados aqui tem o id remaining e será utilizado para indicar quantos caracteres mais podem ser inseridos no controle statusmx:TextArea. Nesse controle, há um atributo de alteração que define a função a ser chamada quando o evento change é acionado pela primeira vez.

O novo controle final apresentado aqui é o controle mx:VBox. Como o mx:Panel, também é um controle de contêiner usado para controles de layout. Você o usará na próxima seção para abrigar atualizações de status anteriores.

Depois de criar o shell do aplicativo, é possível avançar e preencher o controle VBox com algumas atualizações de status a partir de um arquivo XML.

Armazenando atualizações em um arquivo XML

Primeiro, crie um arquivo XML que será usado pelo aplicativo para recuperar uma lista de atualizações de status e preencher a seção Previous updates do aplicativo. No mesmo diretório que os arquivos microblog.mxml e microblog.swf, crie um novo arquivo chamado updates.xml e adicione o código da Listagem 3 a ele.

Listagem 3. updates.xml
<?xml version="1.0"?>
<updates>
    <update>
        <text>Flex and XML are an awesome combination!</text>
        <date_created>2009-09-02 23:45:01</date_created>
    </update>
    <update>
        <text>Finished a hard day of work, phew...</text>
        <date_created>2009-09-01 19:02:57</date_created>
    </update>
    <update>
        <text>I think I need some strong coffee right now.</text>
        <date_created>2009-09-01 11:14:51</date_created>
    </update>
    <update>
        <text>Less than an hour till lunch time! Mmmm food...</text>
        <date_created>2009-08-31 12:04:43</date_created>
    </update>
    <update>
        <text>Playing some Xbox 360!</text>
        <date_created>2009-08-22 09:44:27</date_created>
    </update>
    <update>
        <text>Creating a DB2 database</text>
        <date_created>2009-08-15 23:30:36</date_created>
    </update>
    <update>
        <text>Half-day today woohoo</text>
        <date_created>2009-08-06 01:28:19</date_created>
    </update>
    <update>
        <text>Looking forward to Snow Leopard being released</text>
        <date_created>2009-08-03 14:19:08</date_created>
    </update>
    <update>
        <text>Time to go home! Yipeeeee!</text>
        <date_created>2009-07-30 18:00:50</date_created>
    </update>
</updates>

É claro, sinta-se livre para usar sua imaginação e alterar o texto dessas atualizações! Agora vamos fazer algumas modificações no seu aplicativo Flex para carregar esses dados XML e apresentá-los ao usuário. Além disso, você acrescentará um código para tornar o botão Refresh funcional.

O código na Listagem 4 é o arquivo microblog.mxml atualizado.

Listagem 4. microblog.mxml (atualizado)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="updates.xml" id="updateData"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;

        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.update}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.text} (Posted: 
{r.currentItem.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

A esta altura, o novo elemento mais importante a observar aqui é o controle mx:HTTPService, usado para carregar o arquivo XML. Observe que você criou um novo atributo na tag mx:Application denominado creationComplete, que chama o método send no objeto mx:HTTPService. Isso basicamente diz ao aplicativo para carregar o arquivo XML assim que o aplicativo tiver sido carregado.

Como é comum com o desenvolvimento de Flex, é possível usar muitas técnicas diferentes para obter os dados do arquivo XML e prepará-los para serem usados pelo aplicativo Flex. Neste exemplo, é usado um elemento mx:XMLListCollection, o qual, por sua vez, é usado por um mx:Repeater como provedor de dados. Esse controle mx:Repeater basicamente assume o controle interno de tal elemento e o repete para cada iteração na origem de dados que usa. Como o arquivo XML tem 9 registros, a saída do controle mx:Repeater serão 9 controles mx:Text dentro do controle mx:VBox.

Por fim, você incluiu um manipulador de evento no botão Refresh, o que basicamente recarrega os dados do arquivo XML sempre que o botão é pressionado.

Abra uma janela do Prompt de comandos e navegue até a pasta do projeto como feito anteriormente. Agora compile o aplicativo usando o comando: mxmlc microblog.mxml.

Abra o arquivo microblog.swf. Ele não gostou disso, não é verdade? Você deve obter uma mensagem de erro como a mostrada na Figura 9. (Consulte a versão somente texto da Figura 9.)

Figura 9. Erro do ActionScript
Screen capture of ActionScript local file error in Adobe Flash Player window

Uma leitura rápida do erro informará que o Flash não carregou o arquivo local. Esse é um recurso de segurança que impede que aplicativos sejam usados de forma maliciosa em uma rede ou na Internet. Como os arquivos estão sendo carregados a partir do sistema de arquivos, é necessário informar ao compilador do Flex que você não está implementando o aplicativo na rede: mxmlc -use-network=false microblog.mxml.

Desta vez, quando executar o arquivo microblog.swf resultante, obterá um resultado muito mais satisfatório, como aquele na Figura 10.

Figura 10. Seu aplicativo habilitado para XML em ação
Screen capture of the XML-enabled application in action with items in 'Previous updaes' field

Na próxima seção, você vinculará o aplicativo Flex ao serviço da Web criado na Parte 1 desta série de artigos.


Integrando com os serviços da Web do pureXML

Até agora, você sempre executou o arquivo SWF do microblog localmente a partir do sistema de arquivos. A fim de satisfazer políticas de segurança para acessar serviços da Web externo, para este exemplo você implementará o seu arquivo SWF no WebSphere Application Server onde os serviços da Web estão implementados.

A primeira coisa a ser feita é modificar o seu aplicativo e informá-lo de que serviços da Web devem ser utilizados para postar de novas atualizações e recuperar as existentes. Abra o arquivo microblog.mxml e altere-o para que combine com o código na Listagem 5.

Listagem 5. microblog.mxml (versão final)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates
/rest/StatusUpdates/getAllUpdates" id="updateData"
  resultFormat="e4x"/>
    <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates/
rest/StatusUpdates/insertUpdate" id="newUpdate"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;
       
        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

      private function postClickHandler(event:MouseEvent):void {
        var params:Object = new Object();
        params.C_TEXT = status.text;
        params.C_DISPLAY = true;
        newUpdate.send(params);
        updateData.send();
  }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.row}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"
  click="postClickHandler(event);"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.DATA.update.text} (Posted:
 {r.currentItem.DATA.update.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

As principais alterações nessa versão do código de origem do aplicativo são que você removeu o controle mx:HTTPService do XML local e o substituiu por dois controles mx:HTTPService usados para recuperar as atualizações de status existentes a partir do serviço da Web e enviar novas atualizações de status para ele. Quando o aplicativo for iniciado, apenas o mx:HTTPService que recupera dados será chamado, já que você precisa aceitar entrada de usuário para criar quaisquer novos dados.

A segunda alteração mais importante é a definição de uma função postClickHandler no bloco mx:Script do ActionScript. Nessa função, você define um novo objeto e atribui os campos C_TEXT e C_DISPLAY desse objeto aos valores. É importante informar o caso correto para esses parâmetros ou quaisquer solicitações ao serviço da Web falharão. Em seguida, passe esse objeto como um argumento para o método send do controle newUpdate mx:HTTPService. Por fim, para atualizar a visualização dos dados, envie um ping do componente que recupera dados do serviço da Web. Você perceberá mais adiante no código que definiu o botão Post para classificar essa função quando o evento click for acionado.

Devido ao modo como o serviço da Web exibe o XML armazenado no banco de dados pureXML, é necessário fazer algumas pequenas alterações na origem do componente mx:XMLListCollection. Cada atualização está contida no nível superior dentro de uma tag <row>, assim, defina a origem como updateData.lastResult.row.

O último ponto a ser observado é que você também alterou os campos usados no atributo de texto do componente mx:Text repetido. Mais uma vez, esse atributo foi alterado para corresponder ao formato de XML gerado pelo seu serviço da Web. No XML, cada linha é semelhante àquelas da Listagem 6.

Listagem 6. O XML de cada linha
<row>
    <DATA>
        <update>
            <text>Update text</text>
            <date_created>Date/time value</text>
        </update>
    </DATA>
</row>

Em consequência disso, é necessário dizer ao componente mx:Text para examinar r.currentItem.DATA.update.text e r.currentItem.DATA.update.date_created para obter os valores corretos para cada uma dessas tags.

Agora abra o prompt de comandos, navegue para a pasta de projetos e compile o arquivo de origem MXML mais uma vez. Como você está implementando o arquivo SWF em um servidor de aplicativo e o seu aplicativo está usando dados de rede, em vez de dados locais, não use o argumento -use-network=false. Em outras palavras, o comando para compilar o código de origem é, outra vez: mxmlc microblog.mxml.

Desta vez, se você tentar executar o arquivo microblog.swf diretamente no seu computador, obterá um erro como aquele na Figura 11. (Consulte a versão somente texto da Figura 11.)

Figura 11. Erro de segurança
Screen capture of ActionScript security error in Adobe Flash Player window

Você pode passar muito tempo tentando configurar políticas de domínio cruzado no seu WebSphere Application Server, mas é muito mais fácil simplesmente implementar o próprio arquivo SWF no servidor de aplicativos. Localize o arquivo microblog.swf no Windows Explorer, clique com o botão direito do mouse sobre ele e clique na opção Copy. Agora, abra o IBM Data Studio e conecte-se ao banco de dados MBLOG. Abra a visualização Navigator (Window>Show View>Navigator), onde deverá ver três pastas, a terceira das quais deverá ser chamada de MicroblogStatusUpdatesWeb. Expanda essa pasta, clique com o botão direito do mouse na pasta WebContent e selecione Paste. Se você tiver feito isso corretamente, microblog.swf estará agora armazenado no servidor como na Figura 12.

Figure 12. Implementação do microblog.swf no servidor de aplicativos
Screen capture of navigator view of Data Studio with microblog.swf deployed to Application Server

Agora inicie a instância do servidor Community Edition (WASCE). Quando o servidor estiver pronto, abra o navegador da Web e navegue para http://localhost:8080/MicroblogStatusUpdates/microblog.swf. Consulte o aplicativo do microblog e veja se ele recupera as atualizações de status do banco de dados. Tente, também, postar uma nova atualização e verifique se foi armazenada no banco de dados e incluída na lista de atualizações anteriores. Para verificar se o botão Refresh funciona, crie uma nova linha no banco de dados usando o DB2 Command Editor, então clique em Refresh para ver se a nova linha é recuperada.

O produto final se parecerá com a captura de tela na Figura 13.

Figura 13. O produto final
Screen capture of the final microblog product with status and previous updates fields

Resumo

Neste artigo, você aprendeu a usar o Adobe Flex para criar uma interface de usuário complexa que se conecta aos serviços da Web acionados por DB2 criados na primeira parte desta série.

No último artigo da série, a Parte 3, você pegará os dados dos serviços da Web e do pureXML e os apresentará em diferentes formatos—em especial, RSS e HTML—além de integrar seu aplicativo a um Web site de microblog ultrapopular, o Twitter.


Download

DescriçãoNomeTamanho
Article source codexmlflexpt2.source.zip3KB

Recursos

Aprender

Obter produtos e tecnologias

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Information Management, Software livre
ArticleID=447685
ArticleTitle=Alavancando o pureXML em um Aplicativo Flex de Microblog, Parte 2: Criando a interface com usuário do aplicativo com o Flex
publish-date=11182009