SlideShare a Scribd company logo
AJAX by Examples
馮彥文
tempofeng@yahoo.com
2007/03/23
About Me

• 馮彥文
• Enthusiastic Programmer
• 隨想行動科技, Founder
           www.willmobile.com
• Blog
           http://www.pocketshark.com/blog/page/tempo
           Google: run tempo run
• Javaworld.com.tw
           tempo
• Email
           mailto: tempofeng@yahoo.com
2007/4/2               (c) willmobile Inc 2006. All rights reserved.   2
參與社群活動
• HappyWeb
           http://happyweb.tw
           新網站相關聚會,每月一次
• Java User Group
           http://www.javaworld.com.tw
           Java使用者聚會,每月一次
• Ubi-Sunrise
           http://groups.google.com.tw/group/Ubi-Sunrise
           各式技術討論,每月一次


2007/4/2                (c) willmobile Inc 2006. All rights reserved.   3
Questions
• 選用的執行平台
           Windows
           Linux
           Others
• 選用的程式語言
           PHP
           .net
           Java
           Ruby
           Others

2007/4/2             (c) willmobile Inc 2006. All rights reserved.   4
Questions
var a = 3;
a = function() {
  return 4;
}

• a=?
           3
           4
           不知道
           以上皆非




2007/4/2           (c) willmobile Inc 2006. All rights reserved.   5
Questions
• 是否已經開始營運?
           是
           還在開發
           還沒開發




2007/4/2          (c) willmobile Inc 2006. All rights reserved.   6
Agenda

• AJAX
• AJAX Platform
           Prototype, Dojo, …
           GWT, ZK
           .net, JSP, JSF, …
• AJAX By Examples



2007/4/2              (c) willmobile Inc 2006. All rights reserved.   7
AJAX

• Asynchronous Javascript And XML
           非同步的 JavaScript 與 XML 網站存取




2007/4/2           (c) willmobile Inc 2006. All rights reserved.   8
傳統 Web Applications




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   9
AJAX Web Applications




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   10
AJAX Examples

• Yahoo Mail
           http://mail.yahoo.com
• 推推王
           http://funp.com
• Digg
           http://digg.com




2007/4/2              (c) willmobile Inc 2006. All rights reserved.   11
AJAX

• Roller skates for the Web ~Bruce Stirling
           連續,不中斷的網站體驗
           • 提升使用網站的流暢度
           • 提供更直覺的操作介面
           • 表面功夫
           像真實生活的直排輪,不一定適用於所有狀況
           • Browser History
           • Search Engine 搜尋不到 AJAX 內容
           • 瀏覽器的相容性問題



2007/4/2            (c) willmobile Inc 2006. All rights reserved.   12
AJAX Frameworks

• Javascript Libraries
           Prototype, Dojo, YUI, …
• Javascript Frameworks
           GWT, ZK, …
• Web Frameworks
           asp.net, java struts, …
• Flash


2007/4/2               (c) willmobile Inc 2006. All rights reserved.   13
Javascript Libraries

• Prototype
           http://www.prototypejs.org/
           以簡化 Javascript 開發為目標
           基礎的工具 library, 很多其他的 libraries 都建
           構在這上面
           • http://script.aculo.us/
           提供
           • DOM Manipulation
           • XHR (AJAX) Functions
           • JSON
2007/4/2                (c) willmobile Inc 2006. All rights reserved.   14
Javascript Libraries
• Dojo
           http://dojotoolkit.org/
           包羅萬象的 library/framework, 幾乎甚麼都有提供, 自
           成一格
           提供
           •   DOM Manipulation
           •   Events
           •   XHR (AJAX) Functions
           •   Widget Framework
           •   Offline
           •   More ….

2007/4/2                  (c) willmobile Inc 2006. All rights reserved.   15
Javascript Libraries

• YUI (Yahoo UI Libraries)
           http://developer.yahoo.com/yui/
           以 UI 元件為主, 但同時有工具與網站版型等網
           站開發需要的資源
           提供
           • 一大堆 UI 元件
           • CSS頁面板型




2007/4/2           (c) willmobile Inc 2006. All rights reserved.   16
Javascript Framework

