jQuery, CSS3 and ColdFusion

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

Who Am I?Freelance Software Systems EngineerRich internet and mobile applicationsHardware, network and storage engineeringCMMI process management & assessmentOver 20 years IT experienceOver 10 years ColdFusion experienceHost of the Northern Virginia CFUGdenard.springle@gmail.comhttp://www.nvcfug.org/

UI Design – Then and Now(or ‘Why I used to loathe user interface design and what changed my mind!’)Traditional Web DesignCSS3, HTML5 & jQueryPet 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.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.

What is the jQuery library?Javascript RAD frameworkHandles cross-browser dependencies*Uses familiar CSS language selectorsPacked with handy utility functions (like Ajax)Loads of available plugin’s or roll your ownWorks with other Javascript frameworks (including ColdFusion’s built-in functions)Works with native Javascript functionsWorks 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 libraryDownload from http://docs.jquery.com/Downloading_jQueryDownload 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 libraryjQuery(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 Propertiesattr(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 jQueryhasClass(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 jQuerycss(name) – reads the value of the CSS property for the first element in the matched setcss(name,value) – sets the value of the named css property for each element in the matched setcss(properties) – sets the values using a JSON object for each element in the matched setwidth(), width(value) – reads the width of the first element or sets the width of all elements in the matched setheight(), height(value) – reads the height of the first element or sets the height of all elements in the matched set

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

jQuery Eventsbind() – bind an event handler to all elements in a matched setunbind() – removes an event handler from all elements in a matched setAll 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 elementslive() – 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 liveUse 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 Methodsload() – 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 functionhtml – passes unprocessed HTML to the callback. <script> is evaluated.json– interpreted as JSON string, passed as object to the callbackjsonp – same as json, but allows remote scriptingscript – processed as javascript and passed to the callbacktext – 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 applicationsdemo

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 PluginsPlugins 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 pluginshttp://plugins.jquery.com/ or Google searchAbout 13,400,000 results for ‘jQuery plugins’ on Google

jQuery Plugins – jQuery UIjQuery 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 farTooltip, Menu, Menubar, Popup and Spinner are forthcoming

jQuery UI - Themerollerhttp://jqueryui.com/themeroller/Allows you to quickly and easily generate .css and download jQuery and jQuery UI to theme the components generated by jQuery UIProvides an easy way to scope css for specific regions of the siteUtilizes 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 ontoSortable() – 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 cornersSelectable() – allows you to assign a matched set that can be selected by clicking on the element

jQuery UI – Effects & AnimationsEffect() – applies one of the jQuery UI animated effects to a matched setAnimate() – animates numerical css properties of a matched setHide() – 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 & AnimationsBlindBounceClipDropExplodeFadeFoldHighlightPuffPulsateScaleShakeSizeSlideTransfer

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 CSS2Media QueriesRounded, multi-color and image bordersGradient, multiple image, resizable backgroundsText shadows, text overflow and word wrapDrop shadow, resizable, outline offset boxesColor opacity (RGBA) and HSL color values2D & 3D Transformations (skew, rotate, etc.)*Transitions (dynamic style)*, Web Fonts*Flexible grid/column layout** = Work in Progressdemo

IE CSS3 & HTML5 SupportIE ~ 8 – Zero support for CSS3, HTML5, dom event model 2IE 9 – Limited support for CSS3, HTML5 and dom event model 2IE 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 EnhancementsDesign for IE firstAdd enhanced styles for modern browsers (Chrome, Firefox, etc.) secondProvide 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 CSS3Redefine 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 ResourcesBook: 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) websitesdenard.springle@gmail.com

jQuery, CSS3 and ColdFusion

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to jQuery, CSS3 and ColdFusion (20)

jQuery, CSS3 and ColdFusion