O desenvolvimento de aplicações para acesso a banco de dados usando a plataforma .NET não sofreu grandes alterações desde o seu lançamento. Geralmente você começa definindo o seu banco de dados, tabelas, relacionamentos, em seguida parte para a definição das classes de forma a procurar representar o domínio do seu negócio e finalmente usa os mesmos conceitos abstratos básicos de programação: definindo objetos Connection, objetos Command, objetos datareader, objetos dataset etc.

Muitos desenvolvedores já têm sua biblioteca de funções prontas ou usam recursos de terceiros ou mesmo da Microsoft, como os Data Application Blocks.

Ficamos tão acostumados como uma forma de escrever código que, muitas vezes, não percebemos que temos novos recursos à disposição, que irão garantir um melhor desempenho e manutenção. Afinal, se está funcionando, é o que importa, pensamos…

A partir da versão 3.0, e consolidada na versão 3.5 da plataforma .NET, temos um leque de novas funcionalidades que nos dão um ganho muito grande de produtividade. Uma delas, o foco deste artigo, é o LINQo SQ tL.

Neste artigo eu vou mostrar como usar os novos recursos do LINQ to SQL para efetuar o mapeamento para tabelas de um banco de dados SQL Server e, em seguida, usar os recursos da linguagem LINQ de forma  ter um código enxuto e eficiente. Bem diferente da forma como estávamos acostumados a fazer.

Vou criar uma aplicação web, mas poderia ser uma aplicação windows forms, e usando a linguagem VB .NET, vou efetuar o mapeamento OR/M para uma tabela Alunos do banco de dados Teste.mdf criado no SQL Server 2005 Express Edition, sem usar o assistente e o descritor objeto Relacional disponível, dessa forma podemos entender um pouco melhor como as coisas funcionam.

Como não é objetivo deste artigo, eu não vou mostrar como criar o banco de dados e a tabela no Visual Web Developer 2008 Express, mas essa é uma tarefa bem simples. Se você tiver dúvidas, consulte as referências para maiores detalhes.

Abaixo temos o banco de dados Teste.mdf e a tabela Alunos definida com os campos: id, nome e email, onde o campo id é uma chave primária do tipo identity;

Logo depois temos a tabela exibindo alguns dados que eu incluí para usar no projeto deste artigo.

O banco de dados será copiado na pasta App_Data.

Em seguida defina o arquivo web.config a string de conexão usada para acessar o banco de dados Teste.mdf:

<connectionStrings>
 <add name="connectionStringAlunos"
connectionString="Data
Source=.\SQLEXPRESS;AttachDbFilename='C:\Documents and
Settings\macoratti\_
   Meus documentos\Visual Studio 2008\Projects\linq_Entities\linq_Entities\App_Data\Teste.mdf';_
   Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>
</connectionStrings>

Observe que temos o nome connectionStringAlunos a string de conexão usada.

Nota: Na sua máquina local a string de conexão pode ser diferente, atente para este detalhe.

No exemplo deste artigo eu vou usar o Visual Web Developer 2008 Express Edition, que já dá suporte ao LINQ to SQL e permite efetuar o mapeamento objeto relacional.

Abra o VWD 2008 e crie um novo web site a partir do menu File-> New web site com o nome de acessoLINQ usando a linguagem VB .NET;

A seguir a partir no menu Web Site -> Add New Item, selecione o template Class e informe o nome LINQ.vb e clique em Add; (o arquivo será copiado na pasta App_Code).

Antes de iniciar, clique com o botão direito do mouse sobre o nome do projeto e selecione Add Reference e, a partir da janela Add Reference, inclua a referência a System.Data.Linq;

Agora vamos criar a classe que vai efetuar o mapeamento OR/M com a tabela Alunos do nosso banco de dados. Veja o código a seguir:

Imports System
Imports System.Data.Linq.Mapping

