INNOV-16:%20Rich%20User%20Interface%20for%20the%20Web????%20AJAX%20to%20the%20Rescue

1
INNOV-16 Rich User Interface for the Web????
AJAX to the Rescue
Ken Wilner
VP of Technology Progress Software
2
UI Choice Today?

• Desktop App
• Vs.
• Web App

3
Rich Internet Applications Today

• Zimbra
• http//demo2.zimbra.com/zimbra/mail
• Google Maps
• http//maps.google.com
• OpenEdge
• http//localhost/.....

4
Desktop App vs. Browser App.
Rich
AJAXClient
Traditional DesktopClient
Traditional BrowserClient
Gartner, Rich Internet Applications Are the Next
Evolution of the Web, May 4, 2005
Reach
5
Traditional Browser-based Application
Server-based Processing
Browser
Server
Time
6
AJAX Application Model
N-tier-based Processing
user activity
user activity
user activity
user activity
Browser
event
event
event
event
AJAX Engine
request2
data
request
data
data
request1
Server
processdata request
Time
7
Agenda

• Concepts and Technologies
• Data Models
• Frameworks and Libraries
• For the Enterprise
• Conclusion

8
AJAX in a Nutshell

• Architectural design pattern for building Rich
  Internet Applications (RIA)
• Coined by Jesse James Garrett of Adaptive Path in
  2005
• Asynchronous JavaScript and XML
• Not necessarily asynchronous
• Not necessarily XML
• Absolutely JavaScript
• Browser behaves like a desktop client
• Works with most browsers some differences

9
AJAX Technologies

• JavaScript
• General purpose programming language that runs in
  a browser
• Aka JScript aka ECMAScript
• Cascading Style Sheets (CSS)
• Reusable styles for defining look of a Web page
• Script based or JavaScript settable
• Document Object Model (DOM)
• XML parser
• Built-in document object allows widget-tree
  walker
• XMLHttpRequest
• Communicate with a Web Server without a refresh
• Synchronous and asynchronous

10
Traditional Browser-based vs. AJAX
11
AJAX Request Processing and OpenEdge
Browser
Web Server
CustNum
Submit
AJAX Engine
XMLHttpRequest
Web Services Adapter\WebSpeed
AppServer/WebSpeed
function callback()
12
Simple AJAX Code Demo
13
Agenda

• Concepts and Technologies
• Data Models
• Frameworks
• For the Enterprise
• Conclusion

14
AJAX Data Binding Models

• HTML Snippet
• JavaScript
• Encoded String
• JSON JavaScript Object Notation
• XML
• Web Services

15
AJAX Data Binding Demo
16
AJAX Data Binding Models
17
Agenda

• Concepts and Technologies
• Data Models
• Frameworks
• For the Enterprise
• Conclusion

18
AJAX Frameworks and Libraries
UI Widgets Dojo, Prototype, Backbase, Zimbra,
ActiveWidgets, TurboWidgets, Yahoo
DevelopmentEnvironmentand Tools Ajax Toolkit
Framework Backbase Community Edition JackBE Gener
al Interface MS Atlas
JavaScript Utilities Prototype Dojo
UI Low Level Effects Dojo, Rico, Scriptaculous
Remoting Toolkits Dojo,JSON-RPC,Prototype, Zimbra
XMLHttpRequest
19
Dojo
Comprehensive JavaScript Toolkit largely
undocumented

• UI Low Level Affects
• Animation affects
• Drag and drop
• Fade in/out
• UI Widgets
• Tabs
• Trees
• Menu
• Combo box

20
Dojo
Comprehensive JavaScript Toolkit largely
undocumented

• JavaScript Utilities
• Object inheritance and manipulation
• Strings
• Request timeouts
• Type checking
• Dom manipulation
• Data Structures
• Crypto
• JSON serialization/deserialization
• Remoting
• Cross-browser XMLHttpRequest handling

21
Prototype Demo
22
Prototype

• Cross-browser XMLHttpRequest handling
• Utility Routines
• Object creation and inheritance
• Array manipulation
• String manipulation
• Simplified DOM API

23
Prototype Demo
24
Scriptaculous

• Effects Library
• Size
• Position
• Transparency
• Drag and Drop Library

25
Prototype Demo
26
Agenda

• Concepts and Technologies
• Data Models
• Frameworks
• For the Enterprise
• Conclusion

27
AJAX For the Enterprise
ActiveWidgets

• Object-oriented library
• Standard widgets
• Datagrid
• Tabs
• Tree
• Combo
• Etc.
• Simple XML binding or record sets make ideal for
  Web services and Prodatasets

28
AJAX for the Enterprise Demo
29
Agenda

• Concepts and Technologies
• Data Models
• Frameworks
• For the Enterprise
• Conclusion

30
AJAX Tools That You Want to Know!!!!

• Firefox Dom Inspector
• Firefox Firebug
• https//addons.mozilla.org/addon.php?id1843
• Eclipse Ajax Toolkit Framework
• http//www.alphaworks.ibm.com/tech/ajaxtk
• Eclipse Web
• http//www.eclipse.org/webtools

31
Resources

• Web Sites
• http//www.ajaxian.com/
• http//www.ajaxinfo.com/
• http//www.ajaxpatterns.org/
• http//www.ajaxfreaks.com
• http//developer.yahoo.com/yui/index.html
• Books
• Pragmatic Ajax
• Ajax in Action
• Ajax for Hackers
• Just Google for AJAX
• AJAX Javascript XMLHttpRequest -gt 1.8M hits

32
In Summary

• AJAX rich UI for the Web
• Start small technology still immature
• Moving your application to OpenEdge Reference
  Architecture and SOA will get you ready for AJAX
• You can use with OpenEdge today
• Looks to tools and frameworks to help you out
  still evolving
• Start learning now!!!

33
Questions?
34
Thank you foryour time
35
(No Transcript)