Really pluggable plugins (part 1)

I’ve been toying with the idea to develop a really pluggable plugin of functionality for a while now and finally attempted to build something. The end result I’m looking for is a reusable widget that can be inserted into a page’s DOM (document object model) without requiring a web developer skillset. The widget should speak to a hosted application somewhere, which will implement the backend logic, rules and storage in a technology I’m familliar with. The backend technology should be transparent enough that the widget can be hosted in any html and javascript rendered frontend, including most mobile browsers.


I decided to go with .Net 4.0 WCF (Windows Communication Foundation) and a SQL Database backend, modelled into objects using Linq to SQL – since these are familiar to me and to let the webservices expose data as JSON.

My idea for the widget was to drop a reference to a javascript file somewhere in a page. This javascript file should be served from my .Net application and contain the basic functions needed to consume my webservices. I’ve decided to make use of the jQuery javascript library to manipulate the DOM of the surrounding page and to make the ajax calls to my webservices.

I attempted this solution and got it working in principle on a local server, but ran into the cross domain restrictions the browsers enforce in the real world. The solution to this was to change the configuration of my webservices to render JSONP (the P is for “with padding”) and causes the resulting JSON to be padded with script tags, which is allowed across domains. In principle it should be as easy as setting a property in the Linq to SQL .dbml file by clicking the background in the designer and in the properties window to specify **Serialization Mode** as **Unidirectional**, and then adding a property to the webHttpBinding used **crossDomainScriptAccessEnabled**=”**true**” :

Your service endpoint should then use this bindingConfiguration:

A typical webservice should be painted with WebGet attribute such as:

One issue I ran into was with testing this on my local environment (Visual Web Developer Express, SQL Express and ASP.Net Development Server), and after struggling a while I decided to test it on the live environment, where it all works well.

After I got all of this to work, the next thing to build was a prototype widget. I found a helpful post here:

[A Plugin Development Pattern by Mike Alsup](http://www.learningjquery.com/2007/10/a-plugin-development-pattern)

Using the guidelines, I compiled my first widget as a jquery plugin. The following code shows a textbox for an invited user to enter their mobile number, this then uses jQueryUI’s autocomplete plugin to retrieve the user’s name from a database. If the user selects his name, an RSVP form is shown to indicate if they will be attending the event.

To use the above plugin on a page would require the page to have
– a reference to jquery (google cdn : http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)
– jqueryui (google cdn : http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js)
– any other script libraries used should also be referenced off course
– a placeholder on the page such as

– and script to initialize the plugin after everything is loaded, such as:

In my next post I’ll talk about taking this further and making it easier to use a plugin on the page.

Posted in Blog, Develop
Tweets