Writing with YUI. Doug Bell Developer / Janitor

Size: px

Start display at page:

Download "Writing with YUI. Doug Bell Developer / Janitor"

Evan Dean
5 years ago
Views:

1 Writing with YUI Doug Bell Developer / Janitor doug@plainblack.com

2 JavaScript An Epic Tale Interface with Java Applets Has been standardized (EMCAScript) Annoying features being avoided / disabled Featureful, Intuitive, Dynamic User Interfaces Break out of Stagnant Static Sites From Harmful To Helpful

3 JavaScript An Epic Tale Programmer s Perspective JavaScript Sucks in Web Browsers Non-standard Implementations Different behaviors between standard implementations Some simple tasks are made difficult Into the gap: JavaScript Libraries

4 Which One? Dojo, Prototype, Scriptaculous, jquery October Community weighs in Consensus: Yahoo User Interface (YUI)

5 Why YUI? Free as in Speech Free as in Beer Backed by Yahoo Well-Supported Well-defined Levels of Support (Graded Support) Fully-featured API Extensible API Well-Documented

6 What is YUI? A satellite view

7 YUI Components YUI Core Base of the system DOM and Event handling Normalization Utilities Components to build applications Connection Manager for XmlHttpRequest (aka AJAX) Animation and Drag and Drop

8 YUI Components Controls / Widgets AutoComplete Calendar, Color Picker, Rich Text Editor, Slider TabView CSS Tools Reset Base Font Grids TreeView

9 In this Session YUI Core DOM Event Animation Connection We ll create a functional, if a bit silly, Asset...

10 Shoutbox Users can chat real-time on your website

11 Shoutbox Under the hood Default view Handles the normal view of the asset Creates the form for input JSON view Gets the asset s information in JSON Will be very useful later on

12 YUI + DOM Chocolate + Peanut Butter

13 Before HTML in the template Useful but not re-useful Let s make something New!

14 Before <div id="shoutbox"> <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if> <tmpl_var form_start> From: <tmpl_var form_from><br/> Text: <tmpl_var form_bodytext> <tmpl_var form_submit> <tmpl_var form_end> </div>

15 Before <div id="shoutbox"> <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if> <tmpl_var form_start> From: <tmpl_var form_from><br/> Text: <tmpl_var form_bodytext> <tmpl_var form_submit> <tmpl_var form_end> </div>

16 Before <div id="shoutbox"> <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if> <tmpl_var form_start> From: <tmpl_var form_from><br/> Text: <tmpl_var form_bodytext> <tmpl_var form_submit> <tmpl_var form_end> </div>

17 Before <div id="shoutbox"> <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if> <tmpl_var form_start> From: <tmpl_var form_from><br/> Text: <tmpl_var form_bodytext> <tmpl_var form_submit> <tmpl_var form_end> </div>

18 Our Task Replace the loop generating the chat with a JavaScript one Reuse our new function Good practice when interacting with content Pretext to show off YUI DOM functions flimsy

19 Beginning Our App Some rules to live by Document, Document, Document <script type="text/javascript"> /******************************************************* * Shoutbox - User chat on your site ******************************************************/

20 Beginning Our App Some rules to live by Use Namespaces to keep away from overlap <script type="text/javascript"> /******************************************************* * Shoutbox - User chat on your site ******************************************************/ // Create a "namespace" to hold our functions var Shoutbox = {}; // Just a blank object!

21 Beginning Our App Some rules to live by Document, Document, Document * Shoutbox - User chat on your site ******************************************************/ // Create a "namespace" to hold our functions var Shoutbox = {}; // Just a blank object! /******************************************************* * Shoutbox.addChatRow ( timestamp, from, bodytext ) * Adds a row to the chat box. timestamp, from, and * bodytext are directly from the Shoutbox asset */

