Gui Development with qooxdoo

8,536 views
8,387 views

Published on

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

Published in: Business, Technology
1 Comment
3 Likes
Statistics
Notes
  • Hi, I don't suppose you could share the accompanying code for this presentation?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
8,536
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
144
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Gui Development with qooxdoo

  1. 1. GUI Development with qooxdoo Webinale 2008, Germany Sebastian Werner & Fabian Jakobs
  2. 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. 3. Fabian Jakobs • Software Developer at 1&1 Internet AG Since 2007
  4. 4. Your Experience? • JS Frameworks? • Traditional GUI Toolkits? • Programming Languages?
  5. 5. About • Rich Internet Applications (RIA) • Enterprise • Open Source
  6. 6. Contributions • QWT • Qx Transformer • HTML Area • Inspector • Simulator • Upload Widget
  7. 7. Status of 0.8
  8. 8. Completed Features • Event System • Widget API • Layout Implementation • Generator II
  9. 9. Completed Applications • Feed Reader • Demos of Demo Browser • Skeleton • Quickstart
  10. 10. Completed Widgets • Input Fields • Tab View • Scroll Area • List • Groupbox • Tree • Popup • Tooltips • Slider
  11. 11. Legacy Applications • Showcase • API Viewer • Demo Browser • Test Runner • Build Tool
  12. 12. Missing Features • Localization • Sub control support • Improved state support • API polishing
  13. 13. Missing Widgets • Table • Splitpane • Combobox • Menu
  14. 14. Overview • First Steps • Understanding the GUI • Creating the GUI • Data Handling • Making It Work • Improving the GUI • GUI Internals
  15. 15. First Steps
  16. 16. JavaScript Basics • „this“ Keyword Refers to the „Owner“ • Namespaces are Cascaded Objects • Prototype Inheritance • Loosely Typed
  17. 17. Application Structure • OO Driven Development • Convenient Class Declaration • Properties, Mixins & Interfaces • Skeleton Available
  18. 18. Application Sample
  19. 19. Understanding the GUI
  20. 20. Capabilities • Like in Native Toolkits • Highly Dynamic Layout • Completely Themeable • Forget the Browser
  21. 21. l: 30 r: 10 t: 30 t: 10 l: 100 t: 200 Canvas Layout
  22. 22. 1 2 3 Box Layout
  23. 23. north west center Dock Layout
  24. 24. 1, 1 1, 2 2, 1 2, 2 Grid Layout
  25. 25. Widget Types • Containers (List, Toolbar, ...) • Widgets (Image, TextField, ...)
  26. 26. Creating the GUI Step 2
  27. 27. Adding a Dock Layout • Instantiating Classes • Creating the Composite • Adding to the Root • Stretch to the Available Space Step 2
  28. 28. Creating the Toolbar • Deriving From Existing Classes • Using Framework Resources • Adding Buttons • Assigning Tool Tips Step 3
  29. 29. Splitting Horizontally • Contains the Tree and the Right Hand Pane • Using a Horizontal Box Layout • Flexible Layout Step 4
  30. 30. The Tree • Extending qooxdoo‘s Tree Widget • Configuring the Width • The Root Folder • Adding Folders Step 5
  31. 31. Splitting Vertically • Contains the List and the Preview Pane • Defining Percent Heights Step 6
  32. 32. The List • Combination of Label and List • Layouted by a Vertical Box Layout • Make the Label Growable Step 7
  33. 33. Loading Indicator • Adding a Stack Container • Adding the Loading Indicator • Using Local Resources • Align the Image Step 8
  34. 34. The Article • Extending qooxdoo‘s HTML Embed • Inserting Dummy Content • Using Native Overflow Step 9
  35. 35. Questions?
  36. 36. Data Handling
  37. 37. Model State Query State Change Change Notification User Gestures View Controller View Selection MVC
  38. 38. Data Models • Feed List • Feed • Article Step 10
  39. 39. Feed Reader Model
  40. 40. Properties • Setter & Getter • Store Selected Feed & Article • Using Apply Routines
  41. 41. Communication • The Different „Engines“ • Understanding JSON Step 11
  42. 42. Updating • Working with States • Synchronizing the Models • Error Handling
  43. 43. Questions?
  44. 44. Making It Work
  45. 45. Event Basics • Add and Remove Listeners • Defining the context • Any Handlers Step 11
  46. 46. Model Connection • Reacting on Model Changes • Connecting the Tree Step 12
  47. 47. Selection Handling • Available Events • The Selection API • Establish Connection to Tree Selection Step 13
  48. 48. Article Selection • Connection Article to List Selection • Inserting Data Into HTML Step 14
  49. 49. Commands • The „execute“ Event • Key Identifiers • Defining Shortcuts Step 15
  50. 50. Questions?
  51. 51. Improving the GUI
  52. 52. Styling the Article • Including CSS Stylesheets • Configuring HTML Class Names Step 16
  53. 53. Theme Basics • Type of Themes • Named „ID“s • CSS-less
  54. 54. List Header • Applying Fonts • Using Padding • Property Groups Step 17
  55. 55. Decorations • Available Classes • Themed Decorators • Apply Right Hand Separator of the Tree
  56. 56. Add Feed Dialog • Creating Windows • Structuring Dialogs • Labels & Text Fields Step 18
  57. 57. Questions?

×