Developing web applications with Eclipse RAP Technology

Lecture 08 - Qooxdoo

This presentation is given by

 » Fabian Ja...
Review

General information on the Eclipse RAP Course

Title: Developing web applications with Eclipse RAP technology

Tim...
Goal of the course

The goal of this course is to enable the attendants to create rich and
interactive web 2.0 application...
Contents of this lecture - Qooxdoo


8 23.3. Create a standalone qooxdoo application
 » Introduction
     » Fabian Jakobs,...
Introduction

Fabian Jakobs
 » fabian.jakobs@1und1.de

 » JavaScript framework developer at 1&1

 » Working on qooxdoo sin...
1&1

» Part of United Internet

» Products
    » Hosting
        » Market leader in Germany
          and UK, number 5 in ...
qooxdoo




» RWT's native browser widget toolkit

» qooxdoo is a framework of its own

» Qooxdoo is more than what is use...
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)...
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 comp...
Architecture

» Server based

» Client based




                                12
Server Based




» The RAP model

» All user interface logic runs on the server




                                      ...
Server Based




» Advantages
   » (+) Backend communication is trivial
   » (+) Secure
   » (+) Same Programming language...
Client Based




» The qooxdoo model

» User interface logic runs in the browser

» Uses remote procedure calls (RPC) to c...
Client Based




» Advantages
   » (+) User interaction events can be handled locally
   » (+) It's possible to leverage s...
Workshop

Building a temperature converter
 1. Getting started

 2. Tooling

 3. OOP/TDD

 4. Layout basics

 5. Events

 ...
Getting Started

» Installation

» Building a qooxdoo skeleton application




                                           ...
Installation
Getting Started


 1. Install Python
      1. Download the ActivePython 2.6 installer
     2. Install ActiveP...
Build a qooxdoo Skeleton
Getting Started


 » Create a new project in the Eclipse Workspace
      » File / New / Other.. /...
Steps
Getting Started




                          Workshop 21
Tooling

» When we started nearly no tools existed
    » But tools are necessary for professional development
    » We had...
Linker
Tooling




 » Detect dependencies between JavaScript files

 » Sorted list of files to include

 » Essential for l...
Optimizer/Packer
Tooling




 » Combine JavaScript files

 » Optimize/obfuscate JavaScript

 » generate.py build

        ...
Unit Testing
Tooling




 » Unit testing framework like JUnit

 » generate.py test

 » generate.py test-source


         ...
API documentation
Tooling




 » Extract API documentation from source code

 » JavaDoc like comments in the code

 » Can ...
Inspector
Tooling




 » Navigate widget hierarchy

 » Modify widgets on the fly

 » Cross browser interactive console

 »...
Lint
Tooling


 » Static code analysis
      » Find common coding mistakes
      » Enforce coding guidelines

 » Especiall...
Exercise
Tooling


 » Run these jobs and check the results




Command                            Result
generate.py sourc...
OOP

» JavaScript provides only basic OOP features
    » Prototype based inheritance
    » No interfaces
    » calling ove...
qooxdoo vs. Java OOP
OOP




                             Workshop 31
qooxdoo vs. Java OOP
OOP


 » Inheritance




 » Properties
      » Automatically generate accessor and mutator methods
  ...
Summary
OOP


 » qooxdoo supports most of Java's OOP features
      » Classes
      » Interfaces
      » Namespaces
      ...
Test Driven Development
OOP


 » Principles
      » Don't write production code unless it makes a failing test pass
      ...
Exercise
OOP


1. Write the test
    » Write the class convert.test.TemperatureUtil, which
       extends qx.dev.unit.Test...
Widgets/Layout

Widget Types
 » Basic widget
     » Widget, Image, Label, Atom

 » Form widgets
     » Button, TextField, ...
Widget Tree
Widgets/Layout


 » All the widgets in a user interface
   are composed in a tree like
   structure
      » co...
Layout Manager
Widgets/Layout


 » Very similar to SWT

 » a Layout Manager is assigned to the parent

 » corresponding La...
Grow Layout (1/5)
Widgets/Layout


 » Simplest layout manager

 » All child widgets are stretched to the available size


...
Basic/Canvas Layout (2/5)
Widgets/Layout


 » Absolute positioning

 » Canvas extends the
   functionality of Basic and
  ...
HBox/VBox (3/5)
Widgets/Layout




 » places child widgets horizontally (HBox) or vertically (VBox) next to
   each other
...
Dock (4/5)
Widgets/Layout




 » Docks children to one of the parent's edges

 » Layout properties
      » edge - one of n...
Grid (5/5)
Widgets/Layout


 » Places widgets into a two
   dimensional grid

 » Each cell can contain at most
   one widg...
