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

ASP.NET control voor Google AJAX Search API

Google maakt het mogelijk om (redelijk) simpel hun zoekmachine functionaliteit te integreren in je eigen website. Hiervoor kan je gebruik maken van de Google AJAX Search API.

Deze API kan middels Javascript aangeroepen worden en biedt een AJAX zoekmachine in je eigen website. Om het gebruik van deze functionaliteit te vereenvoudigen heb ik een ASP.NET (3.5) control ontwikkeld, welke de meest gebruikte functionaliteiten van de API toepast.
Een Visual Studio 2008 project kan hier gedownload worden. Dit project bevat het ASP.NET control en een testpagina.

Belangrijke eigenschappen van het control:

• GoogleApiKey: deze key kan hier worden opgevraagd
• SearchDefinitions: dit is de lijst met de types Search die je kan integreren op je website. Zie de Google documentatie voor uitleg hiervan. Standaard is het type WebSearch al aanwezig (zie Constructor) in deze lijst.
• MessageForNoResults: standaard wordt geen melding weergegeven indien Google geen zoekresultaten heeft. Middels deze eigenschap kan je toch een melding laten weergeven
• NoDefaultCss: standaard voegt Google zelf HTML styles toe aan de Google elementen op je pagina. Wanneer je deze eigenschap op False zet wordt dit niet gedaan en kan je je eigen styles gebruiken (door je juiste class names in je stylesheet op te nemen).

Succes ermee!

Bron(nen):
Google AJAX Search API
Documentatie Google AJAX Search API

Google Chrome foutmelding "The application failed to initialize properly (0xc0000005)”

Ik heb net Google Chrome gedownload en geïnstalleerd. Helaas kreeg ik bij het opstarten meteen de volgende foutmelding: "The application failed to initialize properly (0xc0000005)”.

Er zijn twee mogelijke oplossingen voor dit probleem:
1. Pas de registry aan:

• Start de registry editor door op Start \ Uitvoeren de klikken en regedit.exe gevolgd door ENTER in te toetsen.
• Ga in de boomstructuur HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\SysPlant.
  Indien deze sleutel niet aanwezig is, dient deze aangemaakt te worden.
• Open de 'Start' waarde of voeg deze toe (type is DWORD)
• Wijzig de waardegegevens van de 'Start' waarde naar 4 om drivers uit te schakelen
• Herstart de computer

2. Start Google Chrome met het "--no-sandbox" argument.

• Klik met de rechter muisknop op de Google Chrome snelkoppeling
• Voeg de tekst "–no-sandbox" (zonder de aanhalingstekens) toe aan het Doel veld.

In mijn geval werkte oplossing 1 al en was oplossing 2 niet meer noodzakelijk.

Mijn ervaringen met Google Chrome zijn tot nu toe erg goed. Ik heb nog nooit een webbrowser gehad die zo snel opstartte en zo snel naar een website surfte.

Search.Net - Google .Net sites

Ik denk dat elke softwareontwikkelaar het met me eens zal zijn dat we veel... heel veel... tijd kwijt zijn aan het zoeken naar de oplossingen voor de problemen (nou ja, uitdagingen noemen we dat dan ;-) ) waar we tegenaan lopen tijdens de ontwikkeling van de software.

Meestal zoek ik dan door een aantal favoriete .Net sites naar de oplossing. Regelmatig probeer ik te Googlen naar het antwoord, maar daar kom je helaas veel bagger tegen waar je op dat moment helemaal geen behoefte aan hebt.

Dan Appleman heeft waarschijnlijk hetzelfde gedacht en heeft daarom een .Net zoekmachine ontwikkeld op basis van Google Custom Search technology. Het mooie aan deze zoekmachine is, is dat het alleen door de beste .Net sites zoekt en probeert niet-gerelateerde en dubbele links te verwijderen.
De link naar deze site is: http://www.searchdotnet.com/

Hieronder heb ik mijn Google Gadget toegevoegd welke direct toegang biedt tot de zoekmachine...