jquery firestarter

12
jQuery Firestarter Chris Bannon http://twitter.com/b4nn0n [email protected]

Upload: chris-bannon

Post on 27-Jan-2015

110 views

Category:

Technology


0 download

DESCRIPTION

With all of the new options for developing client-centric applications it can be hard to get your feet wet. Let’s jump in head first and build a app in JavaScript. We will be using ASP.NET for data access and web services accompanied by jQuery and for client-side coding. We will also touch base with the cool new AJAX 4.0 features and how easy they make AJAX development. The bottom line is we want to walk away from this session ready to test the waters in client-side development. Everyone is talking about it, Microsoft has embraced it, now we just need to do it!

TRANSCRIPT

Page 1: jQuery Firestarter

jQuery Firestarter

Chris Bannonhttp://twitter.com/b4nn0n

[email protected]

Page 2: jQuery Firestarter

• Product Manager @ComponentOne– ASP.NET AJAX Controls– ASP.NET iPhone/Mobile Controls

• Mobile Web Advocate– iPhone Dev Con Speaker

• jQuery Advocate– jQuery Conference Speaker

About Me

Hi!

Page 3: jQuery Firestarter

• HTML/XHTML– Semantic markup– Valid markup– Microformats

• JavaScript– jQuery– Document Object Model (DOM)– Event Model

• CSS

Back to basics… !Important

Page 4: jQuery Firestarter

• ASP.NET AJAX– Mimics server-side code– Object Model Driven– C# like syntax– Namespace driven

• AJAX Control Toolkit– No JavaScript experience needed– Built-in server-side callbacks

Client-side in ASP.NET 2.0-3.5

Page 5: jQuery Firestarter
Page 6: jQuery Firestarter

• jQuery– CSS Selectors– Lightweight model– Common utilities/functions– Abstracts browser-specific JavaScript

• jQuery Templating/DataBinding– Formerly AJAX 4 Templating/DataBinding– Uses HTML Templates with Binding syntax– Supports DataBinding in JavaScript

Client-side in ASP.NET 4.0

Page 7: jQuery Firestarter

Studio for ASP.NET AJAX

{ + }

ComponentOne

Page 8: jQuery Firestarter

$(“code”).show();

Page 9: jQuery Firestarter

A Great One-liner Sample

function showToast(msg) { if ($("#toaster").length == 0) { $("<div id='toaster'></div>").appendTo("body"); } $("<div class='toast'><span></span></div>") .find("span") .html(msg) .end() .appendTo("#toaster") .show("slide", { direction: "down", easing: "easeOutQuad" }) .delay(4000) .hide("slide", { direction: "down", easing: "easeOutQuad" }); }

Popping Up the Toast

Page 10: jQuery Firestarter

QUESTIONS?Any

Page 11: jQuery Firestarter

• jQueryhttp://jquery.com/

• jQuery UIhttp://jqueryui.com/

• Studio for ASP.NET AJAXhttp://www.componentone.com/SuperProducts/StudioASPNET/

• Chinook (iTunes) Sample Databasehttp://chinookdatabase.codeplex.com/

• MS AJAX Announcementhttp://stephenwalther.com/blog/archive/2010/03/16/microsoft-jquery-and-templating.aspx

• Code from this session http://helpcentral.componentone.com/CS/blogs/webdev/archive/2010/03/23/popular-ui-volume-2-itunes.aspx

Resources

Page 12: jQuery Firestarter

CHRIS BANNONhttp://twitter.com/b4nn0n

[email protected]

$(this).end();