Gui Development with qooxdoo

GUI Development with qooxdoo Webinale 2008, Germany Sebastian Werner & Fabian Jakobs

Sebastian Werner • Senior Software Developer at 1&1 Internet AG Since 2002 • Co-Creator of the JavaScript Framework qooxdoo in 2005 • Background: Webtechnologies, C++

Fabian Jakobs • Software Developer at 1&1 Internet AG Since 2007

Your Experience? • JS Frameworks? • Traditional GUI Toolkits? • Programming Languages?

About • Rich Internet Applications (RIA) • Enterprise • Open Source

Contributions • QWT • Qx Transformer • HTML Area • Inspector • Simulator • Upload Widget

Status of 0.8

Completed Features • Event System • Widget API • Layout Implementation • Generator II

Completed Applications • Feed Reader • Demos of Demo Browser • Skeleton • Quickstart

Completed Widgets • Input Fields • Tab View • Scroll Area • List • Groupbox • Tree • Popup • Tooltips • Slider

Legacy Applications • Showcase • API Viewer • Demo Browser • Test Runner • Build Tool

Missing Features • Localization • Sub control support • Improved state support • API polishing

Missing Widgets • Table • Splitpane • Combobox • Menu

Overview • First Steps • Understanding the GUI • Creating the GUI • Data Handling • Making It Work • Improving the GUI • GUI Internals

First Steps

JavaScript Basics • „this“ Keyword Refers to the „Owner“ • Namespaces are Cascaded Objects • Prototype Inheritance • Loosely Typed

Application Structure • OO Driven Development • Convenient Class Declaration • Properties, Mixins & Interfaces • Skeleton Available

Application Sample

Understanding the GUI

Capabilities • Like in Native Toolkits • Highly Dynamic Layout • Completely Themeable • Forget the Browser

l: 30 r: 10 t: 30 t: 10 l: 100 t: 200 Canvas Layout

1 2 3 Box Layout

north west center Dock Layout

1, 1 1, 2 2, 1 2, 2 Grid Layout

Widget Types • Containers (List, Toolbar, ...) • Widgets (Image, TextField, ...)

Creating the GUI Step 2

Adding a Dock Layout • Instantiating Classes • Creating the Composite • Adding to the Root • Stretch to the Available Space Step 2

Creating the Toolbar • Deriving From Existing Classes • Using Framework Resources • Adding Buttons • Assigning Tool Tips Step 3

Splitting Horizontally • Contains the Tree and the Right Hand Pane • Using a Horizontal Box Layout • Flexible Layout Step 4

The Tree • Extending qooxdoo‘s Tree Widget • Conﬁguring the Width • The Root Folder • Adding Folders Step 5

Splitting Vertically • Contains the List and the Preview Pane • Deﬁning Percent Heights Step 6

The List • Combination of Label and List • Layouted by a Vertical Box Layout • Make the Label Growable Step 7

Loading Indicator • Adding a Stack Container • Adding the Loading Indicator • Using Local Resources • Align the Image Step 8

The Article • Extending qooxdoo‘s HTML Embed • Inserting Dummy Content • Using Native Overﬂow Step 9

Questions?

Data Handling

Model State Query State Change Change Notiﬁcation User Gestures View Controller View Selection MVC

Data Models • Feed List • Feed • Article Step 10

Feed Reader Model

Properties • Setter & Getter • Store Selected Feed & Article • Using Apply Routines

Communication • The Different „Engines“ • Understanding JSON Step 11

Updating • Working with States • Synchronizing the Models • Error Handling

Questions?

Making It Work

Event Basics • Add and Remove Listeners • Deﬁning the context • Any Handlers Step 11

Model Connection • Reacting on Model Changes • Connecting the Tree Step 12

Selection Handling • Available Events • The Selection API • Establish Connection to Tree Selection Step 13

Article Selection • Connection Article to List Selection • Inserting Data Into HTML Step 14

Commands • The „execute“ Event • Key Identiﬁers • Deﬁning Shortcuts Step 15

Questions?

Improving the GUI

Styling the Article • Including CSS Stylesheets • Conﬁguring HTML Class Names Step 16

Theme Basics • Type of Themes • Named „ID“s • CSS-less

List Header • Applying Fonts • Using Padding • Property Groups Step 17

Decorations • Available Classes • Themed Decorators • Apply Right Hand Separator of the Tree

Add Feed Dialog • Creating Windows • Structuring Dialogs • Labels & Text Fields Step 18

Questions?

Gui Development with qooxdoo

0 comments

Notes on slide 1

2 Favorites