• GWT (Google Web Toolkit)
           http://code.google.com/webtoolkit/
           利用 Java 開發 Javascript 應用
            • 使用 Java 開發環境
            • 物件導向
            • 型態檢查
           提供
            • Client/Server RPC 呼叫
            • UI 元件
            • 其他很多東西, 足夠做個 Gmail 出來
2007/4/2              (c) willmobile Inc 2006. All rights reserved.   17
Web Frameworks

• asp.net Framework
           整合 AJAX 元件至原本的 asp.net 原件庫中
           保留原來的開發模式
• Java Framework
           Struts, JSP, JSF 都有專屬的 AJAX 元件
• 與GWT不同處
           GWT是client 端執行 + RPC, 以上
           Frameworks 是將UI 元件 AJAX 化

2007/4/2           (c) willmobile Inc 2006. All rights reserved.   18
AJAX by Examples

•   Digg Spy
•   Continuous Paging
•   Auto-Complete
•   Drag & Drop
•   Slider
•   Slide Shows
•   Animations
•   Tooltips
• More

2007/4/2        (c) willmobile Inc 2006. All rights reserved.   19
Digg Spy




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   20
Digg Spy

• 從天而降的最新資訊
• Demo
           http://www.digg.com/spy
• Code
           http://leftlogic.com/info/articles/jquery_spy




2007/4/2               (c) willmobile Inc 2006. All rights reserved.   21
Continuous Paging




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   22
Continuous Paging

• 列表且自動動態讀取尚未讀取到的部份
• Demo
           http://mail.yahoo.com.tw
• Code
           http://openrico.org/rico/livegrid.page
           http://www.extremecomponents.org/extremesi
           te/index.jsp



2007/4/2              (c) willmobile Inc 2006. All rights reserved.   23
Auto-Complete




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   24
Auto-Complete

• 自動完成使用者在 textfield 填入的資訊
• Demo
           http://labs.google.com/suggest
• Code
           http://demo.script.aculo.us/ajax/autocompleter




2007/4/2              (c) willmobile Inc 2006. All rights reserved.   25
Drag & Drop




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   26
Drag & Drop

• 網頁上的拖拉功能
• Demo
           http://www.netvibes.com
           http://projects.backbase.com/RUI/shop.html
• Code
           http://openrico.org/rico/demos.page?demo=ric
           o_drag_and_drop_custom_draggable
           http://demo.script.aculo.us/shop
           http://www.dojotoolkit.org/
2007/4/2              (c) willmobile Inc 2006. All rights reserved.   27
Slider




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   28
Slider

• 透過 slider 篩選資訊
• Demo
           http://www.kayak.com/
           http://www.backbase.com/demos/travel/
• Code
           http://wiki.script.aculo.us/scriptaculous/show/S
           liderDemo



2007/4/2               (c) willmobile Inc 2006. All rights reserved.   29
Slide Shows




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   30
Slide Shows

• Demo
           http://www.bubbleshare.com/
• Code
           http://billwscott.com/carousel/
           http://www.huddletogether.com/projects/lightb
           ox2/
           http://www.doknowevil.net/litebox
           http://www.dojotoolkit.org/

2007/4/2              (c) willmobile Inc 2006. All rights reserved.   31
Animations




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   32
Animations

• Demo
           http://www.zvents.com/
• Code
           http://wiki.script.aculo.us/scriptaculous/show/
           CombinationEffectsDemo
           http://openrico.org/rico/demos.page?demo=ric
           o_effect_position
           http://www.dojotoolkit.org/


2007/4/2              (c) willmobile Inc 2006. All rights reserved.   33
Tooltips




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   34
Tooltips

• Demo
           http://www.marketwatch.com/
• Code
           http://tooltip.crtx.org/
           http://www.dojotoolkit.org/




2007/4/2               (c) willmobile Inc 2006. All rights reserved.   35
Fading




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   36
Fading

• Demo
           http://www.tadalist.com/
• Code
           http://www.axentric.com/posts/default/7




2007/4/2              (c) willmobile Inc 2006. All rights reserved.   37
Widget




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   38
Widget

• Demo
           http://happyweb.tw
