Developing web applications with Eclipse RAP Technology
Lecture 08 - Qooxdoo
This presentation is given by
» Fabian Jakobs (1&1)
» Balazs Brinkus
» Istvan Ballok
Date: 23.3.2009.
1

Review
General information on the Eclipse RAP Course
Title: Developing web applications with Eclipse RAP technology
Time frame: Spring Semester, 2009 (February - May) (14 lessons)
Schedule: Mondays, 14-16, Room \"Irinyi 225\", University of Szeged
Course is given by:
» CAS Software AG, Karlsruhe; CAS Software Kft., Szeged
» EclipseSource, Karlsruhe
Contact:
» Istvan Ballok, Balazs Brinkus
2

Goal of the course
The goal of this course is to enable the attendants to create rich and
interactive web 2.0 applications based on the Ajax framework: Eclipse
Rich Ajax Platform (RAP).
The course focuses on giving a thorough understanding of the
underlying technologies and reserving ample time for hands-on
exercises and tutorials, to transfer a pragmatic knowledge as well.
Each lesson focuses on achieving a well defined goal, making one step
forward in mastering the Eclipse Rich Ajax Platform.
Review 3

Contents of this lecture - Qooxdoo
8 23.3. Create a standalone qooxdoo application
» Introduction
» Fabian Jakobs, 1&1
» qooxdoo
» Architecture
» Server based
» Client based
» Workshop
» JavaScript basics
» Getting started
» Tooling
» OOP/TDD
» Layout basics
» Events
4

Introduction
Fabian Jakobs
» fabian.jakobs@1und1.de
» JavaScript framework developer at 1&1
» Working on qooxdoo since 2006
» Diploma of Computer Science at the University
Karlsruhe 2006
5

1&1
» Part of United Internet
» Products
» Hosting
» Market leader in Germany
and UK, number 5 in USA
» DSL
» About 3 million DSL
customers in Germany
» Portal
» Market leader in Germany
Introduction 6

qooxdoo
» RWT's native browser widget toolkit
» qooxdoo is a framework of its own
» Qooxdoo is more than what is used by RAP
7

Pure JavaScript Widget Toolkit like SWT
qooxdoo 8

Desktop like Applications in the Browser
qooxdoo 9

History
» qooxdoo 0.1 (May 2005)
» Released as open source (LGPL) hosted on Sourceforge
» qooxdoo 0.5 (February 2006)
» First modern widget toolkit
» qooxdoo 0.6 (September 2006)
» Addition of the Table widget and RPC client
» Introduction of name spaces
» qooxdoo 0.7 (June 2007)
» Introduced new JavaScript OOP system
» Dual licenced LGPL/EPL due to integration into RAP
» qooxdoo 0.8 (August 2008)
» Rewrite of the layout/widget system
» New build system
qooxdoo 10

qooxdoo 0.7 versus qooxdoo 0.8
» RAP still uses qooxdoo 0.7
» This lecture will cover 0.8
» qooxdoo 0.8 is not API compatible to 0.7
» Differences
» Layout managers work differently
» Core widget API changed
» Theming
» Unchanged
» qooxdoo OO syntax
» Collection of widgets
» The public API of specific widgets (e.g. Table)
qooxdoo 11

Architecture
» Server based
» Client based
12

Server Based
» The RAP model
» All user interface logic runs on the server
Architecture 13

Server Based
» Advantages
» (+) Backend communication is trivial
» (+) Secure
» (+) Same Programming language as for the business logic
» (+) Possibility to build native clients from the same code base
» Disadvantages
» (-) Hard to react on high frequency user events (e.g. mouse move)
» (-) Hard to extend with custom widgets
» (-) No offline mode possible
Architecture 14

Client Based
» The qooxdoo model
» User interface logic runs in the browser
» Uses remote procedure calls (RPC) to communicate with the
backend
Architecture 15

Client Based
» Advantages
» (+) User interaction events can be handled locally
» (+) It's possible to leverage special browser features
» (+) Offline support possible
» (+) Easy to write custom widgets
» Disadvantages
» (-) Backends expose functionality as remote services
» (-) Remote services must be secured
» (-) Different technology stack on backend and frontend
Architecture 16

Workshop
Building a temperature converter
1. Getting started
2. Tooling
3. OOP/TDD
4. Layout basics
5. Events
6. Theming
17

