Qooxdoo - Úvod

Vitajte v úvodnom diele seriálu Framework Qooxdoo. Qooxdoo [ku: ksdu:] je plne objektovo orientovaný AJAXový framework pre vývoj webových aplikácií. Ako väčšina ostatných frameworkov je aj Qooxdoo k dispozícii zdarma ako open source a slúži k vývoju tzv. Desktop view webových aplikácií. Obrovskou výhodou tohto frameworku je, že k vývoju nepotrebujete znalosť žiadneho ďalšieho jazyka a všetko teda napíšete len pomocou OOP v javascriptu. Akonáhle sa ho naučíte, budete ho milovať!

Qooxdoo ponúka úplne odlišný spôsob tvorby webových aplikácií. Základným predpokladom pre jeho zvládnutie je znalosť JavaScriptu. Absolútne všetko totiž napíšete iba v ňom. Samotný framework má už v sebe implementované nástroje pre kompletizáciu a komprimáciu JavaScriptu, vytváranie dokumentácie, testovanie aplikácie, debugging a mnoho ďalších zaujímavých nástrojov.

Samotný Framework stiahneme z qooxdoo.org. Framework má viac odvetví, nás ale zaujíma Desktop. Programovanie v Qooxdoo sa nezaobíde bez vývojového prostredia. Je len veľmi málo programov podporujúce tento Framework, preto pre vývoj aplikácií v Qooxdoo odporúčam IDE webstore. Bohužiaľ sa jedná o platený a nie práve lacný program, ale k dispozícii je 30 dňová skúšobná verzia. Jadro Qooxdoo je napísané v Pythone, z čoho vyplýva, že bude potrebné mať nainštalovaný python. Tu v tomto ohľade je framework pomerne vyberavý. Funguje iba s Python vo verzii 2.5+, avšak 3.x už nie je podporovaná.

Stiahnuté SDK Qooxdoo si rozbalíme kamkoľvek na disk, avšak je potrebné dbať na to, aby sa v ceste k frameworku nevyskytovala diaktrika. Ja si zvolím koreňový adresár disku D, teda D: \ Qooxdoo **. Všetky operácie s frameworkom sa odohrávajú v príkazovom riadku a tak ani u vytvorenie prvej aplikácie aplikácie tomu nebude inak. Vytvoríme si aplikáciu s názvom ** ahojsvete.

V príkazovom riadku otvoríme zložku s Qooxdoo. V mojom prípade to bude: D: \ Qooxdoo> napíšeme príkaz pre vytvorenie aplikácie. Ten znie:

create-application.py –-name=ahojsvete

Tento príkaz nám vytvorí kompletnú súborovú štruktúru projektu s názvom ahojsvete a to priamo v roote frameworku. Súborová štruktúra vyzerá nasledovne:

• Api
• Build
• cache
• Inspector
• source class

  ahojsvete ahojsvete

  theme

  Application.js

  resource

  script

  translation

  index.html

• class
• ahojsvete ahojsvete

  theme

  Application.js

• ahojsvete
• theme
• Application.js
• resource
• script
• translation
• index.html
• Manifest.json
• config.json
• generate.py
• readme.txt

V priečinku projektu v priečinku source sa nachádza index.html. Tým projekt spustíme. Ak ste sa o to pokúsili, určite sa čudujete chybové hláške, že je projekt nutné zgenerovat. K tomuto je potrebné poznamenať, že po každej väčšej zmene treba projekt skompilovať (zgenerovat) a to súborom generate.py v roote zložky projektu. Väčšinou sa jedná o zmeny typu pridanie triedy, alebo vytvorenie novej inštancie triedy, ale u malých zmien to väčšinou nebýva nutné. Generáciu vykonáte opäť v príkazovom riadku. Je potrebné byť v priečinku s projektom - v mojom prípade D: \ Qooxdoo \ ahojsvete>. Príkaz pre generovanie projektu znie:

D:\Qooxdoo\ahojsvete>generate.py

Prvá generácia chvíľu trvá, ale nasledujúce už budú rýchlejšie. Po úspešnom zgenerování už index.html pôjde spustiť. Na stránke bude jedno tlačidlo, ktoré po kliknutí zobrazia alert Hello world. Takto bude vyzerať každý novozaložený projekt. Základným stavebným kameňom je trieda Application.js v priečinku source / class / ahojsvete /. Teraz sa pozrieme na jej zdrojový kód. Zaujímať nás bude až riadok 61.

// Je třeba vytvořit instanci třídy tlačítka
var button1 = new qx.ui.form.Button("First Button", "mocnina/test.png");

// Potřebujeme tlačítko někam umístit, proto si nadeklarujeme proměnnou k rootu (samotná stránka)
var doc = this.getRoot();

// Tlačítko na stránku přidáme metodou add
doc.add(button1, {left: 100, top: 50});

// Metoda addListener přidává interakci k prvku, zde k tlačítku
button1.addListener("execute", function(e) {
    alert("Hello World!");
});

Nabudúce si vytvoríme svoju prvú vlastnú aplikáciu. Zatiaľ odporúčam pozrieť sa na Demo browser frameworku, kde sú ukázané všetky zručnosti Qooxdoo.