Criando Web Parts

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (3)  (0)

Descubra 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.

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. (Figura 1)

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


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. (Figura 2)


Figura 2 . Criando um novo projeto

Elementos da Seção WebParts

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 Toobox e arraste um WebPartManager para sua WebForm (Figura 3)


Figura 3 . Arrastando um WebPartManager

Agora vá para o Menu Layout, Opção Insert Table, e utilize o modo Custom. Define 3 colunas e 1 linha. (Figura 4)


Figura 4 . Criando uma Table

Com a tabela criada vá novamente para a Seção WebParts e arraste agora 3 WebPartZone, 1 para cada célula da tabela (Figura 5)


Figura 5 . Arrastando WebPartsZones

Temos agora uma estrutura de um WebPart, notem que coloquei 3 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. (Figura 6)


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)


Clique na foto para ver a imagem ampliada.
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. (Figuras 8 e 9)


Figura 8 . WebPart em ação


Figura 9 . WebPart em ação

Código da página (em tempo de design)


<%@ 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 width: 100px">
<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 width: 100px">

<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 width: 100px">
<asp:WebPartZone ID="WebPartZone3" runat="server">
<ZoneTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ZoneTemplate>
</asp:WebPartZone>
</td>
</tr>
</table>
</form>
</body>
</html>


CONCLUSÃO

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 esta 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.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?