Qooxdoo at B::IT
1 like1,261 views
- The document discusses a JavaScript framework that provides widgets, layouts, theming, data binding and other features for building rich internet applications (RIAs) without needing HTML, CSS, or plugin knowledge. - The framework has a low-level core that provides cross-browser functionality as well as a GUI toolkit layer that includes pre-built widgets like trees, windows, text fields and buttons. It also supports features like virtual rendering, inline applications, and predefined layouts. - Theming can be done without CSS knowledge, and data binding helps keep views and models in sync through formatting, filtering, sorting, validation and conversion.
![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](https://image.slidesharecdn.com/qooxdoo-110323024304-phpapp02/85/Qooxdoo-at-B-IT-4-320.jpg)
Qooxdoo at B::IT
- 1. 22.03.2011
- 2. ABOUT ME • M.Sc. Martin Wittemann • works at • framework architect • started in 2007 with • @wittemann on • won $18 in Atlantic City!
- 3. pure JavaScript no HTML or CSS know-how for RIAs no plugin needed LGPL / EPL
- 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. OBJECT ORIENTATION qx.Class.define("Bicycle", { extend : qx.core.Object, members : { __speed : 0, speedUp : function(increment) { this.__speed += increment; } } });
- 6. OBJECT ORIENTATION qx.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; } } } } });
- 8. SPEED http://www.macstories.net/news/new-chrome-beta-is-faster-includes-revamped-settings-ui/
- 10. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 11. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 12. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 13. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 14. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 15. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 16. LOW LEVEL FRAMEWORK • Base for the Widget Toolkit • Cross browser layer • Works standalone • Feature set like and more
- 17. USED ON
- 19. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 20. WIDGETS
- 21. WIDGETS Toolbar
- 22. WIDGETS Tree
- 23. WIDGETS Window
- 24. WIDGETS TextField
- 25. WIDGETS Button
- 27. VIRTUAL • Suitable for huge data sets • Does not render all data SelectBox ComboBox List Tree Table
- 28. INLINE APPLICATION plain HTML qo o xdo app o lica t io n
- 29. LAYOUTS • Custom layout managers built in JavaScript • No cross browser issues • predefined set of layouts
- 30. THEMING • No CSS knowledge needed • No cross browser code Modern Classic Simple
- 31. DATA BINDING Formating Filtering Sorting Model View Validation Converting
- 32. IDEA a :A b :A <<binding>> + prop : 12 + prop :
- 33. IDEA a :A b :A <<binding>> + prop : 12 + prop : 12
- 34. IDEA a :A b :A <<binding>> + prop : 23 + prop : 23
- 35. IDEA a :A b :A <<binding>> + prop : 23 + prop : 30 a.bind("prop", b, "prop");
- 36. DATA BINDING Data Store Model Controller View
- 37. DATA BINDING Data Store Model Controller View JSON file / service
- 38. DATA BINDING Data Store Model Controller View load JSON, convert to model
- 39. DATA BINDING Data Store Model Controller View simple qooxdoo object with properties
- 40. DATA BINDING Data Store Model Controller View keeps model and view in sync
- 41. DATA BINDING Data Store Model Controller View simple widget like list, tree, form, ...
- 42. INTERNATIONALIZATION • Built-in internationalization support • Based on standardized files • Easy to switch during runtime
- 43. INTERNATIONALIZATION without translation var button1 = new qx.ui.form.Button("First Button"); this.getRoot().add(button1); with translation var button1 = new qx.ui.form.Button(this.tr("First Button")); this.getRoot().add(button1);
- 44. USED ON
- 45. USED ON
- 46. DEMO
- 48. TOOLING • Automatic dependency detection • Packaging for development and deployment • Optimization and minification
- 49. TESTING • Integrated unit test framework • Integrated support for Selenium tests • Continuous integration for the framework
- 50. INSPECTOR • Special qooxdoo debugging tool • Handy console for debugging • Select widget by mouse • Selenium integration
- 51. INSPECTOR
- 52. ARCHITECTURE Widgets Layouts Theming GUI Toolkit UI Core Data Binding I18n HTML CSS Low-Level Parts Animation Rendering Selector Browser Transport BOM DOM Browser Abstraction Events Language Core OO Extension Custom Events
- 53. ARCHITECTURE Widgets Layouts Theming RIA Framework GUI Toolkit UI Core Data Binding { I18n HTML CSS Low-Level Parts Animation Rendering Selector Low Level Framework Browser Transport BOM DOM Browser Abstraction Events Universal Framework Language Core OO Extension Custom Events
- 54. 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 Animation Low Level Framework Browser Transport Browser BOM DOM Abstraction Events Universal Framework Core OO Language Extension Custom Events
- 55. Try it yourself! http://qooxdoo.org/ http://playground.qooxdoo.org/