• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
jQuery Firestarter
 

jQuery Firestarter

on

  • 1,364 views

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 ...

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!

Statistics

Views

Total Views
1,364
Views on SlideShare
1,364
Embed Views
0

Actions

Likes
0
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Here is the CSS that will accompany the JS#toaster{    width:200px;    position:fixed;    bottom:0;    right:0;}.toast{    display:none;    position:relative;    clear:both;    padding:20px;    margin:4px;    background:rgba(0,0,0,0.75);    border:1px solid #000;    color:#fff;    font-weight:600;    border-radius: 6px;    -moz-border-radius: 6px;    -webkit-border-radius: 6px;    text-shadow: 2px 2px 5px rgba(255,255,255,1);    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);}

jQuery Firestarter jQuery Firestarter Presentation Transcript

  • jQueryFirestarter
    Chris Bannon
    http://twitter.com/b4nn0n
    chrisb@componentone.com
  • 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!
  • HTML/XHTML
    Semantic markup
    Valid markup
    Microformats
    JavaScript
    jQuery
    Document Object Model (DOM)
    Event Model
    CSS
    Back to basics… !Important
  • 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
  • jQuery
    CSS Selectors
    Lightweight model
    Common utilities/functions
    Abstracts browser-specific JavaScript
    jQueryTemplating/DataBinding
    Formerly AJAX 4 Templating/DataBinding
    Uses HTML Templates with Binding syntax
    Supports DataBinding in JavaScript
    Client-side in ASP.NET 4.0
  • ComponentOne
    Studio for ASP.NET AJAX
    }
    {
    +
  • $(“code”).show();
  • A Great One-liner Sample
    Popping Up the Toast
            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" });        }
  • Any
    Questions?
  • 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
  • $(this).end();
    Chris Bannon
    http://twitter.com/b4nn0n
    chrisb@componentone.com