Presented at NCDevCon 2011 by: Denard Springle

jQuery, CSS3 & ColdFusion Presented at NCDevCon 2011by: DenardSpringle

Who Am I? • Freelance Software Systems Engineer • Rich internet and mobile applications • Hardware, network and storage engineering • CMMI process management & assessment • Over 20 years IT experience • Over 10 years ColdFusion experience • Host of the Northern Virginia CFUG • denard.springle@gmail.com • http://www.nvcfug.org/

UI Design – Then and Now(or ‘Why I used to loathe user interface design and what changed my mind!’) Traditional Web Design CSS3, HTML5 & jQuery Virtually eliminates the need for graphics applications beyond composition. Virtually eliminates the need for images. Uses style sheets and media queries to support multi-screen development. jQuery has a Mobile edition. Allows interactive elements to be created and styled with or without images with ease. • Pet Peeve #1 – Multiple return trips to graphics applications (aka longer development cycles). • Pet Peeve #2 – Multiple images make for slower loading sites. • Pet Peeve #3 – Requires multiple designs and complicated Javascript for multi-screen development. • Pet Peeve #4 – Interactive elements require multiple images.

What is the jQuery library? • Javascript RAD framework • Handles cross-browser dependencies* • Uses familiar CSS language selectors • Packed with handy utility functions (like Ajax) • Loads of available plugin’s or roll your own • Works with other Javascript frameworks (including ColdFusion’s built-in functions) • Works with native Javascript functions • Works with (most) emerging standards (CSS3, HTML5) * Some plugin’s have cross-browser issues because they employ Javascript functions that are browser specific, or rely on deprecated jQuery 1.3 functions.

Implementing the jQuery library • Download from http://docs.jquery.com/Downloading_jQuery • Download with jQuery UI themeroller • <script src=‘jquery-1.x.x[.min].js’ type=‘text/javascript’> • Google CDN @ <script src=‘http(s)://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.min.js’ type=‘text/javascript’> • MSDN CDN @ <script src=‘http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.x.x.min.js’ type=‘text/javascript’> • jQuery CDN @ <script src=‘http://code.jquery.com/jquery-1.x.x.min.js’ type=‘text/javascript’>

Implementing the jQuery library • jQuery(document).ready(function() { … code here …}); • $(funtion() { … code here …}); • $ == alias for ‘jQuery’