Getting Started
» Installation
» Building a qooxdoo skeleton application
Workshop 18

Installation
Getting Started
1. Install Python
1. Download the ActivePython 2.6 installer
2. Install ActivePython
3. Verify the Installation
» Type python in the command shell
2. Install qooxdoo
1. Download the qooxdoo SDK
2. Unzip the qooxdoo SDK to C:/
Workshop 19

Build a qooxdoo Skeleton
Getting Started
» Create a new project in the Eclipse Workspace
» File / New / Other.. / General - Project
» Name of the project: convert
» copy the location of the project resource from the project properties
» e.g. C:\\_DEV_\\workspace\\ws_qooxdoo\\convert
» Navigate to the project folder using the command line
» and create a qooxdoo skeleton application
» C:\\>cd C:\\_DEV_\\workspace\\ws_qooxdoo\\convert
» C:\\_DEV_\\workspace\\ws_qooxdoo\\convert>
c:\\qooxdoo-0.8.2-sdk\\tool\\bin\\create-application.py
-n convert
» C:\\_DEV_\\workspace\\ws_qooxdoo\\convert>cd convert
» C:\\_DEV_\\workspace\\ws_qooxdoo\\convert\\convert>
generate.py source
» Refresh the project in Eclipse (F5)
» Open the source/index.html in the Browser
Workshop 20

Steps
Getting Started
Workshop 21

Tooling
» When we started nearly no tools existed
» But tools are necessary for professional development
» We had to build our own
» qooxdoo JavaScript tools
» Linker
» Optimizer/Packer
» Unit testing
» API documentation
» Inspector
» Lint
» Third party tools
» FireBug
» Safari Web Inspector
» Opera Dragonfly
» IE8 Developer Toolbar
Workshop 22

Linker
Tooling
» Detect dependencies between JavaScript files
» Sorted list of files to include
» Essential for large applications
» generate.py source, generate.py build
Workshop 23

Optimizer/Packer
Tooling
» Combine JavaScript files
» Optimize/obfuscate JavaScript
» generate.py build
Workshop 24

Unit Testing
Tooling
» Unit testing framework like JUnit
» generate.py test
» generate.py test-source
Workshop 25

API documentation
Tooling
» Extract API documentation from source code
» JavaDoc like comments in the code
» Can be used for custom applications
» generate.py api
Workshop 26

Inspector
Tooling
» Navigate widget hierarchy
» Modify widgets on the fly
» Cross browser interactive console
» generate.py inspector
Workshop 27

Lint
Tooling
» Static code analysis
» Find common coding mistakes
» Enforce coding guidelines
» Especially useful in dynamic languages, where errors
» Often occur only at runtime
» Only under certain conditions
» Have strange side effects and are hard to find
» Finds e.g.
» Undefined variables
» Unused variables
» Redefnition of map keys
» generate.py lint
Workshop 28

Exercise
Tooling
» Run these jobs and check the results
Command Result
generate.py source source/index.html
generate.py test test/index.html
generate.py test-source test/index-source.html
generate.py api api/index.html
generate.py inspector source/inspector.html
generate.py lint (output in the console)
generate.py build build/index.html
Workshop 29

OOP
» JavaScript provides only basic OOP features
» Prototype based inheritance
» No interfaces
» calling overridden methods in super classes is hard
» ...
» The language is flexible enough to create a meta OO model on top
» This is what most JavaScript frameworks do
Workshop 30

qooxdoo vs. Java OOP
OOP
Workshop 31

qooxdoo vs. Java OOP
OOP
» Inheritance
» Properties
» Automatically generate accessor and mutator methods
» Optional change events on value changes
Workshop 32

Summary
OOP
» qooxdoo supports most of Java's OOP features
» Classes
» Interfaces
» Namespaces
» Calling overridden methods in base classes
» Conventions for access control
» Additional OO features
» Dynamic properties
» Mixins
» Add functionality to existing classes
» Concept used in Objective-C, Ruby, Python
» Unsupported Java OO features
» Method/constructor overloading
Workshop 33

Test Driven Development
OOP
» Principles
» Don't write production code unless it makes a failing test pass
» Don't write more unit tests than is sufficient to fail
» Don't write more production code than is sufficient to pass the failing test
» TDD in qooxdoo
» qx.dev.unit.TestCase is the base class for all test cases
» Test methods are instance methods with a test prefix
» The TestCase class provides a collection of assertion methods (e.g.
assertEquals)
Workshop 34

