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

Mail

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!