As versões mais recente do Flash Player da Adobe sustentam E4X, o qual é um conjunto de extensões de linguagem de programação que adiciona XML nativo suportado por ActionScript. Estas extensões permitem que você trabalhe com XML no Flex 2 usando os mesmos operadores comuns que você já conhece. Mais adiante, eles adicionam um conjunto pequeno de novos operadores para lidar com operações comuns, como procurar e filtrar..
Nesta seção, você consegue uma avaliação dos operadores de centro e extensões para usar E4X. Entendendo que estas capacidades muito realçarão sua habilidade de trabalhar com XML dentro do Flex 2.
Você pode agora declarar XML literais como você faria com qualquer integer ou string:
var orderInfo:XML = <order>
<item id=’1′>
<menuName>burger</menuName>
<price>3.95</price>
</item>
<item id=’2′>
<menuName>fries</menuName>
<price>1.45</price>
</item>
</order>;
Você pode usar ponto e sintaxe de array já comum para a maioria das linguagens de programação, e certamente para usuários de ActionScript, acessar dados em uma estrutura XML:
trace( orderInfo.item[1].menuName ); //fries
Voce pode usar o operador .@ para acessar atributos de um nó XML:
trace( orderInfo.item[1].@id ); //2
Você pode recuperar uma lista de nós como uma lista XML:
trace( orderInfo.item.menuName );
//<menuName>burger</menuName>
//<menuName>fries</menuName>
Você pode usar o operador descendente .. para procurar abaixo pelo XML:
trace( orderInfo..price );
//<price>3.95</price>
//<price>1.45</price>
Você também pode usar predicado para filtrar seus resultados baseados em condições:
trace( orderInfo.item(@id==2).price );
//<price>1.45</price>
var myID:int = 2;
trace( orderInfo.item(@id==myID).price );
//<price>1.45</price>
Para o número crescente de desenvolvedores que usa XML como dados dentro de seus aplicativos, E4X é crítico para desenvolvimento de aplicativo diariamente .
Existe uma captura pequena, porém. E4X é uma série de operadores—e em ActionScript 3 você não tem qualquer caminho para avaliar uma expressão representada como uma string em runtime. Tome a seguinte string como um exemplo:
var myAddString:String = “2 + 2″;
Não existe um caminho para especificar que ActionScript avalia a expressão e retorna a resposta “4.” Você também não tem a habilidade de avaliar a expressão seguinte contra XML dentro da memória:
var myExpression:String = “..item.(@id==2)..price”;
Algum de vocês poderia estar perguntando por que alguém quereria fazer isto? Boa pergunta. Porém, em vez de responder, vamos fornecer um exemplo específico onde esta característica é extremamente útil e deixa os milhares de outras respostas possíveis para você.
Motivação usando E4X: Uma simples aplicação
Você tem um aplicativo que retorna os seguintes dados de XML que você precisa exibir em um DataGrid:
<mx:XML id=”order”>
<order>
<item id=’1′>
<menuName>burger</menuName>
<criticalInfo>
<vegetarian>false</vegetarian>
<containsPeanuts>false</containsPeanuts>
</criticalInfo><salesInfo>
<quantity>3</quantity>
<price>3.95</price>
<lineTotal>11.85</lineTotal></salesInfo>
</item>
<item id=’2′>
<menuName>fries</menuName>
<criticalInfo>
<vegetarian>true</vegetarian>
<containsPeanuts>false</containsPeanuts>
</criticalInfo>
<salesInfo>
<quantity>4</quantity><price>1.45</price><lineTotal>5.80</lineTotal></salesInfo>
</item>
</order></mx:XML>
No Flex 2, o DataGrid pode aceitar XML diretamente como um dataProvider. Então você pode rapidamente preencher seu grid para exibir as informações:
<mx:DataGrid dataProvider=”{order.item}”>
<mx:columns>
<mx:DataGridColumn headerText=”Name” dataField=”menuName”/
<mx:DataGridColumn headerText=”Vegetarian” dataField=”criticalInfo.vegetarian”/> <mx:DataGridColumn headerText=”Peanuts” dataField=”criticalInfo.containsPeanuts”/> <mx:DataGridColumn headerText=”Quantity” dataField=”salesInfo.quantity”/>
<mx:DataGridColumn headerText=”Price” dataField=”salesInfo.price”/>
<mx:DataGridColumn headerText=”Line Total” dataField=”salesInfo.lineTotal”/>
</mx:columns>
</mx:DataGrid>
Usando suas novas habilidades de E4X, você rapidamente adiciona um dataField para cada uma das colunas com o caminho apropriado para seus dados e teste seu aplicativo. Porém, Nome é a única coluna de seu DataGrid que exibe dados (veja Figura 1). Olhando para os arquivos de ajuda adicional, você descobre que a propriedade dataField do DataGridColumn aceite uma string, não uma expressão. Então como você exibirá as outras colunas cujos dados existem em um nível abaixo do primeiro nível na hierarquia de XML?
Exemplo de uma solução baseada no E4X
Para aqueles que são muito familiarizados com Datagrids, sua primeira reação poderia ser em criar um labelFunction para cada do DataGridColumns
Figure 2. DataGrid com o diferente labelFunctions para cada coluna
Boas notícias: Este trabalho de abordagem. Adicionando um labelFunction para cada coluna, você pode controlar como as colunas mostram seus dados e usam E4X para derivar o valor apropriado de seus dados de XML:
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
protected function displayVegetarian( row:Object, column:DataGridColumn ):String {
return row.criticalInfo.vegetarian;
}
protected function displayPeanuts( row:Object, column:DataGridColumn ):String {
return row.criticalInfo.containsPeanuts;
}
protected function displayQuantity( row:Object, column:DataGridColumn ):String {
return row.salesInfo.quantity;
}
protected function displayPrice( row:Object, column:DataGridColumn ):String {
return row.salesInfo.price;
}
protected function displayLineTotal( row:Object, column:DataGridColumn ):String {
return row.salesInfo.lineTotal;
}
]]>
</mx:Script>
<mx:DataGrid dataProvider=”{order.item}” width=”450″>
<mx:columns>
<mx:DataGridColumn headerText=”Name” dataField=”menuName”/>
<mx:DataGridColumn headerText=”Vegetarian” labelFunction=”displayVegetarian”/>
<mx:DataGridColumn headerText=”Peanuts” labelFunction=”displayPeanuts”/>
<mx:DataGridColumn headerText=”Quantity” labelFunction=”displayQuantity”/>
<mx:DataGridColumn headerText=”Price” labelFunction=”displayPrice”/>
<mx:DataGridColumn headerText=”Line Total” labelFunction=”displayLineTotal”/>
</mx:columns>
</mx:DataGrid>
Enquanto este código alcança o resultado pretendido, requer um labelFunction separado para cada coluna—então, não é uma solução muito escalável. Se você tiver muitas colunas ou muitos Datagrids diferentes dentro de seu aplicativo, tendo um labelFunction para cada um rapidamente ficará intratável.
Uma solução melhor é escrever uma função de tag única que seu aplicativo podia reusar para toda coluna do DataGrid. O flex fornece aos desenvolvedores todas as ferramentas para realizar esta tarefa. Porém, um pouco de assembly é exigido.
Para usar uma função label única, você deve fazer o seguinte:
Especifique uma expressão diferente para cada DataGridColumn como uma string.
Recupere aquela expressão da função label única.
Analise gramaticalmente a string de expressão e derive os dados corretos do XML.
Retorne aquelas informações como uma string que o DataGrid pode exibir.
Primeiro, crie uma função label única para exibir o XML, chamado displayXMLData:
protected function displayXMLData( row:Object, column:DataGridColumn ):String {
return “”;
}
Próximo, mude as colunas em seu DataGrid usando esta função label. Também, adicione a propriedade dataField para cada uma das colunas. Use esta propriedade dataField, como acima, para especificar o caminho do E4X para seus dados:
<mx:DataGrid dataProvider=”{order.item}” width=”450″>
<mx:columns>
<mx:DataGridColumn headerText=”Name” dataField=”menuName”/>
<mx:DataGridColumn headerText=”Vegetarian” dataField=”criticalInfo.vegetarian” labelFunction=”displayXMLData”/>
<mx:DataGridColumn headerText=”Peanuts” dataField=”criticalInfo.containsPeanuts” labelFunction=”displayXMLData”/>
<mx:DataGridColumn headerText=”Quantity” dataField=”salesInfo.quantity” labelFunction=”displayXMLData”/>
<mx:DataGridColumn headerText=”Price” dataField=”salesInfo.price” labelFunction=”displayXMLData”/>
<mx:DataGridColumn headerText=”Line Total” dataField=”salesInfo.lineTotal” labelFunction=”displayXMLData”/>
</mx:columns>
</mx:DataGrid>
O método displayXMLData que você criou acima levam dois parâmetros: A fila e coluna . A última é uma referência para o DataGridColumn chamando o método. Em outras palavras, quando o DataGrid tentar exibir dados para a coluna de Quantidade, chama o método displayXMLData e passa pra ele uma referência para a fila de dados que é atualmente difícil para exibir e uma referência para a entrada da Quantidade DataGridColumn.
De dentro o método displayXMLData, você pode acessar quaisquer das propriedades do DataGridColumn, inclusive o dataField. Então quando o displayXMLData for chamado pelo DataGrid exibi a coluna de Quantidade, a propriedade column.dataField conterá a String salesInfo.quantity. Isto é o valor que você passou como um parâmetro para a coluna de DataGrid no código acima. Deste modo, uma função label única pode determinar que dados retornar.
Este resolve os primeiros dois objetivos listados acima. Porém, você necessita analisar gramaticalmente a expressão dataField e retornar os dados apropriados. Este requer algum conhecimento adicional sobre a nova classe XML em Flex 2.
Acima, os operadores de E4X foram demonstrados como um caminho para derivar dados de uma estrutura XML. Porém, também é possível usar os métodos da classe XML para realizar muitas destas mesmas ações. Aqui estão dois exemplos:
Operador e método descendente
order..item is equivalent to order.descendants( “item” );
Atribua operador e método
order.item.@id is equivalent to order.item.attribute(”id”);
Analisando gramaticalmente a expressão E4X passou para a propriedade dataField da coluna e chamou os métodos de XML apropriado, você pode realizar a mesma meta avaliando uma expressão hard-coded de E4X. A figura 3 mostra um quadro simplificados desta abordagem.
Figure 3. Versão visual do workflow
As operações importantes são como segue:
•Separe a expressão em cláusulas nos períodos únicos
•loop pelas cláusulas da esquerda para a direita
•Se a cláusula contém um conjunto de parenteses, é um filtro de predicado e você precisa fazer uma comparação
•Se a cláusula contém um operador descendente, chame o método descendente nos resultados até agora com a string à direita do operador
•Outro, use a sintaxe de ordem sustentada para estreito os resultados até agora pela cláusula
•Repita o laço até que você avaliou toda cláusula e retornou o resultado
Como você pode ver, não existe qualquer mágica em analisar gramaticalmente esta expressão e avaliando o XML. É só uma tarefa repetitiva—e, como todas as tarefas repetitivas, devia ser escrito uma vez e usado repetidamente. Este código está disponível para você no arquivo ZIP: Uma classe estática chamando o E4XParser.
Você pode usar E4XParser para terminar a tarefa que você começou acima:
<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;
import net.digitalprimates.utils.E4XParser;
protected function displayXMLData( row:Object, column:DataGridColumn ):String {
return E4XParser.evaluate( row, column.dataField );
}
]]>
</mx:Script>
Você agora tem uma função única capaz de retornar os resultados corretos de qualquer coluna (veja Figura 4) não importando a profundidade na hierarquia, tão longa como o dataField é fornecido para o DataGridColumn como uma expressão de E4X válido.
Figure 4. DataGrid com o diferente labelFunctions para cada coluna
Onde ir daqui
Neste artigo, você construiu uma função que foi capaz de retornar o XML correto em uma representação de string de uma expressão de E4X. Enquanto isto é um bom uso da tecnologia, é realmente somente o ponto de partida. Usando o mesmo conceito, você pode derivar expressões de E4X de tabelas de banco de dados ou mensagens de servidor, concatenando strings por interface de usuário gestos, ou diretamente de input de usuário.
No arquivo ZIP ( click para baixar ) (veja a seção de Requisitos no princípio), eu incluo uma ferramenta de depuração E4X (veja Figura 5). Ela demonstra a habilidade de pegar XML e uma expressão E4X ambos de input de usuário, avalie a expressão XML, e retorne o resultado em uma representação de árvore e em XML cru. É uma ferramenta útil para expressões de depuração E4X. Porém, também é uma grande demonstração do poder de E4X dinamicamente-avaliado.
Figure 5. E4X debugging tool
