qooxdoo 0.8Das neue GUI Toolkit

Fabian Jakobs17. Oktober 2008

Übersicht

Teil I

• Was ist qooxdoo?• Was ist neu?

Teil II

Workshop

Was ist qooxdoo?

qooxdoo ist einJavaScript basiertesRichInternetApplicationFramework

Bingo!

Desktop ...

... in den Browser

Desktop im Browser

Entwickeln wie Qt/Swing/...

Geschichte von 0.8

Erfolgsstory qooxdoo 0.6/0.7

Top 5 Feature Requests

• Stabileres Layout

• Besseres Styling

• Schöneres Theme

• Integration in Webseiten

• Mehr Dokumentation

Layout

Reimplement layout engine

Bug #20

• 31 abhängige Bugs• Einer der ältesten Bugs• Blockiert viele Features

• Erfordert Grundlegende Änderungen

Layout engine in 0.8

• Sinnvolle Standardgrößen• Auto Sizing• Robust• Einfacher und mächtiger

Alle Layout-Bugs aus 0.7

sind gefxt!

Eigene Layouts

I'm sure its still a terrible hack, but really kinda cool I can fgure this type of thing out with basically zero qooxdoo experience“

Chris Banford (Community)

„

Styling

Styling in 0.7

• Einfache Rahmen• Hintergrundfarbe• Hintergrundbild

• Komplexes Styling nur mit Hacks!

Styling in 0.8

Widget (Container Element)<div>

</div>

Decorator<div> ...

</div>

Content<div> ...

</div>

Dekoratoren

• Erzeugen HTML für den Hintergrund

• Eigene Klassen• Styling unabhängig vom Widget• Konfgurierbar durch Theme

• Erlauben komplexes Styling

Schöneres Theme

Theme

0.7 0.8

Einbetten in Webseiten

Schema qooxdoo 0.7

Widgets

Core (Class, Properties, ...)

UI Core(Widget, Layout, ...)

Schema qooxdoo 0.8

Widgets

Core (Class, Properties, ...)

UI Core(Widget, Layout, ...)

BOM (Cross Browser Code)

EventHtml Animation Low level qooxdoo

Low Level qooxdoo

• Vergleichbar mit JQuery• DOM• Events• Animationen

Widgets

Core

UI Core

BOM

EventHtml Anim.

Einbetten von Widgets

Dokumentation

Dokumentation

• Fast 100% API Dokumentation• Mehr Demos• Besseres Manual im Wiki

Neue Fundamente!

qooxdoo 0.8

✔ Stabileres Layout

✔ Besseres Styling

✔ Schöneres Theme

✔ Integration in Webseiten

✔ Mehr Dokumentation

Workshop

Workshop

1. Grundgerüst2. Layout/Widgets3. Style

Grundgerüst erstellen

Oberfäche erstellen

Oberfäche erstellen

Oberfäche erstellen

Oberfäche erstellen

Styling

Sektion der Vorlage

Zuschnitt des Buttons

Zuschnitt des Buttons

Und nun?

Wenn Ihr eine qooxdoo Anwendung habt... migriert zu 0.8

Wenn Ihr keine habt ... schreibt eine

Bei Fragen:3. OG EFS

Copyright NotesAutor: myelectricsheepFlickr: http://www.fickr.com/photos/myelectricsheep/246279816/

Autor: [o] MarcFlickr: http://www.fickr.com/photos/jmarcreichow/294398061/

Autor: OldOnlinerFlickr: http://www.fickr.com/photos/oldonliner/1095360979/

Autor: Ela2007Flickr: http://www.fickr.com/photos/64479867@N00/523132985/

Autor: mia_4looseFlickr: http://www.fickr.com/photos/13409351@N08/2321248880/

Autor: bloodyrazor1987Flickr: http://www.fickr.com/photos/23766596@N04/2262340001/