html, jquery , and javascript in microsoft sharepoint 2010 development
DESCRIPTION
OSP303. HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development. Joe Homnick MCT HSI Knowledge http://bit.ly/sphtml. Overview. HTML and JavaScript in SharePoint 2010 HTML/JavaScript and the Fluent User Interface - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/1.jpg)
HTML, jQuery, and JavaScript in Microsoft SharePoint 2010 Development
Joe HomnickMCTHSI Knowledgehttp://bit.ly/sphtml
OSP303
![Page 2: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/2.jpg)
Overview
HTML and JavaScript in SharePoint 2010HTML/JavaScript and the Fluent User InterfaceBinding data with the JavaScript Object Model, Odata and JavaScript/jQuery
![Page 3: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/3.jpg)
What Do We Mean By HTML?
HTML Element markup language (.html)Javascript programming language
jQuery and other libraries housed in .JS filesCascading Style Sheets (.css)
![Page 4: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/4.jpg)
HTML5 – What’s New? A lot!
<HTML> <CANVAS><VIDEO><INPUT><AUDIO><COMMAND><DATALIST><TIME>
![Page 5: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/5.jpg)
HTML 5 – Getting It Working
<HTML> tagInternet Explorer 9 compatibility
<meta http-equiv="X-UA-Compatible" content="IE=9"/>Potential issues and workarounds
![Page 6: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/6.jpg)
JavaScript in SharePoint 20103 approaches to referencing jQuery and other .JS libraries in SharePoint
Accessing the <body onload=“whatever()”> capability_spBodyOnLoadFunctionNames.push(“whatever");
![Page 7: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/7.jpg)
demo
Implementing HTML5 in SharePoint 2010
![Page 8: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/8.jpg)
Fluent UI – Server Ribbon
SP.UICommandAction
![Page 9: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/9.jpg)
Fluent UI - Dialogs
SP.UI.ModalDialog
![Page 10: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/10.jpg)
Fluent UI Status Bar and Notification Area
SP.UI.NotifySP.UI.Status
Status Bar
Notification
![Page 11: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/11.jpg)
demo
HTML and the Fluent UI in SharePoint 2010
![Page 12: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/12.jpg)
Why Client Object Model?
More SharePoint Web services is a major requestClient Object Model provides complete API instead of more servicesProvides an abstraction layer to return results as recognizable SharePoint objectsConsistent developer experience across platforms (.NET, JavaScript and Silverlight)
![Page 13: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/13.jpg)
ECMAScript OMClient.svc
Using the JavaScript Client Object Model
Server OM
Contentdatabase
Proxy
JavaScriptControls and Logic
XML Request
JSON ResponseBrowser
SharePoint Server
![Page 14: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/14.jpg)
Using Odata to Access Lists with HTML
REST and OdataRepresentational State TransferOdata extends the REST Conent TypesPowered by ADO.NET Data Services
Simple HTTP way of sending a commandGET, PUT, MERGE, DELETE
Lists and Excel have an Odata serviceData can be returned in different ways
![Page 15: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/15.jpg)
Odata Services
Odata for ListsRequests go to ListData.svc
Request syntax is/_vti_bin/ListData.svc/{Entity}[({identifier})]/[{Property}]
Example:/_vit_bin/ListData.svc/Projects(4)/BudgetHoursGet the column called BudgetHours in the item with id “4” in the Projects list
![Page 16: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/16.jpg)
demo
Data Binding with the JavaScript Object Model, Odata and JavaScript/jQuery in SharePoint 2010
![Page 17: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/17.jpg)
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
http://northamerica.msteched.com
Connect. Share. Discuss.
![Page 18: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/18.jpg)
Complete an evaluation on CommNet and enter to win!
![Page 19: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/19.jpg)
Scan the Tag to evaluate this session now on myTech•Ed Mobile
![Page 20: HTML, jQuery , and JavaScript in Microsoft SharePoint 2010 Development](https://reader035.vdocuments.mx/reader035/viewer/2022070420/56815f4d550346895dce2ba3/html5/thumbnails/20.jpg)