lecture 8 - qooxdoo - rap course at the university of szeged
DESCRIPTION
Slides from a lecture held at the University of Szeged about the JavaScript RIA framework qoodoo.TRANSCRIPT
![Page 1: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/1.jpg)
1
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.
![Page 2: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/2.jpg)
2
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
![Page 3: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/3.jpg)
3Review
Goal of the course
The goal of this course is to enable the attendants to create rich andinteractive web 2.0 applications based on the Ajax framework: EclipseRich Ajax Platform (RAP).
The course focuses on giving a thorough understanding of theunderlying technologies and reserving ample time for hands-onexercises and tutorials, to transfer a pragmatic knowledge as well.
Each lesson focuses on achieving a well defined goal, making one stepforward in mastering the Eclipse Rich Ajax Platform.
![Page 4: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/4.jpg)
4
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
![Page 5: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/5.jpg)
5
Introduction
Fabian Jakobs» [email protected]
» JavaScript framework developer at 1&1
» Working on qooxdoo since 2006
» Diploma of Computer Science at the UniversityKarlsruhe 2006
![Page 6: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/6.jpg)
6Introduction
1&1
» Part of United Internet
» Products» Hosting
» Market leader in Germanyand UK, number 5 in USA
» DSL» About 3 million DSL
customers in Germany
» Portal» Market leader in Germany
![Page 7: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/7.jpg)
7
qooxdoo
» RWT's native browser widget toolkit
» qooxdoo is a framework of its own
» Qooxdoo is more than what is used by RAP
![Page 8: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/8.jpg)
8qooxdoo
Pure JavaScript Widget Toolkit like SWT
![Page 9: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/9.jpg)
9qooxdoo
Desktop like Applications in the Browser
![Page 10: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/10.jpg)
10qooxdoo
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
![Page 11: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/11.jpg)
11qooxdoo
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)
![Page 12: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/12.jpg)
12
Architecture
» Server based
» Client based
![Page 13: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/13.jpg)
13Architecture
Server Based
» The RAP model
» All user interface logic runs on the server
![Page 14: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/14.jpg)
14Architecture
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
![Page 15: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/15.jpg)
15Architecture
Client Based
» The qooxdoo model
» User interface logic runs in the browser
» Uses remote procedure calls (RPC) to communicate with thebackend
![Page 16: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/16.jpg)
16Architecture
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
![Page 17: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/17.jpg)
17
Workshop
Building a temperature converter1. Getting started
2. Tooling
3. OOP/TDD
4. Layout basics
5. Events
6. Theming
![Page 18: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/18.jpg)
18Workshop
Getting Started
» Installation
» Building a qooxdoo skeleton application
![Page 19: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/19.jpg)
19Workshop
Getting Started Installation
1. Install Python1. Download the ActivePython 2.6 installer
2. Install ActivePython
3. Verify the Installation» Type python in the command shell
2. Install qooxdoo1. Download the qooxdoo SDK
2. Unzip the qooxdoo SDK to C:/
![Page 20: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/20.jpg)
20Workshop
Getting Started Build a qooxdoo Skeleton
» 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
![Page 21: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/21.jpg)
21Workshop
Getting Started Steps
![Page 22: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/22.jpg)
22Workshop
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
![Page 23: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/23.jpg)
23Workshop
Tooling Linker
» Detect dependencies between JavaScript files
» Sorted list of files to include
» Essential for large applications
» generate.py source, generate.py build
![Page 24: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/24.jpg)
24Workshop
Tooling Optimizer/Packer
» Combine JavaScript files
» Optimize/obfuscate JavaScript
» generate.py build
![Page 25: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/25.jpg)
25Workshop
Tooling Unit Testing
» Unit testing framework like JUnit
» generate.py test
» generate.py test-source
![Page 26: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/26.jpg)
26Workshop
Tooling API documentation
» Extract API documentation from source code
» JavaDoc like comments in the code
» Can be used for custom applications
» generate.py api
![Page 27: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/27.jpg)
27Workshop
Tooling Inspector
» Navigate widget hierarchy
» Modify widgets on the fly
» Cross browser interactive console
» generate.py inspector
![Page 28: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/28.jpg)
28Workshop
Tooling Lint
» 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
![Page 29: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/29.jpg)
29Workshop
Tooling Exercise
» 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
![Page 30: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/30.jpg)
30Workshop
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
![Page 31: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/31.jpg)
31Workshop
OOP qooxdoo vs. Java OOP
![Page 32: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/32.jpg)
32Workshop
OOP qooxdoo vs. Java OOP
» Inheritance
» Properties» Automatically generate accessor and mutator methods
» Optional change events on value changes
![Page 33: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/33.jpg)
33Workshop
OOP Summary
» 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
![Page 34: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/34.jpg)
34Workshop
OOP Test Driven Development
» 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)
![Page 35: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/35.jpg)
35Workshop
OOP Exercise
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
![Page 36: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/36.jpg)
36Workshop
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
![Page 37: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/37.jpg)
37Workshop
Widgets/Layout Widget Tree
» All the widgets in a user interfaceare composed in a tree likestructure
» composite design pattern
» each control can be added to acomposite control
» added using the parent's addmethod
» Reparenting is possible (unlike inSWT)
![Page 38: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/38.jpg)
38Workshop
Widgets/Layout Layout Manager
» 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 callingsetLayoutData on the child.
![Page 39: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/39.jpg)
39Workshop
Widgets/Layout Grow Layout (1/5)
» Simplest layout manager
» All child widgets are stretched to the available size
![Page 40: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/40.jpg)
40Workshop
Widgets/Layout Basic/Canvas Layout (2/5)
» Absolute positioning
» Canvas extends thefunctionality of Basic andsupports
» Percent sizes and coordinates
» Attaching to the bottom andright edges
![Page 41: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/41.jpg)
41Workshop
Widgets/Layout HBox/VBox (3/5)
» places child widgets horizontally (HBox) or vertically (VBox) next toeach other
» Layout properties» flex to configure growing/shrinling
» width respectivley height for percent sizes
![Page 42: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/42.jpg)
42Workshop
Widgets/Layout Dock (4/5)
» 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
![Page 43: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/43.jpg)
43Workshop
Widgets/Layout Grid (5/5)
» Places widgets into a twodimensional grid
» Each cell can contain at mostone widget
» Supports child widgets, whichspan several cells or columns
» Layout properties» row, column
» rowSpan, colSpan
![Page 44: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/44.jpg)
44Workshop
Widgets/Layout Exercise - Temperature Converter UI
1. Create the classconvert.Converter, whichextendsqx.ui.window.Window
2. Show this window by addingthese lines toconvert.Application:
var converter = new convert.Converter();converter.moveTo(50, 30);converter.open();
3. Position the labels and text fiels into a grid.
![Page 45: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/45.jpg)
45Workshop
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
» ...
![Page 46: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/46.jpg)
46Workshop
Events Exercise - React on Text Input
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 thecelsius property
4. Add changeValue event listeners to the celsius and fahrenheitinput fields
» Read the input field's value (.getValue())
» Convert it to a number (parseInt)
» Call setFahrenheit/setCelsius with this value
![Page 47: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/47.jpg)
47Workshop
Theming
» Change the look & feel without changing the application code
![Page 48: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/48.jpg)
48Workshop
Theming Exercise - Appearance.js
![Page 49: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/49.jpg)
49Workshop
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!
![Page 50: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/50.jpg)
50
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
![Page 51: Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged](https://reader033.vdocuments.us/reader033/viewer/2022042518/54bba9fa4a795939368b4577/html5/thumbnails/51.jpg)
51
License
Licensed under Creative CommonsAttribution Non-Commercial No Derivatives
http://creativecommons.org/licenses/by-nc-nd/3.0/