The document discusses a presentation on GUI development using the qooxdoo JavaScript framework. It provides an overview of the framework and its features, describes the status of various widgets and applications built with it, outlines the steps to build a sample feed reader application in qooxdoo, and covers styling, theming, and improving the application's GUI.

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?