2. diel - Návrh jednoduchej kalkulačky pre MacOS

V minulej lekcii, Vyvíjame aplikácie pre MacOS v jazyku Swift , sme si urobili úvod do vývoja pre MacOS v jazyku Swift. Dnes si pre začiatok vytvoríme jednoduchú kalkulačku. Tá bude mať dva vstupy pre čísla, výber matematické operácie, vypísanie výsledku a samozrejme tlačidlo pre výpočet.

Výsledok bude vyzerať nejako takto:

Vytvorenie projektu

Teraz sa poďme pustiť do samotnej tvorby. Vytvorte si nový Xcode projekt a v ponuke najprv zvoľte MacOS ako platformu a následne Cocoa App, ako môžete vidieť nižšie.

V ďalšom kroku zadáme názov, napríklad SimpleCalculatorMac. Skontrolujeme, že je vybraný Swift ako jazyk a zaškrtnutá iba voľba "Use Storyboards". Potom stačí vybrať umiestnenie na disku a projekt je vytvorený.

Mal by byť rovno otvorený súbor Main.storyboard, ktorý slúži na vytvorenie používateľského rozhrania. Ak nie je, tak ho kliknutím otvorte. Mali by ste vidieť niečo podobné:

Ak ste potrebné skúšali programovať iOS aplikácie, tak vás možno zarazí dizajnová štruktúra novo vytvorené aplikácie, ktorá je "rozkúskovaný" na tri časti. Po spustení sa ale zobrazí jedno okno a tiež menu aplikácie, ktoré je na MacOS vždy v hornej lište.

Časť samotného okna (tá vyššie) pomenovaná ako Window Controller slúži ako taký kontajner pre naše používateľské rozhranie. Ďalej sa tu nastavuje veľkosť okna a prípadne ešte jej obmedzenia. Naše užívateľské rozhranie budeme vytvárať vo View Controlleru (ďalej len VC) nižšie.

StackView

Pretože budeme mať niekoľko komponentov vedľa seba, hodí sa použiť komponent Stack View, ktorá skladá komponenty vedľa seba alebo pod seba podľa toho, ako si vyberieme.

Na náš VC si teda pretiahneme Horizontal Stack View z knižnice komponentov:

Rovnakým štýlom budeme pridávať ďalšie komponenty. Teraz je našou úlohou naplniť novo pridaný Stack View týmito komponentami a dodržať poradie:

• Text Field with Number Formatter
• combo Box
• TextField with Number Formatter
• Label
• Label

Prvý Label bude mať text =, ten nastavíme v Attributes inšpektorovi. Druhý potrebné 0, tu budeme neskôr zobrazovať výsledok.

Odporúčam komponenty preťahovať do Document Outline, čo je zoznam okien, viewcontrollerů a práve komponentov na ľavej strane editora. To aby ste ľahšie mohli nastaviť poradí. Opäť si môžeme ukázať:

Náhľad v Xcode sa vám pravdepodobne rozhodí, ale to nie je moc dôležité. Po spustení bude aplikácia vyzerať korektne. Teraz máme vo Stack View takmer všetky plánované komponenty a zostáva pár detailov pred spustením.

Nastavenie okna

Nastavíme si veľkosť okna. Najskôr musíme vybrať správny objekt: Window Controller Scene> Window Controller> Window. Teraz môžeme v Attributes inšpektorovi nastaviť "podnadpis" označený ako Title napríklad na "Simple Calculator". V Size inšpektorovi nastavíme veľkosť okna a tiež prípadne zaškrtneme minimálnu či maximálnu veľkosť okna.

Ja som zvolil 480x130 a zároveň tieto rozmery použil ako minimálna. Maximálne rozmery nastavovať nebudeme, pretože si neskôr ukážeme, ako sa naše jednoduché užívateľské rozhranie prispôsobuje veľkosti okna.

Pozíciovanie komponentov MacOS aplikácií

K nastavenie pozícií jednotlivých komponentov slúži tzv. Autolayout. Cez neho definujeme pravidlá a komponenty sú následne dynamicky pozicovanie. Je to z dôvodu, že nevieme, ako veľký má užívateľ displej, ako si aplikáciu rozhodne zväčšiť / zmenšiť a tak podobne.

Autolayout je konceptuálne rovnaký na MacOS ako na iOS, takže si vás dovolím odkázať na iOS Autolayout tutoriál, ak chcete vedieť viac. Mrknúť môžete aj na praktické ukážky.

