JavaScript Libraries Overview
-
Upload
siarhei-barysiuk -
Category
Technology
-
view
3.157 -
download
2
description
Transcript of JavaScript Libraries Overview
![Page 1: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/1.jpg)
![Page 3: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/3.jpg)
Our roadmap
![Page 4: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/4.jpg)
Libraries: What we will cover today...
5 great open source libraries for your project.
• prototype• jQuery• dojo• qooxdoo
![Page 5: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/5.jpg)
Libraries: General picture
Global picture
Lightweight Widgets One-page Applications
![Page 6: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/6.jpg)
Prototype
![Page 7: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/7.jpg)
Prototype: Overviewhttp://prototypejs.org
![Page 8: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/8.jpg)
Prototype: Focus
• DOM manipulation• Ajax transport• Utility methods for built-in objects• Class-based OOP
![Page 9: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/9.jpg)
Prototype: DOM manipulation
Say goodbye to getElementById()
Say hello to $()
document.getElementById("id").innerHTML = "<li>node</li>";
$("id").innerHTML = "<li>node</li>";
$(element) extended DOM element
![Page 10: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/10.jpg)
Prototype: DOM Element extension
* absolutize * addClassName * addMethods * adjacent * ancestors * childElements * classNames * cleanWhitespace * clonePosition * cumulativeOffset * cumulativeScrollOffset * descendantOf * descendants * down * empty
* makePositioned * match * next * nextSiblings * observe * positionedOffset * previous * previousSiblings * readAttribute * recursivelyCollect * relativize * remove * removeClassName * replace * scrollTo
* extend * fire * firstDescendant * getDimensions * getElementsByClassName * getElementsBySelector * getHeight * getOffsetParent * getStyle * getWidth * hasClassName * hide * identify * immediateDescendants * insert * inspect * makeClipping
* select * setOpacity * setStyle * show * siblings * stopObserving * toggle * toggleClassName * undoClipping * undoPositioned * up * update * viewportOffset * visible * wrap * writeAttribute
$('message').addClassName('read').update('I read this message!').setStyle({opacity: 0.5});
![Page 11: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/11.jpg)
Prototype: Creating a DOM elementThe old way:
var a = document.createElement('a');a.setAttribute('class', 'foo');a.setAttribute('href', '/foo.html');a.appendChild(document.createTextNode("Next page"));
The new way:
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
![Page 12: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/12.jpg)
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
![Page 13: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/13.jpg)
$('foo').observe('click', respondToClick);
function respondToClick(event) { var element = event.element(); element.addClassName('active');}
Prototype: Event handling
![Page 14: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/14.jpg)
Prototype: Ajax transport
new Ajax.Request('/some_url',{ method:'get', onSuccess: function(transport){ var response = transport.responseText || "no response text"; alert("Success! \n\n" + response); }, onFailure: function(){ alert('Something went wrong...') } });
Also available are onXXX callbacks, where XXX is the HTTP response status like 200 or 404.
![Page 15: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/16.jpg)
Prototype: Ajax magic
new Ajax.Updater( { success: 'products', failure: 'errors' }, '/some_url', { method: 'get', insertion: Insertion.Top } );
1
3.13.2
2
4
![Page 17: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/17.jpg)
Prototype: Built-in object extensions * all * any * collect * detect * each * eachSlice * entries * find * findAll * grep * inGroupsOf * include * inject * invoke * map * max * member * min * partition * pluck * reject * select * size * sortBy * toArray * zip
var myObject = {};
['foo', 'bar', 'baz'].each(function(name, index) { this[name] = index; }, myObject); // we have specified the context myObject //-> { foo: 0, bar: 1, baz: 2}
![Page 18: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/18.jpg)
Prototype: Built-in object extensions * blank * camelize * capitalize * dasherize * empty * endsWith * escapeHTML * evalJSON * evalScripts * extractScripts * gsub * include * inspect * interpolate * isJSON * parseQuery * scan * startsWith * strip * stripScripts * stripTags * sub * succ * times * toArray * toJSON * toQueryParams * truncate * underscore * unescapeHTML * unfilterJSON
"<h1>hello, i'm HTML</h1>".escapeHTML() //-> "<h1>hello, i'm HTML</h1>"
'background-color'.camelize(); // -> 'backgroundColor'
'Prototype framework'.include('frame'); //-> true'Prototype framework'.include('frameset');//-> false
"echo ".times(3); //-> "echo echo echo "
"#{animals} on a #{transport}".interpolate({ animals: "Pigs", transport: "Surfboard" });
//-> "Pigs on a Surfboard"
![Page 19: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/19.jpg)
Prototype: Class-based OOPvar 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');// -> "Long John: ahoy matey, yarr!"
![Page 20: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/20.jpg)
Prototype: Real life examplehttp://gmx.com http://web.de http://gmx.de
![Page 21: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/22.jpg)
Questions?
![Page 23: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/23.jpg)
jQuery
![Page 25: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/25.jpg)
jQuery: Focus
Motto: Write less, do more.
• DOM manipulation• Ajax transport• Effects• Other functionality with plugins
![Page 26: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/26.jpg)
jQuery: DOM manipulation
Very powerful selectors.
$("#myDiv").css("border","3px solid red");
$("div").css("border","3px solid red");
$(".myClass").css("border","3px solid red");
$("*").css("border","3px solid red");
$("div,span,p.myClass").css("border","3px solid red");
![Page 27: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/27.jpg)
jQuery: DOM manipulationEven 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')
![Page 28: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/28.jpg)
jQuery: DOM manipulation
Attributes:attr( name )attr( properties )attr( key, value )attr( key, value )removeAttr( name )
Classes:addClass( class )hasClass( class )removeClass( class )toggleClass( class )
Text:
HTML:
Value:
html( )html( val )
text( )text( val )
val( )val( val )
![Page 29: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/29.jpg)
jQuery: DOM manipulation
append( content )appendTo( content )
prepend( content )prependTo( content )
after( content )before( content )
insertAfter( content )insertBefore( content )
wrap( html )
replaceWith( content )
clone( )
![Page 30: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/30.jpg)
jQuery: Events
Very convenient event handling system.
bind( type, data, fn )
trigger( type, data )
unbind( type, data )
3 main methods:
![Page 31: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/31.jpg)
jQuery: Binding event handlers
$("p").bind("click", function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span").text("Click happened! " + str);});
$("p").bind("dblclick", function(){ $("span").text("Double-click happened in " + this.tagName);});
$("p").bind("mouseenter mouseleave", function(e){ $(this).toggleClass("over");});
$("p").trigger("click");
![Page 32: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/32.jpg)
jQuery: Binding event handlers
$("p").click(function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("span").text("Click happened! " + str);});
$("p").dblclick(function(){ $("span").text("Double-click happened in " + this.tagName);});
$("p").click();
![Page 33: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/33.jpg)
jQuery: Custom events
$("p").bind("myCustomEvent", function(e, myName, myValue){ $(this).text(myName + ", hi there!"); $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000);});
$("button").click(function () { $("p").trigger("myCustomEvent", [ "John" ]);});
![Page 34: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/34.jpg)
jQuery: onload event
$(document).ready(function () { $("p").text("The DOM is now loaded and can be manipulated.");});
![Page 35: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/35.jpg)
jQuery: Ajax transport
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }});
![Page 36: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/36.jpg)
jQuery: Ajax transport
$.ajax({ url:"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json", dataType:"jsonp", jsonp:"jsoncallback", success: function(data){ //... }) }})
![Page 37: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/37.jpg)
jQuery: Effects
show/hidetoggle
slideDown/slideUpslideToggle
fadeIn/fadeOutfadeTo
animate
![Page 38: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/38.jpg)
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
![Page 39: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/39.jpg)
Questions?
![Page 40: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/40.jpg)
Dojo
![Page 42: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/42.jpg)
Dojo: Focus
• DOM manipulation• Animations• Ajax• Event and keyboard normalization • Internationalization (i18n)• Widgets
![Page 43: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/43.jpg)
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("dijit.form.Button");dojo.require("dijit.TitlePane");
![Page 44: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/44.jpg)
Dojo: Selectors
dojo.addOnLoad(function(){ // our dom is ready, get the node: dojo.query("#testHeading") // add "testClass" to its class="" attribute .addClass("testClass") // and fade it out after 500 ms .fadeOut({ delay:500 }).play();});
![Page 45: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/45.jpg)
Dojo: Event handling
dojo.addOnLoad(function(){ var node = dojo.byId("testHeading"); dojo.connect(node,"onclick",function(){ node.innerHTML = "I've been clicked"; }); });
dojo.addOnLoad(function(){ dojo.query("#testHeading") .style("cursor","pointer") .connect("onclick",function(){ this.innerHTML = "I've been clicked"; }); });
![Page 46: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/46.jpg)
Dojo: Ajax transportvar init = function(){ var contentNode = dojo.byId("content"); dojo.xhrGet({ url: "js/sample.txt", handleAs: "text", 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("error!",error); } });}; dojo.addOnLoad(init);
![Page 47: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/47.jpg)
// sumbit the form var formSubmit = function(e){ // prevent the form from actually submitting e.preventDefault(); // submit the form in the background dojo.xhrPost({ url: "alternate-submit.php", form: "mainForm", handleAs: "text", handle: function(data,args){ if(typeof data == "error"){ console.warn("error!",args); }else{ // show our response console.log(data); } } });};dojo.addOnLoad(function(){ var theForm = dojo.byId("mainForm"); // another dojo.connect syntax: call a function directly dojo.connect(theForm,"onsubmit",formSubmit);});
Dojo: Ajax transport
![Page 48: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/48.jpg)
Dojo: WidgetsFirst Name:<input type="text" size="20" name="first" dojoType="dijit.form.TextBox" trim="true" propercase="true" />
Price: <input type="text" maxlength="12" class="fillwidth currency" id="grossincome" name="grossincome" value="0.00" dojoType="dijit.form.CurrencyTextBox" required="true" onChange="updateTotals()" currency="USD"/>
dojo.require("dijit.form.TextBox");dojo.require("dijit.form.CurrencyText");
![Page 49: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/49.jpg)
Dojo: Dijit at a Glance
CheckBox
ComboBox CurrencyTextBox
DateTextBox
FilteringSelect InlineEditBox
NumberSpinner
NumberTextBoxSlider
Textarea
TimeTextBox
ValidationTextBox
AccordionContainerBorder ContainerContentPane
StackContainerTabContainer
Menu
Toolbar
DialogProgressBar Editor GridTree
![Page 50: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/50.jpg)
Dojo: DojoX - Dojo eXtensions
CometdCharting
Collections
Cryptography
Data
Grid
I/OImage
Layout
Offline
String Utilities
Timing
UUIDValidate
Widgets
Wire
XML Utilities
FX
GFX
![Page 51: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/51.jpg)
Dojo: Dojo custom build
1. groups together modules into layers2. interns external non-JavaScript files3. smooshes the layer down with ShrinkSafe4. copies all non-layered scripts to the appropriate places
![Page 52: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/52.jpg)
Dojo: Conclusion
• not so lightweight as previous• tons of features• separate packages• custom build
![Page 53: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/53.jpg)
Questions?
![Page 54: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/54.jpg)
qooxdoo
![Page 56: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/56.jpg)
qooxdoo: Focus
• One page Rich Internet Applications• A lot of ideas from Qt• OOP approach• No HTML and CSS programming
![Page 57: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/57.jpg)
qooxdoo: The power is in OOP
The main actors of qooxdoo OO are:
• Classes• Interfaces• Mixins
![Page 58: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/58.jpg)
qx.Class.define("qx.test.Cat", { construct : function() { ... }});
qx.Class.define("qx.test.Cat", { ... statics : { LEGS: 4, makeSound : function() { ... } }});
qx.Class.define("qx.test.Cat", { ... members: { name : "Kitty", getName: function() { return this.name } }});
qooxdoo: Classes
![Page 59: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/59.jpg)
qx.Class.define("qx.test.Cat", { type : "static" ...});
qx.Class.define("qx.test.Cat", { type : "abstract" ...});
qx.Class.define("qx.test.Cat", { type : "singleton" ...});
qooxdoo: Special Types of Classes
![Page 60: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/60.jpg)
qooxdoo: Inheritance
qx.Class.define("qx.test.Animal", { members: { makeSound : function(howManyTimes) { .... } }}); qx.Class.define("qx.test.Cat", { extend: qx.test.Animal, members: { makeSound : function() { this.debug("I'm a cat"); /* howManyTimes or any other parameter are passed. We don't need to know how many parameters are used. */ arguments.callee.base.apply(this, arguments); } }});
![Page 61: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/61.jpg)
qooxdoo: Interfaces
qx.Interface.define("qx.test.ISample", { extend: [SuperInterfaces], properties: {"color": {}, "name": {} }, 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 == "string"; } }, });
Defining interface:
![Page 62: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/62.jpg)
qooxdoo: Interfaces
qx.Class.define("qx.test.Sample", { implement: [qx.test.ISample], properties: { "color": { check: "color"}, "name": { check: "String"} }, members: { meth1: function() { return 42; }, meth2: function(a, b) { return a+b }, meth3: function(c) { c.foo() } }});
Implementing interface:
![Page 63: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/63.jpg)
qooxdoo: Mixins
qx.Mixin.define("name",{ include: [SuperMixins], properties: { "tabIndex": {check: "Number", init: -1} }, members: { prop1: "foo", meth1: function() {}, meth2: function() {} }});
Defining mixin:
![Page 64: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/64.jpg)
qooxdoo: Mixins
qx.Class.define("my.cool.Class", { include : [my.cool.MMixin, my.other.cool.MMixin] ...});
Attaching mixin:
qx.Class.include(qx.ui.core.Widget, qx.MWidgetExtensions);
![Page 65: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/65.jpg)
...properties : { width : { check : "Number", apply : "applyWidth" }} members : { applyWidth : function(value) { this.setStyleProperty("width", value + "px"); }}...
qooxdoo: Properties
widget.addEventListener("changeWidth", function(e) { e.getValue().innerHTML = "Hello World";});
![Page 66: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/66.jpg)
qooxdoo: GUI
![Page 67: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/67.jpg)
qooxdoo: GUI and even more features
• Layouting• Widgets• Interaction• Selection Handling• Drag & Drop • Theming• Low-level Ajax Transport• RPC• Logging and Debugging• Unit testing
![Page 68: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/68.jpg)
qooxdoo: Tooling
Generator:
• Optimization• Compressing• Internalization • API Documentation• More
XML description for UI - qxtransformer
http://qxtransformer.org
![Page 70: JavaScript Libraries Overview](https://reader034.fdocuments.us/reader034/viewer/2022051818/5495c6d2b479596f4d8b4db4/html5/thumbnails/70.jpg)
Questions?