Upload
jinho-jung
View
1.738
Download
0
Embed Size (px)
DESCRIPTION
2009.1.31 야후 매쉬업 캠프 YUI 활용 - 김수성
Citation preview
YUI(Yahoo User Interface Library)
2009.01.31
Suseong Kim
Indroduction
• What’s YUI?
• Component List
• Demo
• Practice
• QA
2007 년 YDN 의 API현황 설문
0 20 40 60 80 100 120 140 160 180
Shopping
Upcoming
Search Marketing
Desktop Widgets
Pipes
Messenger
Answers
Traffic
Address Book
Weather
del.ico.us
Geocoding
Calendar
News
BBAuth
Flickr
Maps
Search
YUI
Number of Mentions*Source: YDN website survey, 7/31/07; n=205* Mentions for “must have” + “nice to have”
Services not asked• Video• Groups• Mobile• Ad network• Music• MyBlogLog• Finance• Sports• Real Estate• Local• Travel
= notable
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/
YUI 란?
• 장점
– 크로스 브라우징을 지원한다 ( ie,firefox,safari,opera )
– 오픈소스이므로 Customizing 이 가능하다.
– 타 open javascript library 보다 다양한 component 들이 존재하여configuration 만의 조작으로 복잡한 javascript action 을 쉽게구현할수 있다.
– 소스 검증이 된 안정된 소스를 제공한다.
– Library 문서와 예제가 다양하다.
• 단점– 단순한 기능의 yui library 하나를 사용하더라도 참조되는 js
파일을 참조해야만 한다. (Default : yahoo,dom,event)
A-Grade Browser Support
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
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)
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 사용)
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
Practice
Thanks!