$('#something').hide().css('background', 'red').fadein();
TRANSCRIPT
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