• Code
           http://drnicwilliams.com/2006/11/21/diy-
           widgets/




2007/4/2              (c) willmobile Inc 2006. All rights reserved.   39
Unit Test & Debugging

• Unit Test !!!
           JsUnit
            • http://www.jsunit.net/
• Debugging
           Firebug
            • https://addons.mozilla.org/en-
              US/firefox/addon/1843




2007/4/2                 (c) willmobile Inc 2006. All rights reserved.   40
太多選擇了, 我該怎麼辦?

• 先從熟悉的 framework 開始, 一步一步新增
  AJAX 功能
• 同時考慮新增 AJAX 功能的優點與缺點
• 分割網站提供不同功能




2007/4/2   (c) willmobile Inc 2006. All rights reserved.   41

More Related Content

What's hot

20090418 イケテルRails勉強会 第1部Rails編
20090418 イケテルRails勉強会 第1部Rails編20090418 イケテルRails勉強会 第1部Rails編
20090418 イケテルRails勉強会 第1部Rails編mochiko AsTech
 
Silent Running Side E Appendix
Silent Running Side E AppendixSilent Running Side E Appendix
Silent Running Side E AppendixShunsaku Kudo
 
Tadlock Donovan Week 4 Final PPP Slide Show
Tadlock Donovan Week 4 Final PPP Slide ShowTadlock Donovan Week 4 Final PPP Slide Show
Tadlock Donovan Week 4 Final PPP Slide ShowDonovan Tadlock
 
The Django ORM: Common patterns, gotchas, and neat tricks
The Django ORM: Common patterns, gotchas, and neat tricksThe Django ORM: Common patterns, gotchas, and neat tricks
The Django ORM: Common patterns, gotchas, and neat tricksJoey Wilhelm
 
The New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate Network
The New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate NetworkThe New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate Network
The New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate Networkauexpo Conference
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)Stoyan Stefanov
 
Ziering Cody Ayahuasca PCP Full Sail University
Ziering Cody Ayahuasca PCP Full Sail UniversityZiering Cody Ayahuasca PCP Full Sail University
Ziering Cody Ayahuasca PCP Full Sail Universitycziering
 
2007 0822 Antelope Php
2007 0822 Antelope Php2007 0822 Antelope Php
2007 0822 Antelope Phpgmaxsonic
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 

What's hot (15)

20090418 イケテルRails勉強会 第1部Rails編
20090418 イケテルRails勉強会 第1部Rails編20090418 イケテルRails勉強会 第1部Rails編
20090418 イケテルRails勉強会 第1部Rails編
 
Silent Running Side E Appendix
Silent Running Side E AppendixSilent Running Side E Appendix
Silent Running Side E Appendix
 
Randle_Scott_4.4
Randle_Scott_4.4Randle_Scott_4.4
Randle_Scott_4.4
 
Tadlock Donovan Week 4 Final PPP Slide Show
Tadlock Donovan Week 4 Final PPP Slide ShowTadlock Donovan Week 4 Final PPP Slide Show
Tadlock Donovan Week 4 Final PPP Slide Show
 
Mi vida
Mi vidaMi vida
Mi vida
 
Mi vida
Mi vidaMi vida
Mi vida
 
Pagines de les fotos
Pagines de les fotosPagines de les fotos
Pagines de les fotos
 
The Django ORM: Common patterns, gotchas, and neat tricks
The Django ORM: Common patterns, gotchas, and neat tricksThe Django ORM: Common patterns, gotchas, and neat tricks
The Django ORM: Common patterns, gotchas, and neat tricks
 
The New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate Network
The New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate NetworkThe New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate Network
The New Rules of Site Architecture - Martin MacDonald, Expedia Affiliate Network
 
High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)High Performance Kick Ass Web Apps (JavaScript edition)
High Performance Kick Ass Web Apps (JavaScript edition)
 
Ziering Cody Ayahuasca PCP Full Sail University
Ziering Cody Ayahuasca PCP Full Sail UniversityZiering Cody Ayahuasca PCP Full Sail University
Ziering Cody Ayahuasca PCP Full Sail University
 
