Qooxdoo at B::IT

22.03.2011

• M.Sc. Martin Wittemann

• works at

• framework architect

• started in 2007 with

•@wittemann on

• won $18 in Atlantic City!

ABOUT ME

pure JavaScript

no HTML or CSS know-how for RIAs

no plugin needed

LGPL / EPL

JAVASCRIPT, REALLY?

c=document.body.children[0];h=t=150;L=w=c.width=800;u=D=50;H=[];R=Math.random;for($ in C=c.getContext('2d'))C[$[J=X=Y=0]+($[6]||'')]=C[$];setInterval("if(D)for(x=405,i=y=I=0;i<1e4;)L=H[i++]=i<9|L<w&R()<.3?w:R()*u+80|0;$=++t%99-u;$=$*$/8+20;y+=Y;x+=y-H[(x+X)/u|0]>9?0:X;j=H[o=x/u|0];Y=y<j|Y<0?Y+1:(y=j,J?-10:0);with(C){A=function(c,x,y,r){r&&a(x,y,r,0,7,0);fillStyle=c.P?c:'#'+'ceff99ff78f86eeaaffffd45333'.substr(c*3,3);f();ba()};for(D=Z=0;Z<21;Z++){Z<7&&A(Z%6,w/2,235,Z?250-15*Z:w);i=o-5+Z;S=x-i*u;B=S>9&S<41;ta(u-S,0);G=cL(0,T=H[i],0,T+9);T%6||(A(2,25,T-7,5),y^j||B&&(H[i]-=.1,I++));G.P=G.addColorStop;G.P(0,i%7?'#7e3':(i^o||y^T||(y=H[i]+=$/99),'#c7a'));G.P(1,'#ca6');i%4&&A(6,t/2%200,9,i%2?27:33);m(-6,h);qt(-6,T,3,T);l(47,T);qt(56,T,56,h);A(G);i%3?0:T<w?(A(G,33,T-15,10),fc(31,T-7,4,9)):(A(7,25,$,9),A(G,25,$,5),fc(24,$,2,h),D=B&y>$-9?1:D);ta(S-u,0)}A(6,u,y-9,11);A(5,M=u+X*.7,Q=y-9+Y/5,8);A(8,M,Q,5);fx(I+'¢',5,15)}D=y>h?1:D",u);onkeydown=onkeyup=function(e){E=e.type[5]?4:0;e=e.keyCode;J=e^38?J:E;X=e^37?e^39?X:E:-E}

http://js1k.com/2010-first/demo/635

OBJECT ORIENTATION

qx.Class.define("Bicycle", { extend : qx.core.Object, members : { __speed : 0, speedUp : function(increment) { this.__speed += increment; } }});

OBJECT ORIENTATION

qx.Class.define("Bicycle", { extend : qx.core.Object, members : { __speed : 0, speedUp : function(increment) { this.__speed += increment; } }});

class Bicycle { int speed = 0;

void speedUp(int increment) { speed = speed + increment; }}

OBJECT ORIENTATION

SPEED

http://www.macstories.net/news/new-chrome-beta-is-faster-includes-revamped-settings-ui/

SPEED

http://blogs.msdn.com/b/ie/archive/2010/11/17/html5-and-real-world-site-performance-seventh-ie9-platform-preview-available-for-developers.aspx

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

LOW LEVEL FRAMEWORK

• Base for the Widget Toolkit

• Cross browser layer

• Works standalone

• Feature set like and more

USED ON 1UND1.DE

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

WIDGETS

WIDGETSToolbar

WIDGETSTree

WIDGETS

Window

WIDGETS

TextField

WIDGETS

Button

VIRTUAL• Suitable for huge data sets

• Does not render all data

SelectBox ComboBox List Tree Table

INLINE APPLICATIONplain HTML

qooxdooapplication

LAYOUTS

• Custom layout managers built in JavaScript

• No cross browser issues

• predefined set of layouts

THEMING

ModernClassic

• No CSS knowledge needed

• No cross browser code

Simple

DATA BINDING

Model View

Formating

FilteringSorting

ValidationConverting

IDEAa : A

+ prop :

b : A+ prop :12

<<binding>>

IDEAa : A

+ prop :

b : A+ prop :12 12

<<binding>>

IDEAa : A

+ prop :

b : A+ prop :23 23

<<binding>>

IDEAa : A

+ prop :

b : A+ prop :23 30

a.bind("prop", b, "prop");

<<binding>>

DATA BINDING

Model ViewControllerData Store

DATA BINDING

Model ViewControllerData Store

JSON file / service

DATA BINDING

Model ViewControllerData Store

load JSON, convert to model

DATA BINDING

Model ViewControllerData Store

simple qooxdoo object with properties

DATA BINDING

Model ViewControllerData Store

keeps model and view in sync

DATA BINDING

Model ViewControllerData Store

simple widget like list, tree, form, ...

INTERNATIONALIZATION

• Built-in internationalization support

• Based on standardized files

• Easy to switch during runtime

INTERNATIONALIZATION

var button1 = new qx.ui.form.Button("First Button");this.getRoot().add(button1);

without translation

var button1 = new qx.ui.form.Button(this.tr("First Button"));this.getRoot().add(button1);

with translation

var button1 = new qx.ui.form.Button(this.tr("First Button"));this.getRoot().add(button1);

with translation

USED ON GMX.COM

USED ON GMX.COM

DEMO

DEVELOPMENT SUPPORT

TOOLING

• Automatic dependency detection

• Packaging for development and deployment

• Optimization and minification

TESTING

• Integrated unit test framework

• Integrated support for Selenium tests

• Continuous integration for the framework

INSPECTOR

• Special qooxdoo debugging tool

• Handy console for debugging

• Select widget by mouse

• Selenium integration

INSPECTOR

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

ARCHITECTURE

OO Language Extension Custom EventsCore

Transport BOM DOM Browser Events

BrowserAbstraction

HTML Rendering

CSS Selector AnimationPartsLow-Level

UI Core

Widgets Layouts Theming

Dat

a B

indi

ng

I18n

GUIToolkit

Universal Framework

Low Level Framework

RIA Framework

{

ARCHITECTURE

Low Level Framework

RIA Framework

{OO Language

Extension Custom Events

HTML Rendering

CSS Selector Animation

UI Core

Widgets Layouts Theming

Transport

Data

Bin

ding

Parts

I18n

BOM DOM Browser Events

Core

BrowserAbstraction

Low-Level

GUIToolkit

Mobile

Widgets

Mobile Framework

NEW!

Universal Framework

Try it yourself!http://qooxdoo.org/

http://playground.qooxdoo.org/