Implementando AutoCompleteBox com dados retornados do SQL

Neste artigo irei abordar a utilização do AutoCompleteBox, um controle que existe dentro do Silverlight Toolkit.

por Lucas Defacio

Introdução

Existem muitos recursos que conseguem potencializar nossa aplicação e criar um diferencial. O motivo para a utilização destes recursos deve ir além da questão estética. Melhorar a navegabilidade e a experiência do usuário são tarefas nem sempre complicadas. Neste artigo irei abordar a utilização do AutoCompleteBox, um controle que existe dentro do Silverlight Toolkit.

Silverlight ToolKit

O Silverlight Toolkit é uma coleção de controles, componentes e utilitários desenvolvidos para potencializar sua aplicação Silverlight. Neste artigo abordarei um controle do Silverlight Toolkit chamado AutoCompleteBox. Este controle é semelhante ao TextBox. Porém, ao iniciar a digitação de um texto, ele sugere respostas pré-definidas em seu código.

O download do ToolKit está disponível no site ColdPlex pelo endereço: http://silverlight.codeplex.com/.

Após a instalação, customizaremos a nossa aba ToolBox no VisualStudio com os novos controles e componentes.

Clicando com o botão direito em cima da aba Silverlight XAML Controls escolha a opção Choose Items. Selecione os novos componentes na aba Silverlight Components. A Figura 1 ilustra este processo.

Figura 1: Adicionando componentes na aba Silverlight XAML Controls.

Nota: Caso os novos componentes não sejam listados, clique em Browse... e aponte as dlls instaladas pelo Silverlight Toolkit. Geralmente elas são instaladas na pasta: C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Toolkit\March 2009\Libraries.

Figura 2: Toolbox como novos componentes do Silverlight Toolkit.

AutoCompleteBox

Clicando pela Toolbox no AutoCompleteBox, será adicionado o controle e sua devida referência. As propriedades são semelhantes as do TextBox, então definiremos apenas o x:Name, Width e Height. O Quadro 1 ilustra nossa Page.xaml.

<UserControl   x:Class="SilverlightAutoComplete.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:inputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <inputToolkit:AutoCompleteBox x:Name="MyBox" Width="200" Height="30" ></inputToolkit:AutoCompleteBox>

    </Grid>

</UserControl>

Quadro 1: Nosso arquivo Page.xaml com o componente AutoCompleteBox.

Agora em nosso arquivo Page.xaml.cs definiremos os termos que irão ser listados em nosso AutoCompleteBox. Para isto criaremos uma array de string com os termos e atribuiremos a propriedade ItemSource de nosso controle. O Quadro 2 representa o código.

public Page()

        {

            InitializeComponent();

            PopulaMyBox();

        }

        private void PopulaMyBox()

        {

            MyBox.ItemsSource = new string[] { "Silverlight", "Linha de Código", "Brasilverlight" };

        }

Quadro 2: Definindo os termos que serão sugeridos pelo AutoCompleteBox.

Desta forma ao começar a digitar estes termos, o componente irá sugeri-los. Porém, um dos pontos negativos seria a atualização destes termos, já que estão hardcode. Na continuação do artigo iremos trazer estes termos do SQL através das tecnologias: Linq-to-Sql e Silverlight-enabled WCF Service.

Estrutura do Banco

Para o desenvolvimento deste artigo, criarei uma tabela com poucos campos. No caso, uma tabela de Produtos com os campos: ProdutoId e Nome. O Quadro 3 demonstra o script necessário para gerar esta tabela.

create table Produtos

(

      ProdutoId int identity(1,1) not null,

      Nome varchar(100) not null

);

alter table Produtos

      add constraint PK_ProdutoId primary key(ProdutoId);

Quadro 3: script para gerar a tabela de Produto.

Com a tabela criada, vamos adicionar alguns registros. Este processo está sendo representado pela Figura 3.

Figura 3: adicionando registros a tabela Produtos.

Acessando Dados