Metrics of Joy
Metrics of JoyMetrics of Joy
Metrics of Joy
 
2007 0822 Antelope Php
2007 0822 Antelope Php2007 0822 Antelope Php
2007 0822 Antelope Php
 
Pedro santana a2
Pedro santana a2Pedro santana a2
Pedro santana a2
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 

Viewers also liked

20 Closing Words, Important Truths 1 Corinthians 16:1-24
20 Closing Words, Important Truths 1 Corinthians 16:1-24 20 Closing Words, Important Truths 1 Corinthians 16:1-24
20 Closing Words, Important Truths 1 Corinthians 16:1-24 Rick Peterson
 
ιστορία
ιστορίαιστορία
ιστορίαaek2161
 
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)taiwanweb20
 
History of geogetown university
History of geogetown universityHistory of geogetown university
History of geogetown universitydklein22
 
Prestige Lane Hospitality Brands Green Inititaives
Prestige Lane Hospitality Brands Green InititaivesPrestige Lane Hospitality Brands Green Inititaives
Prestige Lane Hospitality Brands Green InititaivesEva Magna
 
Site Energy Monitoring Solution
Site Energy Monitoring Solution Site Energy Monitoring Solution
Site Energy Monitoring Solution Minka Grdesic
 
2013 創意思考課程簡介
2013 創意思考課程簡介2013 創意思考課程簡介
2013 創意思考課程簡介NTUST
 
дипломная презентация по увеличению прибыли
дипломная презентация по увеличению прибылидипломная презентация по увеличению прибыли
дипломная презентация по увеличению прибылиIvan Simanov
 
Sjsu chinnese ppt (traditional) 2012
Sjsu chinnese ppt (traditional) 2012Sjsu chinnese ppt (traditional) 2012
Sjsu chinnese ppt (traditional) 2012moejarv
 
Testing the hypothesis
Testing the hypothesisTesting the hypothesis
Testing the hypothesisJen Millan
 
Missions Methods and Motivation
Missions Methods and MotivationMissions Methods and Motivation
Missions Methods and MotivationRick Peterson
 
The Underused Power of Segmentation and CRM Retargeting
The Underused Power of Segmentation and CRM RetargetingThe Underused Power of Segmentation and CRM Retargeting
The Underused Power of Segmentation and CRM RetargetingKissmetrics on SlideShare
 

Viewers also liked (16)

20 Closing Words, Important Truths 1 Corinthians 16:1-24
20 Closing Words, Important Truths 1 Corinthians 16:1-24 20 Closing Words, Important Truths 1 Corinthians 16:1-24
20 Closing Words, Important Truths 1 Corinthians 16:1-24
 
Football Certificate
Football CertificateFootball Certificate
Football Certificate
 
ιστορία
ιστορίαιστορία
ιστορία
 
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)
 
EconGeology3
EconGeology3EconGeology3
EconGeology3
 
History of geogetown university
History of geogetown universityHistory of geogetown university
History of geogetown university
 
Prestige Lane Hospitality Brands Green Inititaives
Prestige Lane Hospitality Brands Green InititaivesPrestige Lane Hospitality Brands Green Inititaives
Prestige Lane Hospitality Brands Green Inititaives
 
Mood4 food
Mood4 foodMood4 food
Mood4 food
 
Site Energy Monitoring Solution
Site Energy Monitoring Solution Site Energy Monitoring Solution
Site Energy Monitoring Solution
 
2013 創意思考課程簡介
2013 創意思考課程簡介2013 創意思考課程簡介
2013 創意思考課程簡介
 
дипломная презентация по увеличению прибыли
дипломная презентация по увеличению прибылидипломная презентация по увеличению прибыли
дипломная презентация по увеличению прибыли
 
Sjsu chinnese ppt (traditional) 2012
Sjsu chinnese ppt (traditional) 2012Sjsu chinnese ppt (traditional) 2012
Sjsu chinnese ppt (traditional) 2012
 
Testing the hypothesis
Testing the hypothesisTesting the hypothesis
Testing the hypothesis
 
