qooxdoo 3.5

1. qooxdoo
3.5
22. January 2014 | Martin Wittemann | Christopher Zündorf | Richard Sternagel

2. Introduction
Martin Wittemann
Christopher Zündorf
Richard Sternagel
• Head of Frameworks
• Responsible Mobile
• Responsible Tooling
• TechLead of the
• with 1&1 since 2012
• with 1&1 since 2004
& Tooling
qooxdoo project
• with 1&1 since 2009
Developer
Developer

3. qooxdoo
Website
Core
Server
Mobile
Desktop

4. qx.Website
Website

5. Widgets
qx.Desktop

6. Widgets
qx.Desktop
HTML
Missing Features
Missing Features
Not Cross-Browser
???

7. Widgets
Button
Rating
Slider
Tabs
Accordion
Calendar

8. Basics
Initialization
q("button") // returns collection
! .button() // returns button collection
! .setLabel("My Button") // button API
.setStyle("width", "100px"); // collection API
Slider
API
qxWeb
API
2nd query
q("button").setLabel("New Text");
Widget
API
Button
API

9. How to use?
Slider
HTML
<div id="slider"></div>
JavaScript
q("#slider").slider();
q("#slider").setValue(46);
!
q("#slider").on("changeValue", function() {});

10. How to use?
Rating
JavaScript
q.create("<div>")
.rating()
.appendTo(document.body)
.setValue(2);

11. Config & Template
Generic way to change config and templates!
Config
Template
length
symbol
-
step
minimum
maximum
offset
knobContent

12. Config
Rating
JavaScript
q("#rating")
!
.setConfig("length", 10)
!
.setConfig("symbol", "☃")
.render();

13. Template
Slider
JavaScript
q("#slider")
.setTemplate("knobContent", "{{value}}%")
.render();

14. Theming

15. API-Documentation

16. API-Documentation

17. Feedback
?

18. qx.Mobile
Mobile

19. Device Support
iOS
Android 2.x
Android 4.x
Windows
Phone 8
Blackberry
OS 10

20. Improved Platform Support
Enhanced support for Windows Phone 8 and
Internet Explorer 11
✓ Improved UI performance
✓ Many bug fixes
✓ Better multi-touch behaviour

21. 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

22. High-Resolution Images + App Scale
Images are scaled in relation to app scale factor and
device screen resolution
App Scale Factor
1.0
Device Pixel Ratio
1.0
1.5
2.0
1.5
2.0

23. App Scale Benefits
Improve usability and user experience
• Use extra space on big touch devices
• Increase font size for target audiences
• Increase UI element size for outdoor usage
!

24. Adjust Look & Feel
• No complex CSS adjustments required
• One small SCSS file for changing the appearance

25. Adjust Look & Feel
// Theme
$foreground-color: #222;
$background-color: white;
$highlight-color: #3D72C9;

26. Adjust Look & Feel
// Theme
$foreground-color: #263248;
$background-color: white;
$highlight-color: #FF9800;

27. Enhanced Theming
New syntax for enabling single-colored and gradient
backgrounds

28. Enhanced Theming
Added many new theming variables, for additional
customization possibilities
Checkbox
Radio Button
Toggle Button
Slider

29. Enhanced Theming
Picker
Dialog

30. New Mobile Theme: Flat

31. Noteworthy
• Carousel page transition adapts to
swipe velocity
• Added Carousel page overflow
management
• Improved Picker rendering
performance
• Slider displays its value

32. Feedback
?

33. Tooling
Website
Desktop
Mobile

34. Grunt
per
Ex
tal
men
i
The JavaScript Task Runner

35. What is Grunt?
• task runner (a.k.a. build tool)
• configure tasks for automation
• within Gruntfile.js
• runs under Node.js
building, linting,
testing, …

36. Recap: Generator
generate.py {jobName}
•
•
•
•
•
•
•
•
•
•
•
api
build
build-min
build-module-all
build-module-all-min
clean
dependencies
distclean
fix
info
inspector
•
•
•
•
•
•
•
•
•
•
•
lint
migration
pretty
source-*
test
test-source
translation
validate-config
validate-manifest
watch
watch-scss

37. Why Grunt?
proven
plugins
stable
modular
monolithic
Generator
plan
Python
maintenance
extend
Grunt
flux
reuse
JavaScript
developer
reinvent
know-how
external
internal

38. 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

39. Feedback
?

40. qooxdoo
-----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!

41. next...

42. Define a Roadmap

43. Ideas
Core
• Use Grunt for all demo
apps
• Migration of certain
tool parts e.g. Lint
• Build-step using only
JavaScript code

44. Ideas
UI Toolkits
• Universal input device
support
• Code reuse across
application domains
• Resolution Independence
• Responsive Layouts
Core

45. Ideas
Website
• New widgets e.g. Table
• Migration of existing
widgets
• Data-Binding
UI Toolkits
Core

46. Ideas
Website
UI Toolkits
Core
Mobile
• Support for Firefox OS
• Icon Sets

47. Feedback
?