Integrating Azure and On-Premises Web Services with SharePoint using jQuery

Speaker Name

What is jQuery

Most popular, cross-browser JavaScript libraryFocusing on making client-side scripting of HTML simpler

Easy navigating the DOMHandling eventsWorking with Ajax

Open-source, released in 2006

http://jquery.com/

Why jQuery?

jQuery aims at leveraging CSS, HTML and JavaScriptCross-browser - IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+Advantages

Lightweight - 15KB Compressed 94KB UncompressedEasy to learn using familiar CSS syntax and intuitive

Many plugins availableEasy to extend and compatibleRich community

$('#something').hide().css('background', 'red').fadeIn(); 

You are not alone!

Many LARGE companies use jQuery for their sites, including:

More at http://docs.jquery.com/Sites_Using_jQuery

Microsoft and jQuery

Included with Visual Studio in both WebForms and MVC projects

Can be used with or without ScriptManagerScriptManager can be used to compress and combine scriptsIntelliSense available CDN support

Microsoft is contributor to jQueryProposed (and accepted) templating, data linking and globalization

jQuery fundamentals: $

$ function (aka jQuery() function) returnsA JavaScript object containing an array of DOM elementsIn the order they were found in the documentMatching a specified selector (for example a CSS selector)Known to mankind as a wrapper or wrapped set

Can be chained

$("div.someClass").show();

$("div.someClass").show().addClass("SomeOtherClass");

Finds all DIVs withClass someClass andSets them visible

To the same set, thisadds another class

jQuery fundamentals: the ready handler

Script execution should wait until DOM elements are ready

One possibility is to use window.onload?Sadly, this waits for everything to be loaded, including images etcScript execution is too late

Instead, we need to wait only until the DOM tree is created

Can be difficult in cross-browser situationsEasy with jQuery

$(document).ready(function() { $("div.someClass").show();});

$(function() { $("div.someClass").show();});

Accessing External Services

SERVER ACS 2.0

Silverlight

SharePoint 2010

Windows Azure

InfoPath

HTML or Visual Web

Parts

SOAP

XML

REST

jQuery AJAX Methods

Core Method$.ajax();

Shortcut Methods$.get(), $.post() $.getJSON, $(...).load()

JQuery & RESTful Service

ACS 2.0

SharePoint Windows AzureJQuery

AJAX

REST

JSON Data

Getting data as JSON with jQuery

$.ajax({ data: data, cache: false, success: HolJQuerySPOnPrem.ReceiveData, type: "POST", dataType: "json", contentType: "application/json", url: "http://myservice.cloudapp.net/salaryservice.svc/adjust" });

AJAX Support in Web Parts

Visual Web PartHTML Form Web Part

Consuming Windows Azure Hosted Service from SharePoint

demo

Service Bus and SharePoint

Calling On-Premises Services through Azure

Cloud-based relay for WCF servicesTraverses Network Address Translation, firewalls, load balancers, network boundariesOpens outbound bidirectional TCP connection to the service and keeps it openService calls are relayed through the cloud to the on-premise WCF serviceASMX not supported

Service Bus Mechanism

On-Premises Service

Forwarder Service

.NET Service BusREST

JSON Response

SharePoint

JQuery

AJAX

Consuming On Premises WCF Service from SharePoint via the Service Bus using JQuery

demo

JSONP (JSON with Padding)Same Origin Policy“The same origin policy prevents a document or script loaded from one origin from getting or setting properties of a document from another origin.”

Example service with JSONP support

Calling the call back Servicehttp://www.yourdomain.com/jsonp/ticker?symbol=IBM&callback=showPrice

jQuery.getJSON("http://www.mydomain.com/jsonp/ticker?symbol=IBM&callback=?", function(data) { alert("Symbol: " + data.symbol + ", Price: " + data.price); });

Summary

SharePoint AJAX Enabled Web Parts can communicate with Windows Azure Services via REST using JQueryWindows Azure simulation environment allows testing Azure applications locally before deploying them to the cloudWindows Azure AppFabric is a Cloud middleware platform for developing, deploying and managing applications on the Windows Azure PlatformService Bus provides a secure messaging and connectivity capabilities to cloud applicationsService Bus also provides a channel to authenticate calls between On-Premises and On-line environments

Resources

Web Camps Training Kithttp://trainingkit.webcamps.ms

jQueryhttp://jquery.com Official Sitehttp://docs.jquery.com Documentationhttp://plugins.jquery.com Plugin repositoryhttp://forum.jquery.com Communityhttp://meetups.jquery.com Local Communityhttp://plugins.jquery.com Extendinghttp://jqueryui.com UI Widgets and Effects

JSONPhttp://www.ibm.com/developerworks/library/wa-aj-jsonp1/http://developer.yahoo.com/javascript/howto-proxy.html

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft

cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Microsoft Confidential - NDA Only