Nastal čas na kakao - Interface Builder a uživatelské rozhraní - MujMAC.cz - Apple, Mac OS X, Apple iPod

3. listopadu 2004, 00.00 | S aplikací Interface Builder jsme se zatím v našem seriálu nesetkali; než se pustíme do vlastního sestavování uživatelského rozhraní, řekneme si toho o ní aspoň malinko víc.

S aplikací Interface Builder jsme se zatím v našem seriálu nesetkali; než se pustíme do vlastního sestavování uživatelského rozhraní, řekneme si toho o ní aspoň malinko víc.

V zásadě by se dalo říci, že Interface Builder je editor objektových sítí; to ovšem málokomu hodně řekne. Podstatné však je následující:

• uživatelské rozhraní je v Cocoa tvořeno (celkem samozřejmě) sítí objektů: objekt třídy NSMenu representuje nabídku, a obsahuje vnořené instance třídy NSMenuItem pro jednotlivé položky (a další objekty NSMenu pro podnabídky); objekt NSWindow representuje okno, objekt NSTextView je jeho součástí a tvoří textový editor, objekt NSButton pak representuje tlačítko...
• jak už víme z článku "Vznik a zánik objektů", Cocoa podporuje tzv. persistentní objekty – objekty, jež jsou nějak uloženy (například v souboru), a tak mohou přežít ukončení aplikace;
• právě toho standardně aplikace Cocoa využívají pro své uživatelské rozhraní: namísto toho, aby se síť objektů, jež GUI representuje, vytvářela programově po spuštění aplikace (jakkoli i to je samozřejmě v případě potřeby možné), vytvoříme ji v editoru Interface Builder a uložíme do souboru. Aplikace pak po spuštění jen persistentní objekty ze souboru načte do paměti – a kompletní uživatelské rozhraní je hotové.

Stojí možná za zmínku, že právě tento geniální nápad stál hned u samého počátku objektového vývojového systému, jehož dnešní podobu známe pod jménem Cocoa: Interface Builder byl vůbec první programátorskou aplikací, jež se objevila v prvých versích operačního systému NeXTStep v sedmdesátých letech...

Je také důležité si uvědomit zásadní rozdíl mezi resource editory, jako byl třeba ResEdit ve starých versích operačního systému Mac OS (do verse 9), nebo jaké jsou k dispozici v řadě vývojových prostředí pro jiné systémy, a Interface Builderem: resource editory zpracovávají datový popis, na jehož základě se za běhu uživatelské rozhraní generuje. Interface Builder naproti tomu je editorem skutečných objektů, z nichž se uživatelské rozhraní fakticky skládá – to mu, oproti resource editorům, dává nesrovnatelně větší flexibilitu a možnosti.

To ostatně uvidíme i v našem příkladu: ačkoli jsme až dosud implementovali jen zcela holý datový model bez jakékoli explicitní podpory pro GUI či kontroler, jež by vazbu mezi GUI a modelem zajišťoval, pro dokončení celé aplikace už nebudeme muset napsat ani jediný řádek v programovacím jazyce! Vše potřebné zajistíme vytvořením vhodné sestavy objektů v Interface Builderu, určením jejich vzájemných vazeb a nastavením jejich atributů.

Základní skladba objektů GUI

Nemusíme se sestavou grafického uživatelského rozhraní začínat od nuly: když jsme v XCode vytvořili základní kostru aplikace, standardní soubor "MainMenu.nib", obsahující archivované objekty pro hlavní nabídku a jedno prázdné okno, byl vytvořen automaticky a uložen do skupiny "Resources". Stačí tedy otevřeme-li jej – stačí na soubor v XCode poklepat, Interface Builder se spustí automaticky – a vše potřebné doplníme.

Základní služba, již Interface Builder nabízí, je možnost vybírání standardních objektů uživatelského rozhraní z tzv. palet a jejich vkládání do sítě objektů dané aplikace. Na obrázku vidíme hlavní okno, jež graficky representuje obsah objektové sítě ("MainMenu.nib"), a také okno obsahující palety (to můžeme kdykoli zavřít a opět zobrazit příkazem Tools / Palettes / Show Palettes):

V hlavním okně vidíme dvojici pomocných zástupců File's Owner a First Responder – těm se zatím nebudeme věnovat, vrátíme se k nim v pozdějších příkladech, až si budeme ukazovat všechny možnosti, jež Interface Builder nabízí. Vedle nich zde jsou dva "kořenové" objekty ("kořenové" proto, že mohou obsahovat řadu dalších, vnořených objektů, jež hlavní okno v tomto režimu nezobrazuje): MainMenu – hlavní nabídka aplikace, a Window – prázdné, automaticky vygenerované okno. Kterýkoli z těchto objektů můžeme poklepáním otevřít a dále s ním pracovat.

