1. Yahoo! UI Library Ajax Engineer, Dec 30th, 2006 F2E–

2. Yahoo! User Interface Library Grid : CSS Calendar : TabView : Connection Manager : Ajax Agenda

3. Introduction to Yahoo! User Interface Library (YUI) YUI Library CSS Tools: –CSS Reset –CSS Fonts –CSS Grids YUI Library Utilities: –The YAHOO Global Object –Event Utility –DOM CollectionDOM –Connection Manager Ajax –Drag and Drop Utility –Animation Utility YUI Library Controls: –AutoComplete –Calendar –Container / –Logger –Menu –Slider –TabView –TreeView

4. Yahoo! UI Library : CSS Yahoo! UI Library : CSS Header Footer Prim. Sec.

5. Yahoo! UI Library CSS Tools : The Basic 1. DocType : 2. YUI ( ) CSS :

6. Yahoo! UI Library CSS Tools : Grid HTML :

7. Yahoo! UI Library CSS Tools : Grid HTML :

8. Yahoo! UI Library CSS Tools : Grid HTML :

9. Yahoo! UI Library CSS Tools : Grid

10. (id) : #doc - 750px centered (good for 800x600) #doc2 - 950px centered (good for 1024x768) #doc3 - 100% fluid (good for everybody) #doc-custom - an example of a custom page width (class) :.yui-t1 - Two columns, narrow on left, 160px.yui-t2 - Two columns, narrow on left, 180px.yui-t3 - Two columns, narrow on left, 300px.yui-t4 - Two columns, narrow on right, 180px.yui-t5 - Two columns, narrow on right, 240px.yui-t6 - Two columns, narrow on right, 300px.yui-t7 - One full-width column

11. Header & Footer 1. #hd Header – Flash 2. #ft Footer – 3. CSS 4. CSS 5. CSS

12. Adding Content 1. 2. id 3. CSS: 4. CSS: Layered Semantic Markup (LSM) CSS HTML Accessibility & SEO

13. Yahoo! UI Library Controls : Calendar 1. CSS : 2. container

14. Yahoo! UI Library Controls : Calendar 3.Javascript : var showCalender = function() { var cal = new YAHOO.widget.Calendar('cal','cal-con', {iframe:false}); // Date labels for localize cal.cfg.setProperty("MONTHS_LONG", [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]); cal.cfg.setProperty("WEEKDAYS_SHORT", [" ", " ", " ", " ", " ", " ", " "]); cal.render(); }; YAHOO.util.Event.onContentReady('cal-con',showCalender);

15. Yahoo! UI Library Controls : Calendar : – – CSS – …

16. Yahoo! UI Library Controls : TabView 1. CSS :

17. Yahoo! UI Library Controls : TabView 2.HTML : tab 1 tab 2 Tab 1 content… Tab 2 content…

18. Yahoo! UI Library Controls : TabView 3.Javascript : var showTabs = function() { var myTabs = new YAHOO.widget.TabView('mytabs'); }; YAHOO.util.Event.onContentReady('mytabs',showTabs);

19. Yahoo! UI Library Controls : TabView 4. CSS : #mytabs.yui-content{ height:10em;padding:1em; background-color:#FFFFFF; } #mytabs{ background:url(images/bg_tech. gif) 100% 0 no-repeat #debede; padding:50px 10px 20px; } #mytabs.yui-nav li a{ cursor:pointer; color:#666666; } #mytabs.yui-nav li em{ float:left;display:block; padding:10px 0 0 10px;height:20px; font-weight:bold; font- size:122%; } #mytabs.yui-nav li i{ float:left;display:block; width:23px;height:30px; } #mytabs.yui-nav li.selected em{ background:url(images/tab_left.g if) 0 0 no-repeat; color:#663333; } #mytabs.yui-nav li.selected i{ background:url(images/tab_right. gif) 100% 0 no-repeat; width:23px;height:30px; } #mytabs.yui-nav li.selected a:hover{ text-decoration:none; cursor:default; }

20. Yahoo! UI Library Controls : TabView : – – Javascript – Ajax – – CSS – … –

21. Yahoo! UI Library Utilities: Connection Manager Ajax : if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) { function XMLHttpRequest() { var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]; for (var i=0; i < arrSignatures.length; i++) { try { var oRequest = new ActiveXObject(arrSignatures[i]); return oRequest; } catch (oError) { //ignore } throw new Error("MSXML is not installed on your system."); } var oRequest = new XMLHttpRequest(); oRequest.open("get", sURL, true); oRequest.onreadystatechange = function() { if(oRequest.readyState == 4) { oCateList.disabled = false; if(oRequest.status == 200 ){ json = "json=" + oRequest.responseText; json = eval(json); } } else { alert(oRequest.statusText); oGameList.options[0] = new Option(" ",0); } YUI ( !!!): var callback = { success: function(o) { document.getElementById(someEl).innerHTML = o.responseText; } var connObj = YAHOO.util.Connect.asyncRequest('GET',file.php, callback);

22. Ajax Example : Article List & Content

23. Ajax Basic ClientServer HTML Javascript Server Side (PHP) Database 1.Event2.XHR 3. 4.Response Data 5.

24. YUI Connection Manager : Ajax YUI Connection Manager : Ajax HTML get_list.php AutoComplete Calendar Container Logger Menu Slider Event......

25. Connection Manager : – Javascript var showList = function() { var sUrl = 'get_list.php' var dListModule = document.getElementById('article-list'); var dUl = dListModule.getElementsByTagName('ul')[0]; var responseSuccess = function(o){ dUl.innerHTML = o.responseText; } var responseFailure = function(o){ dUl.innerHTML = ' Fail to load list!! '; }; var callback = { success:responseSuccess, failure:responseFailure }; var ajax = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback, null); }; YAHOO.util.Event.onContentReady('article-list',showList);

26. YUI Connection Manager : Ajax YUI Connection Manager : Ajax HTML get_content.php …. ….

27. Connection Manager : - Javascript var responseSuccess = function(o){ dUl.innerHTML = o.responseText; var cLinks = dUl.getElementsByTagName('a'); YAHOO.util.Event.addListener(cLinks,'click',getContent); } var sUrlContent = 'get_content.php?id='; var getContent = function(e) { var transaction = YAHOO.util.Connect.asyncRequest('GET', sUrlContent+this.id, callbackContent, null); YAHOO.util.Event.stopEvent(e); };

28. Connection Manager : – Javascript callback var dContentDiv = document.getElementById('article-content'); var responseSuccessContent = function(o){ dContentDiv.innerHTML = o.responseText; } var responseFailureContent = function(o){ dContentDiv.innerHTML = ' Fail to load content!! '; }; var callbackContent = { success:responseSuccessContent, failure:responseFailureContent };

29. YUI http://developer.yahoo.com/yui/ http://developer.yahoo.com/yui/ http://www.class2u.com Thank you!