<Table(name:="Alunos")> _
Public Class aluno

    Private _id As Integer
    Private _nome As String
    Private _email As String

 <Column(IsPrimaryKey:=True, IsDbGenerated:=True)> _
    Public Property Id() As Integer
        Get
            Return _id
        End Get
        Set(ByVal value As Integer)
            _id = value
        End Set
    End Property

    <Column(CanBeNull:=True)> _
    Public Property Nome() As String
        Get
            Return _nome
        End Get
        Set(ByVal value As String)
            _nome = value
        End Set
    End Property

    <Column(CanBeNull:=True)> _
    Public Property Email() As String
        Get
            Return _email
        End Get
        Set(ByVal value As String)
            _email = value
        End Set
    End Property

End Class

Definimos a classe aluno mapeada para a tabela Alunos e definimos três propriedades:

• Id()
• Nome()
• Email()

Cada uma delas sendo mapeada para a coluna correspondente da tabela Alunos;

Com isso já teremos o acesso via entidade criada no mapeamento.

A classe aluno representa a tabela Alunos do banco de dados.

Vamos agora criar a interface na página Default.aspx. Inclua a partir da ToolBox os seguintes componentes nesta página:

• TextBox – ID=txtNome
• Button – ID=btnProcurar
• GridView – ID=gdvAlunos

Defina o seguinte leiaute na página:

Agora vamos definir o código associado ao evento Click do botão Procurar:

 Protected Sub btnProcurar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnProcurar.Click

  Dim conexao As String = ConfigurationManager.ConnectionStrings("connectionStringAlunos").ConnectionString.ToString
  Dim db As New DataContext(conexao)
  Dim tAlunos As Table(Of aluno)
        tAlunos = db.GetTable(Of aluno)()
        gdvAlunos.DataSource = tAlunos.Where(Function(a) a.Nome.Contains(txtNome.Text))
        gdvAlunos.DataBind()

 End Sub

1. Obtemos a string de conexão a partir do arquivo web.config:

 Dim conexao As String = ConfigurationManager.ConnectionStrings("connectionStringAlunos").ConnectionString.ToString

2. Criamos uma instância da classe DataContext usando a conexão obtida;

Dim db As New DataContext(conexao)

3. Definimos um objeto tAlunos do tipo Table(Of )

     
Dim tAlunos As Table(Of aluno)

4. Obtemos a tabela ALunos a partir do contexto criado através do método GetTable<> que referencia o nome da classe aluno e não nome da tabela;

tAlunos = db.GetTable(Of aluno)()

5. Usamos uma expressão lambda onde selecionamos os nomes contidos na tabela a partir da expressão informada no TextBox txtNome;

tAlunos.Where(Function(a) a.Nome.Contains(txtNome.Text))

Executando o projeto, se nada for informado na caixa de texto, todos os dados da tabela serão exibidos:

Informando um critério qualquer teremos:

Observe que não nos preocupamos em definir objetos connection, commands, datareaders ou datasets apenas instanciamos um contexto a partir do qual tivemos acesso, a partir da classe mapeada para a tabela, aos dados usando uma consulta LINQ.

O código ficou mais enxuto e tivemos menos trabalho. E isso sem usar o assistente; com ele o trabalho de gerar a classe não seria necessário. Devemos portanto conhecer os novos recursos para saber avaliar quando usá-los para obtermos um produto final mais refinado.

Aguarde novos artigos sobre o assunto…

Pegue o projeto completo aqui:  acessoLINQ.zip

Referências:

• Veja os artigos da seção: LINQ
• Usando o SQL Server Management Studio
• Criando um Banco de dados no SQL Server
• VB 2008 – Cadastro de Alunos
• ASP .NET – Usando LINQ – Expressões Lambda
• ASP .NET – Usando LINQ para manutenção de dados
• VB .NET – Protótipo para sistema de vendas em LINQ

Fonte: Imasters

O controle GridView é usado para exibir dados no formato tabular além de fornecer as funcionalidades para incluir, alterar e excluir registros do banco de dados relacionado. Durante a alteração ou inclusão de dados, geralmente temos que efetuar a validação dos mesmos antes de salvar no banco de dados. Este artigo mostra como você pode integrar os controles de validação com o controle Gridview de forma dinâmica em tempo de execução.

Os controles de validação que a ASP .NET disponibiliza são:

