jQuery, CSS3 and ColdFusion


Published on

This is a presentation I gave at the NCDevCon 2011 developer conference in Raleigh, NC Sept 17th, 2011.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

jQuery, CSS3 and ColdFusion

  1. 1. jQuery, CSS3 & ColdFusion <br />Presented at NCDevCon 2011by:<br />DenardSpringle<br />
  2. 2. Who Am I?<br />Freelance Software Systems Engineer<br />Rich internet and mobile applications<br />Hardware, network and storage engineering<br />CMMI process management & assessment<br />Over 20 years IT experience<br />Over 10 years ColdFusion experience<br />Host of the Northern Virginia CFUG<br />denard.springle@gmail.com<br />http://www.nvcfug.org/<br />
  3. 3. UI Design – Then and Now(or ‘Why I used to loathe user interface design and what changed my mind!’)<br />Traditional Web Design<br />CSS3, HTML5 & jQuery<br />Pet Peeve #1 – Multiple return trips to graphics applications (aka longer development cycles).<br />Pet Peeve #2 – Multiple images make for slower loading sites.<br />Pet Peeve #3 – Requires multiple designs and complicated Javascript for multi-screen development.<br />Pet Peeve #4 – Interactive elements require multiple images.<br />Virtually eliminates the need for graphics applications beyond composition.<br />Virtually eliminates the need for images.<br />Uses style sheets and media queries to support multi-screen development. jQuery has a Mobile edition.<br />Allows interactive elements to be created and styled with or without images with ease.<br />
  4. 4. What is the jQuery library?<br />Javascript RAD framework<br />Handles cross-browser dependencies*<br />Uses familiar CSS language selectors<br />Packed with handy utility functions (like Ajax)<br />Loads of available plugin’s or roll your own<br />Works with other Javascript frameworks (including ColdFusion’s built-in functions)<br />Works with native Javascript functions<br />Works with (most) emerging standards (CSS3, HTML5)<br />* Some plugin’s have cross-browser issues because they employ Javascript functions that are browser specific, or rely on deprecated jQuery 1.3 functions.<br />
  5. 5. Implementing the jQuery library<br />Download from http://docs.jquery.com/Downloading_jQuery<br />Download with jQuery UI themeroller<br /><script src=‘jquery-1.x.x[.min].js’ type=‘text/javascript’><br />Google CDN @ <script src=‘http(s)://ajax.googleapis.com/ajax/libs/jquery/1.x.x/jquery.min.js’ type=‘text/javascript’><br />MSDN CDN @ <script src=‘http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.x.x.min.js’ type=‘text/javascript’><br />jQuery CDN @ <script src=‘http://code.jquery.com/jquery-1.x.x.min.js’ type=‘text/javascript’><br />
  6. 6. Implementing the jQuery library<br />jQuery(document).ready(function() { … code here …});<br />$(funtion() { … code here …});<br />$ == alias for ‘jQuery’<br />
  7. 7. jQuery Selectors – The Basics<br /><div id=“myDiv” class=“myClass”></div><br />$(‘#myDiv’) – selects the element identified by the ‘myDiv’ id<br />$(‘.myClass’) – selects any element assigned the ‘myClass’ class<br />$(‘div’) –selects all <div> elements in the page<br />
  8. 8. jQuery Selectors – CSS Syntax<br /><div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p></div><br />$(‘p’) – selects all paragraph elements in the page<br />$(‘#myDiv p’) – selects all paragraph elements within the element with the ‘myDiv’ id<br />$(‘.myClass p’) – selects all paragraph elements within the elements assigned the ‘myClass’ class.<br />$(‘p#world’) – selects the element within any paragraph element with the ‘world’ id.<br />
  9. 9. jQuery Selectors – CSS Operators<br /><div id=“myDiv” class=“myClass”> <p>Hello <span id=“world” class=“red”>World</span>!</p></div><br />$(‘#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.<br />$(‘#myDiv > p’) – selects all paragraph elements that are direct children of the element with the ‘myDiv’ id.<br />$(‘#myDiv + p’) – selects the paragraph element that is immediately preceded by the element with the ‘myDiv’ id<br />
  10. 10. jQuery Selectors - CSS Filters<br /><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><br />$(‘#myDiv p:first’) – selects the first paragraph element that is within the element with the ‘myDiv’ id.<br />$(‘#myDiv p:last’) – selects the last paragraph element that is within the element with the ‘myDiv’ id.<br />$(‘p:even’) – selects all even paragraph elements in the page<br />
  11. 11. jQuery Chaining<br /><a href=“http://jquery.com”>jQuery</a><br />$(“a[href^=‘http://’]”).attr(‘target’,’_blank’);<br />$(“a[href^=’http://’]”).addClass(‘external’);<br />$(“a[href^=‘http://’]”).css(‘fontWeight’,’bold’);<br />$(“a[href^=‘http://’]”).attr(‘target’,’_blank’).addClass(‘external’).css(‘fontWeight’,’bold’);<br />
  12. 12. Working with Element Properties<br />attr(name) – obtains the value assigned to the specified attribute for the first element in the matched set.<br />attr(name,value) – sets the named attribute to the passed value for all elements in the matched set.<br />attr(attributes) – uses a JSON object to set corresponding attributes onto all elements of the matched set.<br />
  13. 13. Working with Element Properties<br /><imgsrc=“myImage.gif” id=“myImage” alt=“” title=“Voila!” /><imgsrc=“” id=“newImage” alt=“” title=“” /><br />alert($(‘#myImage’).attr(‘title’));<br />$(‘#newImage’).attr(‘src’,$(‘#myImage’).attr(‘src’));<br />$(‘#myImage’).attr(‘alt’,’alternate image text’);<br />$(‘#myImage’).attr({title: ’Bang!’, alt: ‘alternate image text’});<br />$(‘#newImage’).attr(‘alt’,$(‘#myImage’).attr(‘title’));<br />
  14. 14. Changing Style with jQuery<br />hasClass(name) – returns true if any element of the matched set possesses the passed class name.<br />addClass(names) – specifies the name, or names, of classes to add to the matched set.<br />removeClass(names) – specifies the name, or names, of classes to remove from the matched set.<br />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<br />
  15. 15. Changing Style with jQuery<br />css(name) – reads the value of the CSS property for the first element in the matched set<br />css(name,value) – sets the value of the named css property for each element in the matched set<br />css(properties) – sets the values using a JSON object for each element in the matched set<br />width(), width(value) – reads the width of the first element or sets the width of all elements in the matched set<br />height(), height(value) – reads the height of the first element or sets the height of all elements in the matched set <br />
  16. 16. Setting Element Content w/ jQuery<br />html() – obtains the HTML content of the first element in the matched set<br />html(content) – sets the passed HTML fragment as the content of all elements in the matched set<br />text() – concatenates and returns all text content of the matched set <br />text(content) – sets the text content of all elements in the matched set<br />
  17. 17. jQuery Events<br />bind() – bind an event handler to all elements in a matched set<br />unbind() – removes an event handler from all elements in a matched set<br />All javascript events (mouseover, mouseout, mousedown, focus, blur, select, submit, etc.)<br />
  18. 18. jQuery Events<br /><button id=‘myButton’ /><br />$(‘#myButton’).bind(‘mouseovermouseout’, function() { $(this).toggleClass(‘highlight’); });<br />$(‘.data-entry’).bind(‘focus’, function() { $(this).css({backgroundColor: ‘#000’, color: ‘#fff’}); });<br />
  19. 19. jQuery Events – Specific Event Binding<br /><button id=‘myButton’ /><br />click() – bind a click event handler to an element<br />$(‘#myButton’).click(function() {window.location.href = ‘clickedPage.cfm’;});<br />dblclick() – bind a double-click handler to an element<br />$(‘#myButton’).dblclick(function() { $(this).width(300).height(100);});<br />
  20. 20. jQuery Events – Binding non-existent elements<br />live() – bind an event handler to a matched set that does not (yet) exist in the dom<br />$(‘#myButton’).live(‘mousedown’,function() {window.location.href = ‘clickedPage.cfm’;});<br />die() – unbinds an event handler bound with live<br />Use sparingly. Resource hog. Has to re-read the dom for every change in the dom<br />
  21. 21. jQuery AJAX Function<br />$.ajax({options})<br />Provides complete control over the entire AJAX process including specifying data sources, data type, event handlers, context, filters, etc. etc.<br />All other Ajax functions are a subset of the $.ajax() function.<br />Requires JSON and callback handler<br />
  22. 22. jQuery AJAX Methods<br />load() – loads HTML content into the wrapped set. Callback function is optional<br />$.get() – makes HTTP GET requests and requires a callback function<br />$.getJSON – makes HTTP GET requests with a defined return data type of JSON, requires a callback function<br />
  23. 23. jQuery AJAX Methods<br />$.post() – makes HTTP POSTs and requires a callback function<br />$.ajax(), $.get() and $.post() response types:<br />xml – passes XML dom to the callback function<br />html – passes unprocessed HTML to the callback. <script> is evaluated.<br />json– interpreted as JSON string, passed as object to the callback<br />jsonp – same as json, but allows remote scripting<br />script – processed as javascript and passed to the callback<br />text – plain text passed to the callback<br />
  24. 24. Single API in jQuery – jQuery Side<br />$.ajaxSetup({options});<br />Accepts the same options as $.ajax()<br />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.<br />Specifying a default (single) url for all future requests using the $.ajaxSetup() method allows for single-api applications<br />demo<br />
  25. 25. Single API in jQuery – CF Side<br />
  26. 26. Single API in jQuery – CF Side<br /><!--- params--><cfparamname="URL.app" default="hello_world" /><!--- switch on the supplied URL.app value ---><cfswitch expression="#URL.app#"> <!--- Hello World 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><!--- Photo Viewer App ---><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><!--- ERROR ---><cfdefaultcase> <div class="content-text">ERROR!</div></cfdefaultcase></cfswitch><br />
  27. 27. jQuery Plugins<br />Plugins are encapsulated functions within the jQuery scope that participate in chaining.<br />Thousands of available plugins, both official and unofficial, and about as many blogs on how to write jQuery functionality and plugins<br />http://plugins.jquery.com/ or Google search<br />About 13,400,000 results for ‘jQuery plugins’ on Google<br />
  28. 28. jQuery Plugins – jQuery UI<br />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.<br />Makes creating interactive UI painless, quick to develop and quick to execute.<br />Widgets include: Tabs, Accordions, Buttons and Buttonsets, Sliders, Progress Bars, Autocompleters, Datepickers and Dialog Boxes… so far<br />Tooltip, Menu, Menubar, Popup and Spinner are forthcoming<br />
  29. 29. jQuery UI - Themeroller<br />http://jqueryui.com/themeroller/<br />Allows you to quickly and easily generate .css and download jQuery and jQuery UI to theme the components generated by jQuery UI<br />Provides an easy way to scope css for specific regions of the site<br />Utilizes CSS3 for some of its effects (rounded corners) and transparent PNGs (not supported in IE6)<br />
  30. 30. Implementing the jQuery UI plugin<br /><script src=‘jquery-ui-1.x.x[.min].js’ type=‘text/javascript’><br />Google CDN @ <script src=‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.x.x/jquery-ui.min.js’ type=‘text/javascript’><br />
  31. 31. jQuery UI – Drag and Drop +<br />Draggable() and Droppable() – allows you to assign matched sets that can be dragged and matched sets which can be dropped onto<br />Sortable() – allows you to assign a matched set that can be user sorted (with drag & drop)<br />Resizable() – allows you to assign a matched set that can be resized by dragging one or more corners<br />Selectable() – allows you to assign a matched set that can be selected by clicking on the element<br />
  32. 32. jQuery UI – Effects & Animations<br />Effect() – applies one of the jQuery UI animated effects to a matched set<br />Animate() – animates numerical css properties of a matched set<br />Hide() – hides a matched set using one of the jQuery UI animated effects<br /> Show() – shows a matched set using one of the jQuery UI animated effects<br />
  33. 33. jQuery UI – Effects & Animations<br />Blind<br />Bounce<br />Clip<br />Drop<br />Explode<br />Fade<br />Fold<br />Highlight<br />Puff<br />Pulsate<br />Scale<br />Shake<br />Size<br />Slide<br />Transfer<br />
  34. 34. HTML5 & CSS3 – Working Together<br /><body> <header> <nav></nav> </header> <section> <article> <header></header> <figure></figure> <footer></footer> </article> <dialog></dialog> </section> <aside></aside> <footer></footer></body><br />
  35. 35. CSS3 – Changes since CSS2<br />Media Queries<br />Rounded, multi-color and image borders<br />Gradient, multiple image, resizable backgrounds<br />Text shadows, text overflow and word wrap<br />Drop shadow, resizable, outline offset boxes<br />Color opacity (RGBA) and HSL color values<br />2D & 3D Transformations (skew, rotate, etc.)*<br />Transitions (dynamic style)*, Web Fonts*<br />Flexible grid/column layout*<br />* = Work in Progress<br />demo<br />
  36. 36. IE CSS3 & HTML5 Support<br />IE ~ 8 – Zero support for CSS3, HTML5, dom event model 2<br />IE 9 – Limited support for CSS3, HTML5 and dom event model 2<br />IE 10 – ‘Final’ browser to be released by M$. Claims will support full CSS3, HTML5 and dom event model 2 *at time of release*<br />HTML5 tags can be used in IE < 9 with the help of a Javascript shiv<br />
  37. 37. Progressive Enhancements<br />Design for IE first<br />Add enhanced styles for modern browsers (Chrome, Firefox, etc.) second<br />Provide alternate styles for non-supported CSS3 features in IE (e.g. solid background color in contrast to gradient background)<br />Functionality should be the same for all browsers<br />
  38. 38. Augment jQuery UI with CSS3<br />Redefine opacity, gradient backgrounds, text and box drop-shadows, transformations and more of your existing jQuery UI .css (via override)<br />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)<br />demo<br />
  39. 39. Additional Resources<br />Book: jQuery in Action (link to Amazon)<br />Book: CSS3 Visual Quickstart Guide (link to Amazon)<br />NVCFUG Demo Site (link to demo site)<br />jQuery (link) and jQuery UI (link) websites<br />denard.springle@gmail.com<br />