GUI Developmentwith qooxdoo

Webinale 2008, GermanySebastian 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

• Scroll Area

• Groupbox

• Popup

• Tooltips

• Slider

• Tab View

• List

• Tree

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

Canvas Layout

l: 30t: 30

l: 100t: 200

r: 10t: 10

Box Layout

1 2 3

Dock Layout

north

west center

Grid Layout

1, 1

2, 1 2, 2

1, 2

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

• Configuring the Width

• The Root Folder

• Adding Folders

Step 5

Splitting Vertically

• Contains the List and the Preview Pane

• Defining 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 Overflow

Step 9

Questions?

Data Handling

MVC

Model

View Controller

State ChangeState Query

User Gestures

View Selection

Change Notification

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

• Defining 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 Identifiers

• Defining Shortcuts

Step 15

Questions?

Improving the GUI

Styling the Article

• Including CSS Stylesheets

• Configuring 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?