Tutorial Qooxdoo, a universal JavaScript framework

[R0cc0]

Qooxdoo, un cadru universal JavaScript

Qooxdoo, a universal JavaScript framework

Acest FrameWork complet este pentru a svilupa si pagini web traditionale , dar si aplicatii grafice in stil desktop .

Structura FrameWork-ului

FrameWork-ul este organizat in asa mod in cat sa fuctioneze selectiv pe fieare din cele 4 ambiete aplicative : Pagini Web , aplicatii cu interfata desktop , aplicatii mobile si cele server .

Este posibil sa descarcati de pe pagina oficiala pachetul adecvat cerintelor voastre pentru aplicatii .

Cele 4 pachete FrameWork previste sunt :

Impreuna cu , codum lasat cu dubla licenta LGPL si EPL , sunt sunt disponibile un intreg de tool-uri de suport pentru svilup ca si un ambient de “ Unut test “ , un ambient de simulare al userului , utilitare pentru compilare si compreie al codului si pentru “ deployment “ - ul aplicatiilor .

Creearea paginilor Web cu Qooxdoo

Pachetul “ qx.Website “ este gandit pentru a semplifica creearea de pagini Wen , furnizand fnctionamentul pentru manipulara DOM-uli si un suport cross-browser , pentru gestiunea “ event “.

Utilizarea lui necesita un refer JS ca in urmatorul exemplu :

<script type="text/javascript" src="js/q-2.0.2.min.js"></script>

Includerea librariilor la dispozitia obiectuli globan “ q “ care ne permite accesul la elementele DOM din pagina curenta . Exemplu :

q("#divMessage")
.setHtml("Hello World!")
.setStyle("color", "red");

Idividualizeaza un element cu id egal al “ divMessage “ , su tring-ul “ Hello World “ , ca si continutul sau caruia ii da culoarea rosie . Intern Qooxdoo , foloseste acelasi selector “ engine “ de la jQuery deci sintactic vorbint este destul de comun si nu trebuie sa ridice probleme prea mari .

Ca in jQuery , si Qooxdo are event-ul “ ready “ pentru a portnii codul , doar cand documentuul a fost incarcat din librarie .

q.ready(function()
{
****//inizialization
});

Functionalitatile qx.Website , sunt subdivize in moduli care ofera suport pentru diverse tipuri de activitati , de la crearea de efecte anime , pana la accesul de informatii din browser , de la gestionarea de template , pana la schimbul de date cu serverul ce gestioneaza cookie-uri .

Un modul accesibil ca si " namespace " dependent de obiect global , ca si exemplu petru a pornii in functia de comunicare cu serverul , face referire la " q.io " , insa necesitam sa intram in caracteristicele browser , o sa facem referire la " q.env ".

q.io gestirea comunicatiilor cu server-ul

Pentru a face acest lucru mai clar , o sa dau un exemplu :

q("#divEnvData")
****.setHtml("Engine name: " + q.env.get("engine.name") + "<br>" + 
*************"Engine version: " +* q.env.get("engine.version") + "<br>" +
*************"Browser name: " + q.env.get("browser.name") + "<br>" +
*************"Browser version: " + q.env.get("browser.version") + "<br>" +
*************"Device type: " + q.env.get("device.type") + "<br>" + 
*************"Device name: " + q.env.get("device.name") + "<br>");

Urmatorul exemplu va arata utilizarea metodei " xhr() " a modulului " q.io " pentru a trimite un request HTTP la server .

q.io.xhr('data.json')
****.on("loadend", function(data) {alert(data.responseText)})
****.send();
});

Modulul "q.io " furnizeaza si metode pentru efectuuarea request – urilor cross-domain , print JSONP via script .

q.template, template engine of qooxdoo

Ca in mare parte din recentele librari si FrameWork JavaScript , si Qooxdoo suporta template-uri pentru render dinamic de string-uri . Mecanismult de templating , este implementat in modulul q.template si foloseste " mustache.js " ca si mtor intern . Exemplu :

var template = "My name is {{Stefan}} {{R0cc0}}!";
var view = {name: "Stefan", surname: "R0cc0"};
*
q("#divTemplateMessage")
****.setHtml(q.template.render(template,
view));

In plus suporta posibilitatea de svilupare plugine accesibile in internul FrameWork-ului cu acelasi mecanism de module .

( asta o sa o explic alta data ) .

Suport OOP

In timp ce suportul de svilup al pachetului " qx.Website " este aproapte acelasi ca si librariile JavaScritp , pentru realizarea de aplicatii cu interfata de tip desktop sau mobil .

Abordarea Qooxdoo este oarecum diferita , utilizarea pachetelor " qx.Desktop si qx.Mobile " propun folosirea exclusiva a JS , degradand mult lucrul HTML si CSS , care limiteaza reprezentarea unei aplicatii intre JavaScript si Browser .

Acesta este motivul principal pentru care in Qooxdoo programarea orietat pe obiecte are un rol asa important , incat ofera un suport foarte avansat mult apropiat a limbajelor de programare mai evoluate .

In Qooxdoo putem definii o clasa prin metoda " define() " al modulului Class . Exemplu :

qx.Class.define("myApp.circle",
{
****members:
****{
********radius: VALUE,
********circumference : function() {...},
********area: function() {...}
****}
});

Codul defineste o clasa indicand ca si prim argument numele si ca al doilea argument definitia adevarata proprie . In acest caz am definit clasa " myApp.cirle "cu un membru care reprezinta raza si doua metode care calculeaza circumferinta si aria . Exemplu :

var circle = new myApp.circle;
circle.radius = 3;
alert("The circumference of a circle of radius  3 and " + circle.circumference ());

Posibilitatile definirii unei clase sunt diverse . Este posibil de exemplu sa derivam o clasa de o alta . Exemplu :

qx.Class.define("myApp.collorCircle",
{
****extend: myApp.circle,
****members: {
********radius: VALUE,
********circonference: function() {...},
********area: function() {...}
****}
});

Definirea unui constructor si a unui destructor

qx.Class.define("myApp.collorCircle",
{
****construct: function() {...},
****destruct: function() {...}
****...
});

Invocarea constructorului din clasa de baza :

qx.Class.define("myApp.collorCircle",
{
****construct: function() {
********************this.base(arguments);
********************...
****************}
****...
});

Crearea proprietatii impostand constrangerile asupra valorilor pe are le poate asuma .

qx.Class.define("myApp.collorCircle",
{
****properties:
****{
********radius: {init:0, check: "Integer"}
****}
****...
})

Definitia razei ca si proprietate generaza automat doua metode c care putem sa deschidem " getRadius() " si " setRadius " , impostand valoarea initiala la 0 si numarul de date la un numar intreg .

Puteti sa cautati aici clase statice si abstrace , singleton , interfete si mixin pentru creeare de aplicatii cu o arhitectura structurata .