2012 - html5, css3 and jquery with sharepoint 2010
Post on 14-Apr-2017
921 Views
Preview:
TRANSCRIPT
HTML5, CSS3 and jQuery with SharePoint 2010 – what you can (and need to) start doing now
MSPUG - May 2012
~ Chris O’Connor (OBS)
About Me Senior Consultant at OBS
Blog : www.sharepointroot.com
Twitter : @GrumpyWookie
Dad of three boys – and keen cyclist Let’s talk MTB (!)
Agenda HTML5 – what & why CSS3 SharePoint 2010 jQuery REST + JSON jQuery Templates SharePoint vNext (15/2013?)
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
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
A new simpler DOCTYPE
A new semantic element
A new functional element
Example : HTML5
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>
New HTML5 Functional Tags New Elements Provide Functional Behavior
<canvas><svg> [Scalable Vector Graphics – defined by XML]<audio> <video><source><command><datalist><embed><output>
New HTML5 Functional Tags<input type=‘TYPE’ id=‘myField’ />
New Types :tel weeksearch timeurl datetime-localemail numberdatetime rangedate colormonth placeholder
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
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);
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}”
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
HTML5 + CSS3 + SharePoint 2010
DEMO
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
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
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
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 (?)
jQuery Selectors jQuery leverages familiar CSS selector
syntax
jQuery Actions• Perform function/update to a piece of
HTML html() addClass() attr() slideUp()
• Most jQuery object methods support cascading calls
jQuery Events• Document ready event handler
Executed when DOM document is ready for access
Can also dynamically add events to DOM click() hover() keypress()
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/
DemojQuery + SharePoint 2010
jQuery+ SharePoint 2010DEMO
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
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'
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
jQuery+ REST + SharePoint 2010
DEMO
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
Bring it all together jQuery
Call to REST web service
REST SharePoint List Data JSON data returned
jQuery Template HTML template
jQuery Templates
jQuery Templates
jQuery Templates
DemojQuery + REST + jQuery Templates
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
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
Summary• HTML5 – what & why• CSS3 • SharePoint 2010• jQuery• REST + JSON • jQuery Templates• SharePoint vNext (?)
• Question + Answer
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
Contact Details Chris O’Connor Senior Consultant, OBS
[email] chris.oconnor@obs.com.au [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 !)
Gold Sponsors
Bronze Sponsors Media Sponsors
Silver Sponsors
top related