2009.1.31 야후 매쉬업 캠프 YUI 활용 - 김수성

1. YUI
(Yahoo User Interface Library)
2009.01.31
Suseong Kim

2. Indroduction
• What’s YUI?
• Component List
• Demo
• Practice
• QA

3. 2007 년 YDN 의 API현황 설문
YUI
Search
Maps
Flickr
BBAuth
News
Calendar Services not asked
• Video
Geocoding
• Groups
del.ico.us • Mobile
• Ad network
Weather
• Music
Mail • MyBlogLog
• Finance
Address Book
• Sports
Traffic • Real Estate
• Local
Answers
• Travel
Messenger
Pipes
Desktop Widgets
= notable
Search Marketing
Upcoming
Shopping
0 20 40 60 80 100 120 140 160 180
Source: YDN website survey, 7/31/07; n=205 Number of Mentions*
* Mentions for “must have” + “nice to have”

4. YUI 란?
• YUI (Yahoo User Interface Library)
– 자바스크립트로 작성된 오픈소스로써 웹 브라우져에서
다이나믹한 유저 액션을 support 하는 자바스크립트
라이브러리이다.
– 2.0 초기버젼에는 calendar, container, slider, animation,
drag&drop, autocomplete, dialog, treeview, calendar 등의 20
여개 component를 지원하였으며, 최신 stable 버젼 2.6.0
버젼에는 Uploader,tabview,Json,Chart,Profiler,LayoutManager
등의 40여종의 많은 component 들의 API를 제공하고 있다.
– YUI3 : 2.x 버젼과는 호환이 되지 않은 새로운 코드타입의 YUI
3가 올해 정식 release 를 할 계획이다.
http://developer.yahoo.com/yui/3/

5. YUI 란?
• 장점
– 크로스 브라우징을 지원한다 ( ie,firefox,safari,opera )
– 오픈소스이므로 Customizing 이 가능하다.
– 타 open javascript library 보다 다양한 component 들이 존재하여
configuration 만의 조작으로 복잡한 javascript action 을 쉽게
구현할수 있다.
– 소스 검증이 된 안정된 소스를 제공한다.
– Library 문서와 예제가 다양하다.
• 단점
– 단순한 기능의 yui library 하나를 사용하더라도 참조되는 js
파일을 참조해야만 한다. (Default : yahoo,dom,event)

6. A-Grade Browser Support

7. Reference & Example Link
• Website
– http://developer.yahoo.com/yui/
• Library
– http://developer.yahoo.com/yui/docs/
• Example
– http://developer.yahoo.com/yui/examples/
• Cheat Sheet
– http://yuiblog.com/assets/pdf/cheatsheets/animation.pdf

8. Component List
• Core
– Yahoo Object
 YUI 의 가장 상위에 존재하는 객체로써 “YAHOO” 객체로 사용된다.
 YAHOO.namespace(“servicename”); 형식의 namespace 담당
 Class 관련된 Method(class extend) 와 데이타 유효성(isArray,isboolean 등) 체크 관련
Method가 존재
– Dom
 YAHOO.util.Dom 객체로 사용된다.
 Javascript 의 모든 Dom Action 을 담당한다.
– Event
 YAHOO.util.Event 객체로 사용된다.
 Window.event 와 같은 브라우져상의 모든 event 담당.(mouse,keyboard,load)
– Yahoo-dom-event
 Yahoo,dom,event 는 거의 모든 객체에 참조되는 파일로 주로 3개의 파일을 하나로
관리한다. (http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-
event.js)

9. Component List
• Component/Control/Widget
– Logger
YUI action 에 대해 다양한 debug 모드의 log 를 제공.

– Connection
Ajax 의 모든 액션을 담당.

– Animation
Element의 사이즈,칼라,위치,투명도 조정

– Drag and Drop
Element 를 mouse 를 통해 원하는 위치로 이동

– Slider
지정된 범위 안에서 Element 를 좌우 또는 상하로 드래그

– Resize
Element 를 mouse 를 통해 원하는 사이즈로 드래그

– Container
Tooltip,loading bar,Dialog box 와 같은 팝업레이어

– Editor
HTML 에디터

– Chart
User Data 를 입력받아 다양한 그래프로 출력 (flash 사용)

– Uploader
Multi file uploader 로 파일업로드 현황을 UI 로 확인(flash 사용)


10. Demo
• Component/Control/Widget
– Logger
http://localhost/yui-demo/logger.html

– Connection
http://localhost/yui-demo/connection.html

– Animation
http://localhost/yui-demo/animation.size.html

http://localhost/yui-demo/animation.color.html

http://localhost/yui-demo/animation.motion.html

– Drag and Drop
http://localhost/yui-demo/drag.html

– Resize
http://localhost/yui-demo/resize.html

– Slider
http://localhost/yui-demo/slider.html

– Container
http://localhost/yui-demo/container.html

– Editor
http://localhost/yui-demo/editor.html

– Chart
http://localhost/yui-demo/chart.html

– Uploader
http://localhost/yui-demo/uploader.html


11. Practice

12. Thanks!