Co to je a co není

Na začátku bychom si měli ujasnit, co to Cappuccino je a co není. Cappuccino je open-source framework pro psaní webových aplikací, které se dají svým UI i UX srovnat s aplikacemi desktopovými. Podobnou alternativou je např. SproutCore. Hlavním rozdílem však je, že Cappuccino není psáno v čistém JavaScriptu, ale celý framework je napsán v jazyce Objective-J, který byl vyvinut jako součást tohoto frameworku.

Objective-J se považuje za nadstavbu JavaScriptu a klade si za úkol přidat do JavaScriptu ty prvky, které při psaní robustních aplikací scházejí – např. skutečné třídy, dědičnost, import souborů, apod. Co se týče syntaxe, je Objective-J téměř stejné jako Objective-C (programovací jazyk pro aplikace na platformě Mac OS X). I když se to může zdát zpočátku zvláštní, je Objective-J stále jen obyčejným JavaScriptem, a pokud napíšeme do naší aplikaci cokoliv v čistém JavaScriptu, skript se normálně spustí.

Je nutno zdůraznit, že veškerá aplikační logika se děje na straně Objective-J, tedy klienta. Backend (PHP, Ruby on Rails) nám slouží pouze jako REST – přijímá, odesílá a zpracovává data např. ve formátu JSON.

Oproti ostatním JavaScriptovým frameworkům a knihovnám, jako např. jQuery nebo DoJo není Cappuccino určené pro webové stránky, ale hlavně pro komplexní webové aplikace. Od většiny frameworků, které jsou určené pro psaní desktop-like aplikací na webu, se Cappuccino liší filozofií psaní kódu. Samotné Cappuccino vychází z Cocoa (framework pro Objective-C) a vybírá z ní ty nejdůležitější části a zvyklosti pro vývoj aplikací.

Příklady

Než se pustíme do přípravy pracovního prostředí a samotného vývoje, měli bychom si ukázat několik aplikací napsaných pomocí Cappuccina.

První aplikací, kterou bych rád ukázal, je 280slides – webová verze prezentačního nástroje Keynote (pro Windows PowerPoint), která pochází přímo od tvůrců frameworku 280north.

Druhou aplikací je nástroj pro tvorbu wireframů a prototypů webových stránek a aplikací MockingBird.

Příprava pracovního prostředí

Pokud si chceme vývoj v Cappuccinu jen vyzkoušet bez nutnosti instalace jakýchkoliv nástrojů, stačí si na stránkách frameworku stáhnout Starter package, který obsahuje vše potřebné k tomu, abychom se mohli ihned pustit do vývoje.

Stahování a neustálé kopírování celého frameworku nás určitě po chvíli přestane bavit a budeme si chtít psaní aplikací zjednodušit a zpříjemnit, proto se nám vyplatí si nainstalovat základní vývojové nástroje od jeho tvůrců. V této části článku si ukážeme, jak probíhá instalace na čistém počítači s operačním systémem Mac OS X Snow Leopard. Není problém tyto nástroje nainstalovat také na Linux, popř. pomocí cygwin na Windows.

Prvním krokem instalace je stažení GIT repozitáře frameworku (v případě, že nemáme nástroj git k dispozici, stačí si v Terminálu otevřít rozbalený Starter package). To provedeme spuštěním následujícího příkazu v Terminálu: git clone git://github.com/280north/cappuccino. Nasměrujeme se do adresáře s repositářem:  cd cappuccino.

Dále si nainstalujeme rubygem Jake pro usnadnění kompilace frameworku na našem počítači (jedná se o podobný nástroj jako rake, jen je upraven pro potřeby Cappuccina):  sudo gem install jake.

Pro instalaci jednotlivých utilit, které slouží např. pro generování nových projektů, je třeba spustit skript bootstrap.sh, který se nachází v adresáři repositáře. Spuštění skriptu provedeme následovně:  sudo
./bootstrap.sh.

Pokud proběhlo vše bez problémů, je nyní třeba zkompilovat všechny zdrojové soubory Cappuccina. Pokud se nacházíme stále v adresáři repositáře, učiníme tak příkazem: jake install.

Po kompilaci zdrojových souborů nám zbývá poslední věc a tou je export cesty, kde je Cappuccino zkompilováno, to provedeme přidáním následujícího řádku do souboru ~/.bash_login nebo ~/.profile:  export
CAPP_BUILD=~/cappucino/build

Právě se nám úspěšně podařilo nainstalovat Cappuccino a můžeme tedy přejít k tvorbě naší první aplikace. Také po instalaci nesmíme zapomenout restartovat Terminál.

První aplikace

K vygenerování projektu pomocí nainstalovaných nástrojů stačí do Terminálu napsat: capp gen NazevAplikace a nástroj capp už se pro nás postará o zkopírování všech potřebných knihoven a vytvoření základní adresářové struktury. 