1. RequiredFieldValidator
2. RangeValidator
3. RegularExpressionValidator
4. CompareValidator
5. CustomValidator

O que vamos mostrar é como os controles de validação podem ser criados dinamicamente em tempo de execução e serem integrados com qualquer controle de entrada de dados, no caso o GridView.

As ferramentas usadas neste artigo são:

• Visual Web Developer 2008 Express Edition (VWD2008);
• SQL Server 2005 Express Edition (você pode usar o Microsoft Access);

Abra o VWD2008 e no menu File selecione New Web Site;

A seguir, faça o seguinte:

• Selecione o template ASP .NET Web Site;
• Selecione File System em Location;
• Selecione a linguagem Visual Basic em Language (note que poderíamos usar C#);
• Informe o nome do web site em uma pasta local. No exemplo eu estou informando: validaGridView
• Tecle o botão OK;

Na janela Solution Explorer selecione o formulário web Default.aspx e a partir da Caixa de Ferramentas (ToolBox) faça o seguinte:

• • Arraste e solte o controle GridView na área de Design;
  • Defina a propriedade AutoGenerateColumns do GridView como false;
  • Defina uma formatação padrão ao GridView;

Vamos criar agora o banco de dados Clientes.mdf no SQL Server que será usado neste artigo.

No menu WebSite selecione Add New Item;

A seguir, na janela Add New Item, selecione o template SQL Server Database, informe o nome Clientes.mdf e clique em Add;

Nota: Será apresentada uma caixa de diálogo solicitando a sua confirmação para copiar o arquivo para a pasta App_Data; Confirme;

Abra a pasta App_Data e clique no arquivo Clientes.mdf para abrir o DataBase Explorer;

Expanda os objetos do DataBase e clique com o botão direito sobre o objeto Tables e selecione Add New Table;

Vamos definir a tabela Contatos com a seguinte estrutura da seguinte forma:

• No editor, você digita o nome da Coluna, define o seu tipo e define se a coluna permite valores Nulls;
• A seguir, define a coluna clienteID como sendo a chave primária do tipo identidade (identity), com isso ela será auto-incremental;
• Para encerrar, você clica no ícone para Salvar e informa o nome Contatos;
• Defina os campos: clienteID, nome, sexo, idade, cidade e email; (A coluna sexo permitirá os valores M e F)

Vamos incluir alguns dados na tabela. Na janela DataBase Explorer clique com o botão direito sobre o nome da tabela Contatos recém-criada e selecione Show Table Data. A seguir, informe alguns dados, conforme mostra a figura a seguir:

Com isso já temos o nosso banco de dados Clientes.mdf e a nossa tabela Contatos. Vamos continuar. Selecione o formulário web Default.aspx, acione o modo Design e selecione o controle GridView.

Tecle F4 para abrir a janela de propriedades e defina na propriedade DataKeyNames o campo clienteID. Selecione o GridView, acione a GridView Tasks e selecione a opção Edit Columns. Inclua 5 colunas BoundField no GridView e defina as seguintes propriedades para cada uma delas:

Conforme a figura abaixo:

Inclua uma coluna CommandField, defina seu tipo de comando como Edit/Update e traduza os textos pertinentes (se desejar);

Agora converta todos os campos vinculados (BoundField) no GridView para TemplateField, para isso, selecione o campo em Selected Fields e clique no link Convert this field into a TemplateField.

Volte a selecionar o GridView e em GridView Tasks clique no link Edit Templates.

Defina cada campo convertido como TemplateField da seguinte forma:

1. A seção ItemTemplate deverá possui um controle Label vinculado coluna de nome correspondente. Ex: coluna Nome -> Bind(“nome”)

2. A seção EditItemTemplate deverá possuir um controle TextBox vinculado à coluna de nome correspondente. Ex: Coluna Nome -> Bind(“Nome”)

Em seguida, a partir da ToolBox, na guia Validation, para a coluna Nome, inclua o controle RequiredFieldValidator e defina as seguintes propriedades:

• ErrorMessage = Informe o nome;

• • ControlToValidate = TextBox1;

Os demais controles de validação serão definidos via código. A seguir temos quais os controles iremos usar para cada uma das colunas:

Dessa forma, temos o controle de validação definido para Nome em tempo de desenho e os demais controles iremos definir em tempo de execução via código.

Agora, temos que efetuar a vinculação do controle GridView com a nossa fonte de dados: a tabela Contatos do banco de dados Clientes.mdf.

Como vamos fazer isso via código, vamos criar um método chamado vinculaGrid() no arquivo Default.aspx.vb com o seguinte código:

Private Sub vinculaGrid()

 Dim
conn As String = "Data
Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Clientes.mdf;Integrated
Security=True;User Instance=True"

        Dim sql As String = "Select * from Contatos order by Nome"
        Dim da As SqlDataAdapter = New SqlDataAdapter(sql, conn)
        Dim dt As DataTable = New DataTable()

        da.Fill(dt)

        GridView1.DataSource = dt
        GridView1.DataBind()
    End Sub

Lembrando que devemos declarar no início do arquivo os imports:

Imports System.Data.SqlClient

Imports System.Data

Para chamar o método acima, vamos usar o evento Load da página da seguinte forma:

 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            vinculaGrid()
        End If
    End Sub

Executando o projeto neste momento, iremos obter:

O próximo passo é habilitar a edição e o cancelamento da edição, pois se você clicar no link Edita irá ocorrer um erro.

Lembre-se de que o nosso GridView não foi gerado usando um assistente e por isso não possui os eventos para edição e cancelamento ativos. Vamos ativá-los…

No evento RowEditing do controle GridView informe o código abaixo para permitir a edição:

Protected Sub GridView1_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) _
                   Handles GridView1.RowEditing
                           GridView1.EditIndex = e.NewEditIndex
        vinculaGrid()
    End Sub

