Utilizarei o Visual Studio 2008 com o SQL
Server 2005 e o banco de dados Northwind, porém os mesmos passos podem
ser seguidos no Visual Studio 2005 com o SQL Server 2000.

Crie um novo projeto Web no Visual Studio, logo em seguida clique com o botão direito sobre a solução e escolha Add / New Item.

Na janela que se abrirá, selecione o Item DataSet e atribua o nome DsTerritorio.

Com o DataSet criado, clique com o botão direito dentro da janela do DataSet, escolha
Add / TableAdapter, abrirá uma janela solicitando qual conexão com o
banco de dados será utilizado para a construção do TableAdapter, crie a
conexão com o SQL Server e salve com o nome NorthwindConn e clique em
Next.

Na próxima janela selecione como o
TableAdapter acessará o banco de dados, as opções possíveis são: SQL
statements, criar nova Stored Procedure ou utilizar uma Stored
Procedure já existente no banco de dados.

Deixe a opção Use SQL statements marcada e clique em Next.

A próxima janela é onde se insere o código
SQL para o retorno dos dados, porém você pode utilizar o Query Builder,
que é a ferramenta visual para construção de instruções SQL, portanto
clique no botão Query Builder.

Após clicar no botão Query Builder,
aparecerão duas janelas, a janela do próprio Query Builder e a janela
de Add Table, a segunda janela já com as tabelas existentes no banco de
dados.

Procure e selecione a tabela Region, em seguida, clique em Add. A tabela Region aparecerá no Query Builder.

Clique em Close, em seguida, selecione as
duas colunas da tabela Region (RegionID e RegionDescription). Agora
clique em Execute Query.

Se o resultado do Execute Query for igual
à figura acima, clique em Ok. A próxima janela solicitará nomes para os
métodos de Fill e Return que por padrão são Fill e GetData
respectivamente.

Para a tabela Region, deixe os nomes
sugeridos e clique em Next. A próxima janela exibirá o sumário da
criação do TableAdapter. Clique em Finish.

Agora já é possível visualizar o TableAdapter dentro do DataSet dsTerritorio.

Ainda dentro do DataSet dsTerritorio, crie
outro TableAdapter. Novamente, clique com o botão direito dentro do
DataSet, escolha Add / TableAdapter, escolha a conexão com a base de
dados, também escolha Use SQL statements.

Na janela do Query Builder, adicione a
tabela Territories, selecione todas as colunas. Na linha RegionID,
insira o parâmetro @RegionID na coluna Filter. O parâmetro será
responsável por aplicar o filtro de qual região o SQL retornará os
territórios.

Na janela de definições dos métodos,
acrescente a expressão ByRegionID, após Fill e GetData. Dessa maneira
apenas pelo nome do método é possível saber que um parâmetro chamado
RegionID é esperado.

Agora que concluiu a criação do DataSet
dsTerritorio, crie o DataSet dsVendedor, e dentro dele crie um
TableAdapter com o SQL abaixo.

SELECT 	EmployeeTerritories.EmployeeID,
	Employees.FirstName + ' ' + Employees.LastName AS FullName,
	EmployeeTerritories.TerritoryID
FROM Employees INNER JOIN EmployeeTerritories
	ON Employees.EmployeeID = EmployeeTerritories.EmployeeID
WHERE (EmployeeTerritories.TerritoryID = @TerritoryID)

Acrescente ByTerritoryID na definição dos métodos Fill e GetData.

Após clicar em Finish, o TableAdapter
criado estará com os nomes DataTable1 e DataTable1TableAdapter,
altere-os para Employee e EmployeeTableAdapter.

Crie um novo DataSet chamado dsCliente, e também crie um novo TableAdapter com o código abaixo.

SELECT  Customers.CustomerID, Customers.CompanyName, CustomerEmployee.EmployeeID
FROM (SELECT CustomerID, EmployeeID
	FROM Orders
	GROUP BY CustomerID, EmployeeID) AS CustomerEmployee INNER JOIN
	Customers ON CustomerEmployee.CustomerID = Customers.CustomerID
WHERE (CustomerEmployee.EmployeeID = @EmployeeID)

Para os nomes dos métodos Fill e GetDate, não esqueça de adicionar ByEmployeeID em ambos.

Como no TableAdapter de vendedores, os
nomes deste TableAdapter também não estão corretos, altere-os para
Customers e CustomersTableAdapter respectivamente.

Para concluir a construção dos DataSets, crie mais um chamado dsPedido e também crie um novo TableAdapter com o código abaixo.

