qooxdoo 3.5
DESCRIPTION
qooxdoo 3.5TRANSCRIPT
![Page 1: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/1.jpg)
qooxdoo
3.522. January 2014 | Martin Wittemann | Christopher Zündorf | Richard Sternagel
![Page 2: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/2.jpg)
Martin Wittemann
• Head of Frameworks & Tooling
• TechLead of the qooxdoo project
• with 1&1 since 2009
Introduction
Christopher Zündorf
• Responsible Mobile Developer
• with 1&1 since 2012
Richard Sternagel
• Responsible Tooling Developer
• with 1&1 since 2004
![Page 3: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/3.jpg)
Core
Desktop
Server Mobile
Website
Core
qooxdoo
![Page 4: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/4.jpg)
Website
qx.Website
![Page 5: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/5.jpg)
Widgets
qx.Desktop
![Page 6: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/6.jpg)
Widgets
qx.Desktop HTML
???
Not Cross-Browser
Missing Features
Missing Features
![Page 7: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/7.jpg)
WidgetsButton
Slider
Rating
Tabs
Calendar
Accordion
![Page 8: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/8.jpg)
Slider API
ButtonAPI
WidgetAPI
Basics
q("button") // returns collection!!.button() // returns button collection
.setStyle("width", "100px"); // collection API
Initialization
qxWeb API
.setLabel("My Button") // button API
q("button").setLabel("New Text");2nd query
![Page 9: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/9.jpg)
How to use?
<div id="slider"></div>HTMLSlider
q("#slider").slider();!
JavaScript
q("#slider").setValue(46);q("#slider").on("changeValue", function() {});
![Page 10: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/10.jpg)
How to use?
q.create("<div>") .rating() .appendTo(document.body) .setValue(2);
JavaScript
Rating
![Page 11: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/11.jpg)
Config & TemplateGeneric way to change config and templates!
Config Template
lengthsymbol -
stepminimummaximumoffset
knobContent
![Page 12: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/12.jpg)
Config
q("#rating")!!
JavaScript
Rating
.setConfig("length", 10) .setConfig("symbol", "☃").render();
![Page 13: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/13.jpg)
Template
q("#slider").setTemplate("knobContent", "{{value}}%").render();
JavaScript
Slider
![Page 14: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/14.jpg)
Theming
![Page 15: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/15.jpg)
API-Documentation
![Page 16: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/16.jpg)
API-Documentation
![Page 17: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/17.jpg)
Feedback
?
![Page 18: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/18.jpg)
qx.Mobile
Mobile
![Page 19: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/19.jpg)
Device Support
iOS
Windows Phone 8
Blackberry OS 10
Android 2.x Android 4.x
![Page 20: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/20.jpg)
Improved Platform Support
✓ Improved UI performance ✓ Many bug fixes ✓ Better multi-touch behaviour
Enhanced support for Windows Phone 8 and Internet Explorer 11
![Page 21: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/21.jpg)
Application Scaling• qx.Mobile‘s UI got scalable • Replaced CSS units from px to rem • Enhanced qx.Mobile widgets to be scalable
increase app scale
decrease app scale
![Page 22: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/22.jpg)
High-Resolution Images + App Scale
Images are scaled in relation to app scale factor and device screen resolution
Dev
ice
Pixe
l Rat
ioApp Scale Factor
1.0
1.0
2.0
2.0
1.5
1.5
![Page 23: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/23.jpg)
App Scale BenefitsImprove usability and user experience • Use extra space on big touch devices • Increase font size for target audiences • Increase UI element size for outdoor usage
!
![Page 24: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/24.jpg)
Adjust Look & Feel
• No complex CSS adjustments required • One small SCSS file for changing the appearance
![Page 25: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/25.jpg)
Adjust Look & Feel// Theme$foreground-color: #222;$background-color: white;$highlight-color: #3D72C9;
![Page 26: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/26.jpg)
// Theme$foreground-color: #263248;$background-color: white;$highlight-color: #FF9800;
Adjust Look & Feel
![Page 27: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/27.jpg)
Enhanced ThemingNew syntax for enabling single-colored and gradient backgrounds
![Page 28: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/28.jpg)
Enhanced ThemingAdded many new theming variables, for additional customization possibilities
Checkbox
Radio Button
Toggle Button
Slider
![Page 29: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/29.jpg)
Enhanced ThemingPicker Dialog
![Page 30: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/30.jpg)
New Mobile Theme: Flat
![Page 31: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/31.jpg)
Noteworthy• Carousel page transition adapts to
swipe velocity
• Added Carousel page overflow
management
• Improved Picker rendering
performance
• Slider displays its value
![Page 32: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/32.jpg)
Feedback
?
![Page 33: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/33.jpg)
Tooling
DesktopWebsite Mobile
![Page 34: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/34.jpg)
Grunt
The JavaScript Task Runner
Experimental
![Page 35: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/35.jpg)
What is Grunt?
• task runner (a.k.a. build tool)
• configure tasks for automation
• within Gruntfile.js
• runs under Node.js
building, linting, testing, …
![Page 36: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/36.jpg)
Recap: Generator
• api
• build
• build-min
• build-module-all
• build-module-all-min
• clean
• dependencies
• distclean
• fix
• info
• inspector
generate.py {jobName}
• lint
• migration
• pretty
• source-*
• test
• test-source
• translation
• validate-config
• validate-manifest
• watch
• watch-scss
![Page 37: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/37.jpg)
Why Grunt?
GruntGenerator
monolithic
PythonJavaScript
developer
plugins
know-how
reuse
extend
internalexternal
modularstable
proven
reinvent
maintenance
planflux
![Page 38: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/38.jpg)
Already?
• newly created apps now contain Gruntfile.js
• all Generator jobs are available via Grunt
• Grunt as additional (optional) frontend
!
• Grunt Plugins
• every existing Plugin can be used
• extend Grunt with own Plugins
![Page 39: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/39.jpg)
Feedback
?
![Page 40: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/40.jpg)
-----Bugs------ Core 73 Server 1 Website 11 Mobile 50 Desktop 38 ---- Bugs 173 !-Enhancements-- Core 44 Server 0 Website 19 Mobile 14 Desktop 7 ---- Enh. 84 !Total 257 !
Thanks for using qooxdoo!
qooxdoo
![Page 41: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/41.jpg)
next...
![Page 42: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/42.jpg)
Define a Roadmap
![Page 43: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/43.jpg)
Ideas
Core• Use Grunt for all demo
apps
• Migration of certain tool parts e.g. Lint
• Build-step using only JavaScript code
![Page 44: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/44.jpg)
Ideas
• Universal input device support
• Code reuse across application domains
• Resolution Independence
• Responsive Layouts
UI Toolkits
Core
![Page 45: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/45.jpg)
• New widgets e.g. Table
• Migration of existing widgets
• Data-Binding
Website
Ideas
UI Toolkits
Core
![Page 46: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/46.jpg)
Website
Ideas
UI Toolkits
Core
Mobile• Support for Firefox OS
• Icon Sets
![Page 47: qooxdoo 3.5](https://reader033.vdocuments.us/reader033/viewer/2022042521/5560b453d8b42a033c8b48df/html5/thumbnails/47.jpg)
Feedback
?