Preenchendo ComboBox e List com dados de um banco (Flex + .net)
Nesse tutorial vou mostrar como preencher um controle ComboBox do Flex com dados de um banco, e preencher um controle List de acordo com o dado que foi selecionado no controle ComboBox. Para isso vou usar o Visual Studio 2008 com c#, Sql Server 2005 com o banco Northwind, Adobe Flex 3 e actionscript 3.0. Como citei no post anterior (Flex e .net – dicas, links e tutoriais), todos os artigos que eu escrever que terão a integração de Flex com .net, criarei com base no artigo que se encontra na minha lista de links (Flex + .net).
1 – Vamos começar criando a aplicação no Visual Studio 2008, File > New > Web Site. Coloquei o nome de “pcAspNet”, pois a aplicação que vou criar no Adobe Flex se chamará “PreencheControles”. Vamos criar uma classe chamada Selecao, dentro dela vamos importar a ddl FluorineFx para a integração das aplicações, e acima da classe Selecao colocar [RemotingService] (a estrutura da aplicação é semelhante à aplicação que se encontra no link que se está na minha lista de links, e tudo que citei anteriormente também é explicado lá).
2 – Agora vamos adicionar uma string de conexão com o banco no web.config (claro que, essa configuração é baseada no meu servidor de banco, adapte a mesma para o seu banco).
<add name="NorthwindConn" connectionString="Data Source=RICARDO-FC13DCB\SQLEXPRESS;Initial Catalog=Northwind;User ID=sa;Password=server" providerName="System.Data.SqlClient" />
3 – Agora vamos adicionar os métodos que retornaram os dados para a aplicação Flex:
public ArrayList SelecionaCategorias()
{
ArrayList lista = new ArrayList();
try
{
SqlConnection Conn = new SqlConnection(GetConnectionString());
Conn.Open();
SqlCommand Comm = new SqlCommand("SELECT CategoryName FROM Categories", Conn);
SqlDataReader Reader = Comm.ExecuteReader();
while (Reader.Read())
{
lista.Add(Reader.GetValue(0).ToString());
}
}
catch (Exception ex)
{ }
return lista;
}
public ArrayList SelecionaProdutos(String CategoryName)
{
ArrayList lista = new ArrayList();
try
{
SqlConnection Conn = new SqlConnection(GetConnectionString());
Conn.Open();
SqlCommand Comm = new SqlCommand("SELECT P.ProductName FROM Products AS P INNER JOIN Categories AS C ON P.CategoryID = C.CategoryID WHERE (C.CategoryName = '" + CategoryName + "')", Conn);
SqlDataReader Reader = Comm.ExecuteReader();
while (Reader.Read())
{
lista.Add(Reader.GetValue(0).ToString());
}
}
catch (Exception ex)
{ }
return lista;
}
private String GetConnectionString()
{
return ConfigurationManager.ConnectionStrings["NorthwindConn"].ConnectionString;
}
Para usar o ArrayList, precisamos importar a classe Collections (using System.Collections;).O primeiro método retorna um ArrayList contendo o nome de todas as categorias, o segundo, retorna o nome de todos os produtos de acordo com o nome de uma categoria especifica. E o terceiro serve simplesmente para retornar a string de conexão que se encontra no web.config.
4 – Agora vamos para o Adobe Flex, crie um novo projeto File > New > Flex Project, configure-o em um diretório que você queira, e coloque o nome dele de PreenchendoControles. IMPORTANTE: Após fazer toda a configuração necessário no Flex para a integração entre as aplicações (veja o link na lista de links), configure a aplicação pcAspNet no IIS e coloque o endereço da mesma no arquivo “service-config.xml”.
5 – Adicione os controles ComboBox e List no Flex, com os id’s: comboCategorias e listProdutos. Adicione também o controle RemoteObject como no código abaixo:
<mx:RemoteObject id="ro" source="Selecao"
destination="fluorine" showBusyCursor="true">
<mx:method name="SelecionaCategorias"
result="{AddCategorias(event)}" fault="{errorFault(event)}"/>
<mx:method name="SelecionaProdutos"
result="{AddProdutos(event)}" fault="{errorFault(event)}"/>
</mx:RemoteObject>
<mx:ComboBox id="comboCategorias" change="ro.SelecionaProdutos(comboCategorias.selectedLabel)" creationComplete="{ro.SelecionaCategorias()}" y="10" width="200" x="121"></mx:ComboBox>
<mx:List id="listaProdutos" x="329" y="9" width="200" height="150"></mx:List>
Como já sabemos, a propriedade source do RemoteObject precisa ser setada com o nome da classe que criamos no pcAspNet (Selecao), nas tag method, são configurados os métodos da classe Selecao. IMPORTANTE: No ComboBox tem um evento chamado creationComplete, esse evento é disparado assim que o ComboBox é renderizado na tela, então assim não corremos o risco de preencher os dados do ComboBox antes de ele ser criado na tela. No evento change, que o evento que é disparado toda a vez que muda a seleção no ComboBox, coloquei o método que preencherá o List com a lista de produtos toda a vez que o valor do ComboBox for alterado.
6 – Agora vamos criar o bloco de script que terá os métodos que preencheram os controles:
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.collections.ArrayCollection;
private function errorFault(evt:FaultEvent):void
{
Alert.show(evt.fault.faultString);
}
private function AddCategorias(e:ResultEvent):void
{
var lista:ArrayCollection = e.result as ArrayCollection;
lista.addItemAt("Selecione --", 0);
comboCategorias.dataProvider = lista;
}
private function AddProdutos(e:ResultEvent):void
{
var lista:ArrayCollection = e.result as ArrayCollection;
listaProdutos.dataProvider = lista;
}
]]>
</mx:Script>
Precisamos importar as classes acima para poder trabalhar. O método errorFault é chamado somente se acontece algum erro, o AddCategorias é o método que preencherá o controle ComboBox: Criamos uma variável do Tipo ArrayCollection que receberá o ArrayList do c# com os nomes das categorias, depois adicionamos um item a mais na posição “0”. E no final definimos o ArrayCollection com sendo o dataProvider do ComboBox. No AddProduto fazemos praticamente a mesma coisa, só não adicionamos nada na primeira posição.
E pronto, sem mistério, agora é só rodar a aplicação e você preencherá o List somente quando selecionar uma opção no ComboBox.
Segue o arquivo para download. Até a próxima!
