Andreas Ecker, Derrell Lipman
Transcript of Andreas Ecker, Derrell Lipman
![Page 1: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/1.jpg)
1The Ajax Experience, 25-27 July 2007
, 2007-07-25
Andreas Ecker, Derrell Lipman
THE NEW ERA OF WEB DEVELOPMENT
qooxdoo
![Page 2: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/2.jpg)
Introduction
Client-side JavaScript framework
Professional application development
Comprehensive GUI toolkit
Advanced client-server communication
Open Source (LGPL / EPL)
Initiated by 1&1 Internet AG in 2005
http://qooxdoo.org
![Page 3: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/3.jpg)
Requirements (End Users)
No browser extensions
(ActiveX, Java, Flash, Silverlight, ...)
Common web browser Internet Explorer 7 6
Firefox 2.0 1.5
Opera 9
Safari (WebKit) 3.0
![Page 4: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/4.jpg)
Requirements (Developers)
No HTML
No CSS
No DOM
No specific server-side software
Develop on any platform
Object-oriented programming
JavaScript
![Page 5: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/5.jpg)
GUI Toolkit
Many standard widgets
Simple creation of custom widgets
Powerful layout managers
Full keyboard support
Drag & drop
Event-based programming
Real-world theming
![Page 6: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/6.jpg)
Event-based Programming
Events: Property value changes
Abstraction layer directly above DOM
“execute”, “beforeDisappear”, etc.
Unified key event handling
“keydown”, “keypress”, “keyinput”, “keyup”
Unified mouse event handling
mouse clicks, mouse wheel, drag & drop Custom events
![Page 7: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/7.jpg)
Theming
Decoupled from widget code
Simple yet powerful configuration files
No CSS means no CSS hacks
Easily done by designers, not only developers
Switching at run-time
![Page 8: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/8.jpg)
Application Development
Skeleton as a perfect base for custom web applications
Concise project structure for application classes as well as static resources
Pre-configured as an out-of-the-box solution for taylor-made
production use
![Page 9: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/9.jpg)
Build Process
Application development ($ make source)
Checks, Debugging
Application deployment ($ make build)
Compressor (for minimum size)
Optimization (for maximum performance)
Dependencies (with automatic resolving)
Modules, Packages (for optimal distribution)
Target directories (for optimal integration)
![Page 10: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/10.jpg)
Working Exampleqx.Class.define("my.Application",{ extend : qx.application.Gui, // extend the Gui class members : { main : function() // override main() { this.base(arguments); // call superclass' main() var button = new qx.ui.form.Button("First Button", // create a button
"./resource/image/test.png");
button.set( { top: 50, left: 50 } ); // position it button.addToDocument(); // add it to the document
button.addEventListener("execute", // action upon click/Enter function(e) { alert("Hello World!"); } );
} }});
![Page 11: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/11.jpg)
Object-oriented JavaScript
Fully class-based
Namespaces
Only noncritical manipulation of native objects
Static classes, abstract classes, singletons
Interfaces, mixins
Public, protected, private members
Dynamic properties
![Page 12: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/12.jpg)
Class Declarationqx.Class.define(“qx.ui.form.Button“, { // class being defined
extend : qx.ui.basic.Atom, // superclass
implement : [qx.IClickable, ...], // interfaces
include : [qx.MToggle, ...], // mixins
construct : function() { ... }, // constructor function
properties : { ... }, // object properties
statics : { ... }, // static members
members : { ... }, // instance members
settings : { ... }, // settings defined in class
variants : { ... }, // variants defined in class
events : { ... }, // dispatched events, types
destruct : { ... }, // destructor function
defer : { ... } // function called after load
});
![Page 13: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/13.jpg)
Communication (Frontend)
Generic transport layer Queues, Timeouts
synchronous, async, cross-domain
Data exchange
via JSON, XML, JavaScript, ...
Not just wrapper around XMLHttpRequest Transport implementation depends on needs
![Page 14: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/14.jpg)
Automatic Transport Selection
XMLHttp sync async
Mime Types Text JavaScript JSON XML HTML
Iframe async file upload form fields
Mime Types Text JavaScript JSON XML HTML
Script async cross domain
Mime Types JavaScript JSON
![Page 15: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/15.jpg)
Communication: Backend
Use your Existing Backend
Remote Procedure Calls (RPC) Easy and secure data exchange RPC servers (backends):
Java, PHP, Perl included with qooxdoo Embedded Javascript (ejs) backend is used in
Samba4 Documentation to write a backend is provided
![Page 16: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/16.jpg)
API Reference
Automatic generation ($ make api)
Full-featured JavaScript parser
Javadoc-like comments
Also for documenting a custom application!
API viewer application
http://api.qooxdoo.org
![Page 17: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/17.jpg)
Sample API Documentation
/** * Set whether the open/close button should be displayed * on a branch, even if the branch has no children. * * @type member * * @param b {Boolean} * <i>true</i> if the open/close button should be shown; * <i>false</i> otherwise. * * @return {void} */ setAlwaysShowOpenCloseSymbol : function(b) { ... }
![Page 18: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/18.jpg)
Developer Support
Browser independence
High performance
No memory-leaks
OO programming
Back button, bookmarking
Internationalization
Migration support . . .
![Page 19: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/19.jpg)
Developer Support
Unified code formatter
Unit testing
Logging
Debugging
Widget inspector
Profiler
IDE support
![Page 20: Andreas Ecker, Derrell Lipman](https://reader036.fdocuments.in/reader036/viewer/2022071602/613d5846736caf36b75c3998/html5/thumbnails/20.jpg)
Alternative Development
Eclipse Rich Ajax Platform (“RAP”)
Borland/CodeGear “Delphi for PHP”
XML-based description of interface
ASP.Net
Pure Java-based qooxdoo application (planned)
GUI designer (planned)