Qooxdoo - Úvod

Vítejte v úvodním díle seriálu Framework Qooxdoo. Qooxdoo [ku:ksdu:] je plně objektově orientovaný ajaxový framework pro vývoj webových aplikací. Jako většina ostatních frameworků je i Qooxdoo k dispozici zdarma jako open source a slouží k vývoji tzv. desktop view webových aplikací. Obrovskou výhodou tohoto frameworku je, že k vývoji nepotřebujete znalost žádného dalšího jazyka a vše tedy napíšete jen pomocí OOP v javascriptu. Jakmile se ho naučíte, budete ho milovat!

Qooxdoo nabízí zcela odlišný způsob tvorby webových aplikací. Základním předpokladem pro jeho zvládnutí je znalost JavaScriptu. Absolutně vše totiž napíšete pouze v něm. Samotný framework má již v sobě implementovány nástroje pro kompletaci a komprimaci JavaScriptu, vytváření dokumentace, testování aplikace, debugging a mnoho dalších zajímavých nástrojů.

Samotný Framework stáhneme z qooxdoo.org. Framework má více odvětví, nás ale zajímá Desktop. Programování v Qooxdoo se neobejde bez vývojového prostředí. Je jen velice málo programů podporující tento Framework, proto pro vývoj aplikací v Qooxdoo doporučuji IDE WebStorm. Bohužel se jedná o placený a ne zrovna levný program, ale k dispozici je 30 denní zkušební verze. Jádro Qooxdoo je psáno v Pythonu, z čehož vyplývá, že bude potřeba mít nainstalovaný python. Zde v tomto ohledu je framework poměrně vybíravý. Funguje pouze s Pythonem ve verzi 2.5+, ovšem 3.x již není podporována.

Stažené SDK Qooxdoo si rozbalíme kamkoliv na disk, ovšem je potřeba dbát na to, aby se v cestě k frameworku nevyskytovala diaktrika. Já si zvolím kořenový adresář disku D, tedy D:\Qooxdoo**. Veškeré operace s frameworkem se odehrávají v příkazové řádce a tak ani u vytvoření první aplikace aplikace tomu nebude jinak. Vytvoříme si aplikaci s názvem **ahojsvete.

V příkazové řádce otevřeme složku s Qooxdoo. V mém případě to bude: D:\Qooxdoo> napíšeme příkaz pro vytvoření aplikace. Ten zní:

create-application.py –-name=ahojsvete

Tento příkaz nám vytvoří kompletní souborovou strukturu projektu s názvem ahojsvete a to přímo v rootu frameworku. Souborová struktura vypadá následovně:

• Api
• Build
• Cache
• Inspector
• Source
  • class
  • ahojsvete
    • ahojsvete
    • theme
    • Application.js
  • resource
  • script
  • translation
  • index.html
• Manifest.json
• config.json
• generate.py
• readme.txt

Ve složce projektu ve složce source se nachází index.html. Tím projekt spustíme. Pokud jste se o to pokusili, určitě se divíte chybové hlášce, že je projekt nutno zgenerovat. K tomuto je třeba poznamenat, že po každé větší změně je třeba projekt zkompilovat (zgenerovat) a to souborem generate.py v rootu složky projektu. Většinou se jedná o změny typu přidání třídy, nebo vytvoření nové instance třídy, ale u malých změn to většinou nebývá nutné. Generaci provedete opět v příkazové řádce. Je třeba být ve složce s projektem – v mém případě D:\Qooxdoo\ahoj­svete>. Příkaz pro generování projektu zní:

D:\Qooxdoo\ahojsvete>generate.py

První generace chvíli trvá, ale následující již budou rychlejší. Po úspěšném zgenerování již index.html půjde spustit. Na stránce bude jedno tlačítko, které po kliknutí zobrazí alert Hello world. Takto bude vypadat každý nově založený projekt. Základním stavebním kamenem je třída Application.js ve složce source/class/a­hojsvete/. Nyní se podíváme na její zdrojový kód. Zajímat nás bude až řádek 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!");
});

Příště si vytvoříme svou první vlastní aplikaci. Prozatím doporučuji podívat se na Demo browser frameworku, kde jsou ukázány veškeré dovednosti Qooxdoo.