Qooxdoo - Úvod

JavaScript 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.


 

  Aktivity (1)

Článek pro vás napsal Lukáš Volprecht
Avatar
Autor je PHP, JavaScript, iOS a Visual Basic programátor. Programováním se živí a nebojí se nových technologií.

Jak se ti líbí článek?
Celkem (2 hlasů) :
4.54.54.54.54.5


 


Miniatura
Všechny články v sekci
JavaScript
Miniatura
Následující článek
JavaScript

 

 

Komentáře

Avatar
martinkobelka
Redaktor
Avatar
martinkobelka:

Dá se v tom napsat i třeba něco jako google docs?

 
Odpovědět 9.2.2013 20:58
Avatar
Lukáš Volprecht:

Ano, dalo by se :)

 
Odpovědět 9.2.2013 21:08
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.