Qooxdoo at B::IT

1,813 views
1,692 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,813
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Qooxdoo at B::IT

  1. 1. 22.03.2011
  2. 2. ABOUT ME• M.Sc. Martin Wittemann• works at• framework architect• started in 2007 with• @wittemann on• won $18 in Atlantic City!
  3. 3. pure JavaScriptno HTML or CSS know-how for RIAs no plugin needed LGPL / EPL
  4. 4. JAVASCRIPT, REALLY?c=document.body.children[0];h=t=150;L=w=c.width=800;u=D=50;H=[];R=Math.random;for($ in C=c.getContext(2d))C[$[J=X=Y=0]+($[6]||)]=C[$];setInterval("if(D)for(x=405,i=y=I=0;i<1e4;)L=H[i++]=i<9|L<w&R()<.3?w:R()*u+80|0;$=++t%99-u;$=$*$/8+20;y+=Y;x+=y-H[(x+X)/u|0]>9?0:X;j=H[o=x/u|0];Y=y<j|Y<0?Y+1:(y=j,J?-10:0);with(C){A=function(c,x,y,r){r&&a(x,y,r,0,7,0);fillStyle=c.P?c:#+ceff99ff78f86eeaaffffd45333.substr(c*3,3);f();ba()};for(D=Z=0;Z<21;Z++){Z<7&&A(Z%6,w/2,235,Z?250-15*Z:w);i=o-5+Z;S=x-i*u;B=S>9&S<41;ta(u-S,0);G=cL(0,T=H[i],0,T+9);T%6||(A(2,25,T-7,5),y^j||B&&(H[i]-=.1,I++));G.P=G.addColorStop;G.P(0,i%7?#7e3:(i^o||y^T||(y=H[i]+=$/99),#c7a));G.P(1,#ca6);i%4&&A(6,t/2%200,9,i%2?27:33);m(-6,h);qt(-6,T,3,T);l(47,T);qt(56,T,56,h);A(G);i%3?0:T<w?(A(G,33,T-15,10),fc(31,T-7,4,9)):(A(7,25,$,9),A(G,25,$,5),fc(24,$,2,h),D=B&y>$-9?1:D);ta(S-u,0)}A(6,u,y-9,11);A(5,M=u+X*.7,Q=y-9+Y/5,8);A(8,M,Q,5);fx(I+¢,5,15)}D=y>h?1:D",u);onkeydown=onkeyup=function(e){E=e.type[5]?4:0;e=e.keyCode;J=e^38?J:E;X=e^37?e^39?X:E:-E} http://js1k.com/2010-first/demo/635
  5. 5. OBJECT ORIENTATION qx.Class.define("Bicycle", { extend : qx.core.Object, members : { __speed : 0, speedUp : function(increment) { this.__speed += increment; } } });
  6. 6. OBJECT ORIENTATIONqx.Class.define("Bicycle", { class Bicycle { extend : qx.core.Object, int speed = 0; members : { __speed : 0, void speedUp(int increment) { speedUp : function(increment) { speed = speed + increment; this.__speed += increment; } } } }});
  7. 7. OBJECT ORIENTATION
  8. 8. SPEED http://www.macstories.net/news/new-chrome-beta-is-faster-includes-revamped-settings-ui/
  9. 9. SPEEDhttp://blogs.msdn.com/b/ie/archive/2010/11/17/html5-and-real-world-site-performance-seventh-ie9-platform-preview-available-for-developers.aspx
  10. 10. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  11. 11. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  12. 12. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  13. 13. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  14. 14. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  15. 15. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  16. 16. LOW LEVEL FRAMEWORK• Base for the Widget Toolkit• Cross browser layer• Works standalone• Feature set like and more
  17. 17. USED ON
  18. 18. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  19. 19. WIDGETS
  20. 20. WIDGETS Toolbar
  21. 21. WIDGETSTree
  22. 22. WIDGETS Window
  23. 23. WIDGETS TextField
  24. 24. WIDGETS Button
  25. 25. VIRTUAL• Suitable for huge data sets• Does not render all data SelectBox ComboBox List Tree Table
  26. 26. INLINE APPLICATION plain HTML qo o xdo app o lica t io n
  27. 27. LAYOUTS• Custom layout managers built in JavaScript• No cross browser issues• predefined set of layouts
  28. 28. THEMING• No CSS knowledge needed• No cross browser codeModern Classic Simple
  29. 29. DATA BINDING Formating Filtering SortingModel View Validation Converting
  30. 30. IDEA a :A b :A <<binding>>+ prop : 12 + prop :
  31. 31. IDEA a :A b :A <<binding>>+ prop : 12 + prop : 12
  32. 32. IDEA a :A b :A <<binding>>+ prop : 23 + prop : 23
  33. 33. IDEA a :A b :A <<binding>>+ prop : 23 + prop : 30 a.bind("prop", b, "prop");
  34. 34. DATA BINDINGData Store Model Controller View
  35. 35. DATA BINDINGData Store Model Controller View JSON file / service
  36. 36. DATA BINDINGData Store Model Controller View load JSON, convert to model
  37. 37. DATA BINDINGData Store Model Controller View simple qooxdoo object with properties
  38. 38. DATA BINDINGData Store Model Controller View keeps model and view in sync
  39. 39. DATA BINDINGData Store Model Controller View simple widget like list, tree, form, ...
  40. 40. INTERNATIONALIZATION• Built-in internationalization support• Based on standardized files• Easy to switch during runtime
  41. 41. INTERNATIONALIZATION without translationvar button1 = new qx.ui.form.Button("First Button");this.getRoot().add(button1); with translationvar button1 = new qx.ui.form.Button(this.tr("First Button"));this.getRoot().add(button1);
  42. 42. USED ON
  43. 43. USED ON
  44. 44. DEMO
  45. 45. DEVELOPMENTSUPPORT
  46. 46. TOOLING• Automatic dependency detection• Packaging for development and deployment• Optimization and minification
  47. 47. TESTING• Integrated unit test framework• Integrated support for Selenium tests• Continuous integration for the framework
  48. 48. INSPECTOR• Special qooxdoo debugging tool• Handy console for debugging• Select widget by mouse• Selenium integration
  49. 49. INSPECTOR
  50. 50. ARCHITECTURE Widgets Layouts ThemingGUIToolkit UI Core Data Binding I18n HTML CSSLow-Level Parts Animation Rendering SelectorBrowser Transport BOM DOM BrowserAbstraction Events LanguageCore OO Extension Custom Events
  51. 51. ARCHITECTURE Widgets Layouts Theming RIA Framework GUI Toolkit UI Core Data Binding { I18n HTML CSS Low-Level Parts Animation Rendering SelectorLow Level Framework Browser Transport BOM DOM Browser Abstraction EventsUniversal Framework Language Core OO Extension Custom Events
  52. 52. ARCHITECTURE Mobile Framework W! NE Widgets Mobile Layouts Theming RIA Framework GUI Toolkit UI Core Widgets Data Binding { I18n HTML CSS Low-Level Parts Rendering Selector AnimationLow Level Framework Browser Transport Browser BOM DOM Abstraction EventsUniversal Framework Core OO Language Extension Custom Events
  53. 53. Try it yourself! http://qooxdoo.org/http://playground.qooxdoo.org/

×