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.
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.
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.
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.
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.
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.
Precisamos agora escrever um pouco de código, clique em (F7) para acessar o Code-behind da página (Figura 7).
Execute o código (F5) e faça seus testes arrastando os componentes entre as WebPartsZones, como vemos nas Figuras 8 e 9.
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.