22 Beginning Our App Import YUI All of YUI requires yahoo.js <script type= text/javascript src= ^Extras(yui/build/yahoo/yahoo-min.js); ></script> <script type="text/javascript"> /******************************************************* * Shoutbox - User chat on your site ******************************************************/ // Create a "namespace" to hold our functions var Shoutbox = {}; // Just a blank object!

23 Beginning Our App Import YUI We want dom.js <script type= text/javascript src= ^Extras(yui/build/yahoo/yahoo-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/dom/dom-min.js); ></script> <script type="text/javascript"> /******************************************************* * Shoutbox - User chat on your site ******************************************************/ // Create a "namespace" to hold our functions var Shoutbox = {}; // Just a blank object!

24 Beginning Our App addchatrow Adds a row to the list <div id="shoutbox"> <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if>

25 Beginning Our App addchatrow Adds a row to the list <div id="shoutbox"> <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if>

26 Beginning Our App addchatrow /******************************************************* * Shoutbox.addChatRow ( timestamp, from, bodytext ) * Adds a row to the chat box. timestamp, from, and * bodytext are directly from the Shoutbox asset */ Shoutbox.addChatRow = function (timestamp, from, bodytext) { var sb = document.getelementbyid("shoutbox"); var ul = sb.getelementsbytagname("ul")[0]; // Nicely format our date timestamp = new Date(timestamp).toLocaleString(); // Create new DOM nodes for our chat

27 Beginning Our App addchatrow /******************************************************* * Shoutbox.addChatRow ( timestamp, from, bodytext ) * Adds a row to the chat box. timestamp, from, and * bodytext are directly from the Shoutbox asset */ Shoutbox.addChatRow = function (timestamp, from, bodytext) { var sb = document.getelementbyid("shoutbox"); var ul = sb.getelementsbytagname("ul")[0]; // Nicely format our date timestamp = new Date(timestamp).toLocaleString(); // Create new DOM nodes for our chat

28 Beginning Our App addchatrow /******************************************************* * Shoutbox.addChatRow ( timestamp, from, bodytext ) * Adds a row to the chat box. timestamp, from, and * bodytext are directly from the Shoutbox asset */ Shoutbox.addChatRow = function (timestamp, from, bodytext) { var sb = document.getelementbyid("shoutbox"); var ul = sb.getelementsbytagname("ul")[0]; // Nicely format our date var tsdate = new Date(timestamp).toLocaleString(); // Create new DOM nodes for our chat

29 Our First Yahoo addchatrow // Create new DOM nodes for our chat list var spantimestamp = document.createelement("span"); YAHOO.util.Dom.addClass(spanTimestamp, "timestamp"); spantimestamp.appendchild( document.createtextnode(timestamp) ); var spanfrom = document.createelement("span"); YAHOO.util.Dom.setStyle(spanFrom, "font-weight", "bold"); spanfrom.appendchild( document.createtextnode(from) ); var li = document.createelement("li"); li.appendchild( spantimestamp ); li.appendchild( document.createtextnode(" - ") );

30 Our First Yahoo addchatrow // Create new DOM nodes for our chat var spantimestamp = document.createelement("span"); YAHOO.util.Dom.addClass(spanTimestamp, "timestamp"); spantimestamp.appendchild( document.createtextnode(timestamp) ); YAHOO.util.Dom.addClass( id element, class ); Exists because of browser compatibility issues with setting element.classname or using element.setattribute( class, classname );

31 Our First Yahoo addchatrow // Create new DOM nodes for our chat list var spantimestamp = document.createelement("span"); YAHOO.util.Dom.addClass(spanTimestamp, "timestamp"); spantimestamp.appendchild( document.createtextnode(timestamp) ); var spanfrom = document.createelement("span"); YAHOO.util.Dom.setStyle(spanFrom, "font-weight", "bold"); spanfrom.appendchild( document.createtextnode(from) ); var li = document.createelement("li"); li.appendchild( spantimestamp ); li.appendchild( document.createtextnode(" - ") );

32 Our First Yahoo addchatrow // Create new DOM nodes for our chat list var spantimestamp = document.createelement("span"); YAHOO.util.Dom.addClass(spanTimestamp, "timestamp"); spantimestamp.appendchild( document.createtextnode(timestamp) ); var spanfrom = document.createelement("span"); YAHOO.util.Dom.setStyle(spanFrom, "font-weight", "bold"); spanfrom.appendchild( document.createtextnode(from) ); var li = document.createelement("li"); li.appendchild( spantimestamp ); li.appendchild( document.createtextnode(" - ") );

33 Our First Yahoo addchatrow var spanfrom = document.createelement("span"); YAHOO.util.Dom.setStyle(spanFrom, "font-weight", "bold"); spanfrom.appendchild( document.createtextnode(from) ); var li = document.createelement("li"); li.appendchild( spantimestamp ); YAHOO.util.Dom.setStyle( id element, property, value ); Exists because of browser compatibility issues with setting element.style or element.setattribute()

34 Our First Yahoo addchatrow var spanfrom = document.createelement("span"); YAHOO.util.Dom.setStyle(spanFrom, "font-weight", "bold"); spanfrom.appendchild( document.createtextnode(from) ); var li = document.createelement("li"); li.appendchild( spantimestamp ); li.appendchild( document.createtextnode(" - ") ); li.appendchild( spanfrom ); li.appendchild( document.createtextnode(": ") ); li.appendchild( document.createtextnode(bodytext) ); ul.appendchild(li); };

35 Our First Yahoo addchatrow var spanfrom = document.createelement("span"); YAHOO.util.Dom.setStyle(spanFrom, "font-weight", "bold"); spanfrom.appendchild( document.createtextnode(from) ); var li = document.createelement("li"); li.appendchild( spantimestamp ); li.appendchild( document.createtextnode(" - ") ); li.appendchild( spanfrom ); li.appendchild( document.createtextnode(": ") ); li.appendchild( document.createtextnode(bodytext) ); ul.appendchild(li); };

36 Our First Yahoo Replace our HTML Test our code One Way to Do It means One Code to Edit <tmpl_if chat><ul> <tmpl_loop chat><li> <span class="timestamp"> ^D("%z %Z",<tmpl_var timestamp>); </span> - <span class="from"><tmpl_var from></span>: <tmpl_var bodytext> </li></tmpl_loop> </ul></tmpl_if>

37 Our First Yahoo Replace our HTML Test our code One Way to Do It means One Code to Edit <tmpl_if chat><ul></ul> <script type= text/javascript > <tmpl_loop chat> Shoutbox.addChatRow( <tmpl_var timestamp>, <tmpl_var from escape= JS >, <tmpl_var bodytext escape= JS > ); </tmpl_loop> </script></tmpl_if>

38 DOM and DOMer Get the size of the viewport Different browsers, different ways YAHOO.util.Dom.getViewportWidth() YAHOO.util.Dom.getViewportHeight() Get and Set an elements position Difficult when other styles get in the way getx(el), gety(el), getxy(el) setx(el), sety(el), setxy(el)

39 The Result Looks the same But that s what we wanted Let s do something Interesting!

40 Events Johnny 5 need input

41 Show and Hide Add a title bar Click to toggle

42 Show and Hide Add a title bar Click to toggle <div id="shoutbox"> <a href="#" class="title">shoutbox</a> <tmpl_if chat><ul></ul> <script type= text/javascript > <tmpl_loop chat> Shoutbox.addChatRow( <tmpl_var timestamp>, <tmpl_var from escape= JS >, Where s the onclick=?

43 YUI Event Add and remove event listeners YAHOO.util.Event.addListener( id element, event, callbackfunction ); click, mouseover, mouseout submit, load

44 YUI Event Custom Events YAHOO.util.Event.onContentReady( id element, callbackfunction ); Calls the callbackfunction when the specified element AND its next sibling is available in the DOM Element is safe to modify in all browsers

45 Add an Event Setting up Import YUI Event <script type= text/javascript src= ^Extras(yui/build/yahoo/yahoo-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/dom/dom-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/event/event-min.js); ></script> <script type="text/javascript"> /******************************************************* * Shoutbox - User chat on your site ******************************************************/

46 Add an Event Setting up Save state * Shoutbox - User chat on your site ******************************************************/ // Create a "namespace" to hold our functions var Shoutbox = {}; // Just a blank object! Shoutbox.opened = 1; // Keep track if the shoutbox is open /****************************************************** * Shoutbox.addChatRow ( timestamp, from, bodytext ) * Adds a row to the chat box. timestamp, from, and * bodytext are directly from the Shoutbox asset */

47 Add an Event Create event handler to toggle that state Document, document, document /****************************************************** * Shoutbox.eventToggleView ( event ) * Event handler to toggle the shoutbox open or closed. */ Shoutbox.eventToggleView = function (event) { if (Shoutbox.opened) { YAHOO.util.Dom.setStyle('shoutbox','height','30px'); // height + padding of title Shoutbox.opened = 0; } else { YAHOO.util.Dom.setStyle('shoutbox','height','260px'); Shoutbox.opened = 1;

48 Add an Event Create event handler to toggle that state Event handlers have one required argument /****************************************************** * Shoutbox.eventToggleView ( event ) * Event handler to toggle the shoutbox open or closed. */ Shoutbox.eventToggleView = function (event) { if (Shoutbox.opened) { YAHOO.util.Dom.setStyle('shoutbox','height','30px'); // height + padding of title Shoutbox.opened = 0; } else { YAHOO.util.Dom.setStyle('shoutbox','height','260px'); Shoutbox.opened = 1;

49 Add an Event Create event handler to toggle that state If it s opened, close it /****************************************************** * Shoutbox.eventToggleView ( event ) * Event handler to toggle the shoutbox open or closed. */ Shoutbox.eventToggleView = function (event) { if (Shoutbox.opened) { YAHOO.util.Dom.setStyle('shoutbox','height','30px'); // height + padding of title Shoutbox.opened = 0; } else { YAHOO.util.Dom.setStyle('shoutbox','height','260px'); Shoutbox.opened = 1;

50 Add an Event Create event handler to toggle that state If it s closed, open it YAHOO.util.Dom.setStyle('shoutbox','height','30px'); // height + padding of title Shoutbox.opened = 0; } else { YAHOO.util.Dom.setStyle('shoutbox','height','260px'); Shoutbox.opened = 1; } YAHOO.util.Event.preventDefault(event); };

51 Add an Event Create event handler to toggle that state Stop the default action (href= # ) YAHOO.util.Dom.setStyle('shoutbox','height','30px'); // height + padding of title Shoutbox.opened = 0; } else { YAHOO.util.Dom.setStyle('shoutbox','height','260px'); Shoutbox.opened = 1; } YAHOO.util.Event.preventDefault(event); };

52 Add an Event Add a listener to call the toggle method Must be added after the entire shoutbox is loaded oncontentready() Create an event handler that will add the listener when the oncontentready event happens

53 Add an Event Add a listener to call the toggle method Create an initialization method /****************************************************** * Shoutbox.init ( ) * Initialize the shoutbox */ Shoutbox.init = function () { var shoutbox = document.getelementbyid('shoutbox'); // Add an onclick handler to the first title var title = YAHOO.util.Dom.getElementsByClassName ('title',undefined, shoutbox)[0]; YAHOO.util.Event.addListener( title, 'click', Shoutbox.eventToggleView

54 Add an Event Add a listener to call the toggle method Create an initialization method // Add an onclick handler to the first title var title = YAHOO.util.Dom.getElementsByClassName ('title',undefined, shoutbox)[0]; YAHOO.util.Event.addListener( title, 'click', Shoutbox.eventToggleView ); };

55 Add an Event Add a listener to call the toggle method Call the initializer when ready YAHOO.util.Event.addListener( title, 'click', Shoutbox.eventToggleView ); }; // Run the initializer when our shoutbox is safe to modify YAHOO.util.Event.onContentReady( 'shoutbox', Shoutbox.init );

56 Add an Event Additional benefits of oncontentready handlers Progressive Enhancement

57 Add an Event Additional benefits of oncontentready handlers Configurable state * Shoutbox - User chat on your site ******************************************************/ // Create a "namespace" to hold our functions var Shoutbox = {}; // Just a blank object! Shoutbox.opened = 1; // Keep track if the shoutbox is open /****************************************************** * Shoutbox.addChatRow ( timestamp, from, bodytext ) * Adds a row to the chat box. timestamp, from, and * bodytext are directly from the Shoutbox asset */

58 Add an Event Additional benefits of oncontentready handlers Change initial state based on configuration /****************************************************** * Shoutbox.init ( ) * Initialize the shoutbox */ Shoutbox.init = function () { var shoutbox = document.getelementbyid('shoutbox'); // Set the initial state if (Shoutbox.opened) { YAHOO.util.Dom.setStyle(shoutbox,'height','260px'); } else { YAHOO.util.Dom.setStyle(shoutbox,'height','30px');

59 Add an Event Additional benefits of oncontentready handlers Change initial state based on configuration // Set the initial state if (Shoutbox.opened) { YAHOO.util.Dom.setStyle(shoutbox,'height','260px'); } else { YAHOO.util.Dom.setStyle(shoutbox,'height','30px'); // height + padding of title } // Add an onclick handler to the first title var title = YAHOO.util.Dom.getElementsByClassName ('title',undefined, shoutbox)[0];

60 More Event YAHOO.util.Event.onDOMReady() Like oncontentready, but for when the entire DOM has been parsed. Happens after window load. Better than onload because of browser bugs

61 More Event Automatic addlistener deferral When using an ID, waits until the element is ready (like oncontentready) Browser quirk handling No need to check window.event The event s affected element is always correct

62 Results When the title is clicked, the shoutbox opens or closes Shoutbox.opened in the source now sets the default state. Oh yes. It can have more awesome

63 Animation New powers for making Awesome

64 Adding Animation Easier than you might think

65 Adding Animation Easier than you might think We already have the setup Shoutbox.eventToggleView = function (event) { if (Shoutbox.opened) { YAHOO.util.Dom.setStyle('shoutbox','height','30px'); // height + padding of title Shoutbox.opened = 0; } else { YAHOO.util.Dom.setStyle('shoutbox','height','260px'); Shoutbox.opened = 1; } YAHOO.util.Event.preventDefault(event); };

66 Adding Animation Easier than you might think Load the Animation component src= ^Extras(yui/build/yahoo/yahoo-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/dom/dom-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/event/event-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/animation/animation-min.js); > </script> <script type="text/javascript"> /******************************************************* * Shoutbox - User chat on your site

67 Adding Animation Easier than you might think Alter the eventtoggleview to use Animation Shoutbox.eventToggleView = function (event) { Shoutbox.animation = new YAHOO.util.Anim('shoutbox'); Shoutbox.animation.duration = 1; if (Shoutbox.opened) { Shoutbox.animation.attributes.height = { to: 30 }; Shoutbox.animation.method = YAHOO.util.Easing.bounceOut; Shoutbox.opened = 0; } else { Shoutbox.animation.attributes.height = { to: 260 }; Shoutbox.animation.method =

68 Adding Animation Easier than you might think Alter the eventtoggleview to use Animation YAHOO.util.Easing.bounceOut; Shoutbox.opened = 0; } else { Shoutbox.animation.attributes.height = { to: 260 }; Shoutbox.animation.method = YAHOO.util.Easing.elasticOut; Shoutbox.opened = 1; } Shoutbox.animation.animate(); YAHOO.util.Event.preventDefault(event); };

69 Other Methods YAHOO.util.Easing.bounceOut easenone Steady velocity easein / easeout Smooth velocity change backin / backout Pulling a window shade bouncein / Out Bounce Bounce Bounce elasticin / Out Pull and snap easeboth Both easein and easeout

70 More Animation Make your own Easing methods Move an element along a path YAHOO.util.Motion Animate Colors YAHOO.util.ColorAnim Scroll elements YAHOO.util.Scroll

71 Result That s darn cool, but it isn t very useful.

72 Connection XmlHttpRequest (AJAX) The best thing to happen to WWW since Netscape

73 What is AJAX? More than a buzzword

74 What is AJAX? More than a buzzword Dynamic interaction between server and user Without expensive page loads In the background (no leaving the screen) Build functional, responsive user interfaces What JavaScript is all about

75 Adding some AJAX Get Shoutbox content through AJAX Import the Connection component src= ^Extras(yui/build/yahoo/yahoo-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/dom/dom-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/event/event-min.js); ></script> <script type= text/javascript src= ^Extras(yui/build/animation/animation-min.js); > </script> <script type= text/javascript src= ^Extras(yui/build/connection/connection-min.js); > </script> <script type="text/javascript">

76 Adding some AJAX Get Shoutbox content through AJAX Create a method to request an update Use our?func=json asset page JSON is easy to manipulate using JavaScript who knew?

77 Adding some AJAX Get Shoutbox content through AJAX Create a method to request an update /****************************************************** * Shoutbox.requestUpdate ( ) * Submit the async request to update our shoutbox */ Shoutbox.requestUpdate = function () { var callback = { success: function (o) { // Remove all old chat and replace with new removeallchildren("shoutbox"); responseobj = eval("(" + o.responsetext + ")"); for (var i in responseobj.chat) { var row = responseobj.chat[i]; Shoutbox.addChatRow(row.timestamp, row.from,

78 Adding some AJAX Get Shoutbox content through AJAX Create a method to request an update var callback = { success: function (o) { // Remove all old chat and replace with new removeallchildren("shoutbox"); responseobj = eval("(" + o.responsetext + ")"); for (var i in responseobj.chat) { var row = responseobj.chat[i]; Shoutbox.addChatRow(row.timestamp, row.from, row.bodytext); } }, failure: function (o) { alert("update failed! Please try again.");

79 Adding some AJAX Get Shoutbox content through AJAX Create a method to request an update for (var i in responseobj.chat) { var row = responseobj.chat[i]; Shoutbox.addChatRow(row.timestamp, row.from, row.bodytext); } }, failure: function (o) { alert("update failed! Please try again."); } } YAHOO.util.Connect.asyncRequest('GET', Shoutbox.url + '? func=json', callback);

80 Adding some AJAX Get Shoutbox content through AJAX Create a method to request an update row.bodytext); } }, failure: function (o) { alert("update failed! Please try again."); } } YAHOO.util.Connect.asyncRequest('GET', Shoutbox.url + '? func=json', callback); }; /****************************************************

81 Adding some AJAX Get Shoutbox content through AJAX Where did we get Shoutbox.url? WebGUI doesn t process Head Block Set the right URL in the Template <script type="text/javascript"> // Can't get the template var inside Head Block Shoutbox.url = '<tmpl_var url escape="js">'; </script> <div id="shoutbox">

82 Adding some AJAX Get Shoutbox content through AJAX Where did we get removeallchildren()? A function useful when replacing elements /****************************************************** * removeallchildren(nodeid) * Utility to remove all children from an element */ function removeallchildren(nodeid) { var node = document.getelementbyid(nodeid); if (node && node.childnodes && node.removechild) { while (node.haschildnodes()) node.removechild(node.firstchild); } }

83 Adding some AJAX Get Shoutbox content through AJAX Call the method during initialization /****************************************************** * Shoutbox.init ( ) * Initialize the shoutbox */ Shoutbox.init = function () { var shoutbox = document.getelementbyid('shoutbox'); // Get the content for our shoutbox Shoutbox.requestUpdate(); // Add an onclick handler to the first title var title = YAHOO.util.Dom.getElementsByClassName ('title',undefined, shoutbox)[0];

84 Adding some AJAX Get Shoutbox content through AJAX Clear out our old method <tmpl_if chat><ul></ul> <script type= text/javascript > <tmpl_loop chat> Shoutbox.addChatRow( <tmpl_var timestamp>, <tmpl_var from escape= JS >, <tmpl_var bodytext escape= JS > ); </tmpl_loop> </script></tmpl_if>

85 Adding some AJAX Get Shoutbox content through AJAX Clear out our old method <div id="shoutbox"> <a href="#" class="title"> Shoutbox </a> <ul><li></li></ul> <tmpl_var form_start> From: <tmpl_var form_from><br/> Empty container remains as placeholder

86 Result Like earlier, the functionality is the same... Foundation laid for enhanced functionality

87 Background AJAX Periodically request an update from the server That s what asynchronous is all about No expensive page loads Build the layout once, show multiple types of content User interaction to pull only the content they want

88 Periodic Update Add a method to maintain period /****************************************************** * Shoutbox.doAutoUpdate ( ) * Start the timer to auto update the shoutbox. Request an * update if the shoutbox is opened. */ Shoutbox.doAutoUpdate = function () { // Start another timeout to keep the chain going Shoutbox.updateTimeout = settimeout(shoutbox.doautoupdate, 4000); if (!Shoutbox.opened) { return; }

89 Periodic Update Add a method to maintain period First call starts, subsequent calls maintain Shoutbox.doAutoUpdate = function () { // Start another timeout to keep the chain going Shoutbox.updateTimeout = settimeout(shoutbox.doautoupdate, 4000); if (!Shoutbox.opened) { return; } else { Shoutbox.requestUpdate(); } };

90 Periodic Update Add a method to maintain period Use our saved state Shoutbox.doAutoUpdate = function () { // Start another timeout to keep the chain going Shoutbox.updateTimeout = settimeout(shoutbox.doautoupdate, 4000); if (!Shoutbox.opened) { return; } else { Shoutbox.requestUpdate(); } };

91 Periodic Update Add a method to maintain period Kick off the festivities return; } else { Shoutbox.requestUpdate(); } }; // Start the timer when the Shoutbox is ready YAHOO.util.Event.onContentReady( 'shoutbox', Shoutbox.doAutoUpdate );

92 Periodic Update Add a method to maintain period Clean up after thyself /****************************************************** * Shoutbox.init ( ) * Initialize the shoutbox */ Shoutbox.init = function () { var shoutbox = document.getelementbyid('shoutbox'); // Get the content for our shoutbox Shoutbox.requestUpdate(); // Add an onclick handler to the first title var title = YAHOO.util.Dom.getElementsByClassName ('title',undefined, shoutbox)[0];

93 Periodic Update Add a method to maintain period Clean up after thyself /****************************************************** * Shoutbox.init ( ) * Initialize the shoutbox */ Shoutbox.init = function () { var shoutbox = document.getelementbyid('shoutbox'); // Add an onclick handler to the first title var title = YAHOO.util.Dom.getElementsByClassName ('title',undefined, shoutbox)[0]; YAHOO.util.Event.addListener(title, 'click', Shoutbox.eventToggleView);

94 Result As new rows are added to the Shoutbox, we get updated without having to do anything Keep track of the conversation without leaving the page

95 Asynchronous Forms As much awesome as one should ingest in a single sitting Process a form without leaving the page YUI makes it easy!

96 Asynchronous Forms Make an event handler that sends an AJAX request /****************************************************** * Shoutbox.handleSubmit ( event ) * Handle the shoutbox form submit. Submit the form and * refresh the data. */ Shoutbox.handleSubmit = function (e) { // Stop the browser from handling the submit YAHOO.util.Event.preventDefault(e); var shoutbox = document.getelementbyid('shoutbox'); var form = shoutbox.getelementsbytagname("form")[0]; // Get the form and send the data off var shoutbox = document.getelementbyid('shoutbox'); var form = shoutbox.getelementsbytagname("form")[0];

97 Asynchronous Forms Make an event handler that sends an AJAX request Shoutbox.handleSubmit = function (e) { // Stop the browser from handling the submit YAHOO.util.Event.preventDefault(e); // Get the form and send the data off var shoutbox = document.getelementbyid('shoutbox'); var form = shoutbox.getelementsbytagname("form")[0]; YAHOO.util.Connect.setForm(form); var callback = { success: function (o) { // Clear the form form.bodytext.value = ""; if (form.from && form.from.value) { form.from.value = "";

98 Asynchronous Forms Make an event handler that sends an AJAX request Shoutbox.handleSubmit = function (e) { // Stop the browser from handling the submit YAHOO.util.Event.preventDefault(e); // Get the form and send the data off var shoutbox = document.getelementbyid('shoutbox'); var form = shoutbox.getelementsbytagname("form")[0]; YAHOO.util.Connect.setForm(form); var callback = { success: function (o) { // Clear the form form.bodytext.value = ""; if (form.from && form.from.value) { form.from.value = "";

99 Asynchronous Forms Make an event handler that sends an AJAX request var callback = { success: function (o) { // Clear the form form.bodytext.value = ""; if (form.from && form.from.value) { form.from.value = ""; } Shoutbox.requestUpdate(); }, failure: function (o) { alert("failed to submit! Try again!"); } };

100 Asynchronous Forms Make an event handler that sends an AJAX request failure: function (o) { alert("failed to submit! Try again!"); } }; YAHOO.util.Connect.asyncRequest( "POST", Shoutbox.url, callback ); };

101 Asynchronous Forms Attach the event handler to the form /****************************************************** * Shoutbox.init ( ) * Initialize the shoutbox */ Shoutbox.init = function () { var shoutbox = document.getelementbyid('shoutbox'); // Add an onsubmit handler to the form var form = shoutbox.getelementsbytagname("form")[0]; YAHOO.util.Event.addListener( form, 'submit', Shoutbox.handleSubmit ); // Set the initial state All done without touching our HTML!

102 More Connection Set a timeout The timeout property of the callback object Asynchronous file upload Will Just Work(tm) More custom events start, complete, success, failure, more...

103 More Connection Transaction state YAHOO.util.Connect.asyncRequest() returns an object Store it and check its status Stop running requests until the first is done Abort a running request

104 Result Whatever page our Shoutbox may be on we will be able to chat without leaving our page AssetProxy, Page Layout, Folder

105 Wrapping Up You ve Come a Long Way, Baby

106 Summary YUI DOM Component Handles DOM incompatibilities between browsers YUI Event Component Handles Event incompatibilities between browsers More efficient / intuitive interface to events

107 Summary YUI Animation Component Flashy special effects Improve the user experience YUI Connection Component AJAX (XmlHttpRequest) A magical world of usability

108 After YUI Documentation Current version used by your WebGUI Latest version released by Yahoo

109 More Resources Resources on browser compatibilities and capabilities Firebug - JavaScript, CSS, HTML debugging tool

110 Questions?

E ECMAScript, 21 elements collection, HTML, 30 31, 31. Index 161

E ECMAScript, 21 elements collection, HTML, 30 31, 31. Index 161 A element, 108 accessing objects within HTML, using JavaScript, 27 28, 28 activatediv()/deactivatediv(), 114 115, 115 ActiveXObject, AJAX and, 132, 140 adding information to page dynamically, 30, 30,