Para permitir o cancelamento do evento acima, vamos incluir o código abaixo no evento RowCancelingEdit:

Protected Sub
GridView1_RowCancelingEdit(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewCancelEditEventArgs) _
Handles GridView1.RowCancelingEdit
        GridView1.EditIndex = -1
        vinculaGrid()
    End Sub

Executando o projeto neste momento e a seguir clicando no link Edita iremos conseguir efetuar a edição dos dados. Para a coluna Nome, como já temos o controle de validação definido, ao tentar informar um nome em branco obteremos o resultado abaixo:

Precisamos então definir os demais controles de validação e, para isso, vamos usar o evento RowDataBound do controle GridView.

Para a coluna Sexo iremos usar o controle CustomValidator, que é usado para validar uma entrada de forma customizada no lado do cliente ou do servidor. No exemplo iremos usar uma validação JavaScript do lado do cliente. Lembre-se de que a coluna Sexo deve aceitar somente os valores M, para masculino, e F, para feminino.

Primeiro vamos definir criar o código que define o controle em tempo de execução no servidor:

Depois verificamos se a linha é do tipo DataRow, ou seja, é uma linha de dados e não de cabeçalho;

A seguir verificamos se EditIndex é igual ao índice da linha atual (RowIndex) para em seguida definir via código o controle CustomValidator;

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
Handles GridView1.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then

'Verificando se EditIndex é igual a Row Index atual

'então vincula os controles de validação a linha particular

If GridView1.EditIndex = e.Row.RowIndex Then

'Coluna Sexo- definindo o CustomValidator

Dim cv As CustomValidator = New CustomValidator

cv.ID = "CustomValidator1"

cv.ControlToValidate = "TextBox2"

cv.ErrorMessage = "Informação inválida"

cv.SetFocusOnError = True

cv.ValidateEmptyText = True

cv.ClientValidationFunction = "validaSexo"

e.Row.Cells(1).Controls.Add(cv)

End If

End If

End Sub

• No código acima criamos uma instância da classe CustomValidator e definimos um ID para esta instância;
• A seguir especificamos o controle que será validado, no caso o controle TextBox2;
• Definimos a mensagem de erro em ErrorMessage.

Fonte: Imasters

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

Fonte: Imasters