Ajax In Action 2008 - Gui Development With qooxdoo

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

Single Page Application

+JS +AJAX

+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 <fabian.jakobs@1und1.de>http://qooxdoo.org

colorstrip.gifT

THE NEW ERA OF WEB DEVELOPMENT