Hacking with YUI

1
Hacking with YUI
03.17.2009 Jenny Han Donnelly
2
YUI for building rich, interactive
applications....

• Send and receive data
• Build interfaces
• Display data
• Edit data

3
YUI for Sending Receiving Data

• Connection Manager
• Get Utility
• DataSource

• In-page AJAX transactions with XmlHttpRequest
• Dynamically loaded cross-domain script and CSS
• Managed data retrieval with caching, polling, and
  widget normalization

4
YQL Data
5
YQL Data with YUI Get Utility

• YAHOO.util.Get.script("http//query.yahooapis.com/
  v1/public/yql?...formatjsoncallbackcbfunc")
• var cbfunc function(o)

6
YQL Data
7
YQL Data with YUI Get Utility

• YAHOO.util.Get.script("http//query.yahooapis.com/
  v1/public/yql?...formatjsoncallbackcbfunc")
• var cbfunc function(o)
• if (o.query.results.channel)
• var data o.query.results.channel,
• div YAHOO.util.Dom.get("myOutput")
• div.innerHTML"lth6gt"data.description"lt/
  h6gt"
• myOutput.innerHTML"ltpgt"data.item.descri
  ption "lt/pgt"

8
YQL Data with YUI Get Utility
9

• YUI for
• Building Interfaces

10
CSS Foundation

• Reset
• Base
• Fonts
• Grids
• YUI skinsltbody class"yui-skin-sam"gt

11
Dialog

• var myDlg new YAHOO.widget.SimpleDialog("myConta
  iner",
• fixedcenter true,
• buttons
• text"Totally!", handlerfunction()
  
• this.hide()
• ,
• text"Not Yet...",
  handlerfunction()
• this.hide()
• , isDefaulttrue
• )
• myDlg.setHeader("What is your Hack status?")
• myDlg.setBody("Are you ready to ltemgtrocklt/emgt the
  Hack?")
• myDlg.render()

12
(No Transcript)
13
A Modal Dialog

• var myDlg new YAHOO.widget.SimpleDialog("myConta
  iner",
• fixedcenter true,
• modal true,
• close false,
• visible false
• )
• myDlg.setBody("Loading, please wait....")
• myDlg.render()
• // Show when ready
• myDlg.show()
• // Hide when ready
• setTimeout(function()
• myDlg.hide()
• , 3000)

14
(No Transcript)
15
TabView
16
TabView

• var tabView new YAHOO.widget.TabView()
• tabView.addTab( new YAHOO.widget.Tab(
• label 'lorem',
• content 'ltpgtLorem ipsum...lt/pgt',
• active true
• ))
• ...
• tabView.addTab( new YAHOO.widget.Tab(
• label 'dolor',
• content 'ltform action""gtltfieldsetgtltlegendgtL
  orem Ipsumlt/legendgtltlabel for"foo"gt ltinput
  id"foo" name"foo"gtlt/labelgtltinput type"submit"
  value"submit"gtlt/fieldsetgtlt/formgt'
• ))
• tabView.appendTo('myContainer')

17
TabView
18
Menu
19
Layout Manager
20
YUI for Displaying Data
21
Charts
22
TreeView
23
Calendar
24
DataTable

• // Server outputs an HTML table
• ltdiv id"myContainer"gt
• lttable id"myTable"gt
• lttheadgt
• lttrgt
• ltthgtNamelt/thgtltthgtQuizlt/thgtltthgtTestlt/thgtltthgtTer
  m Paperlt/thgt
• lt/trgt
• lt/theadgt
• lttbodygt
• lttrgtlttdgtAdamslt/tdgtlttdgt88lt/tdgtlttdgt99lt/tdgtlttdgt94
  lt/tdgtlt/trgt
• lttrgtlttdgtBakerlt/tdgtlttdgt83lt/tdgtlttdgt93lt/tdgtlttdgt87
  lt/tdgtlt/trgt
• ...
• lt/tbodygt
• lt/tablegt
• lt/divgt

25
DataTable
26
DataTable

• // Enhance your boring HTML into a DataTable
  widget
• var myDS new YAHOO.util.LocalDataSource(
• YAHOO.util.Dom.get("myTable"))
• myDS.responseSchema fields
• key"Name",
• key"Quiz", parser"number",
• key"Test", parser"number",
• key"Paper", parser"number"
• var myCols key"Name",key"Quiz",key"T
  est",key"Paper"
• var myDT new YAHOO.widget.DataTable(
• "myContainer", myCols, myDS)

27
DataTable

• // Add more functionality
• var formattingFn function()
• var myCols key"Name", sortabletrue,key"
  Quiz", hiddentrue,key"Test",
  resizeabletrue,key"Paper",
  formatterformattingFn

28
DataTable
29
YUI for Modifying Data
30
Connection Manager

• var myForm YAHOO.util.Dom.get('myForm')
• YAHOO.util.Connect.setForm(myForm)
• YAHOO.util.Connect.asyncRequest('POST',
  './submitHandler.php', success function(o),
  failure function(o) )

31
Dialog
32
DataTable
33
Rich Text Editor
34
Calendar

• // Users can select dates easily
• var myCalendar new YAHOO.widget.Calendar("myCont
  ainer")
• myCalendar.selectEvent.subscribe(
• function(type, args)
• var year args000,
• month args001,
• date args002
• alert("You selected " month "/"
  date "/" year)
• )
• myCalendar.render()

35
Calendar
36
Resources
37
YDN Userguides, Examples, API
Docshttp//developer.yahoo.com/yui/
38
YUI Dependency Configuratorhttp//developer.yahoo
.com/yui/articles/hosting/
39
YUI CSS Grids Builderhttp//developer.yahoo.com/y
ui/grids/builder/
40

• User Group
• yui-users_at_yahoo-inc.com

41
Photo Credits

• http//www.sxc.hu/browse.phtml?fviewid207291
• http//www.sxc.hu/photo/24508
• http//www.sxc.hu/photo/983153
• http//www.sxc.hu/photo/1001964
• http//www.flickr.com/photos/sscornelius/484528233
  /
• http//www.sxc.hu/photo/1005800
• http//www.flickr.com/photos/ian_munroe/3132594347
  
• http//www.sxc.hu/photo/843641
• http//www.sxc.hu/photo/960692