Exercise
OOP
1. Write the test
» Write the class convert.test.TemperatureUtil, which
extends qx.dev.unit.TestCase
» Write a unit test for celsiusToFahrenheit.
» Known values: 100°C = 212°F, 0°C = 32°F, -17.78°C = 0°F
» Run the test and see it fail
2. Implement the conversion
» Write the static class convert.TemperatureUtil
» Write the static method celsiusToFahrenheit
» Formula: fahrenheit = (celsius * 1.8) + 32;
» Run the test and see it pass
3. Write test and implementation for fahrenheitToCelsius
Workshop 35

Widgets/Layout
Widget Types
» Basic widget
» Widget, Image, Label, Atom
» Form widgets
» Button, TextField, CheckBox, ComboBox, ...
» Container widget
» Window, GroupBox, Composite, SplitPane, ...
» Complex widgets
» Table, Tree, List
Workshop 36

Widget Tree
Widgets/Layout
» All the widgets in a user interface
are composed in a tree like
structure
» composite design pattern
» each control can be added to a
composite control
» added using the parent's add
method
» Reparenting is possible (unlike in
SWT)
Workshop 37

Layout Manager
Widgets/Layout
» Very similar to SWT
» a Layout Manager is assigned to the parent
» corresponding Layout Data can be assigned to each child widget,
to control the layouting process
» can be set as the second parameter of the parent's add method or by calling
setLayoutData on the child.
Workshop 38

Grow Layout (1/5)
Widgets/Layout
» Simplest layout manager
» All child widgets are stretched to the available size
Workshop 39

Basic/Canvas Layout (2/5)
Widgets/Layout
» Absolute positioning
» Canvas extends the
functionality of Basic and
supports
» Percent sizes and coordinates
» Attaching to the bottom and
right edges
Workshop 40

HBox/VBox (3/5)
Widgets/Layout
» places child widgets horizontally (HBox) or vertically (VBox) next to
each other
» Layout properties
» flex to configure growing/shrinling
» width respectivley height for percent sizes
Workshop 41

Dock (4/5)
Widgets/Layout
» Docks children to one of the parent's edges
» Layout properties
» edge - one of north, east, south, west or center
» width optional percent width
» height optional percent height
Workshop 42

Grid (5/5)
Widgets/Layout
» Places widgets into a two
dimensional grid
» Each cell can contain at most
one widget
» Supports child widgets, which
span several cells or columns
» Layout properties
» row, column
» rowSpan, colSpan
Workshop 43

Exercise - Temperature Converter UI
Widgets/Layout
1. Create the class
convert.Converter, which
extends
qx.ui.window.Window
2. Show this window by adding
these lines to
convert.Application:
var converter = new convert.Converter();
converter.moveTo(50, 30);
converter.open();
3. Position the labels and text fiels into a grid.
Workshop 44

Events
» User interaction result in events
» Events can be handled by using event listeners
» in JavaScript/qooxdoo
» in Java/SWT
» Event types
» mouse
» keyboard
» focus
» selection
» execute
» ...
Workshop 45

Exercise - React on Text Input
Events
1. Add a property celsius. This is the reference temperature
2. Add getFahrenheit, which returns the converted celsius value
3. Add setFahrenheit, which stores the converted value in the
celsius property
4. Add changeValue event listeners to the celsius and fahrenheit
input fields
» Read the input field's value (.getValue())
» Convert it to a number (parseInt)
» Call setFahrenheit/setCelsius with this value
Workshop 46

Theming
» Change the look & feel without changing the application code
Workshop 47

Exercise - Appearance.js
Theming
Workshop 48

Possible Improvements
» Error handling if user enters an invalid number
» Use localized number formatter and parser
» Use spinner widgets
» ...
Be creative - Play with the code!
Workshop 49

Resources
» qooxdoo
» Online manual
» API viewer
» Demo browser
» JavaScript
» \"JavaScript: The Good Parts: Working with the Shallow Grain of JavaScript\"
by Douglas Crockford
» \"JavaScript. The Definitive Guide\" by David Flanagan
50

License
Licensed under Creative Commons
Attribution Non-Commercial No Derivatives
http://creativecommons.org/licenses/by-nc-nd/3.0/
51