colorstrip.gifT
Web GUI-Development with qooxdoo
Fabian Jakobs1&1 Internet AG
THE NEW ERA OF WEB DEVELOPMENT
Ajax in Action29. Oktober 2008
Overview
• Evolution of AJAX
• How Single Page Applications are different
• How qooxdoo can help
HTML only
HTML + JavaScript
HTML + AJAX
+JS
+JS +AJAX
moreAJAX
longerpage load
+JS +AJAXSinglePage
+JS +AJAXSinglePage
+JS +AJAXSinglePage
Reach
Interactivity
Single Page Applications are Different
+JS +AJAX
SinglePage
Why?
Expectations
„If it looks like a desktop application it should feel like a desktop application!“
Client liberation
• Code is run in the client
• Client/server communication style changes
• Client can maintain state
But:Theming Still Matters!
+JS +AJAXSinglePage
Client code explodes
HTML CSS JavaScript
You Need a Framework!
qooxdoo
qooxdoo
• Cross browser
• JavaScript based RIA framework
• Open Source
• powered by
How does qooxdoo help?
• UI-Expectations
• Theming
• Code Size
Expectations
Swing/Qt/Cocoafor the Web
qooxdoo Architecture
Core (JavaScript OOP)
BOM (Cross Browser Code)
EventAnim.HTML
UI Core(Rendering Engine)
Widgets
Widgets
How would you layout this with CSS?
Absolute positioning!
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBox
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBox
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBox
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBoxGrid
Layout Manager
• Calculate layout in JavaScript
• Not limited by the browser
• JavaScript is fast enough
VBoxGrid
Desktop StyleDevelopment Model
// Create a button
var button1 = new qx.ui.form.Button("First Button", "demo/browser.png");
// Add button to container at fixed coordinates
container.add(button1, {left: 100, top: 50});
// Add an event listener
button1.addListener("execute", function(e) {
alert("Hello World!");
});
Theming Matters!
Theming
• 4 images
Theming
• 4 images
Theming
• 4 images
Theming
• 4 images
Theming
• 4 images
• 30 lines configuration
Theming
• 4 images
• 30 lines configuration
• 80 lines theme
"calc-button" : {
style: function(states)
{
return {
decorator: states.pressed ?
"deco-button-pressed" :
"deco-button",
center: true,
padding: [2, 8]
}
}
}
Theming
• 4 images
• 30 lines configuration
• 80 lines theme
"calc-button" : {
style: function(states)
{
return {
decorator: states.pressed ?
"deco-button-pressed" :
"deco-button",
center: true,
padding: [2, 8]
}
}
}
"deco-button": {
decorator: qx.ui.decoration.Grid,
style: {
baseImage: "calc/theme/button.png",
insets: [3, 3, 5, 3]
}
}
Theming
• 4 images
• 30 lines configuration
• 80 lines theme
• 60 minutes work
Theming
Code Size
JavaScript OOPqx.Class.define("demo.Person",
{
extend : qx.core.Object,
construct : function(firstName, lastName)
{
! this.base(arguments);!
!
! this._firstName = firstName;
! this._lastName = lastName;
},
members :
{
getFullName : function() {
return this._firstName + " " + this._lastName;
}
}
});
Linker
JavaScript Tooling
• Unit testing infrastructure
• API documentation generation
• JavaScript Lint
• ...
Use the right approach!
If a Single Page Application (RIA) is the
right choice...
... try qooxdoo!
Thank you.
Fabian Jakobs <[email protected]>http://qooxdoo.org
colorstrip.gifT
THE NEW ERA OF WEB DEVELOPMENT
