Jeszcze na początku chcę bardzo podziękować Czarkowi vel 'devila' za pomoc merytoryczną, bez niego ten tutorial by nie powstał.
Miał to być podcast z dźwiękiem i innymi bajeram, ale zrezygnowałem z tego z powodów czasowych.
Mam nadzieję że przyda się taki przykład każdemu kto chce programować.
Proszę o uwagi.
Wszelkie prawa to tego tutorialu należą do mnie i kopiowanie lub wykorzystywanie 'poza' portalem MyApple bez mojej zgody jest niedozwolone.
== krok 01 ======================
Pracuje na Xcode 2.2.1 oraz systemie 10.4.6
(powiększ obrazek ~24KB)
== krok 02 i 03 ======================
Tworzymy nowy projekt File->New Project->Application->Cocoa Application
(powiększ obrazek ~24KB)
(powiększ obrazek ~20KB)
== krok 04 ======================
Project Name -> kalkulator
Project Directory -> tu będzie katalog w którym umieścimy nasz projekt
(powiększ obrazek ~16KB)
== krok 05 ======================
Otworzy się okno projektu, po lewej stronie jest drzewo dotyczące naszego projektu a po prawej szczegóły każdej z gałęzi.
(powiększ obrazek ~32KB)
== krok 06 ======================
Nacisjkając na ikonkę 'Editor' zmieniamy prawą część okna na edytor wybranego pliku. Tworzenie aplikacji zaczniemy od stworzenia okna naszego kalkulatora.
rozwijamy zakładkę 'Resources' i dwukrotnie klikamy na 'ManMenu.nib' jest to plik w którym są wszystkie informacje na temat naszego okna
(powiększ obrazek ~28KB)
== krok 07 ======================
Uruchomił nam się Interface Builder. W tym programie będziemy tworzyć wizualną część naszego kalkulatora.
Widzimy okno z nagłówkiem 'Window'. To jest okno naszego programu.
(powiększ obrazek ~36KB)
== krok 08 ======================
Z palety kontrolek wybieramy kontrolkę 'NSTextField' i przesuwamy na okno naszego kalkulatora
będzie to nasz wyświetlacz.
== krok 09 i 10 ======================
Zanim przejdziemy do dodawania przycisków powinniśmy skonfigurować nasz wyświetlacz.
'NSTextField' to kontrolka która służy do wprowadzania lub wyświetlania informacji. Więc jak najbardziej nadaje się na wyświetlacz do kalkulatora.
Wybieramy z menu Tools -> Show Inspector i uzyskamy dostęp do okna w którym możemy ustawiać właściwości naszej kontrolki.
(powiększ obrazek ~40KB)
(powiększ obrazek ~36KB)
== krok 11 ======================
Zaznaczamy naszą kontrolkę i zmieniamy 'Aligment' do 'prawej' aby cyfry były wyświetlane jak w każdym kalkulatorze.
W 'Options' odznaczamy 'Editable' co nie pozwoli użytkownikowi nic wpisać w naszej kontrolce.
Zachęcam do poeksperymentowania z innymi opcjami.
== krok 12 ======================
Teraz przyszedł czas na przyciski, dodajemy jeden i zmieniamy w jego właściwościach:
'Title' dajmy 'C', będzie to przycisk do kasowania wszelkich obliczeń jakie już zrobiliśmy.
'Key Equiv' wybierzemy z menu opuszczanego ESCAPE.
== krok 13 ======================
Czas na stworzenie wszystkich brakujących przycisków, zaznaczamy nasz przycisk 'C' wybieramy menu 'Edit->Duplicate'. Dzięki temu posunięciu uzyskamy dokładną kopie naszego przycisku.
Przesuńmy w prawo i zmieńmy 'Title' na '+' i 'Key Equiv' na '+'.
Tak stwórzmy wszystkie przyciski.
Teraz zmiejszymy nasze okno. Zaistniał pewien problem z pomniejszeniem go do rozmiarów jakie byśmy chcieli. Więc w naszym oknie z właściwościami zmieniamy na zakładkę 'SIZE' i w 'Min Size W' wpisujemy np. 50 i naciskamy enter.
Teraz możemy pomniejszyć okno do porządanego wymiaru.
Pozostało uniemożliwić zmiane wielkości okna przez użytkownika.
Wracamy do 'Attributes' i odznaczamy 'Zoom'.
== krok 14 ======================
Jeśli chodzi o wygląd naszego kalkulatora to uznajemy że na tę chwile musi nam wystarczyć. Możemy sprawdzić jak się będzie zachowywać nasz program wybierając 'File->Test Interface'.
== krok 15 ======================
Następnie łączymy nasze okno z przyciskiem '=' aby program wiedział jaka jest jego pierwszą akcją.
Trzymając 'CTRL' przeciągamy z ikonki 'Window' na przycisk '='.
Następnie wybieramy 'intialFirstResponder' i przycisk 'Connect'.
== krok 16 ======================
Teraz zabierzemy się za zdefiniowanie zmiennych dla naszego kalkulatora. Zmienne muszą gdzieś się znajdować. W tym przypadku będzie to klasa.
Przechodzimy do zakładki 'Classes' i przesuwamy maksymalnie do lewej strony. Wybieramy 'NSObject' i naciskamy 'Enter'.
Nazywamy naszą nową klasę 'MAkalkulator' i zatwierdzamy enterem.
== krok 17 ======================
Teraz w zakładce 'Artibutes' wybieramy 'Outlets' i przycisk 'Add' i nadajemy nazwę 'wyswietlacz'.
Zatwierdzamy enterem. Zmienna jest typu 'id' jest to nie zdefiniowany typ który dopasowuje się do tego co chcemy umieścić w naszej zmiennej.
Następnie 'Actions', tutaj zdefiniujemy co ma się wydarzyć po naciśnięciu przycisków, tak wię dodajemy akcje:
czysc
dodaj
odejmij
pomnoz
podziel
suma
prz1 - 'przy' to skrót od przycisk
...
prz0
== krok 18 ======================
Zostało nam tylko powiązać nasze akcje z przyciskami i wyświetlacz z naszą zmienną, żeby to zrobić musimy stworzyć intancje naszej klasy. Wybieramy naszą klase i z menu 'Classes->Instance...'.
Pojawił nam się sześcian który graficznie reprezentuje instancje klasy, więc naciskamy 'CTRL' i przeciągamy myszke nad kontrolkę wyświetlacza robimy Connect. W ten sposób dostęp do zawartości naszego wyświetlacza będziemy mieli przez outlet 'wyswietlacz'.
Połączymy przyciski z akcjami:
wybieramy przycisk, naciskamy CTRL i przeciągamy na sześcian a następnie wybieramy z jaka funkcja ma być wołana.
== krok 19 ======================
Uporządkujemy jeszcze menu.
Usuwamy File, Window, Help i w menu Edit zostawiamy tylko Copy
Dwukrotnie klikamy na NewApplication i wpisukemy Kalkulator.
Zmieniamy jeszcze About, Quit i Hide.
Usuwamy Preferences.
== krok 20 ======================
Stwórzmy pliki klasy w których będziemy wpisywać kod programu. W tym celu wybieramy naszą klase i prawy przycisk myszki->Create files for ...
Akceptujemy wybierając Choose.
Teraz zapisujemy i zamykamy Interface Builder, oczywiście zapisujemy naszą pracę.
== krok 21 i 22 ======================
Widzimy dwa nowe pliki z rozszerzeniem .m i .h
W pliku z rozszerzeniem .h definiujemy nasze zmienne, funkcje.
W pliku z rozszerzeniem .m zawartości naszych funkcji.
(powiększ obrazek ~32KB)
http://kaleka.city-net.pl/~code/myapple/Tutorials/Kalkulator/22_.jpeg
(powiększ obrazek ~32KB)
== krok 23 ======================
Najpierw zacznijmy od zdefiniowania brakujących zmiennych, ale zanim to zrobimy to wyjaśnijmy sobie jak ma działać nasz kalkulator.
Musimy pamiętać jaką operacje ma wykonać oraz powinniśmy gdzieś pamiętać pierwszą zmienną na jakiej ma zostać wykonana operacja.
Czyli jeśli wprowadzimy np. 2 i naciśniemy dodaj to nasz program powinien zapamiętać że chcemy 2 dodać do wartości jaką wprowadzi użytkownik.
Definiujemy dwie zmienne int o nazwie 'operacja' oraz 'bufor'
operacja będzie zawierać wartości od 1 do 4 które będą odpowiadały:
1 dodawanie, 2 odejmowanie, 3 monożenie, 4 dzielenie.
http://kaleka.city-net.pl/~code/myapple/Tutorials/Kalkulator/23_.jpeg
(pokaż obrazek 800x600 ~32KB)
== krok 24 ======================
przechodzimy do pliku .m i najpierw zabierzmy się za przyciski liczb. Naciskając na przycisk np 1 powinna zostać wyświetlona wartość 1, jeśli użytkownik ponownie naciśnie 1 to na wyświetlaczy powinna pojawić się liczba 11.
Zacznijmy od wyświetlenia na wyświetlaczu 1.
Odnajdźmy funkcję - (IBAction)prz1:(id)sender i dopiszmy aby outlet wyświetlacz wyświetlił 1;
[wyswietlacz setIntValue:1];
Teraz nieciśnijmy 'Build and Go' program zostanie skompilowany i powinien pokazać się nam nasz kalkulator.
Naciśnijmy teraz 1 na wyświetlaczu pojawi się 1, ponowne naciśnięcie niestety nie wyświetli nam 11.
Zamknijmy nasz kalkulator.
== krok 25 ======================
W naszej funkcji dopiszmy:
int iTemp = [wyswietlacz intValue];
tutaj deklarujemy nową zmienną iTemp której nadajemy wartość liczbową która znajduje się wyświetlaczu.
http://kaleka.city-net.pl/~code/myapple/Tutorials/Kalkulator/25_.jpeg
(pokaż obrazek 800x600 ~32KB)
== krok 26 ======================
Teraz wystarczy tą zmienną pomnożyć przez 10 i dodać 1.
Na koniec tylko wyświetlić wynik naszego dodawania.
http://kaleka.city-net.pl/~code/myapple/Tutorials/Kalkulator/26_.jpeg
(pokaż obrazek 800x600 ~36KB)
== krok 27 ======================
Troszkę zoptymalizuję ten zapis i będzie on wyglądać tak:
[wyswietlacz setIntValue:[wyswietlacz intValue]*10+1];
Tak jak w matematyce wszystkie operacje są wykonywane tak jak pokazują to nawiasy.
Efekt ten sam a jakość i szybkość nie porównywalna.
http://kaleka.city-net.pl/~code/myapple/Tutorials/Kalkulator/27_.jpeg
(pokaż obrazek 800x600 ~32KB)
== krok 28 ======================
Teraz przypiszmy dla wszystkich funkcji od 2 do 0
Uruchommy nasz program i sprawdźmy czy wszystko działa.
Pamiętajmy o ułomności naszego kalkulatora, zasięg jego operacji to int !!!
== krok 29 ======================
Teraz w funkcji 'czyść' ustawiamy zero.
[wyswietlacz setIntValue:0];
http://kaleka.city-net.pl/~code/myapple/Tutorials/Kalkulator/29_.jpeg
(pokaż obrazek 800x600 ~32KB)
== krok 30 ======================
Funkcja która będzie wywołana po naciśnięciu np. dodawania powinna działać tak:
Najpierw do naszej zmiennej bufor powinniśmy zapisać to co akurat jest na wyświetlaczu i wywołujemy funkcje która jest przyporządkowana do przycisku 'C' która czyści wyświetlacz. Jeszcze tylko poinformujmy nasz program że od teraz operacją jaką ma wykonać jest dodawanie.
== krok 31 ======================
Odpowiednio modyfikując uzupełniamy trzy następne funkcje.
== krok 32 ======================
Do pełni szczęścia pozostała nam ostatnia funkcja która przeprowadzi operacje na buforze i wyświetlaczu i wynik wyświetli na wyświetlaczu.
Wiemy że rodzaj operacji jest przechowywany w zmiennej operacja więc zastosujmy wybór poprzez switch(operacja)
Tak więc jeśli będzie 1 to znaczy że dodajemy bufor do zawartości wyświetlacza i wynik wpisujemy na wyświetlacz.
switch(operacja)
{
case 1:
[wyswietlacz setIntValue:bufor+[wyswietlacz intValue]];
break;
case 2:
[wyswietlacz setIntValue:bufor-[wyswietlacz intValue]];
break;
case 3:
[wyswietlacz setIntValue:bufor*[wyswietlacz intValue]];
break;
case 4:
[wyswietlacz setIntValue:bufor/[wyswietlacz intValue]];
break;
}
Teraz kompiujemy nasz kalkulator i testujemy. Następnie myślimy jak ulepszyć nasz kalkulator i go ulepszamy.
==============================
Cały gotowy projekt.
