As well as releasing Web Platform Installer Version 2, we’ve also launched a bunch of Web App Toolkits that show you how to accomplish common web development tasks with small sample apps. We provide all the source code so that you can go from 0 to F5 in less than 60 seconds. Check out the Channel 9 interview I’ve done with Jonathan on Web App Toolkits! The scenarios we’ve covered with the first round of Web App Toolkits include:
One of the Web App Toolkits that was close to my heart (other than the Social one, of course) was the Bing Web App Toolkit which shows how you can bring search a Web App Toolkit using the Bing API 2.0. Aside from the cool Web Controls that we’ve supplied you get a sample app where we spice up the UI using JavaScript and the MS Ajax Library to to asynchronous calls back to the Bing API to get the results I need.
Then I took the Web App Toolkit one step further and added some jQuery UI effects to add that next layer of slickness. Here are the JavaScript references for both Microsoft Ajax and jQuery playing nicely alongside one another.
In this example we have Client Templates and the MS Ajax dataview handling all the data fetching and binding whilst the jQuery UI plugin takes care of the UX.
The jQuery UI elements I added included a lightbox from Leandro’s cool website, for the images that are returned from Bing, and qTip from Craigsworks.com which provide some nice tooltip effects to display extra search information returned from Bing.
Bringing these into my project is so easy. For the Lightbox plugin all you need to do is assign the repeating element in the template a class of “lightbox”. In this example it’s the anchor element (see below) and the jQuery UI plugin will do the rest.
It’s a similar story for the tool tips where I just drop in a class of “tooltip” into the anchor element and the jQuery UI plugin does the rest.
I’ve posted the code for this app on my Skydrive account – feel free to download it below: