Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation...
-
Upload
truongkhanh -
Category
Documents
-
view
217 -
download
4
Transcript of Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation...
![Page 1: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/1.jpg)
1
Open Source Web GUI Toolkits
"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it
from me"
Nathan [email protected]
![Page 2: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/2.jpg)
2
Why Web Developers Drink...
Can't get away with knowing one thing A Fairly Typical Web App...
➔ MySQL – Data storage➔ PHP – Business logic➔ Javascript - Interactivity➔ HTML – Presentation stuff➔ CSS – Presentation formatting stuff➔ Images – They are... Purdy...➔ httpd.conf, php.ini, etc.
Problems are liable to pop up at any stage...
![Page 3: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/3.jpg)
3
The Worst Thing. Ever.
Browser Incompatibilities! Follow the rules, still lose Which is right?
➔ Who cares! You gotta make it work anyways!
Solutions More work or less features?
➔ Use browser-specific stuff- Switch via Javascript
➔ Use a subset of HTML that most everyone agrees on
![Page 4: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/4.jpg)
4
Web Application?
Web sites are... OK, but... Boring... Bounce users from page to page Stuff gets messed up easily
➔ Bookmarks? Scary...➔ Back button
![Page 5: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/5.jpg)
5
Why A Web Toolkit?
Pros: Let something else worry about difficult things
➔ Layout issues➔ Session management➔ Browser cross-compatibility➔ Annoying RPC stuff
![Page 6: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/6.jpg)
6
>INSERT BUZZWORD HERE<
Neat web stuff has been happening lately... AJAX “Web 2.0” Google maps Desktop app characteristics on the web...
![Page 7: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/7.jpg)
7
Problem With >BUZZWORDS<
Nice, but... Lots of flux
➔ Technology➔ Expectations of technology
Communications can get tricky Yet another thing to program...
➔ (Correctly)
![Page 8: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/8.jpg)
8
Why A Web Toolkit?
Pros: Let something else worry about difficult things
➔ Communications management➔ Tested Javascript code➔ Toolkit deals with changes, not the programmer
![Page 9: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/9.jpg)
9
My Criteria
Bonuses For... A familiar programming language
➔ Javascript?
Unit test capability➔ Test early, test often, sleep at night
Ability to incrementally introduce toolkit Compatibility with existing application Documentation Compelling Examples
![Page 10: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/10.jpg)
10
Web Toolkits – Common Features
■ Widgets■ Layouts■ Manipulation of page elements
DOM access, etc.
■ Communications XMLHttpRequest JSON
■ Animations
![Page 11: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/11.jpg)
11
GWT – Google Web Toolkit
GWT – Google Web Toolkithttp://code.google.com/webtoolkit/
License: Apache 2.0
![Page 12: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/12.jpg)
12
GWT – Google Web Toolkit
Features: Abstracts presentation from logic
➔ “Widgets” laid out in “Panels”http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.UserInterface.WidgetGallery.html
JUnit integration Develop using familiar Java tools
➔ Eclipse, etc.
Errors are caught during compile, not later Don't necessarily have to use Java to run it It's Google
![Page 13: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/13.jpg)
13
GWT – Google Web Toolkit
Example:
Desktop App Clone Example Projecthttp://code.google.com/webtoolkit/documentation/examples/desktopclone/
![Page 14: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/14.jpg)
14
Dojo
Dojohttp://www.dojotoolkit.com/
License: Academic Free License & BSD
![Page 15: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/15.jpg)
15
Dojo
Features: It does a LOT of stuff
➔ Charting http://archive.dojotoolkit.org/nightly/tests/charting/test_engine.html
➔ 2D vector graphics API
Purely Javascript Widgets
➔ Buttons, spinner, slider, wizard, mapping, SVG clocks, etc.➔ Fisheye http://archive.dojotoolkit.org/nightly/tests/widget/test_FisheyeList.html
Containers➔ Accordian http://archive.dojotoolkit.org/nightly/tests/widget/test_AccordionContainer.html
![Page 16: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/16.jpg)
16
Dojo
Features (continued) Future Developments...
➔ Javascript Linker- Manage your Javascript files- Package and deploy only what Javascript code you really need
Big names backing the project➔ IBM, AOL, OpenLaszlo
DOM? Nah...➔ Good and bad?
![Page 17: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/17.jpg)
17
OpenLaszlo
Open Laszlohttp://www.openlaszlo.org
License: Common Public License
![Page 18: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/18.jpg)
18
OpenLaszlo
Features: Common source, multiple runtimes
➔ Flash http://labs.openlaszlo.org/lps-4.0.pr4/demos/lzpix/app-loader.html?lzr=swf7
➔ DHTML http://labs.openlaszlo.org/lps-4.0.pr4/demos/lzpix/app-loader.html?lzr=dhtml
Many available widgets➔ http://labs.openlaszlo.org/lps-4.0b1/examples/components/style_example.html?lzr=dhtml
LPS – Laszlo Presentation Server➔ Compiles Laszlo code into target runtime➔ Can deploy on any web server
Many future plans➔ New runtimes, tighter integration with Java, etc.
![Page 19: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/19.jpg)
19
OpenLaszlo
Features (continued) Many future plans
➔ More runtimes➔ Operation with Java ME
![Page 20: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/20.jpg)
20
OpenLaszlo
Programming Syntax: Quasi-XML syntax Javascript-ish actions within this quasi-XML format http://www.openlaszlo.org/lps/laszlo-explorer/index.jsp?navset=nav10.xml&bookmark=Introduction
![Page 21: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/21.jpg)
21
Yahoo! User Interface Library
YUI - Yahoo! User Interface Libraryhttp://developer.yahoo.com/yui/
License: BSD
Used In:Yahoo! Mail
Yahoo! TVhttp://tv.yahoo.com/listings
![Page 22: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/22.jpg)
22
Yahoo! User Interface Library
Features Many available widgets Modular Javascript packaging High degree of customization via CSS Events
➔ Timers, mouse clicks, etc.
Connection Manager➔ XMLHttpRequest
Great documentation➔ Cheat Sheets! Whoohoo!➔ Training videos
![Page 23: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/23.jpg)
23
Yahoo! User Interface Library
Features (continued) Debug window Purely Javascript Modular design allows for gradual introduction of
components Emphasis on “Progressive Enhancement”
➔ Accessibility for everybody
Integration with other Yahoo! Services Shares similar syntax with Yahoo! Widgets
![Page 24: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/24.jpg)
24
Yahoo! User Interface Library
Programming Syntax A slider
http://developer.yahoo.com/yui/examples/slider/index.html?mode=dist
![Page 26: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/26.jpg)
26
yui.ext
Features: Extends / Embraces YUI Has complex, pre-canned widgets / components
➔ Data grids
Nice themeing – It looks good! Can pick only components you need
![Page 27: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/27.jpg)
27
yui.ext
Example Image Chooser
➔ Uses JSON to obtain images from a web servicehttp://www.jackslocum.com/blog/2006/12/17/how-to-create-a-reusable-ajax-driven-web-dialog-a-working-example/
![Page 28: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/28.jpg)
28
Others
■ Prototype http://prototype.conio.net/
Ruby on Rails script.aculo.us http://script.aculo.us/
Rico http://openrico.org/
■ Jquery http://jquery.com/
■ Zimbra http://www.zimbra.com/
■ wt http://jose.med.kuleuven.ac.be/wt/Home.fcg
■ By tomorrow there will probably be others...
![Page 29: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/29.jpg)
29
The Future!
Is this good for Linux? I think so?
Is this good for Mobile Devices? Perhaps not quite yet...
Is this good for the end user? Yes and no...
➔ Yes – Better applications➔ No – Confusion over new widgets, where to click, etc.
![Page 30: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/30.jpg)
30
The End
Thats that.
Try one out.
![Page 31: Open Source Web GUI Toolkits - · PDF file"A broad and probably far too shallow presentation on stuff that will probably change 180 degrees by the time you hear about it from me" Nathan](https://reader031.fdocuments.in/reader031/viewer/2022030420/5aa752587f8b9a424f8c2a5b/html5/thumbnails/31.jpg)
31
The End
Thanks!