Weitere ähnliche Inhalte Ähnlich wie qooxdoo at VKSI-RIA-Comparison (20) Mehr von Martin Wittemann (6) 2. ABOUT ME
• M.Sc. Martin Wittemann
• works at
• framework architect
• started in 2007 with
• @wittemann on
• won $18 in Atlantic City!
Mittwoch, 2. Februar 2011
3. 1.
2.
3.
4.
5. Google Web Toolkit
Mittwoch, 2. Februar 2011
4. pure JavaScript
no HTML or CSS needed
no plugin needed
Open Source
Mittwoch, 2. Februar 2011
5. 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
Mittwoch, 2. Februar 2011
6. OBJECT ORIENTATION
qx.Class.define("Bicycle", {
extend : qx.core.Object,
members : {
__speed : 0,
speedUp : function(increment) {
this.__speed += increment;
}
}
});
Mittwoch, 2. Februar 2011
7. 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; }
} }
}
});
Mittwoch, 2. Februar 2011
9. SPEED
http://ie.microsoft.com/testdrive/benchmarks/SunSpider/Default.html
Mittwoch, 2. Februar 2011
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
Mittwoch, 2. Februar 2011
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
Mittwoch, 2. Februar 2011
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
Mittwoch, 2. Februar 2011
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
Mittwoch, 2. Februar 2011
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
Mittwoch, 2. Februar 2011
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
Mittwoch, 2. Februar 2011
16. LOW LEVEL FRAMEWORK
• Base for the Widget Toolkit
• Cross browser layer
• Works standalone
• Feature set like
Mittwoch, 2. Februar 2011
20. 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
Mittwoch, 2. Februar 2011
23. WIDGETS Toolbar
Mittwoch, 2. Februar 2011
24. WIDGETS
Tree
Mittwoch, 2. Februar 2011
25. WIDGETS
Window
Mittwoch, 2. Februar 2011
26. WIDGETS
TextField
Mittwoch, 2. Februar 2011
27. WIDGETS
Button
Mittwoch, 2. Februar 2011
29. LAYOUTS
• Custom layout system build in JavaScript
• No cross browser issues
• predefined set of layouts
Mittwoch, 2. Februar 2011
30. THEMING
• No CSS knowledge needed
• No cross browser code
Mittwoch, 2. Februar 2011
31. THEMING
• No CSS knowledge needed
• No cross browser code
Modern
Mittwoch, 2. Februar 2011
32. THEMING
• No CSS knowledge needed
• No cross browser code
Modern
Classic
Mittwoch, 2. Februar 2011
33. THEMING
• No CSS knowledge needed
• No cross browser code
Modern
Classic
Simple
Mittwoch, 2. Februar 2011
38. TOOLING
• Automatic dependency detection
• Packaging for development and deployment
• Optimization and minification
Mittwoch, 2. Februar 2011
39. TESTING
• Integrated unit test framework
• Integrated support for Selenium tests
• Continuous integration for the framework
Mittwoch, 2. Februar 2011
40. INTERNATIONALIZATION
• Build in internationalization support
• based on standaridized files
• Easy to switch during runtime
Mittwoch, 2. Februar 2011
51. Try it yourself!
http://qooxdoo.org/
http://playground.qooxdoo.org/
Mittwoch, 2. Februar 2011
