Preenchendo Controles Data-Bound com XML

Preenchendo Controles Data-Bound com XML

Extensible Markup Language (XML) é uma linguagem definida pela World Wide Web Consortium (W3C, http://www.w3c.org). Podemos usar XML para criar nossos próprios elementos, sendo uma linguagem de marcação para seu próprio uso. Desse modo, XML subistitui outras linguagens de marcação semelhante a Hypertext Markup Language (HTML); no HTML todos os elementos são predefinidos. De fato, XML é uma linguagem de metamarkup - "marcação sobre marcação" - porque ela permite criar sua própria linguagem marcação.

Criar suas próprias tags é o que faz o XML ser extensível. Por exemplo, se fossemos montar um documento HTML faríamos assim:

Figura 01 - Modelo Tags HTML

Agora veja um exemplo em xml:

Figura 02 - Modelo Tags XML

Percebeu! Ao contrário do XML, o HTML, como mencionado anteriormente, possui tags já definidas. O XML, com a principal característica de fornecer estruturas de dados, nos facilita no desenvolvimento, ou seja, o XML está focado no conteúdo e não na apresentação.

Uma das características no .NET 2.0 é a redução de código, pois nos permite diminuir o número de linhas de código requeridas por uma aplicação até 70%.

Com os controles data-source, disponíveis no ASP.NET 2.0, temos a facilidade de apresentar dados diretamente do database ou de um arquivo XML. Data-source são controles que lêem dados de uma origem externa, fazendo disponibilidade desses dados para controles data-bound. Os controles data-bound podem ler os dados dos controles data-source (sem necessidade de envolver alguma linha de código) e apresentar dados de várias maneiras para os usuários de aplicações Web.

A arquitetura de controles ASP.NET 2.0 para dados hierárquicos é muito similar ao projeto de controles para dados tabular. O ASP.NET oferece ambos - controles data-source hierárquicos e controles data-bound hierárquicos.

Navegação de Site com SiteMapDataSource

No ASP.NET 2.0 representamos estruturas de navegação para um site da Web através de um arquivo chamado web.sitemap. Para adicioná-lo ao seu projeto veja a Figura 03 e Figura 04.

Figura 03 - Clique com o botão direito no Web Site e Add New Item 

Figura 04 - Selecionando Site Map 

O elemento siteMapNode, usualmente, contém os atributos Url, Title e Description, sendo que:

• Url indica um caminho virtual que corresponde para uma página em sua ou em outra aplicação;
• Title mostra o texto dos hyperlinks dos controles;
• Description apresenta Tool Tips ou texto alternativo (ALT Text);

Figura 05 - Modelo Site Map  

Uma vez que temos a estrutura do site disponível em um arquivo web.sitemap, podemos consumir essa informação usando um controle SiteMapDataSource. Esse controle nos permite associar os dados do mapa do site com controles de servidor web semelhantes a SiteMapPath, TreeView, Menu e assim por diante. Vamos conhecer um pouco esses controles.

• SiteMapPath - esse controle recupera a página corrente do usuário e apresenta a hierarquia das páginas. Ele permite os usuários navegar para as páginas anteriores na hierarquia. SiteMapPath trabalha exclusivamente com o controle SiteMapDataSource;
  
• TreeView - fornece uma interface de usuário vertical que expande e recolhe os nós selecionados na página. Para associar as informações de navegação é necessário indicar o SiteMapDataSource no data-source do controle TreeView;
  
• Menu - fornece interface de usuário vertical ou horizontal e também pode apresentar sub-menus quando o usuário passar o ponteiro do mouse sobre o item. Assim como o TreeView, quando usamos o SiteMapDataSource como o data source, os dados são populados automaticamente.

Para apresentar as informações ligadas aos controles é necessário seguir os seguintes passos:

• Adicione um controle SiteMapDataSource

Figura 06 - Adicionar controle DataSource

• Adicione algum dos controles (Menu, SiteMapPath ou TreeView) em sua página

 
Figura 07 - Arrastar controles para página

• Associe o SiteMapDataSource para os controles de Menu e TreeView, conforme modelo da Figura 08.

Figura 08 - Associar informações de navegação no TreeView

Veja o resultado:

Data Binding com controle XmlDataSource

O controle de dados aplicado com o ASP.NET suporta uma variedade de cenários para ligação de dados. Uma grande vantagem é que podemos fazer ligação de dados sem escrever alguma linha de código. Esse controle é o , que nos permite fazer ligação de dados XML, vindo de uma variedade de recursos, semelhantes como um arquivo XML, objetos DataSet, e assim por diante. Uma vez que os dados XML são destinados para o controle XmlDataSource, esse controle pode agir como uma origem de dados para outros controles semelhantes ao TreeView e Menu. O XmlDataSource pode ser destinado a alguns dos seguintes controles:

Nesta seção vamos demonstrar como fazer ligação do controle XmlDataSource com alguns controles data bound, como o TreeView. O TreeView nos permite especificar como cada nó será renderizado. Por exemplo, podemos criar uma ligação para o elemento "Livro" para renderizá-lo com o texto estático "ASP.NET WebService". A listagem 01 é o modelo Xml que iremos utilizar para nossos exemplos e a listagem 02 mostra o código necessário para popular um controle TreeView com um XmlDataSource, siga os passos a seguir.

Listagem 01 - Arquivo Xml Modelo

• Adicione um controle XmlDataSource a sua página (siga exemplo Figura 07);
• Configure o XmlDataSource (Figura 09 e 10);

Figura 09 - Clicar em "Configure Data Source..."

Figura 10 - Selecionar o Arquivo Xml Modelo (Data File) e Filtrar os dados que serão retornados pelo arquivo Xml (XPath Expression)

• Adicione um controle TreeView a sua página (siga exemplo Figura 07)
• Faça uma associação do data source do TreeView para o controle XmlDataSource (siga exemplo Figura 08)
• Edite a apresentação de texto dos nós (Figuras 11, 12 e 13)

Figura 11 - Editar Nós

Figura 12 - Selecionar dados de ligação

Figura 13 - Editar propriedade de texto que será exibida no nó

Figura 14 - Resultado

Para trabalhar com GridView faça a mesma sequência, preenchendo agora "DataField" com o atributo que deseja exibir nas células do grid e "HeaderText" para texto do cabeçalho. Veja listagem seguinte:

Listagem 02 - Preenchendo um GridView com xml

Trabalhando com DropDownList segue o mesmo modelo, "DataTextField" para o texto que será mostrado na tela e "DataValueField" para valor do campo selecionado. Veja listagem:

Listagem 03 - Preenchendo um DropDownList com xml

Percebeu como é fácil? Os demais controles - como exemplo Repeater e DataList - seguem as mesmas sequências.

Estou disponível para qualquer dúvida ou sugestão (kallebe.santos@gmail.com).

Um grande abraço e até a próxima...