Drag&Drop Panels oftewel Widgets in ASP.NET

Al enige tijd was ik van plan om "draggable panels" (ook wel widgets genoemd) te ontwikkelen in ASP.NET, zodat ik deze kon gaan gebruiken in een dashboard pagina in de webapplicaties die wij ontwikkelen. Een voorbeeld hiervan zijn de Gadgets in iGoogle:


Natuurlijk heb ik deze techniek niet helemaal zelf ontwikkeld, want er zijn er al genoeg die mij voor zijn geweest... het wiel hoeft immers niet opnieuw uitgevonden te worden. De controls die voor mij het beste in aanmerking kwamen waren de controls die Omar AL Zabir heeft ontwikkeld.
Omar heeft een project ontwikkeld (open source) waarvan je online kan bekijken hoe dit functioneert: http://www.dropthings.com/. De sources van dit project kan je hier downloaden.

Het nadeel van dit open source project is de complexiteit die er aanwezig is, vanwege de vele 'Widgets' die er al inzitten. Ik het dit project uitgekleed tot een project waar alleen de techniek van de Drag&Drop widgets aanwezig is. Met behulp van dit project kan je veel eenvoudiger een start maken om de Widgets verder te ontwikkelen tot je eigen controls.


Laten we beginnen met een voorbeeld filmpje wat bewijst dat het allemaal ook nog werkt:


Dit project is ontwikkeld in ASP.NET 3.5 SP1 en maakt gebruik van het AjaxControlToolkit. Het project bestaat uit de volgende onderdelen:

• DragControls folder. Hierin staan de AJAX control extenders die Omar heeft ontwikkeld.
• Default pagina. Deze pagina bevat 2 Panel controls welke ieder 2 Widgets bevat. Hierbij heb ik gebruik gemaakt van standaard ASP.NET controls. Het is natuurlijk netter om uiteindelijk de controls die voor de Widgets zijn gebruikt te verwerken tot 1 custom ASP.NET control óf 1 UserControl
• Voor elk Panel control waarin Widgets staan is een CustomDragDropExtender toegevoegd aan de pagina. Hierin staat het volgende gedefinieerd:
  TargetControlID: ID van het Panel control welke de Widgets bevat;
  DragItemClass: welke CssClass wordt gebruikt voor het kenmerken van een Widget
  DragItemHandleClass: welke CssClass wordt gebruikt voor het kenmerken van de header van een Widget (dit header element wordt gebruikt om het Widget te Drag&Droppen);
  DropCueID: ID van het control waarin de Widgets in gedropt kunnen worden. Elk Panel wat Widgets kan bevatten heeft een dergelijk Drop control nodig.
  OnClientDrop: hierbij kan een javascript functie aangegeven worden welke uitgevoerd dient te worden, nadat een Widget versleept is
• Stylesheet. Deze stylesheet bevat alleen die stijlen die gebruikt worden door de Widget functionaliteit
• WidgetHandler.js. Dit javascript bestand bevat de onDropWidget functie welke aangeroepen wordt nadat een Widget versleept is (OnClientDrop)
  Deze javascript functie maakt gebruik van de WidgetService om hierin de methode MoveWidget aan te roepen.
• WidgetService. Webservice welke door de Default pagina is toegevoegd aan de ASP.NET ScriptManager. Dit zorgt ervoor dat de WebMethodes in deze WebService beschikbaar komen middels een object model in javascript. De webservice functies zijn dan dus vanuit javascript direct aan te roepen.

Ik heb verder geen implementatie toegevoegd voor het daadwerkelijk verplaatsen van een Widget aan de server zijde. De knoppen voor het verwijderen/sluiten van een Widget zijn wel aanwezig, maar ook deze heb ik niet geïmplementeerd.
Het lijkt me juist beter dat jullie deze functionaliteit zelf implementeren en ik de code in dit project niet vervuil met applicatielogica waar jullie niets aan hebben.

De source code kan je hier downloaden.
Succes ermee !!!


Bronnen:
http://www.dropthings.com/
http://msmvps.com/blogs/omar/archive/2007/03/22/asp-net-ajax-extender-for-multi-column-widget-drag-drop.aspx

Nikhil's Web Development Helper

Een handig tooltje voor webontwikkelaars is de Web Development Helper van Nikhil Kothari. Ik heb als webontwikkelaar regelmatig de behoefte aan wat meer informatie over het resultaat van de webpagina die ik aan het ontwikkelen ben. Denk bijvoorbeeld aan het Document Object Model of informatie over ASP.NET in je pagina.

Een hulpmiddel om dit soort informatie te verschaffen is de Web Development Helper. Hieronder een aantal screenshots met beschrijving van dit tool. Je kan het tool downloaden via de website van Nikhil. Na installatie kan je de toolbar in Internet Explorer aanzetten via het Tools menu.

Wanneer je Enable logging aanvinkt en naar een website surft, dan krijg je informatie over de Response te zien:


Via het menuitem Page / DOM Inspector krijg je de DOM informatie van de betreffende pagina te zien in een hiërarchische weergave. Als je op een element klikt kan je in het rechter frame de attributen, styles en markup van het element bekijken:


Als je achter Console op HTTP Logging klikt kan je het Script Console selecteren. In dit console kan je javascript invoeren en direct op de huidige webpagina uit laten voeren. Hieronder een voorbeeld van een simpele alert:


Indien ASP.NET Ajax op de webpagina wordt gebruikt kan je via het menuitem Script / Script Class Browser het class model van ASP.NET Ajax bekijken:


Als je op je lokale PC ASP.NET aan het ontwikkelen bent, dan kan je via het menuitem ASP.NET wat informatie hierover opvragen. Je kan bijvoorbeeld de Viewstate bekijken in een wat meer leesbare vorm dan de werkelijke Viewstate tekst:


De objecten die de webserver in cache heeft opgeslagen kan je bekijken en eventueel verwijderen:


Indien je Tracing op de ASP.NET pagina hebt aangezet kan je de Trace Output in een apart venster bekijken:

Bronnen:

http://www.nikhilk.net/