Exercise - Temperature Converter UI
Widgets/Layout


1. Create the class
   convert.Converter, which
   extends
   qx.ui.w...
Events

» User interaction result in events

» Events can be handled by using event listeners
    » in JavaScript/qooxdoo
...
Exercise - React on Text Input
Events


1. Add a property celsius. This is the reference temperature

2. Add getFahrenheit...
Theming




» Change the look & feel without changing the application code


                                             ...
Exercise - Appearance.js
Theming




                                     Workshop 48
Possible Improvements




» Error handling if user enters an invalid number

» Use localized number formatter and parser

...
Resources

» qooxdoo
    » Online manual
    » API viewer
    » Demo browser

» JavaScript
    » quot;JavaScript: The Good...
License

Licensed under Creative Commons
  Attribution Non-Commercial No Derivatives

http://creativecommons.org/licenses/...
Upcoming SlideShare
Loading in …5
×

Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged

4,562 views

Published on

Slides from a lecture held at the University of Szeged about the JavaScript RIA framework qoodoo.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,562
On SlideShare
0
From Embeds
0
Number of Embeds
907
Actions
Shares
0
Downloads
89
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lecture 8 - Qooxdoo - Rap Course At The University Of Szeged

  1. 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. 1
  2. 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 quot;Irinyi 225quot;, University of Szeged Course is given by: » CAS Software AG, Karlsruhe; CAS Software Kft., Szeged » EclipseSource, Karlsruhe Contact: » Istvan Ballok, Balazs Brinkus 2
  3. 3. 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
  4. 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 4
  5. 5. 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
  6. 6. 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
  7. 7. qooxdoo » RWT's native browser widget toolkit » qooxdoo is a framework of its own » Qooxdoo is more than what is used by RAP 7
  8. 8. Pure JavaScript Widget Toolkit like SWT qooxdoo 8
  9. 9. Desktop like Applications in the Browser qooxdoo 9
  10. 10. 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
  11. 11. 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
  12. 12. Architecture » Server based » Client based 12
  13. 13. Server Based » The RAP model » All user interface logic runs on the server Architecture 13
  14. 14. 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
  15. 15. Client Based » The qooxdoo model » User interface logic runs in the browser » Uses remote procedure calls (RPC) to communicate with the backend Architecture 15
  16. 16. 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
  17. 17. Workshop Building a temperature converter 1. Getting started 2. Tooling 3. OOP/TDD 4. Layout basics 5. Events 6. Theming 17
  18. 18. Getting Started » Installation » Building a qooxdoo skeleton application Workshop 18
  19. 19. 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
  20. 20. 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_workspacews_qooxdooconvert » Navigate to the project folder using the command line » and create a qooxdoo skeleton application » C:>cd C:_DEV_workspacews_qooxdooconvert » C:_DEV_workspacews_qooxdooconvert> c:qooxdoo-0.8.2-sdktoolbincreate-application.py -n convert » C:_DEV_workspacews_qooxdooconvert>cd convert » C:_DEV_workspacews_qooxdooconvertconvert> generate.py source » Refresh the project in Eclipse (F5) » Open the source/index.html in the Browser Workshop 20
  21. 21. Steps Getting Started Workshop 21
  22. 22. 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
  23. 23. 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
  24. 24. Optimizer/Packer Tooling » Combine JavaScript files » Optimize/obfuscate JavaScript » generate.py build Workshop 24
  25. 25. Unit Testing Tooling » Unit testing framework like JUnit » generate.py test » generate.py test-source Workshop 25
  26. 26. 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
  27. 27. Inspector Tooling » Navigate widget hierarchy » Modify widgets on the fly » Cross browser interactive console » generate.py inspector Workshop 27
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. qooxdoo vs. Java OOP OOP Workshop 31
  32. 32. qooxdoo vs. Java OOP OOP » Inheritance » Properties » Automatically generate accessor and mutator methods » Optional change events on value changes Workshop 32
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. 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
  38. 38. 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
  39. 39. Grow Layout (1/5) Widgets/Layout » Simplest layout manager » All child widgets are stretched to the available size Workshop 39
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. 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
  47. 47. Theming » Change the look & feel without changing the application code Workshop 47
  48. 48. Exercise - Appearance.js Theming Workshop 48
  49. 49. 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
  50. 50. Resources » qooxdoo » Online manual » API viewer » Demo browser » JavaScript » quot;JavaScript: The Good Parts: Working with the Shallow Grain of JavaScriptquot; by Douglas Crockford » quot;JavaScript. The Definitive Guidequot; by David Flanagan 50
  51. 51. License Licensed under Creative Commons Attribution Non-Commercial No Derivatives http://creativecommons.org/licenses/by-nc-nd/3.0/ 51

×