Step by step workshop to build a full-blown qooxdoo based Feed-Reader application.

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

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

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

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

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

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

7. Status of 0.8

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

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

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

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

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

13. Missing Widgets
• Table
• Splitpane
• Combobox
• Menu

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

15. First Steps

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

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

18. Application Sample

19. Understanding the GUI

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

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

22. 1 2 3
Box Layout

23. north
west center
Dock Layout

24. 1, 1 1, 2
2, 1 2, 2
Grid Layout

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

26. Creating the GUI
Step 2

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

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

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

30. The Tree
• Extending qooxdoo‘s Tree Widget
• Configuring the Width
• The Root Folder
• Adding Folders
Step 5

31. Splitting Vertically
• Contains the List and the Preview Pane
• Defining Percent Heights
Step 6

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

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

34. The Article
• Extending qooxdoo‘s HTML Embed
• Inserting Dummy Content
• Using Native Overflow
Step 9

35. Questions?

36. Data Handling

37. Model
State Query
State Change
Change Notification
User Gestures
View Controller
View Selection
MVC

38. Data Models
• Feed List
• Feed
• Article
Step 10

39. Feed Reader Model

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

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

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

43. Questions?

44. Making It Work

45. Event Basics
• Add and Remove Listeners
• Defining the context
• Any Handlers
Step 11

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

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

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

49. Commands
• The „execute“ Event
• Key Identifiers
• Defining Shortcuts
Step 15

50. Questions?

51. Improving the GUI

52. Styling the Article
• Including CSS Stylesheets
• Configuring HTML Class Names
Step 16

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

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

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

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

57. Questions?