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