건강에는 은퇴란없다-강의제안서
건강에는 은퇴란없다-강의제안서건강에는 은퇴란없다-강의제안서
건강에는 은퇴란없다-강의제안서
 
Missions Methods and Motivation
Missions Methods and MotivationMissions Methods and Motivation
Missions Methods and Motivation
 
The Underused Power of Segmentation and CRM Retargeting
The Underused Power of Segmentation and CRM RetargetingThe Underused Power of Segmentation and CRM Retargeting
The Underused Power of Segmentation and CRM Retargeting
 

Similar to Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)

Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptjeresig
 
yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909Yusuke Wada
 
Øredev 2014
Øredev 2014Øredev 2014
Øredev 2014olataube
 
The Yahoo Open Stack
The Yahoo Open StackThe Yahoo Open Stack
The Yahoo Open StackMegan Eskey
 
Swap Skills I Phone
Swap Skills I PhoneSwap Skills I Phone
Swap Skills I PhoneSwapSkills
 
Rails Cache
Rails CacheRails Cache
Rails Cachewear
 
Working With Rails
Working With RailsWorking With Rails
Working With RailsDali Wang
 
Semantic Web For Distributed Social Networks
Semantic Web For Distributed Social NetworksSemantic Web For Distributed Social Networks
Semantic Web For Distributed Social NetworksDavid Peterson
 
Gmr Highload Presentation Revised
Gmr Highload Presentation RevisedGmr Highload Presentation Revised
Gmr Highload Presentation RevisedOntico
 
Gmr Highload Presentation
Gmr Highload PresentationGmr Highload Presentation
Gmr Highload PresentationOntico
 
Blueprint talk at Open Hackday London 2009
Blueprint talk at Open Hackday London 2009Blueprint talk at Open Hackday London 2009
Blueprint talk at Open Hackday London 2009Ricardo Varela
 
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoCorporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoYusuke Kawasaki
 
Yakov Fain - Design Patterns a Deep Dive
Yakov Fain - Design Patterns a Deep DiveYakov Fain - Design Patterns a Deep Dive
Yakov Fain - Design Patterns a Deep Dive360|Conferences
 

Similar to Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo) (20)

Jslunch6
Jslunch6Jslunch6
Jslunch6
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
Javascript
JavascriptJavascript
Javascript
 
SearchMonkey
SearchMonkeySearchMonkey
SearchMonkey
 
yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909yusukebe in Yokohama.pm 090909
yusukebe in Yokohama.pm 090909
 
Øredev 2014
Øredev 2014Øredev 2014
Øredev 2014
 
Josephj Yui Nctu 2
Josephj Yui Nctu 2Josephj Yui Nctu 2
Josephj Yui Nctu 2
 
The Yahoo Open Stack
The Yahoo Open StackThe Yahoo Open Stack
The Yahoo Open Stack
 
Swap Skills I Phone
Swap Skills I PhoneSwap Skills I Phone
Swap Skills I Phone
 
Rails Cache
Rails CacheRails Cache
Rails Cache
 
Working With Rails
Working With RailsWorking With Rails
Working With Rails
 
T5 Oli Aro
T5 Oli AroT5 Oli Aro
T5 Oli Aro
 
Semantic Web For Distributed Social Networks
Semantic Web For Distributed Social NetworksSemantic Web For Distributed Social Networks
Semantic Web For Distributed Social Networks
 
Gmr Highload Presentation Revised
Gmr Highload Presentation RevisedGmr Highload Presentation Revised
Gmr Highload Presentation Revised
 
Gmr Highload Presentation
Gmr Highload PresentationGmr Highload Presentation
Gmr Highload Presentation
 
Blueprint talk at Open Hackday London 2009
Blueprint talk at Open Hackday London 2009Blueprint talk at Open Hackday London 2009
Blueprint talk at Open Hackday London 2009
 
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 TokyoCorporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
Corporate Perl in Recruit, OpenSocial and Emoji‎ - YAPC::Asia 2009 Tokyo
 
Mobile Marketing Forum - MOOGA
Mobile Marketing Forum - MOOGAMobile Marketing Forum - MOOGA
Mobile Marketing Forum - MOOGA
 
