Your SlideShare is downloading. ×
0
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Qooxdoo at B::IT
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Qooxdoo at B::IT

1,473

Published on

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

No Downloads
Views
Total Views
1,473
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 JavaScriptno 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 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. OBJECT ORIENTATION
  • 8. SPEED http://www.macstories.net/news/new-chrome-beta-is-faster-includes-revamped-settings-ui/
  • 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. 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. 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. 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. 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. 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. 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. LOW LEVEL FRAMEWORK• Base for the Widget Toolkit• Cross browser layer• Works standalone• Feature set like and more
  • 17. USED ON
  • 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. WIDGETS
  • 20. WIDGETS Toolbar
  • 21. WIDGETSTree
  • 22. WIDGETS Window
  • 23. WIDGETS TextField
  • 24. WIDGETS Button
  • 25. VIRTUAL• Suitable for huge data sets• Does not render all data SelectBox ComboBox List Tree Table
  • 26. INLINE APPLICATION plain HTML qo o xdo app o lica t io n
  • 27. LAYOUTS• Custom layout managers built in JavaScript• No cross browser issues• predefined set of layouts
  • 28. THEMING• No CSS knowledge needed• No cross browser codeModern Classic Simple
  • 29. DATA BINDING Formating Filtering SortingModel View Validation Converting
  • 30. IDEA a :A b :A <<binding>>+ prop : 12 + prop :
  • 31. IDEA a :A b :A <<binding>>+ prop : 12 + prop : 12
  • 32. IDEA a :A b :A <<binding>>+ prop : 23 + prop : 23
  • 33. IDEA a :A b :A <<binding>>+ prop : 23 + prop : 30 a.bind("prop", b, "prop");
  • 34. DATA BINDINGData Store Model Controller View
  • 35. DATA BINDINGData Store Model Controller View JSON file / service
  • 36. DATA BINDINGData Store Model Controller View load JSON, convert to model
  • 37. DATA BINDINGData Store Model Controller View simple qooxdoo object with properties
  • 38. DATA BINDINGData Store Model Controller View keeps model and view in sync
  • 39. DATA BINDINGData Store Model Controller View simple widget like list, tree, form, ...
  • 40. INTERNATIONALIZATION• Built-in internationalization support• Based on standardized files• Easy to switch during runtime
  • 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. USED ON
  • 43. USED ON
  • 44. DEMO
  • 45. DEVELOPMENTSUPPORT
  • 46. TOOLING• Automatic dependency detection• Packaging for development and deployment• Optimization and minification
  • 47. TESTING• Integrated unit test framework• Integrated support for Selenium tests• Continuous integration for the framework
  • 48. INSPECTOR• Special qooxdoo debugging tool• Handy console for debugging• Select widget by mouse• Selenium integration
  • 49. INSPECTOR
  • 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. 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. 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. Try it yourself! http://qooxdoo.org/http://playground.qooxdoo.org/

×