Search the Community

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 .