Stejný obsah nalezneme i ve Starter Package na stránkách frameworku. Pokud si chceme aplikaci spustit, stačí v prohlížeči otevřít soubor index.html, který se nachází přímo v hlavním adresáři projektu.

Nyní jsme se konečně dostali ke skutečnému vývoji aplikací, vygenerovaná aplikace sice kromě vypsání „HelloWorld!“ na obrazovku nic nedělá, ale zato se na ní dá dobře popsat adresářová struktura a obsah jednotlivých souborů.

S popisem obsahu adresáře začneme hezky shora.

Prvním souborem je AppController.j, který nyní obsahuje tu nejzákladnější aplikační logiku. K detailnějšímu vysvětlení syntaxe Objective-J a účelu třídy AppController se dostaneme v následujícím díle, ale určitě nebude na škodu si popsat již teď ty nejzákladnější věci, které se v souboru AppController­.j dějí.

@import <Foundation/CPObject.j> //importujeme soubor se základním objektem frameworku
@implementation AppController : CPObject //implementujeme třídu AppController, která dědí od základního objektu frameworku - CPObject
{
}
- (void)applicationDidFinishLaunching:(CPNotification)aNotification //první metoda, která se automaticky volá po spuštění aplikace
{
    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask], //inicializujeme samotné okno aplikace
        contentView = [theWindow contentView]; //View aktuálního okna

    var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()]; //inicializujeme label, který budeme následně nastavovat

    [label setStringValue:@"Hello World!"]; //nastavujeme hodnotu labelu
    [label setFont:[CPFont boldSystemFontOfSize:24.0]]; //nastavujeme velikost fontu pomocí třídy CPFont

    [label sizeToFit]; //velikost labelu nastavujeme tak, aby vyhovoval aktuálnímu obsahu - "Hello World!"

    [label setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | CPViewMinYMargin | CPViewMaxYMargin]; //při změně velikosti okna se label automaticky vystřeďuje
    [label setCenter:[contentView center]];

    [contentView addSubview:label]; //přidáváme label do hlavního View aplikace

    [theWindow orderFront:self]; //zobrazujeme dříve inicializované okno

    // Uncomment the following line to turn on the standard menu bar.
    //[CPMenu setMenuBarVisible:YES];
}
@end

Dalším adresářem je Frameworks, ve kterém se nachází základní části frameworku pro vývoj aplikací – Foundation (nejzákladnější třídy), AppKit (třídy, které se přímo týkají uživatelského rozhraní, např. tlačítka, checkboxy, tabulky, textová pole, apod.) a skript starající se o run-time překlad Objective-J kódu do JavaScriptu.

Důležitým souborem je Info.plist, který obsahuje základní konfigurací naší aplikace. Jedná se o obyčejný XML soubor usnadňující jednoduché nastavení jako např. název aplikace, první inicializovaná třída, apod.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CPApplicationDelegateClass</key>
    <string>AppController</string>
    <key>CPBundleName</key>
    <string>test1</string>
    <key>CPPrincipalClass</key>
    <string>CPApplication</string>
</dict>
</plist>

Adresář Resources slouží k ukládání našich souborů, se kterými bude aplikace pracovat – soubory vlastního uživatelského rozhraní, ikony, apod.

Soubor index.html je jediným html dokumentem, který se nachází v naší aplikaci a připravuje nám prostředí pro běh aplikace. Volá funkci main(), která se nachází v posledním důležitém souboru main.j a stará se o inicializaci celé naší aplikace.

Dokumentace a zdroje pro vývoj

Časem určitě nastane situace, kdy budeme potřebovat nahlédnout do dokumentace a zjistit, co jaká třída dělá. Bohužel tvůrci zatím oficiální dokumentaci moc nedali a zorientovat se v ní a najít potřebné informace může chvilku trvat.

Naštěstí je zde aplikace CappKiDo. Ta nám orientaci a vyhledávání v dokumentaci velmi zjednoduší. Velkou výhodou této aplikace je, že přehledně zobrazí hierarchii tříd a hned máme možnost vidět, jaká třída od které dědí.

Co jsme se naučili

V dnešním dílu seriálu o Cappuccinu a Objective-J jsme si pověděli, že Cappuccino slouží pro psaní webových aplikací, nikoliv jednoduchých stránek. Syntaxí a zvyklostmi vychází z desktopového Objective-C. Dále se nám podařilo úspěšně nainstalovat a otestovat nástroje, které zpříjemní vývoj v Cappuccinu. Vygenerovali jsme si náš první projekt HelloWorld a podívali se, co se nachází uvnitř aplikace.

Co bude příště

Příště se podíváme detailněji na jazyk Objective-J, jeho syntaxi, výhody/nevýhody, odlišnosti od ostatních jazyků a napíšeme si několik menších příkladů demonstrujících hlavní aspekty vývoje. Máte se tedy na co těšit.