Your SlideShare is downloading. ×
YUI Mashup Camp
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

YUI Mashup Camp

1,683
views

Published on

2009.1.31 야후 매쉬업 캠프 …

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

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,683
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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!

×