Nám budú teraz stačiť základy, ktoré pochytíte aj počas výkladu. Najskôr si ukotvíme náš Stack View a vďaka tomu vlastne všetky zatiaľ pridanej komponenty. V našom VC ho budeme centrovať vertikálne a 10 bodov od pravého a ľavého okraja. Tak poďme na to. Označíme Stack View a v Autolayout menu mu tieto tri podmienky nastavíme:

Pre lepší výsledok si nastavíme pár ďalších vlastností nášho Stack View. Nastavíme zarovnanie na "Center Y", distribúciu komponentov na "Fill Equally" a voliteľne tiež Spacing. Attributes inšpektor bude teda vyzerať nasledovne:

Ďalej môžeme pomocou Autolayout obmedzenia nastaviť pevnú a malú šírku našim dvom Label komponentom, pretože jedna zobrazuje iba = a druhá zobrazí číslo, pravdepodobne nie dlhšie ako päť číslic. Môžeme si ukázať potrebné postup pre =:

Pre druhý Label som zvolil pre istotu väčšiu šírku, napr. 65. Tiež si môžete pohrať s nastavením fontu.

Combo Box by síce vyzeral lepšie s obmedzenou šírkou, ale žiadnu mu nenastavujte. Keď som to skúšal, tak fixná šírka rozhodila zvyšok komponentov (menovite dve Text Field komponenty pre zadávanie čísel) a v prvej lekcii by som rád nechal čo najjednoduchšie užívateľské rozhranie.

Combo Box každopádne potrebuje úpravy. V prvom rade mu musíme pridať matematické operácie. Vyberte teda Combo Box a v Attributes inšpektorovi je hneď na prvom mieste zoznam prvkov, v predvolenom stave "Item 1, Item 2, ..". Postupne na prvky dvakrát kliknite a prepíšte na nasledujúce operácie:

• +
• -
• /
• *

Teda sčítanie, odčítanie, delenie a násobenie. Tlačidlom "+" hneď pod zoznamom môžete prípadne pridať ďalší prvok.

Zostáva posledná drobnosť a síce zakázať užívateľovi, aby mohol náš Combo Box editovať, pretože potom môže napísať čokoľvek svojho. My chceme, aby mohol zadať len jednu z prednastavených operácií. V Attributes inšpektorovi musíme nájsť položku Behavior a zmeniť ju z "Editable" na "Selectable". Je zhruba "v polovici" všetkých možností.

Naše užívateľské rozhranie je celkom hotové. Na úvod toho bolo vďaka Autolayot a ďalším nutnosťou celkom veľa. Takže dobrá práca! Teraz stačí pridať tlačidlo pre výpočet a môžeme sa pustiť do programovania.

Tlačidlo

V knižnici komponentov vyhľadajte "button" a do VC si pretiahnite Push Button. Tlačidiel je tu hromada a práve toto sa najlepšie hodí pre naše použitie. Umiestnite ho pod Stack View zhruba na stred. Rovnako si ho zarovnáme. Dávajte pozor, aby ste ho omylom neumiestnili do Stack View.

Tlačidle nastavte v Attributes inšpektorovi napríklad text "Calculate!" pomocou vlastnosti Title. Môžete si tiež pohrať s fontom či pomocou Sound nastaviť zvuk po stlačení.

Zostáva tlačidlo "upratať" pomocou Autolayout. Postup už poznáte z predchádzajúcej práce s UI. Tlačidlo zarovnáme horizontálne na stred a dáme mu fixné šírku a výšku treba 90x30 a v neposlednom rade ešte 20 bodov od hornej hrany, čo je v tomto prípade náš Stack View.

Vaša constraints pre pridanej tlačidlo by mali vyzerať nasledovne (nájdete ich v Size inšpektorovi):

Týmto je naša užívateľské rozhranie pre našu kalkulačku skutočne hotové. Aplikáciu môžete spustiť a vyskúšať, ako sa správa pri roztiahnutí okna.

V budúcej lekcii, Riešené úlohy k 1.-3. lekciu vývoja pre MacOS , kalkulačku dokončíme.

V nasledujúcom cvičení, Riešené úlohy k 1.-3. lekciu vývoja pre MacOS, si precvičíme nadobudnuté skúsenosti z predchádzajúcich lekcií.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.