Je vhodné hned zdůraznit, že jména kořenových objektů ("MainMenu", "Window") jsou – podobně jako jména skupin v XCode – v podstatě bezvýznamná, a slouží jen pro naši lepší orientaci. "Ve skutečnosti" objekty tato jména nemají; to jen Interface Builder si kořenové objekty pod těmito jmény pamatuje, abychom při práci s ním snadno rozlišili třeba více různých oken. Jméno můžeme kdykoli standardním způsobem změnit (poklepeme na něj, zapíšeme nové).

Začněme tím, že do okna vložíme všechny potřebné objekty uživatelského rozhraní: nejprve na objekt "Window" poklepeme – tím se odpovídající okno otevře (nebo, bylo-li již otevřeno, přemístí na popředí) –, a pak do něj postupně, shora dolů, "naházíme" myší z palet vhodné objekty.

Začneme textovým polem pro vložení nového URL. Textové pole je ve třetí, textové paletě hned vlevo nahoře. Prostě jej z palety myší odvezeme do okna; povšimněte si, že Interface Builder pomocí přerušovaných čar naznačuje, kam objekt umístit aby vzdálenosti mezi okraji okna a objektem (nebo různými objekty) co nejlépe odpovídaly standardům uživatelského rozhraní Cocoa:

Po umístění je objekt označen, a můžeme měnit jeho velikost (či místo). Roztáhneme textové pole tak, aby nám u pravého okraje okna zůstalo místo jen na tlačítko "Add"; to tam vhodíme z druhé palety ovladačů, kde je také vlevo nahoře (paletu ovladačů vidíme na prvém obrázku v tomto článku). Text "Button" na tlačítku změníme po vhození na "Add" opět zcela standardně – prostě poklepeme na tlačítko, změníme text. Obdobným způsobem postupně

• umístíme pod textové pole rozevírací nabídku (NSPopUpButton) z téže palety jako tlačítko (je pod ním s textem "Item1", opět viz prvý obrázek) a roztáhneme jej na stejnou šířku, jakou má textové pole;
• vedle něj dáme další tlačítko a nadepíšeme jej "Delete";
• pod rozevírací nabídku dáme tabulku (NSTableView) z datové, páté palety (její ikonka obsahuje tabulku, a tabulka je v paletě zase hned vlevo nahoře). Tabulku zvětšíme tak, aby zabírala přibližně polovinu ze zbývajícího místa v okně;
• pod tabulku umístíme textový objekt – to je ten, jehož ikonka v textové (druhé) paletě, již vidíme na minulém obrázku, obsahuje "Lorem ipsum dolor..."; ponecháme jej prozatím hodně "nízké";
• pod něj – už k samému dolnímu okraji okna – umístíme z téže paletky "System Font Text" a jeho obsah změníme na "URL:";
• a vedle do pravého dolního rohu okna doplníme další textové pole pro URL;
• a nyní zvětšíme výšku textového objektu tak, aby vyplnil zbytek okna.

Tím máme všechny základní objekty grafického uživatelského rozhraní připraveny; okno by nyní mělo vypadat přibližně nějak takto:

Zbývá ještě jeden trik: zajistit, aby tabulka a textový objekt mezi sebou měly "přepážku", jež umožní beze změny velikosti okna měnit jejich poměrné velikosti. To se v Interface Builderu dělá tak, že oba objekty označíme (zcela standardně, třeba tažením nebo ⇧-klepnutím myši), a pak z nabídky vybereme službu "Layout / Make subviews of / Split View". Objekty se hned spojí a na předělu mezi nimi se objeví "důlek":

Testování uživatelského rozhraní

Interface Builder díky tomu, že obsahuje skutečné, plně funkční objekty (a ne jen nějaké vzory jako resource editory), umožňuje sestavené uživatelské rozhraní ihned vyzkoušet: samozřejmě, dosud nemáme hotový kontrolér ani vazbu na model, takže objekty nebudou korektně spolupracovat a nebudou také obsahovat patřičná data; můžeme si však snadno vyzkoušet, jak dobře (nebo špatně) se s nimi bude pracovat.

Stačí, zvolíme-li příkaz "Test Interface" z nabídky "File". Interface Builder se přepne do režimu, v němž (v mezích možností) simuluje naši aplikaci: můžeme psát do textových polí, můžeme vybírat z rozevírací nabídky, můžeme měnit velikost okna... ouha: zkusíme-li to, vidíme, že objekty uvnitř okna nemění svou velikost odpovídajícím způsobem, ale namísto toho zůstávají "nalepeny" do levého dolního rohu:

To proto, že jsme patřičně nenastavili jejich atributy. Příště si ukážeme, jak na to. Kromě správných změn velikostí také určíme, které textové objekty lze měnit a které ne, nadpis celého okna a podobně.