SELECT OrderID, CustomerIR, EmployeeID, OrderDate, ShippedDate,
	ShipName, ShipAddress, ShipCity, Shipcountry
FROM Orders
WHERE (CustormerID = @CustomerID) AND
	(EmployeeID = @EmployeeID)

Acrescente ByCustomerIDEmployeeID aos métodos Fill e GetData e clique em Finalizar.

Agora crie o último TableAdapter chamado OrderDetails conforme a figura abaixo.

Após a criação de todos os DataSets (Território, Vendedor, Cliente e Pedido) o projeto deve estar conforme a figura abaixo.

Copie os seguintes arquivos do diretório
de instalação do WebOrb (por padrão em c:\inetpub\wwwroot\weborb30)
para o diretório do projeto .NET.

/weborb.config
/bin/weborb.dll
/WEB-INF

Adicione o código XML abaixo ao web.config do projeto .NET.

<configuration>
 <system.web>
   <httpHandlers>
     <add verb="*" path="weborb.aspx" type="Weborb.ORBHttpHandler"/>
     <add verb="*" path="codegen.aspx" type= "Weborb.Management.CodeGen.CodegeneratorHttpHandler"/>
   </httpHandlers>
 </system.web>
</configuration>

É preciso referenciar o weborb.dll ao
projeto, para isso no Solution Explorer do Visual Studio, clique duas
vezes sobre a opção My Project, em seguida clique em References e
depois em Add / References?

Clique na aba Browse, localize o diretório
Bin do projeto, selecione o arquivo weborb.dll e clique em OK, salve o
projeto e feche a janela My Project.

Clique com o botão direito sobre a solução e escolha Add / New Item, porém escolha Class e dê o nome de csFlex.vb.

Nesta classe serão criados os métodos de
chamada e retorno dos DataSets e TableAdapters criados anteriormente,
através desses métodos é que a comunicação entre o .NET e o Flex
ocorrerá.

Insira o código abaixo ao arquivo csFlex.vb

Imports Weborb.Service
 
