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