Flex e XML; uma parceria perfeita

Bha, estive vendo nos foruns, que muita gente estava com problemas para carregar XML no Flex. No inicio de carreira, tive a mesma dificuldade, principalmente porque o Flex tem o tal do Evento de retorno para receber os dados do Servidor.

Porém neste primeiro exemplo, não utilizei evento pára chamar um XML. chamei diretamente no código MXML a chamada do XML.

Arquivo main01.mxml
<mx:XML id="XMLexterno" source="/code/048/xml/xml01.xml"/>

Quando o Flash constrói esta chamada, automaticamente ele chama o o XML. Ao término do carregamento a variável XMLexterno tera em seu conteúdo o arquivo carregado do servidor. Quando esta variável gana valor, automaticamente todas as suas dependências são actualizadas, e o formulário é preenchido.

Arquivo main01.mxml
<mx:XML id="XMLexterno" source="/code/048/xml/xml01.xml"/>
<mx:Form x="10" y="59">
    <mx:FormItem label="Nome:">
        <mx:TextInput text="{XMLexterno.nome}"/>
    </mx:FormItem>
    <mx:FormItem label="E-mail:">
        <mx:TextInput text="{XMLexterno.email}"/>
    </mx:FormItem>
    <mx:FormItem label="Apelido:">
        <mx:TextInput text="{XMLexterno.apelido}"/>
    </mx:FormItem>
    <mx:FormItem>
        <mx:Button label="Salvar"/>
    </mx:FormItem>
</mx:Form>

Este exemplo acima utilizo sempre que preciso chamar um XML de configuração. Se precisar atualizar este XML, teria que utilizar o exemplo abaixo que utiliza evento de retorno.

Arquivo main02.mxml – Completo
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                backgroundColor="#f6f6f6"
                backgroundGradientColors="[#f6f6f6, #bbbbbb]"
                creationComplete="init()">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var XMLexterno:XMLList;
            private function init():void
            {
                var request:URLLoader = new URLLoader;
                request.addEventListener(Event.COMPLETE, RecebeXML);
                request.load(new URLRequest(
                    "/code/048/xml/xml01.xml"));
            }
            private function RecebeXML(e:Event):void
            {
                XMLexterno = new XMLList(e.target.data);
            }
        ]]>
    </mx:Script>
    <mx:Form x="10" y="59">
        <mx:FormItem label="Nome:">
            <mx:TextInput text="{XMLexterno.nome}"/>
        </mx:FormItem>
        <mx:FormItem label="E-mail:">
            <mx:TextInput text="{XMLexterno.email}"/>
        </mx:FormItem>
        <mx:FormItem label="Apelido:">
            <mx:TextInput text="{XMLexterno.apelido}"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Salvar"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

Veja que aqui é chamado o XML e adicionado um evento para o COMPLETE do carregamento do XML. Quando o evento do carregamento é despachado, a função RecebeXML() é executado e o valor recebido do XML é setado para a variável XMLexterno.

Este ultimo exemplo é idêntico ao anterior, porém o XML é carregado de um código PHP. Quando se carrega XML dinâmico é necessário utilizar evento, pois o Flex Builder tenta validar o PHP, e o mesmo não é um XML válido ante que seja executado pelo servidor.

Arquivo main03.mxml
request.load(new URLRequest("/code/048/xml/xml.php"));

Veja o conteudo do arquivo xml.php:

Arquivo xml/xml.php
<?php
header("Content-Type: application/xml; charset=ISO-8859-1");
/*
 * Created on 13/10/2008
 */
$mysqlHost = "localhost";
$mysqlUser = "blog";
$mysqlPass = "SenhadoDB";
$mysqlDB   = "blog";
$mysql = mysql_connect($mysqlHost, $mysqlUser, $mysqlPass);
mysql_select_db($mysqlDB);

$query = SELECT `user_nicename`, `user_email`, `display_name` FROM `blog_users` WHERE `ID` = 1;
$result = mysql_query($query);
$row = mysql_fetch_array($result);

echo < . ?xml version="1.0" encoding="utf-8"? . >;
?>
<root>
    <nome><?php echo $row[display_name]?></nome>
    <email><?php echo $row[user_email]?></email>
    <apelido><?php echo $row[user_nicename]?></apelido>
</root>

Espero que tenham gosatado deste POST, e o código fonte esta disponível aqui.

Fique por dentro de nossas novidades, ideias e atualizações