html, jquery , and javascript in microsoft sharepoint 2010 development

20
HTML, jQuery, and JavaScript in Microsoft SharePoint 2010 Development Joe Homnick MCT HSI Knowledge http://bit.ly/sphtml OSP303

Upload: ishana

Post on 16-Feb-2016

32 views

Category:

Documents


0 download

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 Presentation

TRANSCRIPT

Page 1: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development

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

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

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

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

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

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

demo

Implementing HTML5 in SharePoint 2010

Page 8: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development

Fluent UI – Server Ribbon

SP.UICommandAction

Page 9: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development

Fluent UI - Dialogs

SP.UI.ModalDialog

Page 10: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development

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

demo

HTML and the Fluent UI in SharePoint 2010

Page 12: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development

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

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

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

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

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

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

Complete an evaluation on CommNet and enter to win!

Page 19: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development

Scan the Tag to evaluate this session now on myTech•Ed Mobile

Page 20: HTML,  jQuery , and JavaScript in Microsoft SharePoint 2010 Development