2012 - HTML5, CSS3 and jQuery with SharePoint 2010

41
HTML5, CSS3 and jQuery with SharePoint 2010 – what you can (and need to) start doing now MSPUG - May 2012 ~ Chris O’Connor (OBS

Transcript of 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Page 1: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

HTML5, CSS3 and jQuery with SharePoint 2010 – what you can (and need to) start doing now

MSPUG - May 2012

~ Chris O’Connor (OBS)

Page 2: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

About Me Senior Consultant at OBS

Blog : www.sharepointroot.com

Twitter : @GrumpyWookie

Dad of three boys – and keen cyclist Let’s talk MTB (!)

Page 3: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Agenda HTML5 – what & why CSS3 SharePoint 2010 jQuery REST + JSON jQuery Templates SharePoint vNext (15/2013?)

Page 4: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

History of the Web (HTML) HTML 3.2 and CSS 1.0 (~1997)

Browser wars : Netscape vs. Internet Explorer

HTML 4.01 and CSS 2.0 (~1999) Exit Netscape – Enter FireFox, Opera, Safari, etc.

XHTML 1.0 and CSS 2.1 (~2000) HTML content pages written as valid XML documents

HTML 5 and CSS 3.0 (~2005) Rejects the constraints added by XHTML New HTML elements, CSS properties and JavaScript APIs

** SharePoint 2010

Page 5: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Moving to HTML5• Why ?

HTML to work consistently across all modern browsers

Eliminate need for Flash, Silverlight, etc New JavaScript APIs Target mobile devices - CEO's iPad !!

• And, simply… New stuff that makes sense Evolution of the language of the web

Page 6: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

A new simpler DOCTYPE

A new semantic element

A new functional element

Example : HTML5

Page 7: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

New HTML5 semantic tags Layout & structure

<header><nav><article><section><figure><dialog><aside><time><footer>

<header></header><nav></nav>

<footer></footer>

<article> <section> <h2></h2> <p></p> <p></p> </section><section> <h3></h3> <p></p></section></article>

<aside> <section> </section></aside>

Page 8: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

New HTML5 Functional Tags New Elements Provide Functional Behavior

<canvas><svg> [Scalable Vector Graphics – defined by XML]<audio> <video><source><command><datalist><embed><output>

Page 9: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

New HTML5 Functional Tags<input type=‘TYPE’ id=‘myField’ />

New Types :tel weeksearch timeurl datetime-localemail numberdatetime rangedate colormonth placeholder

Page 10: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

New HTML5 Functions (API) Additional methods & functions (JavaScript)

Geolocation Determine current location

2D drawing Canvas – draw lines & graphics using JavaScript

Drag and drop Images & attachments within browser <img draggable="true" />

Web storage Key-value pair framework - like cookies, but much richer

(tastier ?) …. plus more

http://html5demos.com

Page 11: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

New for CSS3 Rounded corners#example1 {border-radius: 15px;}

Text shadow#title{text-shadow: 2px 2px 2px #000;}

Gradientbackground: -ms-linear-gradient(top, #2F2727, #1a82f7);

Page 12: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

BUT…! “Modern” browsers support portions of

HTML5 specification IE 9 Google Chrome Mozilla Firefox v4 Apple Safari v5 (iOS)

Full HTML5 support across browsers anticipated in “2022” !

Need failback / other way to show if not supported

Avoid “if browser-x, then {aaaa}”

Page 13: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

What about SharePoint 2010 ?• HTML5 Master Page

• Include HTML5 tags ListView + XSLT to render HTML5 Include in Content Editor WebPart (CEWP) Page Layout

• BUT – browser support always an issue Need to support IE8 and IE7

Page 14: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

HTML5 + CSS3 + SharePoint 2010

DEMO

Page 15: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Fundamentals• Designed to hide differences between browsers

Eliminate browser-specific code

• Focuses on two primary tasks Retrieving sets of elements from HTML pages Performing operations on the elements within a set

• jQuery is a great alternative (safe bet) Compared to HTML5 Browser support

Page 16: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery and SharePoint 2010• Load JavaScript to SharePoint

Download jQuery (eg. jquery-1.7.1.min.js) STYLE LIBRARY

• Reference JavaScript file/s <SCRIPTLINK> tag – in feature <SCRIPT> tag reference – Master Page

• Or – directly within CEWP or XSLT

Page 17: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Feature to deploy jQuery• Create a SharePoint project in Visual

Studio 2010 Create a site collection-scoped feature (i.e.

scope=site) Add a Module to deploy jQuery JavaScript

files Eg. STYLE LIBRARY or SITE ASSETS

Page 18: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

How to use jQuery• JavaScript code

CSS Selectors Action

<script>$('#ContactName').html('Joe Smith');

</script>

SELECT stuff… DO stuff… jQuery – should’ve been called jSelect (?)

Page 19: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Selectors jQuery leverages familiar CSS selector

syntax

Page 20: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Actions• Perform function/update to a piece of

HTML html() addClass() attr() slideUp()

• Most jQuery object methods support cascading calls

Page 21: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Events• Document ready event handler

Executed when DOM document is ready for access

Can also dynamically add events to DOM click() hover() keypress()

Page 22: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery UI Library• Pre-coded UI components

Based on built-in theming scheme

• jQuery UI Widgets Auto-complete Date Picker Slider Progress Bar Tabs Accordion Dialog

http://jqueryui.com/

Page 23: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

DemojQuery + SharePoint 2010

Page 24: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery+ SharePoint 2010DEMO

Page 25: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

REST• Previously had ASMX Web Services

Eg. GetLists, etc Returns as XML data Difficult to construct + call (XML packet)

New WCF REST’ful Web Services URL based query JSON data format returned JavaScript Object Notation

Page 26: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

REST : using ListData.svcGet all items in listhttp://server/_vti_bin/ListData.svc

Returns all items in MyList http://server/_vti_bin/ListData.svc/MyList

Returns all items in MyList ordered ascending by Titlehttp://server/_vti_bin/ListData.svc/MyList?$orderby=Title

Returns all items in MyList that has a column that equal to 'Music'http://server/_vti_bin/ListData.svc/MyList?$filter=MyColumn eq 'Music'

Page 27: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery + REST• jQuery provides methods to call across

network Call to REST-based Web services

(ListData.svc) Delegate for OnSuccess + OnError Returns results in JSON format

Page 28: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery+ REST + SharePoint 2010

DEMO

Page 29: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Templates• Layout for displaying data collections rendered as HTML Create layout within JavaScript

using literal HTML and tokens Just like XSLT – only easier (!)

Render data + layout tmpl() method Process template once for each item in collection

Page 30: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Bring it all together jQuery

Call to REST web service

REST SharePoint List Data JSON data returned

jQuery Template HTML template

Page 31: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Templates

Page 32: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Templates

Page 33: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

jQuery Templates

Page 34: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010
Page 35: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

DemojQuery + REST + jQuery Templates

Page 36: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

SharePoint vNext• Think more about dev. with client-side

REST jQuery HTML5 ? Maybe – browser dependant

• Office 365 Combined code-base w/ SharePoint 15 SandBoxed Solutions – or Client Side

• Windows 8 HTML+jQuery – apps

Page 37: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Confused ? Where to ?• Long way before vNext is PROD everywhere• Get started with jQuery• Get started with REST

• HTML5 Browser support – write-once, test-many Modernizr – JS library

Sandboxed Solutions Next session – Elaine van Bergen

Page 38: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Summary• HTML5 – what & why• CSS3 • SharePoint 2010• jQuery• REST + JSON • jQuery Templates• SharePoint vNext (?)

• Question + Answer

Page 39: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

References www.w3schools.com/html5 html5demos.com

jquery.com tutsplus.com/course/30-days-to-learn-jqu

ery/ Sends link to a video every day – learnt

LOTS !

SharePoint 2010 Developer Training Course msdn.microsoft.com/en-us/gg620703

Page 40: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Contact Details Chris O’Connor Senior Consultant, OBS

[email] [email protected] [blog]www.sharepointroot.com[twitter] @grumpywookie

Come and say hello at the OBS booth – or UG booth

Don’t forget to do session evaluation (please !)

Page 41: 2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Gold Sponsors

Bronze Sponsors Media Sponsors

Silver Sponsors