Ceea ce vrei tu să faci în Xcode se numește : GUI-based application - “Graphical User Interface” - O Aplicație care conține ȘI o interfață grafică pentru a putea fi utilizată. Mai toate conțin.
Un exercițiu !
1. Deschide Xcode.app
2. Din bara de meniu a lui Xcode - alege submeniul “New Project…” din meniul “File” sau ⇧⌘N
3. Se va deschide o nouă fereastră - “New Project” - “Imagineazăți un birou cu sertare la stâng și la drepta” În partea stângă se află o listă (Meniu Stânga sau Principal - Dosare) cu dosare care îți redă o serie posibilități pentru viitoarea aplicație / funcție pe care vrei să o implementezi. În dreapta (Meniu Dreapta sau Secundar ori Fereastră Aplicații / Funcții), în care fiecare dosar din “Meniul Principal” va afișa o serie de posibilități care vor fi responsabile de construirea viitoarei aplicații / funcții, care sunt redate în această parte a ferestrei. În jos-dreapta (Fereastră Descriere) apare o mică descriere pentru fiecare metodă de sus-dreapta, pentru ați face cât mai clar cu ce se ocupă ea.
4. Alege din Meniul Principal - “Applications”
5. Alege din Meniul din Drepta - “Cocoa Application”
6. Se va deschide o supra fereastră în care trebuie să îi dai nume viitoarei aplicații - “Denumește-o” și alege locul unde ea va fi salvată - Nemele unei aplicații ar trebui să înceapă cu o majusculă. În cazul nostru în dăm numele de “SimpleGUIApp” Adică o aplicație simplă cu “Graphical User Interface”.
7. Se va deschide o fereastră “Info.plist - SimpleGUIApp” care va conține toate informațiile viitoare aplicații. Sus are un meniu cu butoane / funcții active. În partea stângă se află o listă (Meniu Stânga sau Principal denumit “Guoups & Files”) care îți redă toate dosarele și fișierele care le va conține aplicația ta. În dreapta (Meniu Dreapta sau Secundar ori Fereastră Fișiere), redând tot conținutul dosarului din Stânga. În jos-dreapta (Fereastră Cod numit “Editor”) apare codul în sine al aplicației tale, pentru fiecare fișier din fiecare dosar. Cod deja scris de către Xcode, sau de tine.
8. Acum ne vom accentua pe MainMenu.xib sau .nib care îl găsești la : fereastra aplicației din Xcode, la noi “Info.plis - SimpleGUIApp” > Groups & Files > “SimpleGUIApp” > Resources > MainMenu.xib - dublu click pe acesta.
9. Se va deschide aplicația Interface Builder, cu trei ferestre : Una dedicată lui ManiMenu.xib (English - de obicei), care va cuprinde toate informațiile / funcțiile “GUI” ale aplicației tale. Alta cu “Meniul Principal - MainMenu” care va fi în bara de meniu a lui Mac OS X, atunci când deschizi aplicația ta în mod normal. Și alta cu “Fereastra aplicație tale - Window”. În care te vei juca după propriul plac, utilizând intrumentele “Inspector” ⇧⌘I și “Libray” ⇧⌘L, pentru început, de la meniul “Tools” din Interface Builder:
10. Acum vom pune butoane și text. Alege submeniul “Inspector” ⇧⌘I și “Libray” ⇧⌘L, din meniul “Tools” a lui Interface Builder.
11. Punem butoane: Alege Tools > Library > View & Cells > Buttons > Push Button (NSButton). Selectează-l si fă drag & drop a lui “Push Button” în fereastra “Window”. Repetă acțiunea de două ori, adică pune două butoane, unde vrei tu în acea fereastră.
12. Dăm nume butoanelor. Ai doua căi : a) dublu click și îi dai nume, sau alegi Tools > Inspector > Button Attributes > Title și îi dai nume. Eu le-am denumit, cel din stânga “Get to 10” iar cel din drepata “Reset”
13. Pumen text: Alege Tools > Library > View & Cells > Inputs & Values >Label (NSTextField). Selectează-l si fă drag & drop a lui “Label” în fereastra “Window”.
14. Vrem să adăugăm fiecărui buton, și nu numai, funcții (Classes mai exact). Te duci în Xcode.app acum. Xcode.app alegi fereastra deja deschisă, “Info.plist - SimpleGUIApp”, în aceasta în “Meniul Principal” alegi “SimpleGUIApp” > Classes, pur și simplu îl selectezi, atâta tot. Aceasta e nevoie pentru ca funcțiile să fie salvate la locul lor, altfel vor fi salvate acolo unde ai selectat ultima oară, probabil în Resources.
15. Creem codul acțiunilor. Din bara de meniu a lui Xcode - alege submeniul “New File…” din meniul “File” sau ⌘N
16. Se va deschide o nouă fereastră - “New File” - Aceeași poveste ca și la punctul 3.
17. Alege din Meniul Principal - “Cocoa”
18. Alege din Meniul din Drepta - “Objective-C class”
19. Se va deschide o supra fereastră în care trebuie să îi dai nume viitoarei acțiuni - “Denumește-o” și vezi să îl salvezi în folderul aplicației tale, cazul nostru “SimpleGUIApp” - Nemele unei acțiuni TREBUIE să fie cu majuscule scris pentru primele 2 sau 3 litere. O acțiune va avea tot timpul 2 sau 3 litere ca și prefix. În cazul nostru are două și în dăm numele de “MEFoo” Unde primele doua litre “ME” sunt pentru “My Experiment”. Nu folosi niciodata, cel puțin pentru început, “NS” aceastea sunt pentru acțiunile lui Apple, din Xcode, ca să nu ajungi la confuzii. “NS” sunt pentru NeXTStep, unde, la ora actuală, sistemul de operare Mac OS X se bazează pe acest NeXT.(e o altă poveste)
20 Acum facem legăturile între acțiuni și funcțiile noastre (butoane etc.). Treci în Interface Builder. Alege Alege Tools > Library > Objects & Controllers > Object (NSObject). Selectează-l și fă drag ^ drop în fereastra MAinMenu.xib (English) care se află deja în Interface Builder deschisă.
21. Denumim acțiunile. În MainMenu.xib (English) trebuie să ai selectat “Object”. Tocmai ce l-ai pus acolo. Acum alegi Tools > Inspector > Identity Inspector (Object Identity) sau ⌘6. Unde la Class Identity > Class alegi din lista desfășurată, sau scri, “MEFoo”, cazul nostru. În MainMenu.xib “Object” se va trasnforma în “Foo”. La Class Identity > Class Actions vei adăuga două acțiuni : apasă pe plus și prima acțiune lanoi se va numi - “getTo19:” a doua se va numi “reset:”, fără ghilimele dar să nu uiți cele două puncte. La Class Identity > Classs Outles vei adăuga “textFiled”, fără ghilimele, aici nu trebuie două puncte.
22. Acum facem conexiunile dintre acțiuni și butoane etc. Te duci în fereastra “Window” din Interface Builder. Selectezi butonul “Get to 10”. Ții apăsată tasta “Control” (ctrl), în timp ce ai selectat butonul “Get to 10” tragi cu “soricelul” (maus) dinspre acel buton spre “Foo” din MAinMenu.xib. O linie albastra se va face vizibilă, când te afli poziționat pe “Foo” numai ține apăsat tastele, va apărea o fereastră mică (neagră) “Recived Actions”, în care ai două opțiuni ; “getTo10” și “reset”, evident, vei alege “getTo10” pentru butonul “Get to 10”. Aceași manevră pentru butonul “Reset” dar vei alege “reset”. Acceași manevră, dar dinspre “Foo” spre “Label”, unde vei alege “textField” din acea fereastră mică “Outlets”.
23. Acum aplicăm codurile în Xcode. În timp ce ai selectată fereastră MainMenu.xib, alegi “Write Class Files…” din meniul “File” a lui Interface Builder. Se va deschide o fereastră “Save”.La Save As: trebuie să scri, dacă nu este deja scris, “MEFoo”, cazul nostru. Apeși “Save” și “Replace”. Astfel reactualizăm acțiunile din “Classes”, de la “SimpleGUIApp” > Classes > MEFoo.h și MEFoo.m, cu noile acțiuni pe care noi le-am creat.
24. Adăugăm un cod. În MEFoo.m codul arată așa :
#import "MEFoo.h"
@implementation MEFoo
- (IBAction)reset:(id)sender
{
}
- (IBAction)setTo10:(id)sender
{
}
@end
iar în MEFoo.h așa :
#import <Cocoa/Cocoa.h>
@interface MEFoo : NSObject
{
IBOutlet id textFiled;
}
- (IBAction)reset:(id)sender;
- (IBAction)setTo10:(id)sender;
@end
După ce adăugăm codul nostru în MEFoo.m, MEFoo.m trebuie să arate așa :
#import "MEFoo.h"
@implementation MEFoo
- (IBAction)reset:(id)sender
{
[textField setIntValue:0];
}
- (IBAction)setTo10:(id)sender
{
[textField setIntValue:10]
}
@end
25. Compilara aplicației (Rock it!!) Apasă pe “Build and Go”. Se va lansa aplicația tocmai creată. Acum încearcă să vezi ce a ieșit.
BAFTĂ
