qooxdoo 3.5

3,643 views

Published on

qooxdoo 3.5

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,643
On SlideShare
0
From Embeds
0
Number of Embeds
1,449
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

qooxdoo 3.5

  1. 1. qooxdoo 3.5 22. January 2014 | Martin Wittemann | Christopher Zündorf | Richard Sternagel
  2. 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. 3. qooxdoo Website Core Server Mobile Desktop
  4. 4. qx.Website Website
  5. 5. Widgets qx.Desktop
  6. 6. Widgets qx.Desktop HTML Missing Features Missing Features Not Cross-Browser ???
  7. 7. Widgets Button Rating Slider Tabs Accordion Calendar
  8. 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. 9. How to use? Slider HTML <div id="slider"></div> JavaScript q("#slider").slider(); q("#slider").setValue(46); ! q("#slider").on("changeValue", function() {});
  10. 10. How to use? Rating JavaScript q.create("<div>") .rating() .appendTo(document.body) .setValue(2);
  11. 11. Config & Template Generic way to change config and templates! Config Template length symbol - step minimum maximum offset knobContent
  12. 12. Config Rating JavaScript q("#rating") ! .setConfig("length", 10) ! .setConfig("symbol", "☃") .render();
  13. 13. Template Slider JavaScript q("#slider") .setTemplate("knobContent", "{{value}}%") .render();
  14. 14. Theming
  15. 15. API-Documentation
  16. 16. API-Documentation
  17. 17. Feedback ?
  18. 18. qx.Mobile Mobile
  19. 19. Device Support iOS Android 2.x Android 4.x Windows Phone 8 Blackberry OS 10
  20. 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. 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. 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. 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. 24. Adjust Look & Feel • No complex CSS adjustments required • One small SCSS file for changing the appearance
  25. 25. Adjust Look & Feel // Theme $foreground-color: #222; $background-color: white; $highlight-color: #3D72C9;
  26. 26. Adjust Look & Feel // Theme $foreground-color: #263248; $background-color: white; $highlight-color: #FF9800;
  27. 27. Enhanced Theming New syntax for enabling single-colored and gradient backgrounds
  28. 28. Enhanced Theming Added many new theming variables, for additional customization possibilities Checkbox Radio Button Toggle Button Slider
  29. 29. Enhanced Theming Picker Dialog
  30. 30. New Mobile Theme: Flat
  31. 31. Noteworthy • Carousel page transition adapts to swipe velocity • Added Carousel page overflow management • Improved Picker rendering performance • Slider displays its value
  32. 32. Feedback ?
  33. 33. Tooling Website Desktop Mobile
  34. 34. Grunt per Ex tal men i The JavaScript Task Runner
  35. 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. 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. 37. Why Grunt? proven plugins stable modular monolithic Generator plan Python maintenance extend Grunt flux reuse JavaScript developer reinvent know-how external internal
  38. 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. 39. Feedback ?
  40. 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. 41. next...
  42. 42. Define a Roadmap
  43. 43. Ideas Core • Use Grunt for all demo apps • Migration of certain tool parts e.g. Lint • Build-step using only JavaScript code
  44. 44. Ideas UI Toolkits • Universal input device support • Code reuse across application domains • Resolution Independence • Responsive Layouts Core
  45. 45. Ideas Website • New widgets e.g. Table • Migration of existing widgets • Data-Binding UI Toolkits Core
  46. 46. Ideas Website UI Toolkits Core Mobile • Support for Firefox OS • Icon Sets
  47. 47. Feedback ?

×