Webparts é um novo conceito em usabilidade para sites dinâmicos. Utilizando clicar/arrastar e soltar o usuário passa a ter uma nova experiência em tempo real.

Abra o Visual Studio 2005 Professional e crie um novo projeto do tipo Web. Para isso vá para menu File/New Web Site, como mostra a Figura 1.

NOTA: É possível utilizar WebParts em qualquer versão do Visual Studio 2005. Desde as versões Express até Team System.
Criando um novo projeto
Figura 1. Criando um novo projeto

Com um novo projeto do tipo Web site criado, vá para a seção WebParts da toolbox, e vamos agora analisar alguns elementos presentes na Figura 2.

Criando um novo projeto
Figura 2. Criando um novo projeto

Os elementos da Seção WebParts são:

  • WebPartManager
  • ProxyWebPartManager
  • WebPartZone
  • CatalogZone
  • DeclarativeCatalogPart
  • PageCatalogPart
  • ImportCatalogPart
  • EditorZone
  • AppearanceEditorPart
  • BehaviorEditorPart
  • PropertyGridEditorPart
  • ConnectionsZone

Criando um Webpart

Já com o projeto criado, vá para a Seção WebParts na Toolbox e arraste um WebPartManager para sua WebForm, como vemos na Figura 3.

Arrastando um WebPartManager
Figura 3. Arrastando um WebPartManager

Agora vá para o Menu Layout, Opção Insert Table, e utilize o modo Custom. Defina três colunas e linha, conforme mostra a Figura 4.

Criando uma Table
Figura 4. Criando uma Table

Com a tabela criada vá novamente para a Seção WebParts e arraste agora três WebPartZone, um para cada célula da tabela, como vemos na Figura 5.

Arrastando WebPartsZones
Figura 5. Arrastando WebPartsZones

Temos agora uma estrutura de um WebPart, notem que coloquei três WebPartZone, poderia ter 2 ou 20, não importa. Vamos agora arrastar algum componente para dentro dessas zonas e passar a dar funcionalidade para o mesmo, como vemos na Figura 6.

Componentes dentro de WebPartZones
Figura 6. Componentes dentro de WebPartZones

Precisamos agora escrever um pouco de código, clique em (F7) para acessar o Code-behind da página (Figura 7).

Liberando o arrastar e soltar dos componentes (WebPartZone) dentro da página
Figura 7. Liberando o arrastar e soltar dos componentes (WebPartZone) dentro da página

Execute o código (F5) e faça seus testes arrastando os componentes entre as WebPartsZones, como vemos nas Figuras 8 e 9.

WebPart em ação
Figura 8. WebPart em ação
WebPart em ação
Figura 9. WebPart em ação

O código da página é apresentado a seguir:


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml " > 
<head runat="server"> 
<title>Untitled Page</title> 
</head> 
<body> 
  <form id="form1" runat="server"> 
  <div> 
   <asp:WebPartManager ID="WebPartManager1" runat="server"> 
   </asp:WebPartManager> 
  </div> 
  <table> 
   <tr> 
    <td > 
     <asp:WebPartZone ID="WebPartZone1" runat="server"> 
      <ZoneTemplate>
        <asp:DropDownList ID="DropDownList1" 
          runat="server">
         <asp:ListItem Value="0">Teste1</asp:ListItem>
         <asp:ListItem Value="2">Teste2</asp:ListItem>
         <asp:ListItem Value="3">Teste3</asp:ListItem>
        </asp:DropDownList>
      </ZoneTemplate>
    </asp:WebPartZone>
  </td>
  <td >
   <asp:WebPartZone ID="WebPartZone2" runat="server">
    <ZoneTemplate>
     <asp:Calendar ID="Calendar1" runat="server" BackColor="#FFFFCC" 
       BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest" 
       Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" 
       Height="200px" ShowGridLines="True" Width="220px"> 
       <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> 
       <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> 
       <OtherMonthDayStyle ForeColor="#CC9966" /> 
       <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" 
         ForeColor="#FFFFCC" /> 
       <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> 
       <SelectorStyle BackColor="#FFCC66" /> 
       <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> 
     </asp:Calendar> 
    </ZoneTemplate> 
   </asp:WebPartZone>  
  </td> 
  <td > 
   <asp:WebPartZone ID="WebPartZone3" runat="server"> 
    <ZoneTemplate> <asp:TextBox ID="TextBox1" 
    runat="server"></asp:TextBox> 
    </ZoneTemplate> 
   </asp:WebPartZone> 
  </td> 
 </tr> 
</table> 
</form> 
</body> 
</html> 

Utilizando recursos nativos do novo ASP.NET 2.0, foi possível criar mais uma forma de experiência para o usuário. O ambiente está a cada dia que passa ficando muito mais personalizado. Com apenas uma linha de código foi possível habilitar a utilização do recurso, com isso, provando mais uma vez a rapidez e produtividade que esse novo ambiente é capaz de proporcionar.