JavaScript Libraries Overview

          Siarhei Barysiuk
   s.barysiuk@sam-solutions.net
Our roadmap
Libraries: What we will cover today...
5 great open source libraries for your project.
  • prototype
  • jQuery
  • dojo
 ...
Libraries: General picture
Global picture




    Lightweight              Widgets   One-page Applications
Prototype
Prototype: Overview
                      http://prototypejs.org
Prototype: Focus
• DOM manipulation
• Ajax transport
• Utility methods for built-in objects
• Class-based OOP
Prototype: DOM manipulation
Say goodbye to getElementById()

 document.getElementById(quot;idquot;).innerHTML = quot;<li>n...
Prototype: DOM Element extension
                            * extend                   * makePositioned
 * absolutize    ...
Prototype: Creating a DOM element
The old way:
var a = document.createElement('a');
a.setAttribute('class', 'foo');
a.setA...
Prototype: Even more bucks
$((id | element)...) -> [HTMLElement...]
$$(cssRule...) -> [HTMLElement...]
$A(iterable) -> act...
Prototype: Event handling
$('foo').observe('click', respondToClick);

function respondToClick(event) {
  var element = eve...
Prototype: Ajax transport
new Ajax.Request('/some_url',{
		       method:'get',
		       onSuccess: function(transport){
	...
Prototype: Ajax transport
new   Ajax.Request('/some_url', {
		     	   method: 'get',
		     	   parameters: {company: 'ex...
Prototype: Ajax magic
        new Ajax.Updater(
	   	   			{
	   	   	 	 	 	 success: 'products', 3.1
	   	   	 	 	 	 fail...
Prototype: Built-in object extensions
                                                             * all
                 ...
Prototype: Built-in object extensions                    * blank
                                                         ...
Prototype: Class-based OOP
var Person = Class.create({
  initialize: function(name) {
     this.name = name;
  },
  say: f...
Prototype: Real life example
            http://gmx.com http://web.de http://gmx.de
Prototype: Conclusion

• lightweight
• good for small projects
• a lot of useful methods
• transport support
• effects wit...
Questions?
jQuery
jQuery: Overview
                   http://jquery.com
jQuery: Focus
Motto: Write less, do more.
• DOM manipulation
• Ajax transport
• Effects
• Other functionality with plugins
jQuery: DOM manipulation
Very powerful selectors.

$(quot;#myDivquot;).css(quot;borderquot;,quot;3px solid redquot;);

$(q...
jQuery: DOM manipulation
Even more powerful than you expect.
$('li:eq(0)')

$('li:even')

$('li:lt(3)')

$('li:not(.goofy)...
jQuery: DOM manipulation
Attributes:                 Text:
     attr( name )             text( )
     attr( properties   )...
jQuery: DOM manipulation
append( content )
appendTo( content )

prepend( content )
prependTo( content )

after( content )
...
jQuery: Events
Very convenient event handling system.

  3 main methods:

   bind( type, data, fn )

   trigger( type, dat...
jQuery: Binding event handlers
$(quot;pquot;).bind(quot;clickquot;, function(e){
  var str = quot;( quot; + e.pageX + quot...
jQuery: Binding event handlers
$(quot;pquot;).click(function(e){
  var str = quot;( quot; + e.pageX + quot;, quot; + e.pag...
jQuery: Custom events
$(quot;pquot;).bind(quot;myCustomEventquot;, function(e, myName, myValue){
  $(this).text(myName + q...
jQuery: onload event
$(document).ready(function () {
    $(quot;pquot;).text(quot;The DOM is now loaded and can be manipul...
jQuery: Ajax transport
$.ajax({
   type: quot;POSTquot;,
   url: quot;some.phpquot;,
   data: quot;name=John&location=Bost...
jQuery: Ajax transport
$.ajax({
	 url:quot;http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&fo...
jQuery: Effects
show/hide
toggle

slideDown/slideUp
slideToggle

fadeIn/fadeOut
fadeTo

animate
jQuery: Conclusion
• lightweight
• powerful CSS selectors
• ‘less code’ way
• built-in effects and animation
• transport s...
Questions?
Dojo
Dojo: Overview
                 http://dojotoolkit.org
Dojo: Focus
• DOM manipulation
• Animations
• Ajax
• Event and keyboard normalization
• Internationalization (i18n)
• Widg...
Dojo: Package system
Dojo has a package system built-in to load all the code you need,
and is controlled by dojo.require()...
Dojo: Selectors
dojo.addOnLoad(function(){
	 // our dom is ready, get the node:
	 dojo.query(quot;#testHeadingquot;)
		   ...
Dojo: Event handling
dojo.addOnLoad(function(){
    var node = dojo.byId(quot;testHeadingquot;);
    dojo.connect(node,quo...
Dojo: Ajax transport
var init = function(){
	 var contentNode = dojo.byId(quot;contentquot;);
	 dojo.xhrGet({
	 	 url: quo...
Dojo: Ajax transport
// sumbit the form
var formSubmit = function(e){
	   // prevent the form from actually submitting
	  ...
Dojo: Widgets
First Name:
<input type=quot;textquot; size=quot;20quot; name=quot;firstquot;
dojoType=quot;dijit.form.TextB...
Dojo: Dijit at a Glance

                Border Container          AccordionContainer
  ContentPane                       ...
Dojo: DojoX - Dojo eXtensions

   Cometd                             Cryptography
                                        ...
Dojo: Dojo custom build

1. groups together modules into layers
2. interns external non-JavaScript files
3. smooshes the la...
Dojo: Conclusion
• not so lightweight as previous
• tons of features
• separate packages
• custom build
Questions?
qooxdoo
qooxdoo: Overview
                    http://qooxdo.org
qooxdoo: Focus

• One page Rich Internet Applications
• A lot of ideas from Qt
• OOP approach
• No HTML and CSS programming
qooxdoo: The power is in OOP
The main actors of qooxdoo OO are:

• Classes
• Interfaces
• Mixins
qooxdoo: Classes
qx.Class.define(quot;qx.test.Catquot;, {
  construct : function() { ... }
});

qx.Class.define(quot;qx.te...
qooxdoo: Special Types of Classes
qx.Class.define(quot;qx.test.Catquot;, {
  type : quot;staticquot;
  ...
});

qx.Class.d...
qooxdoo: Inheritance
qx.Class.define(quot;qx.test.Animalquot;, {
  members: {
    makeSound : function(howManyTimes) {
   ...
qooxdoo: Interfaces
Defining interface:
qx.Interface.define(quot;qx.test.ISamplequot;,
 {
   extend: [SuperInterfaces],

  ...
qooxdoo: Interfaces
Implementing interface:
qx.Class.define(quot;qx.test.Samplequot;,
 {
   implement: [qx.test.ISample],
...
qooxdoo: Mixins
Defining mixin:
qx.Mixin.define(quot;namequot;,
{
  include: [SuperMixins],

  properties: {
     quot;tabI...
qooxdoo: Mixins
Attaching mixin:
qx.Class.define(quot;my.cool.Classquot;,
{
  include : [my.cool.MMixin, my.other.cool.MMi...
qooxdoo: Properties
...
properties : {
  width : { check : quot;Numberquot;, apply : quot;applyWidthquot; }
}

members :
{...
qooxdoo: GUI
qooxdoo: GUI and even more features
• Layouting
• Widgets
• Interaction
• Selection Handling
• Drag & Drop
• Theming
• Low...
qooxdoo: Tooling
Generator:

• Optimization
• Compressing
• Internalization
• API Documentation
• More
XML description for...
qooxdoo: Real life example
                      http://gmx.com
Questions?
JavaScript Libraries Overview
Upcoming SlideShare
Loading in …5
×

JavaScript Libraries Overview

3,710 views

Published on

Day 1 of 7-days "JavaScript and Rich User Interfaces" training for my colleagues. It covers Prototype, jQuery, Dojo and qooxdoo.

Published in: Technology

JavaScript Libraries Overview

  1. 1. JavaScript Libraries Overview Siarhei Barysiuk s.barysiuk@sam-solutions.net
  2. 2. Our roadmap
  3. 3. Libraries: What we will cover today... 5 great open source libraries for your project. • prototype • jQuery • dojo • qooxdoo
  4. 4. Libraries: General picture Global picture Lightweight Widgets One-page Applications
  5. 5. Prototype
  6. 6. Prototype: Overview http://prototypejs.org
  7. 7. Prototype: Focus • DOM manipulation • Ajax transport • Utility methods for built-in objects • Class-based OOP
  8. 8. Prototype: DOM manipulation Say goodbye to getElementById() document.getElementById(quot;idquot;).innerHTML = quot;<li>node</li>quot;; Say hello to $() $(quot;idquot;).innerHTML = quot;<li>node</li>quot;; $(element) extended DOM element
  9. 9. Prototype: DOM Element extension * extend * makePositioned * absolutize * select * fire * match * addClassName * setOpacity * firstDescendant * next * addMethods * setStyle * getDimensions * nextSiblings * adjacent * show * getElementsByClassName * observe * ancestors * siblings * getElementsBySelector * positionedOffset * childElements * stopObserving * getHeight * previous * classNames * toggle * getOffsetParent * previousSiblings * cleanWhitespace * toggleClassName * getStyle * readAttribute * clonePosition * undoClipping * getWidth * recursivelyCollect * cumulativeOffset * undoPositioned * hasClassName * relativize * cumulativeScrollOffset * up * hide * remove * descendantOf * update * identify * removeClassName * descendants * viewportOffset * immediateDescendants * replace * down * visible * insert * scrollTo * empty * wrap * inspect * writeAttribute * makeClipping $('message').addClassName('read').update('I read this message!').setStyle({opacity: 0.5});
  10. 10. Prototype: Creating a DOM element The old way: var a = document.createElement('a'); a.setAttribute('class', 'foo'); a.setAttribute('href', '/foo.html'); a.appendChild(document.createTextNode(quot;Next pagequot;)); The new way: var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update(quot;Next pagequot;);
  11. 11. Prototype: Even more bucks $((id | element)...) -> [HTMLElement...] $$(cssRule...) -> [HTMLElement...] $A(iterable) -> actualArray $F(element) -> value $H([obj]) -> Hash $R(start, end[, exclusive = false]) -> ObjectRange $w(String) -> Array
  12. 12. Prototype: Event handling $('foo').observe('click', respondToClick); function respondToClick(event) { var element = event.element(); element.addClassName('active'); }
  13. 13. Prototype: Ajax transport new Ajax.Request('/some_url',{ method:'get', onSuccess: function(transport){ var response = transport.responseText || quot;no response textquot;; alert(quot;Success! nnquot; + response); }, onFailure: function(){ alert('Something went wrong...') } }); Also available are onXXX callbacks, where XXX is the HTTP response status like 200 or 404.
  14. 14. Prototype: Ajax transport new Ajax.Request('/some_url', { method: 'get', parameters: {company: 'example', limit: 12} }); new Ajax.Request('/some_url', { parameters: $('id_of_form_element').serialize(true) }); form serialization
  15. 15. Prototype: Ajax magic new Ajax.Updater( { success: 'products', 3.1 failure: 'errors' 3.2 }, '/some_url', 1 { method: 'get', 2 insertion: Insertion.Top 4 } );
  16. 16. Prototype: Built-in object extensions * all * any * collect var myObject = {}; * detect * each * eachSlice ['foo', 'bar', 'baz'].each(function(name, index) { * entries this[name] = index; * find }, myObject); // we have specified the context * findAll * grep * inGroupsOf myObject * include * inject //-> { foo: 0, bar: 1, baz: 2} * invoke * map * max * member * min * partition * pluck * reject * select * size * sortBy * toArray * zip
  17. 17. Prototype: Built-in object extensions * blank * camelize * capitalize * dasherize quot;<h1>hello, i'm HTML</h1>quot;.escapeHTML() * empty * endsWith //-> quot;&lt;h1&gt;hello, i'm HTML&lt;/h1&gt;quot; * escapeHTML * evalJSON * evalScripts 'background-color'.camelize(); // -> 'backgroundColor' * extractScripts * gsub * include 'Prototype framework'.include('frame'); //-> true * inspect 'Prototype framework'.include('frameset');//-> false * interpolate * isJSON * parseQuery * scan quot;echo quot;.times(3); //-> quot;echo echo echo quot; * startsWith * strip * stripScripts quot;#{animals} on a #{transport}quot;.interpolate({ * stripTags animals: quot;Pigsquot;, * sub * succ transport: quot;Surfboardquot; }); * times //-> quot;Pigs on a Surfboardquot; * toArray * toJSON * toQueryParams * truncate * underscore * unescapeHTML * unfilterJSON
  18. 18. Prototype: Class-based OOP var Person = Class.create({ initialize: function(name) { this.name = name; }, say: function(message) { return this.name + ': ' + message; } }); var Pirate = Class.create(Person, { // redefine the speak method say: function($super, message) { return $super(message) + ', yarr!'; } }); var john = new Pirate('Long John'); john.say('ahoy matey'); // -> quot;Long John: ahoy matey, yarr!quot;
  19. 19. Prototype: Real life example http://gmx.com http://web.de http://gmx.de
  20. 20. Prototype: Conclusion • lightweight • good for small projects • a lot of useful methods • transport support • effects with script.aculo.us • good documented • a lot of real project which use prototype
  21. 21. Questions?
  22. 22. jQuery
  23. 23. jQuery: Overview http://jquery.com
  24. 24. jQuery: Focus Motto: Write less, do more. • DOM manipulation • Ajax transport • Effects • Other functionality with plugins
  25. 25. jQuery: DOM manipulation Very powerful selectors. $(quot;#myDivquot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;divquot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;.myClassquot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;*quot;).css(quot;borderquot;,quot;3px solid redquot;); $(quot;div,span,p.myClassquot;).css(quot;borderquot;,quot;3px solid redquot;);
  26. 26. jQuery: DOM manipulation Even more powerful than you expect. $('li:eq(0)') $('li:even') $('li:lt(3)') $('li:not(.goofy)') $('p a[href*=#]') $('code, li.goofy') $('ol .goofy > strong') $('li + li > a[href$=pdf]') $('span:hidden')
  27. 27. jQuery: DOM manipulation Attributes: Text: attr( name ) text( ) attr( properties ) text( val ) attr( key, value ) HTML: attr( key, value ) removeAttr( name ) html( ) Classes: html( val ) addClass( class ) Value: hasClass( class ) removeClass( class ) val( ) toggleClass( class ) val( val )
  28. 28. jQuery: DOM manipulation append( content ) appendTo( content ) prepend( content ) prependTo( content ) after( content ) before( content ) insertAfter( content ) insertBefore( content ) wrap( html ) replaceWith( content ) clone( )
  29. 29. jQuery: Events Very convenient event handling system. 3 main methods: bind( type, data, fn ) trigger( type, data ) unbind( type, data )
  30. 30. jQuery: Binding event handlers $(quot;pquot;).bind(quot;clickquot;, function(e){ var str = quot;( quot; + e.pageX + quot;, quot; + e.pageY + quot; )quot;; $(quot;spanquot;).text(quot;Click happened! quot; + str); }); $(quot;pquot;).bind(quot;dblclickquot;, function(){ $(quot;spanquot;).text(quot;Double-click happened in quot; + this.tagName); }); $(quot;pquot;).bind(quot;mouseenter mouseleavequot;, function(e){ $(this).toggleClass(quot;overquot;); }); $(quot;pquot;).trigger(quot;clickquot;);
  31. 31. jQuery: Binding event handlers $(quot;pquot;).click(function(e){ var str = quot;( quot; + e.pageX + quot;, quot; + e.pageY + quot; )quot;; $(quot;spanquot;).text(quot;Click happened! quot; + str); }); $(quot;pquot;).dblclick(function(){ $(quot;spanquot;).text(quot;Double-click happened in quot; + this.tagName); }); $(quot;pquot;).click();
  32. 32. jQuery: Custom events $(quot;pquot;).bind(quot;myCustomEventquot;, function(e, myName, myValue){ $(this).text(myName + quot;, hi there!quot;); $(quot;spanquot;).stop().css(quot;opacityquot;, 1) .text(quot;myName = quot; + myName) .fadeIn(30).fadeOut(1000); }); $(quot;buttonquot;).click(function () { $(quot;pquot;).trigger(quot;myCustomEventquot;, [ quot;Johnquot; ]); });
  33. 33. jQuery: onload event $(document).ready(function () { $(quot;pquot;).text(quot;The DOM is now loaded and can be manipulated.quot;); });
  34. 34. jQuery: Ajax transport $.ajax({ type: quot;POSTquot;, url: quot;some.phpquot;, data: quot;name=John&location=Bostonquot;, success: function(msg){ alert( quot;Data Saved: quot; + msg ); } }); $.ajax({ url: quot;test.htmlquot;, cache: false, success: function(html){ $(quot;#resultsquot;).append(html); } });
  35. 35. jQuery: Ajax transport $.ajax({ url:quot;http://api.flickr.com/services/feeds/photos_public.gne? tags=cat&tagmode=any&format=jsonquot;, dataType:quot;jsonpquot;, jsonp:quot;jsoncallbackquot;, success: function(data){ //... }) } })
  36. 36. jQuery: Effects show/hide toggle slideDown/slideUp slideToggle fadeIn/fadeOut fadeTo animate
  37. 37. jQuery: Conclusion • lightweight • powerful CSS selectors • ‘less code’ way • built-in effects and animation • transport support (including cross-domain) • a lot of real-life examples
  38. 38. Questions?
  39. 39. Dojo
  40. 40. Dojo: Overview http://dojotoolkit.org
  41. 41. Dojo: Focus • DOM manipulation • Animations • Ajax • Event and keyboard normalization • Internationalization (i18n) • Widgets
  42. 42. Dojo: Package system Dojo has a package system built-in to load all the code you need, and is controlled by dojo.require(). This function allows us to pull in parts of the Dojo Toolkit not provided for in the Base dojo.js, such as Drag and Drop, additional animations, Dijit widgets, DojoX projects, or even your own code. dojo.require(quot;dijit.form.Buttonquot;); dojo.require(quot;dijit.TitlePanequot;);
  43. 43. Dojo: Selectors dojo.addOnLoad(function(){ // our dom is ready, get the node: dojo.query(quot;#testHeadingquot;) // add quot;testClassquot; to its class=quot;quot; attribute .addClass(quot;testClassquot;) // and fade it out after 500 ms .fadeOut({ delay:500 }).play(); });
  44. 44. Dojo: Event handling dojo.addOnLoad(function(){ var node = dojo.byId(quot;testHeadingquot;); dojo.connect(node,quot;onclickquot;,function(){ node.innerHTML = quot;I've been clickedquot;; }); }); dojo.addOnLoad(function(){ dojo.query(quot;#testHeadingquot;) .style(quot;cursorquot;,quot;pointerquot;) .connect(quot;onclickquot;,function(){ this.innerHTML = quot;I've been clickedquot;; }); });
  45. 45. Dojo: Ajax transport var init = function(){ var contentNode = dojo.byId(quot;contentquot;); dojo.xhrGet({ url: quot;js/sample.txtquot;, handleAs: quot;textquot;, load: function(data,args){ // fade out the node we're modifying dojo.fadeOut({ node: contentNode, onEnd: function(){ // set the data, fade it back in contentNode.innerHTML = data; dojo.fadeIn({node: contentNode}).play(); } }).play(); }, // if any error occurs, it goes here: error: function(error,args){ console.warn(quot;error!quot;,error); } }); }; dojo.addOnLoad(init);
  46. 46. Dojo: Ajax transport // sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.preventDefault(); // submit the form in the background dojo.xhrPost({ url: quot;alternate-submit.phpquot;, form: quot;mainFormquot;, handleAs: quot;textquot;, handle: function(data,args){ if(typeof data == quot;errorquot;){ console.warn(quot;error!quot;,args); }else{ // show our response console.log(data); } } }); }; dojo.addOnLoad(function(){ var theForm = dojo.byId(quot;mainFormquot;); // another dojo.connect syntax: call a function directly dojo.connect(theForm,quot;onsubmitquot;,formSubmit); });
  47. 47. Dojo: Widgets First Name: <input type=quot;textquot; size=quot;20quot; name=quot;firstquot; dojoType=quot;dijit.form.TextBoxquot; trim=quot;truequot; propercase=quot;truequot; /> Price: <input type=quot;textquot; maxlength=quot;12quot; class=quot;fillwidth currencyquot; id=quot;grossincomequot; name=quot;grossincomequot; value=quot;0.00quot; dojoType=quot;dijit.form.CurrencyTextBoxquot; required=quot;truequot; onChange=quot;updateTotals()quot; currency=quot;USDquot;/> dojo.require(quot;dijit.form.TextBoxquot;); dojo.require(quot;dijit.form.CurrencyTextquot;);
  48. 48. Dojo: Dijit at a Glance Border Container AccordionContainer ContentPane Toolbar Slider ComboBox CurrencyTextBox NumberTextBox CheckBox DateTextBox Textarea ValidationTextBox FilteringSelect InlineEditBox TimeTextBox TabContainer NumberSpinner StackContainer Menu Dialog Tree ProgressBar Editor Grid
  49. 49. Dojo: DojoX - Dojo eXtensions Cometd Cryptography Widgets Charting FX Data Layout Collections Wire Grid I/O Image Timing XML Utilities Offline GFX String Utilities Validate UUID
  50. 50. Dojo: Dojo custom build 1. groups together modules into layers 2. interns external non-JavaScript files 3. smooshes the layer down with ShrinkSafe 4. copies all non-layered scripts to the appropriate places
  51. 51. Dojo: Conclusion • not so lightweight as previous • tons of features • separate packages • custom build
  52. 52. Questions?
  53. 53. qooxdoo
  54. 54. qooxdoo: Overview http://qooxdo.org
  55. 55. qooxdoo: Focus • One page Rich Internet Applications • A lot of ideas from Qt • OOP approach • No HTML and CSS programming
  56. 56. qooxdoo: The power is in OOP The main actors of qooxdoo OO are: • Classes • Interfaces • Mixins
  57. 57. qooxdoo: Classes qx.Class.define(quot;qx.test.Catquot;, { construct : function() { ... } }); qx.Class.define(quot;qx.test.Catquot;, { ... statics : { LEGS: 4, makeSound : function() { ... } } }); qx.Class.define(quot;qx.test.Catquot;, { ... members: { name : quot;Kittyquot;, getName: function() { return this.name } } });
  58. 58. qooxdoo: Special Types of Classes qx.Class.define(quot;qx.test.Catquot;, { type : quot;staticquot; ... }); qx.Class.define(quot;qx.test.Catquot;, { type : quot;abstractquot; ... }); qx.Class.define(quot;qx.test.Catquot;, { type : quot;singletonquot; ... });
  59. 59. qooxdoo: Inheritance qx.Class.define(quot;qx.test.Animalquot;, { members: { makeSound : function(howManyTimes) { .... } } }); qx.Class.define(quot;qx.test.Catquot;, { extend: qx.test.Animal, members: { makeSound : function() { this.debug(quot;I'm a catquot;); /* howManyTimes or any other parameter are passed. We don't need to know how many parameters are used. */ arguments.callee.base.apply(this, arguments); } } });
  60. 60. qooxdoo: Interfaces Defining interface: qx.Interface.define(quot;qx.test.ISamplequot;, { extend: [SuperInterfaces], properties: {quot;colorquot;: {}, quot;namequot;: {} }, members: { meth1: function() { return true; }, meth2: function(a, b) { return arguments.length == 2; }, meth3: function(c) { return qx.Class.hasInterface(c.constructor, qx.some.IInterface); } }, statics: { PI : 3.14, staticMethod: function(z) { return typeof z == quot;stringquot;; } }, });
  61. 61. qooxdoo: Interfaces Implementing interface: qx.Class.define(quot;qx.test.Samplequot;, { implement: [qx.test.ISample], properties: { quot;colorquot;: { check: quot;colorquot;}, quot;namequot;: { check: quot;Stringquot;} }, members: { meth1: function() { return 42; }, meth2: function(a, b) { return a+b }, meth3: function(c) { c.foo() } } });
  62. 62. qooxdoo: Mixins Defining mixin: qx.Mixin.define(quot;namequot;, { include: [SuperMixins], properties: { quot;tabIndexquot;: {check: quot;Numberquot;, init: -1} }, members: { prop1: quot;fooquot;, meth1: function() {}, meth2: function() {} } });
  63. 63. qooxdoo: Mixins Attaching mixin: qx.Class.define(quot;my.cool.Classquot;, { include : [my.cool.MMixin, my.other.cool.MMixin] ... }); qx.Class.include(qx.ui.core.Widget, qx.MWidgetExtensions);
  64. 64. qooxdoo: Properties ... properties : { width : { check : quot;Numberquot;, apply : quot;applyWidthquot; } } members : { applyWidth : function(value) { this.setStyleProperty(quot;widthquot;, value + quot;pxquot;); } } ... widget.addEventListener(quot;changeWidthquot;, function(e) { e.getValue().innerHTML = quot;Hello Worldquot;; });
  65. 65. qooxdoo: GUI
  66. 66. qooxdoo: GUI and even more features • Layouting • Widgets • Interaction • Selection Handling • Drag & Drop • Theming • Low-level Ajax Transport • RPC • Logging and Debugging • Unit testing
  67. 67. qooxdoo: Tooling Generator: • Optimization • Compressing • Internalization • API Documentation • More XML description for UI - qxtransformer http://qxtransformer.org
  68. 68. qooxdoo: Real life example http://gmx.com
  69. 69. Questions?

×