jQuery Selectors – The Basics • <div id=“myDiv” class=“myClass”></div> • $(‘#myDiv’) – selects the element identified by the ‘myDiv’ id • $(‘.myClass’) – selects any element assigned the ‘myClass’ class • $(‘div’) –selects all <div> elements in the page

jQuery Selectors – CSS Syntax • <div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p></div> • $(‘p’) – selects all paragraph elements in the page • $(‘#myDiv p’) – selects all paragraph elements within the element with the ‘myDiv’ id • $(‘.myClass p’) – selects all paragraph elements within the elements assigned the ‘myClass’ class. • $(‘p#world’) – selects the element within any paragraph element with the ‘world’ id.

jQuery Selectors – CSS Operators • <div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p></div> • $(‘#myDiv p span.red’) – selects all <span> elements assigned the ‘red’ class within a paragraph element that is within the element with the ‘myDiv’ id. • $(‘#myDiv > p’) – selects all paragraph elements that are direct children of the element with the ‘myDiv’ id. • $(‘#myDiv + p’) – selects the paragraph element that is immediately preceded by the element with the ‘myDiv’ id

jQuery Selectors - CSS Filters • <div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p> <p>Welcome to our website. We hope you like it!</p></div> • $(‘#myDiv p:first’) – selects the first paragraph element that is within the element with the ‘myDiv’ id. • $(‘#myDiv p:last’) – selects the last paragraph element that is within the element with the ‘myDiv’ id. • $(‘p:even’) – selects all even paragraph elements in the page

jQuery Chaining • <a href=“http://jquery.com”>jQuery</a> • $(“a[href^=‘http://’]”).attr(‘target’,’_blank’); • $(“a[href^=’http://’]”).addClass(‘external’); • $(“a[href^=‘http://’]”).css(‘fontWeight’,’bold’); • $(“a[href^=‘http://’]”).attr(‘target’,’_blank’).addClass(‘external’).css(‘fontWeight’,’bold’);

Working with Element Properties • attr(name) – obtains the value assigned to the specified attribute for the first element in the matched set. • attr(name,value) – sets the named attribute to the passed value for all elements in the matched set. • attr(attributes) – uses a JSON object to set corresponding attributes onto all elements of the matched set.

Working with Element Properties • <imgsrc=“myImage.gif” id=“myImage” alt=“” title=“Voila!” /><imgsrc=“” id=“newImage” alt=“” title=“” /> • alert($(‘#myImage’).attr(‘title’)); • $(‘#newImage’).attr(‘src’,$(‘#myImage’).attr(‘src’)); • $(‘#myImage’).attr(‘alt’,’alternate image text’); • $(‘#myImage’).attr({title: ’Bang!’, alt: ‘alternate image text’}); • $(‘#newImage’).attr(‘alt’,$(‘#myImage’).attr(‘title’));

Changing Style with jQuery • hasClass(name) – returns true if any element of the matched set possesses the passed class name. • addClass(names) – specifies the name, or names, of classes to add to the matched set. • removeClass(names) – specifies the name, or names, of classes to remove from the matched set. • toggleClass(names) – specifies the name, or names, of classes that should be removed if they are present, or added if they are not present in the matched set

Changing Style with jQuery • css(name) – reads the value of the CSS property for the first element in the matched set • css(name,value) – sets the value of the named css property for each element in the matched set • css(properties) – sets the values using a JSON object for each element in the matched set • width(), width(value) – reads the width of the first element or sets the width of all elements in the matched set • height(), height(value) – reads the height of the first element or sets the height of all elements in the matched set

Setting Element Content w/ jQuery • html() – obtains the HTML content of the first element in the matched set • html(content) – sets the passed HTML fragment as the content of all elements in the matched set • text() – concatenates and returns all text content of the matched set • text(content) – sets the text content of all elements in the matched set

jQuery Events • bind() – bind an event handler to all elements in a matched set • unbind() – removes an event handler from all elements in a matched set • All javascript events (mouseover, mouseout, mousedown, focus, blur, select, submit, etc.)

jQuery Events • <button id=‘myButton’ /> • $(‘#myButton’).bind(‘mouseovermouseout’, function() { $(this).toggleClass(‘highlight’); }); • $(‘.data-entry’).bind(‘focus’, function() { $(this).css({backgroundColor: ‘#000’, color: ‘#fff’}); });

jQuery Events – Specific Event Binding • <button id=‘myButton’ /> • click() – bind a click event handler to an element • $(‘#myButton’).click(function() {window.location.href = ‘clickedPage.cfm’;}); • dblclick() – bind a double-click handler to an element • $(‘#myButton’).dblclick(function() { $(this).width(300).height(100);});

jQuery Events – Binding non-existent elements • live() – bind an event handler to a matched set that does not (yet) exist in the dom • $(‘#myButton’).live(‘mousedown’,function() {window.location.href = ‘clickedPage.cfm’;}); • die() – unbinds an event handler bound with live • Use sparingly. Resource hog. Has to re-read the dom for every change in the dom

jQuery AJAX Function • $.ajax({options}) • Provides complete control over the entire AJAX process including specifying data sources, data type, event handlers, context, filters, etc. etc. • All other Ajax functions are a subset of the $.ajax() function. • Requires JSON and callback handler

jQuery AJAX Methods • load() – loads HTML content into the wrapped set. Callback function is optional • $.get() – makes HTTP GET requests and requires a callback function • $.getJSON – makes HTTP GET requests with a defined return data type of JSON, requires a callback function

jQuery AJAX Methods • $.post() – makes HTTP POSTs and requires a callback function • $.ajax(), $.get() and $.post() response types: • xml – passes XML dom to the callback function • html – passes unprocessed HTML to the callback. <script> is evaluated. • json– interpreted as JSON string, passed as object to the callback • jsonp – same as json, but allows remote scripting • script – processed as javascript and passed to the callback • text – plain text passed to the callback

Single API in jQuery – jQuery Side • $.ajaxSetup({options}); • Accepts the same options as $.ajax() • Set default options for all future $.ajax() calls (does not apply to $.get(), $.getJSON(), or $.post() as of v1.6.3). Defaults can still be overridden in subsequent individual $.ajax() calls. • Specifying a default (single) url for all future requests using the $.ajaxSetup() method allows for single-api applications demo

Single API in jQuery – CF Side

Single API in jQuery – CF Side • <cfparamname="URL.app" default="hello_world" /><cfswitch expression="#URL.app#"> <cfcase value="hello_world"> <div class="content-text">Hello World! This content is derived from an AJAX request to the ColdFusion back-end!</div></cfcase><cfcase value="photo_viewer"> <div class="content-text">The photo viewer is still a work in progress....<br /> <br />Please check back later.</div></cfcase><cfdefaultcase> <div class="content-text">ERROR!</div></cfdefaultcase></cfswitch>

jQuery Plugins • Plugins are encapsulated functions within the jQuery scope that participate in chaining. • Thousands of available plugins, both official and unofficial, and about as many blogs on how to write jQuery functionality and plugins • http://plugins.jquery.com/ or Google search About 13,400,000 results for ‘jQuery plugins’ on Google

jQuery Plugins – jQuery UI • jQuery UI is now a sub-project of jQuery, but was originally a loose collection of plugins. Now it’s an integrated collection of plugins with a unified purpose and goal. • Makes creating interactive UI painless, quick to develop and quick to execute. • Widgets include: Tabs, Accordions, Buttons and Buttonsets, Sliders, Progress Bars, Autocompleters, Datepickers and Dialog Boxes… so far • Tooltip, Menu, Menubar, Popup and Spinner are forthcoming

jQuery UI - Themeroller • http://jqueryui.com/themeroller/ • Allows you to quickly and easily generate .css and download jQuery and jQuery UI to theme the components generated by jQuery UI • Provides an easy way to scope css for specific regions of the site • Utilizes CSS3 for some of its effects (rounded corners) and transparent PNGs (not supported in IE6)

Implementing the jQuery UI plugin • <script src=‘jquery-ui-1.x.x[.min].js’ type=‘text/javascript’> • Google CDN @ <script src=‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.x.x/jquery-ui.min.js’ type=‘text/javascript’>

jQuery UI – Drag and Drop + • Draggable() and Droppable() – allows you to assign matched sets that can be dragged and matched sets which can be dropped onto • Sortable() – allows you to assign a matched set that can be user sorted (with drag & drop) • Resizable() – allows you to assign a matched set that can be resized by dragging one or more corners • Selectable() – allows you to assign a matched set that can be selected by clicking on the element

jQuery UI – Effects & Animations • Effect() – applies one of the jQuery UI animated effects to a matched set • Animate() – animates numerical css properties of a matched set • Hide() – hides a matched set using one of the jQuery UI animated effects • Show() – shows a matched set using one of the jQuery UI animated effects

jQuery UI – Effects & Animations • Blind • Bounce • Clip • Drop • Explode • Fade • Fold • Highlight • Puff • Pulsate • Scale • Shake • Size • Slide • Transfer

HTML5 & CSS3 – Working Together • <body> <header> <nav></nav> </header> <section> <article> <header></header> <figure></figure> <footer></footer> </article> <dialog></dialog> </section> <aside></aside> <footer></footer></body>

CSS3 – Changes since CSS2 • Media Queries • Rounded, multi-color and image borders • Gradient, multiple image, resizable backgrounds • Text shadows, text overflow and word wrap • Drop shadow, resizable, outline offset boxes • Color opacity (RGBA) and HSL color values • 2D & 3D Transformations (skew, rotate, etc.)* • Transitions (dynamic style)*, Web Fonts* • Flexible grid/column layout* • * = Work in Progress demo

IE CSS3 & HTML5 Support • IE ~ 8 – Zero support for CSS3, HTML5, dom event model 2 • IE 9 – Limited support for CSS3, HTML5 and dom event model 2 • IE 10 – ‘Final’ browser to be released by M$. Claims will support full CSS3, HTML5 and dom event model 2 *at time of release* • HTML5 tags can be used in IE < 9 with the help of a Javascript shiv

Progressive Enhancements • Design for IE first • Add enhanced styles for modern browsers (Chrome, Firefox, etc.) second • Provide alternate styles for non-supported CSS3 features in IE (e.g. solid background color in contrast to gradient background) • Functionality should be the same for all browsers

Augment jQuery UI with CSS3 • Redefine opacity, gradient backgrounds, text and box drop-shadows, transformations and more of your existing jQuery UI .css (via override) • Create hybrid elements using a combination of jQuery elements and your own CSS styling (e.g. icons & buttons from jQuery w/ your own drop shadow boxes and text) demo

Additional Resources • Book: jQuery in Action (link to Amazon) • Book: CSS3 Visual Quickstart Guide (link to Amazon) • NVCFUG Demo Site (link to demo site) • jQuery (link) and jQuery UI (link) websites • denard.springle@gmail.com

Presented at NCDevCon 2011 by: Denard Springle