Com nossa tabela pronta, criaremos a comunicação necessária entre o Silverlight e o SQL. Em nosso projeto Web adicionaremos um novo item do tipo Linq to SQL Classes e nomearemos como DataClasses.dbml. Agora pela aba Server Explorer arrastaremos nossa tabela de Produtos para a tela e alteraremos a propriedade Serialization Mode para Unidirectional. Nosso arquivo .dbml está sendo representado pela Figura 4.

Figura 4: DataClasses.dbml.

Agora iremos criar o arquivo responsável pela comunicação entre o Silverlight e o SQL. Ainda no projeto Web adicionaremos um item do tipo Silverlight-enabled WCF Service e nomearemos como Service.svc. Neste arquivo vamos referenciar o DataClasses e utilizar o LINQ para fazer um select no banco. O Quadro 4 ilustra a implementação deste código.

DataClassesDataContext db = new DataClassesDataContext();

        [OperationContract]

        public List<Produtos> GetProdutos()

        {

            var Select = from rows

                         in db.Produtos

                         select rows;

            return Select.ToList();

        }

Quadro 4: Service.svc

Nota: Para entender melhor este processo, sugiro a leitura do artigo: http://www.linhadecodigo.com.br/Artigo.aspx?id=2242 (Comunicação entre Silverlight e SQL).

Recebendo Dados pelo Silverlight

Em nosso projeto Silverlight deveremos adicionar a referência para o serviço criado no projeto web. Para isto, clicaremos com o botão direito em cima da pasta de References e selecionaremos a opção Add Service Reference. Clicando em Discover o nosso serviço será exibido. Selecione-o, nomeio o namespace como ServiceReference e clique em Ok. Este processo está sendo ilustrado pela Figura 5.

Figura 5: adicionando referência ao nosso serviço.

No arquivo Page.xaml.cs iremos acessar os métodos deste serviço. Inicialmente vamos referenciar o serviço e criar o método GetProdutosCompleted e GetProdutosAsync. O Quadro 5 exemplifica este código.

private void PopulaMyBox()

        {

            //MyBox.ItemsSource = new string[] { "Silverlight", "Linha de Código", "Brasilverlight" };

            webService.GetProdutosCompleted += new EventHandler<SilverlightAutoComplete.ServiceReference.GetProdutosCompletedEventArgs>(webService_GetProdutosCompleted);

            webService.GetProdutosAsync();

        }

        void webService_GetProdutosCompleted(object sender, SilverlightAutoComplete.ServiceReference.GetProdutosCompletedEventArgs e)

        {

           

        }

Quadro 5: Métodos GetProdutosCompleted e GetProdutosAsync.

Desta forma, o retorno dentro do método Completed será uma lista com os campos ProdutoId e Nome. Como iremos utilizar apenas o campo Nome que é do tipo texto, devemos criar uma lista do tipo string para armazenar estes valores através de uma estrutura For e, por fim, atribuir esta lista na propriedade ItemSource do nosso AutoCompleteBox. A implementação deste código pode ser vista no Quadro 6.

void webService_GetProdutosCompleted(object sender, SilverlightAutoComplete.ServiceReference.GetProdutosCompletedEventArgs e)

        {

            List<string> lstNome = new List<string>();           

            for (int i = 0; i < e.Result.Count; i++)

            {

                lstNome.Add(e.Result[i].Nome);

            }

            MyBox.ItemsSource = lstNome;

        }

Quadro 6: Armazenando o campo Nome em nossa lista e atribuindo a propriedade ItemSource do AutoCompleteBox.

A Figura 6 representa nossa aplicação. Ao começar a digitar algum termo, o componente irá sugerir os dados cadastrados no banco.

Figura 6: aplicação pronta.

Conclusão

Quando criamos um ambiente que melhore a navegabilidade do usuário e a estética da aplicação, exploramos de forma correta os recursos da RIA (Rich Interface Application). Isto cria um diferencial competitivo e melhora a experiência do usuário. Para isto, a implementação do AutoCompleteBox é uma boa dica, pois auxilia o usuário e evita alguns possíveis erros de digitação.