vrijdag 20 februari 2009

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:
video

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

dinsdag 10 februari 2009

Bug in ASP.NET ReportViewer van Microsoft


Oplossing
Vandaag (4 maart 2009) heb ik reactie gekregen op mijn feedback. Microsoft heeft het probleem opgelost in Cumulative update package 9 for SQL Server 2005 Service Pack 2 en Cumulative update package 1 for SQL Server 2005 Service Pack 3.

Ik heb in eerste instantie SQL Server 2005 Service Pack 3 geïnstalleerd. Hierna bleek het probleem al direct opgelost te zijn. Óf de Cumulative update package 1 zit al in SP3 óf de installatie van SP3 lost het probleem zelf al op!

Update (9 maart 2009): helaas heeft de update naar SP3 op de (64 bits) productie server niet tot hetzelfde resultaat geleidt. Ook de Cumulatieve Update 1 voor SP3 heeft niet geholpen. Microsoft heeft me gewezen op een blog artikel van Brian Hartman. Ik heb alle updates geïnstalleerd die Brian in zijn artikel noemt (behalve de update voor SharePoint, want daar heb ik in mijn project niets mee te maken), maar ook dit heeft niets geholpen. Ik zal dit opnieuw aan Microsoft melden.

Wordt vervolgd...


In het ReportViewer control van Microsoft, waarmee rapporten van SQL Server Reporting in een web applicatie bekeken kunnen worden , zit een bug.

Indien de beveiligingsupdate voor ActiveX Killbits voor Windows XP (KB956391) is geïnstalleerd op de client computer (in mijn geval Windows XP SP3 met Internet Explorer 7) dan functioneert het printen van een rapport niet meer.
Hierbij volgt dan de volgende foutmelding: "Unable to load client print control". Wanneer je de betreffende update verwijderd, dan is het probleem weer opgelost.

Ik heb hiervoor een bug rapport bij Microsoft Connect ingediend. Je kan deze 'feedback' hier volgen.
Ik houd jullie op de hoogte !!!