Yakov Fain - Design Patterns a Deep Dive
Yakov Fain - Design Patterns a Deep DiveYakov Fain - Design Patterns a Deep Dive
Yakov Fain - Design Patterns a Deep Dive
 
JSON Viewer XPATH Workbook
JSON Viewer XPATH WorkbookJSON Viewer XPATH Workbook
JSON Viewer XPATH Workbook
 

Recently uploaded

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsExpeed Software
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...Product School
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Alison B. Lowndes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2DianaGray10
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...Product School
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesThousandEyes
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupCatarinaPereira64715
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀DianaGray10
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Product School
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
 

Recently uploaded (20)

Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
In-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT ProfessionalsIn-Depth Performance Testing Guide for IT Professionals
In-Depth Performance Testing Guide for IT Professionals
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
Exploring UiPath Orchestrator API: updates and limits in 2024 🚀
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 

Web 2.0 架站工具—AJAX By Examples-馮彥文(Tempo)

  • 2. About Me • 馮彥文 • Enthusiastic Programmer • 隨想行動科技, Founder www.willmobile.com • Blog http://www.pocketshark.com/blog/page/tempo Google: run tempo run • Javaworld.com.tw tempo • Email mailto: tempofeng@yahoo.com 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 2
  • 3. 參與社群活動 • HappyWeb http://happyweb.tw 新網站相關聚會,每月一次 • Java User Group http://www.javaworld.com.tw Java使用者聚會,每月一次 • Ubi-Sunrise http://groups.google.com.tw/group/Ubi-Sunrise 各式技術討論,每月一次 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 3
  • 4. Questions • 選用的執行平台 Windows Linux Others • 選用的程式語言 PHP .net Java Ruby Others 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 4
  • 5. Questions var a = 3; a = function() { return 4; } • a=? 3 4 不知道 以上皆非 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 5
  • 6. Questions • 是否已經開始營運? 是 還在開發 還沒開發 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 6
  • 7. Agenda • AJAX • AJAX Platform Prototype, Dojo, … GWT, ZK .net, JSP, JSF, … • AJAX By Examples 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 7
  • 8. AJAX • Asynchronous Javascript And XML 非同步的 JavaScript 與 XML 網站存取 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 8
  • 9. 傳統 Web Applications 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 9
  • 10. AJAX Web Applications 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 10
  • 11. AJAX Examples • Yahoo Mail http://mail.yahoo.com • 推推王 http://funp.com • Digg http://digg.com 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 11
  • 12. AJAX • Roller skates for the Web ~Bruce Stirling 連續,不中斷的網站體驗 • 提升使用網站的流暢度 • 提供更直覺的操作介面 • 表面功夫 像真實生活的直排輪,不一定適用於所有狀況 • Browser History • Search Engine 搜尋不到 AJAX 內容 • 瀏覽器的相容性問題 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 12
  • 13. AJAX Frameworks • Javascript Libraries Prototype, Dojo, YUI, … • Javascript Frameworks GWT, ZK, … • Web Frameworks asp.net, java struts, … • Flash 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 13
  • 14. Javascript Libraries • Prototype http://www.prototypejs.org/ 以簡化 Javascript 開發為目標 基礎的工具 library, 很多其他的 libraries 都建 構在這上面 • http://script.aculo.us/ 提供 • DOM Manipulation • XHR (AJAX) Functions • JSON 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 14
  • 15. Javascript Libraries • Dojo http://dojotoolkit.org/ 包羅萬象的 library/framework, 幾乎甚麼都有提供, 自 成一格 提供 • DOM Manipulation • Events • XHR (AJAX) Functions • Widget Framework • Offline • More …. 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 15
  • 16. Javascript Libraries • YUI (Yahoo UI Libraries) http://developer.yahoo.com/yui/ 以 UI 元件為主, 但同時有工具與網站版型等網 站開發需要的資源 提供 • 一大堆 UI 元件 • CSS頁面板型 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 16
  • 17. Javascript Framework • GWT (Google Web Toolkit) http://code.google.com/webtoolkit/ 利用 Java 開發 Javascript 應用 • 使用 Java 開發環境 • 物件導向 • 型態檢查 提供 • Client/Server RPC 呼叫 • UI 元件 • 其他很多東西, 足夠做個 Gmail 出來 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 17
  • 18. Web Frameworks • asp.net Framework 整合 AJAX 元件至原本的 asp.net 原件庫中 保留原來的開發模式 • Java Framework Struts, JSP, JSF 都有專屬的 AJAX 元件 • 與GWT不同處 GWT是client 端執行 + RPC, 以上 Frameworks 是將UI 元件 AJAX 化 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 18
  • 19. AJAX by Examples • Digg Spy • Continuous Paging • Auto-Complete • Drag & Drop • Slider • Slide Shows • Animations • Tooltips • More 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 19
  • 20. Digg Spy 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 20
  • 21. Digg Spy • 從天而降的最新資訊 • Demo http://www.digg.com/spy • Code http://leftlogic.com/info/articles/jquery_spy 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 21
  • 22. Continuous Paging 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 22
  • 23. Continuous Paging • 列表且自動動態讀取尚未讀取到的部份 • Demo http://mail.yahoo.com.tw • Code http://openrico.org/rico/livegrid.page http://www.extremecomponents.org/extremesi te/index.jsp 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 23
  • 24. Auto-Complete 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 24
  • 25. Auto-Complete • 自動完成使用者在 textfield 填入的資訊 • Demo http://labs.google.com/suggest • Code http://demo.script.aculo.us/ajax/autocompleter 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 25
  • 26. Drag & Drop 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 26
  • 27. Drag & Drop • 網頁上的拖拉功能 • Demo http://www.netvibes.com http://projects.backbase.com/RUI/shop.html • Code http://openrico.org/rico/demos.page?demo=ric o_drag_and_drop_custom_draggable http://demo.script.aculo.us/shop http://www.dojotoolkit.org/ 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 27
  • 28. Slider 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 28
  • 29. Slider • 透過 slider 篩選資訊 • Demo http://www.kayak.com/ http://www.backbase.com/demos/travel/ • Code http://wiki.script.aculo.us/scriptaculous/show/S liderDemo 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 29
  • 30. Slide Shows 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 30
  • 31. Slide Shows • Demo http://www.bubbleshare.com/ • Code http://billwscott.com/carousel/ http://www.huddletogether.com/projects/lightb ox2/ http://www.doknowevil.net/litebox http://www.dojotoolkit.org/ 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 31
  • 32. Animations 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 32
  • 33. Animations • Demo http://www.zvents.com/ • Code http://wiki.script.aculo.us/scriptaculous/show/ CombinationEffectsDemo http://openrico.org/rico/demos.page?demo=ric o_effect_position http://www.dojotoolkit.org/ 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 33
  • 34. Tooltips 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 34
  • 35. Tooltips • Demo http://www.marketwatch.com/ • Code http://tooltip.crtx.org/ http://www.dojotoolkit.org/ 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 35
  • 36. Fading 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 36
  • 37. Fading • Demo http://www.tadalist.com/ • Code http://www.axentric.com/posts/default/7 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 37
  • 38. Widget 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 38
  • 39. Widget • Demo http://happyweb.tw • Code http://drnicwilliams.com/2006/11/21/diy- widgets/ 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 39
  • 40. Unit Test & Debugging • Unit Test !!! JsUnit • http://www.jsunit.net/ • Debugging Firebug • https://addons.mozilla.org/en- US/firefox/addon/1843 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 40
  • 41. 太多選擇了, 我該怎麼辦? • 先從熟悉的 framework 開始, 一步一步新增 AJAX 功能 • 同時考慮新增 AJAX 功能的優點與缺點 • 分割網站提供不同功能 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 41
  • 42. More !!! • Books 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 42
  • 43. More !!! • Tutorials http://www.javapassion.com/ajaxcodecamp/ http://www.symfony-project.com/askeet • Lists http://ajaxpatterns.org/ http://www.dhtmlgoodies.com/index.html http://www.dynamicdrive.com/ • Forums & Blogs http://ajaxian.com/ http://www.javaworld.com.tw 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 43
  • 44. Thank you! 2007/4/2 (c) willmobile Inc 2006. All rights reserved. 44