Public Class csFlex
 
    Public Function getRegion() As DataTable
        Return New dsTerritorioTableAdapters.RegionTableAdapter().GetData()
    End Function
 
    Public Function getTerritories(ByVal RegionID As String) As DataTable
        Return New dsTerritorioTableAdapters.TerritoriesTableAdapter().GetDataByRegionID(RegionID)
    End Function
 
    Public Function getEmployee(ByVal TerritoryID As String) As DataTable
        Return New dsVendedorTableAdapters.EmployeeTableAdapter().GetDataByTerritoryID(TerritoryID
    End Function
 
    Public Function getCustomers(ByVal EmployeeID As String) As DataTable
        Return New dsClienteTableAdapters.CustomersTableAdapter().GetDataByEmployeeID(EmployeeID)
    End Function
 
    Public Function getOrders(ByVal CustomerID As String, ByVal EmployeeID As String) As DataTable
        Return New dsPedidoTableAdapters.OrdersTableAdapter().GetDataByCustomerIDEmployeeID(CustomerID, EmployeeID)
    End Function
 
    Public Function getOrderDetails(ByVal OrderID As String) As DataTable
        Return New dsPedidoTableAdapters.OrderDetailsTableAdapter().GetDataByOrderID(OrderID)
    End Function
 
End Class

Salve e feche o arquivo csFlex, agora
compile o projeto. Caso o Visual Studio sinalize algum erro, volte e
execute os passos novamente.

Antes de criar a interface no Adobe Flex,
crie a aplicação Web no Internet Information Services (IIS) com o nome
do projeto, verifique se ao acessar o endereço através do navegador uma
página em branco é exibida.

Agora já com a aplicação web configurada
no IIS, abra o Adobe Flex Builder 3, adicione um novo projeto (File /
New / Flex Project).

Agora defina o nome do Projeto, se a opção
Use default location estiver marcada, desmarque-a e localize o endereço
do projeto .NET e dentro da pasta do projeto crie uma nova pasta
chamada FlexSrc. O Project location do Flex deve ficar como a figura
abaixo. A opção de Application type deixe marcado Web Application, e em
Server technology selecione ASP.NET. Clique em Next.

Na próxima janela, na opção Server
selecione Use Internet Information Services (IIS), em Web application
root informe o diretório raiz da aplicação web definida no IIS e no
campo Web application URL informe o endereço da aplicação no IIS. Após
clicar no botão Validate Configuration, na parte superior da janela o
Flex Builder deve ser informar: “The web application root and URL are
valid”, caso apareça outra mensagem, os endereços informados não estão
corretos, corrija antes de prosseguir.

Na mesma janela, um pouco abaixo está
definida a pasta bin-debug como local a serem salvos os arquivos Flex
compilados, deixe o nome que o Builder sugeriu e clique Next.

Na última janela de configuração do
projeto Flex, é possível definir qual a pasta onde o Flex Builder
salvará os arquivos fontes, bem como qual o nome do primeiro arquivo do
projeto a ser criado.

Deixe os campos preenchidos como o Builder
sugeriu e clique em Finish. Após alguns segundos o Adobe Flex Builder 3
exibirá o arquivo ArtigoFlex.mxml pronto para o início da construção da
interface da aplicação.

Porém antes começar a codificar é
necessário incluir um argumento de compilação ao projeto, pois sem esse
argumento o Flex não conseguirá acessar os métodos construídos na
classe csFlex. Para incluir o argumento, clique com o botão direito
sobre o nome do projeto no Flex Navigator e em seguida clique em
Properties. Com a janela de propriedades aberta, clique sobre a opção
Flex Compiler, e insira o argumento após o argumento ?locale en_US

-services c:\Inetpub\wwwroot\weborb30\web-inf\flex\services-config.xml

Após inserir o argumento services, clique em OK.

Agora com o projeto corretamente
configurado e pronto para comunicar com o .NET é possível iniciar a
construção da interface, para tanto crie um painel, entre as tags ,
com o título Painel de Vendas, esse painel terá um tamanho ajustável
conforme as dimensões do navegador do cliente, para isso configure as
propriedades left, right, top e bottom, todos com o valor 10.

<mx:Panel layout="absolute" left="10" right="10" top="10" bottom="10" title="Painel de Vendas">
</mx:Panel>

É possível verificar como o projeto está ficando, bastar clicar no Play.

Dentro do painel, crie um canvas na cor cinza.

<mx:Canvas height="42" left="0" top="0" right="0" backgroundColor="#F3F3F3" borderStyle="none" borderThickness="1" borderColor="#C2BEBE">
 
</mx:Canvas>

Dentro do canvas coloque os labels e
comboboxs que serão utilizados para selecionar região, território,
vendedor e cliente, coloque também dentro do canvas o botão consultar.

<mx:Label y="12" text="Região" horizontalCenter="-348"/>
<mx:ComboBox y="10" id="cbRegion" labelField="RegionDescription" width="89" horizontalCenter="-274"></mx:ComboBox>
<mx:Label y="12" text="Território" horizontalCenter="-194"/>
<mx:ComboBox y="10" id="cbTerritory" labelField="TerritoryDescription" width="89" horizontalCenter="-114"></mx:ComboBox>
<mx:Label y="12" text="Vendedor" horizontalCenter="-32"/>
<mx:ComboBox y="10" id="cbEmployee" labelField="FullName" width="89" horizontalCenter="49"></mx:ComboBox>
<mx:Label y="12" text="Cliente" horizontalCenter="124"/>
<mx:ComboBox y="10" id="cbCustomer" labelField="CompanyName" width="89" horizontalCenter="198"></mx:ComboBox>
<mx:Button y="10" label="Consultar" width="119" horizontalCenter="310" id="btConsultar"/>

A propriedade horizontalCenter define qual
a distância em pixel que um objeto está do centro da página, valores
negativos representam objetos a esquerda do centro da tela e valores
positivos representam objetos a direita, os valores definidos garantem
que os objetos estarão sempre centralizados.

labelField é a propriedade que define qual
o campo que será exibido como label do combobox. O Adobe Flex trabalha
de maneira diferente do .NET quando o assunto é combobox ou
dropdownlist, pois no .NET é possível definir apenas dois valores ao
dropdownlist, o datatextfield e o datavalueFfeld, já no Adobe Flex só
se define qual será o valor de exibição do combobox, labelField, pois
cada linha de opção do combobox é um objeto com propriedades. Essas
propriedades são as colunas que retornaram do banco de dados, logo você
não tem acesso a somente duas colunas como dropdownlist, você tem
acesso a todas as colunas que retornaram do banco de dados.

A propriedade Y define qual a distância
que o objeto tem do topo do componente ao qual ele está pertencendo,
neste caso, y=”12″ diz ao Flex que o label está a 12 pixel do topo do
canvas.

Após o canvas inclua um datagrid onde serão exibidos os pedidos resultantes da consulta ao banco de dados.

<mx:DataGrid id="dgPedido" right="10" left="10" top="55" bottom="10">
<mx:columns>
	<mx:DataGridColumn headerText="Detalhes" width="85"/>
	<mx:DataGridColumn headerText="Data Pedido" dataField="OrderDate"/>
	<mx:DataGridColumn headerText="Data Entrega" dataField="ShippedDate"/>
	<mx:DataGridColumn headerText="Entregue para" dataField="ShipName"/>
	<mx:DataGridColumn headerText="Endereço" dataField="ShipAdress"/>
	<mx:DataGridColumn headerText="Cidade" dataField="ShipCity"/>
	<mx:DataGridColumn headerText="País" dataField="ShipCountry"/>
</mx:columns>
</mx:DataGrid>

Para fazer a comunicação entre a interface
Flex e a aplicação server-side .NET utilize o componente RemoteObject
do Adobe Flex 3.

<mx:RemoteObject id="roNet" destination="GenericDestination"
	source="ArtigoFlex.csFlex" showBusyCursor="true"
	fault="faultHandler(event)" >
 
	<mx:method name="getRegion" result="gotRegion(event)" />
	<mx:method name="getTerritories" result="gotTerritories(event)" />
	<mx:method name="getEmployee" result="gotEmployee(event)" />
	<mx:method name="getCustomers" result="gotCustomers(event)" />
	<mx:method name="getOrders" result="gotOrders(event)" />
	<mx:method name="getOrderDetails" result="gotOrderDetails(event)" />
 
</mx:RemoteObject>

A propriedade destination deve sempre ser
“GenericDestination” para a comunicação através do weborb, a
propriedade source deve ser preenchida com o nome do projeto .NET e a
classe que será acessada, então neste caso será “ArtigoFlex.csFlex”.

A propriedade showBusyCursor seta se será
exibido ou não o relógio como cursor do mouse enquanto alguma
requisição ao .NET estiver sendo feita. E finalmente, fault define qual
função será disparada caso algum erro ocorra durante alguma requisição
do .NET.

Os métodos (

A propriedade result define qual função será disparada após o retorno da requisição ao .NET.

É necessário agora construir as funções,
faultHandler, gotRegion, gotTerritories, gotEmployee, gotCustomers,
gotOrders e gotOrderDetails. As funções são escritas na linguagem
Action Script 3.0

<mx:Script>
	<![CDATA[
		import mx.rpc.events.ResultEvent;
		import mx.controls.Alert;
		import mx.rpc.events.FaultEvent;
	]]>
</mx:Script>

Nesta parte do código além do bloco das
tags de inicio e fim de script, também estão declaradas as importações
das bibliotecas ResultEvent, Alert e FaultEvent que serão utilizadas
logo mais.

Agora crie a função faultHandler

private function faultHandler(event:FaultEvent):void
{
	Alert.show(event.fault.faultString, "Erro");
}

A função faultHandler recebe um parâmetro
do tipo FaultEvent que será exibido para o usuário através do
Alert.show quando algum erro ocorrer durante a requisição ao .NET.

Agora crie os métodos de preenchimento dos valores do combobox região.

private function bindRegion():void
{
	roNet.getRegion();
}
 
private function gotRegion(event:ResultEvent):void
{
	cbRegion.dataProvider = event.result;
	cbRegion.selectedIndex = 0;
	bindTerritories();
}

No código acima foram criadas duas
funções, bindRegion e gotRegion. A função bindRegion chama o método
getRegion do remote object roNet.

Após o retorno da requisição ao método
roNet.getRegion, a função gotRegion é disparada recebendo um parâmetro
do tipo ResultEvent que contém o retorno do método getRegion, o retorno
é associado como dataProvider do combobox cbRegion, em seguida é
selecionado o índice zero dos dados retornados. Após a seleção do
índice, a função bindTerritories() é disparada.

private function bindTerritories():void
{
	roNet.getTerritories(cbRegion.selectedItem.RegionID);
}
 
private function gotTerritories(event:ResultEvent):void
{
	cbTerritory.dataProvider = event.result;
	cbTerritory.selectedIndex = 0;
	bindEmployee();
}

Assim como a função bindRegion,
bindTerritories chama um método do remote object roNet, porém agora o
método chamado é o getTerritories, esse método espera como parâmetro o
código da região, por isso o parâmetro informado é o
cbRegion.selectedItem.RegionID. RegionID é uma propriedade que o
dataProvider do cbRegion passou a ter após a atribuição do
event.result. Abaixo estão as demais funções para a preparação dos
comboboxs.

private function bindEmployee():void
{
	roNet.getEmployee(cbTerritory.selectedItem.TerritoryID);
}
 
private function gotEmployee(event:ResultEvent):void
{
	cbEmployee.dataProvider = event.result;
	cbEmployee.selectedIndex = 0;
	bindCustomers();
}	
 
private function bindCustomers():void
{
	roNet.getCustomers(cbEmployee.selectedItem.EmployeeID);
}
 
private function gotCustomers(event:ResultEvent):void
{
	cbCustomer.dataProvider = event.result;
	cbCustomer.selectedIndex = 0;
}

Para que quando o usuário acesse a
aplicação os comboboxs já sejam preenchidos é necessário definir a
propriedade creationComplete na tag mx:Application.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="bindRegion()">

Com essa propriedade definida, depois de
criada a aplicação, a função bindRegion será disparada iniciando assim
a população de todos os comboboxs, pois eles estão aninhados.

Também é preciso configurar os comboboxs
para que depois de alterada a seleção de um dos filtros, os outros
sejam alterados também, para isso será utilizada a propriedade change.

<mx:ComboBox y="10" id="cbRegion" labelField="RegionDescription" width="89" change="bindTerritories()" horizontalCenter="-274"></mx:ComboBox>
<mx:ComboBox y="10" id="cbTerritory" labelField="TerritoryDescription" width="89" change="bindEmployee()" horizontalCenter="-114"></mx:ComboBox>
<mx:ComboBox y="10" id="cbEmployee" labelField="FullName" width="89" change="bindCustomers()" horizontalCenter="49"></mx:ComboBox>

Agora faça a população da datagrid,

private function bindOrders():void
{
	roNet.getOrders(cbCustomer.selectedItem.CustomerID,cbEmployee.selectedItem.EmployeeID);
}
 
private function gotOrders(event:ResultEvent):void
{
	dgPedido.dataProvider = event.result;
}

Para que a função bindOrders seja disparada ao clicar o botão Consultar, defina a propriedade click do botão btConsultar.

<mx:Button y="10" label="Consultar" width="119" click="bindOrders()" horizontalCenter="310" id="btConsultar"/>

Para finalizar o projeto, crie a estrutura
para exibir os detalhes dos pedidos. Para isso crie uma TitleWindow, em
File / New / MXML Component, defina o nome de orderDetails, baseado em
TitleWindow

Utilize o código abaixo para a TitleWindow orderDetails.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="730" height="420" title="Detalhes do Pedido" showCloseButton="true" close="{PopUpManager.removePopUp(this)}">
<mx:Script>
	<![CDATA[
		import mx.managers.PopUpManager;
		import mx.events.CloseEvent;
	]]>
</mx:Script>
<mx:DataGrid left="10" right="10" top="10" bottom="10" id="dgOrderDetails">
<mx:columns>
	<mx:DataGridColumn headerText="Cód." dataField="ProductID"/>
	<mx:DataGridColumn headerText="Produto" dataField="ProductName"/>
	<mx:DataGridColumn headerText="Preço Un." dataField="UnitPrice"/>
	<mx:DataGridColumn headerText="Qtde" dataField="Quantity"/>
	<mx:DataGridColumn headerText="Desconto" dataField="Discount"/>
	<mx:DataGridColumn headerText="Total" dataField="Total"/>
</mx:columns>
</mx:DataGrid>	
</mx:TitleWindow>

Crie as funções para a população da TitleWindow orderDetails dentro do script do arquivo ArtigoFlex.mxml

import mx.managers.PopUpManager;
 
public function bindOrderDetails():void
{
	roNet.getOrderDetails(dgPedido.selectedItem.OrderID);
}
 
private function gotOrderDetails(event:ResultEvent):void
{
	var popUp:orderDetails = orderDetails(PopUpManager.createPopUp(this, orderDetails, true));
	PopUpManager.centerPopUp(popUp);
	popUp.dgOrderDetails.dataProvider = event.result;						
}

Altere a primeira coluna da datagrid dgPedido para o código abaixo para inserir o botão para exibir os detalhes do pedido.

<mx:DataGridColumn headerText="Detalhes" width="85">
<mx:itemRenderer>
<mx:Component>						
	<mx:HBox width="100%" height="100%" horizontalAlign="center">
		<mx:Button y="10" width="80" label="Detalhes" click="outerDocument.bindOrderDetails()" id="btDetalhes"/>
	</mx:HBox>			
</mx:Component>
</mx:itemRenderer>				
</mx:DataGridColumn>

Salve o projeto e execute, o resultado deve ser como o das figuras abaixo.

Baixe o código fonte completo.

Divirta-se.

*

Publicado originalmente em http://www.igormusardo.com.br