Dezvoltare pe iPhone (4): prima noastră aplicație (II)

În postarea noastră anterioară am indicat cum va fi aplicația noastră HelloWorld și pașii pe care urma să-i facem pentru a crea aplicația noastră, precum și oferirea de linkuri către documentația necesară. În acest articol începem prin deschiderea XCode și începem să ne dezvoltăm.

Pasul 1. Creați proiectul.

Așa că deschidem XCode și închidem (dacă apare) fereastra de întâmpinare a aplicației. Înainte de a crea proiectul nostru, putem introduce preferințele XCode. În general -> Aspect alegeți „All-In-One”, cel puțin dacă doriți să puteți compara ceea ce vedeți pe ecranele dvs. cu imaginile pe care le veți vedea.

În acest moment creăm proiectul: Fișier -> Proiect nou și alegem Vizualizare:

Așa cum am indicat în articolul anterior, pentru un proiect XCode bazat pe vizualizare, acesta creează o vizualizare legată de o clasă Controller (amintiți-vă că vorbeam despre modelul MVC). Apelați proiectul HelloWorld și salvați-l în folderul dorit. Veți vedea ceva similar cu acesta:

Vedem că avem mai multe fișiere:

• HelloWorldViewController.h și HelloWorldViewController.m. Ambele corespund controlerului ecranului nostru. Aici va fi logica legată de viziunea noastră; În cazul nostru, aici trebuie să existe codul care face ca valoarea etichetei să se schimbe cu ceea ce este introdus în caseta de text. Vedem că există un fișier .h și un alt .m. Primul este antetul, în Java ar fi Interfața. Iată declarațiile variabilelor, metodelor etc. Fișierul .m este cel care conține deja implementarea.
• HelloWorldViewController.xib. ib = Interface Builder. Acest fișier este vizualizarea noastră, ecranul. Este invocat de MainWindow.xib, fațada principală a vederilor pe care nu le vom atinge.
• HelloWorldAppDelegate (.h și .m). Nu le vom modifica, are un indicator către ViewController.
• Info.plist. Este un XML cu informații despre aplicația noastră. Aici putem indica, de exemplu, care este pictograma aplicației noastre.

Pasul 2. Proiectați interfața.

Vom începe să „desenăm” ecranul aplicației noastre. Pentru a face acest lucru, în XCode facem dublu clic pe HelloWorldViewController.xib și vom vedea că se deschide aplicația Interface Builder. În primul rând, ca sfat practic, vă recomand să verificați întotdeauna dacă aveți deschise paletele Inspector și Library. Le puteți deschide în meniul Instrumente din Interface Builder. Paleta Bibliotecă vă va permite să adăugați diferite controale la vizualizarea dvs., iar paleta Inspector vă permite să vedeți proprietățile fiecărui obiect și să le modificați.

Nu vom încerca să facem o aplicație drăguță, ci să o facem să funcționeze. Începeți prin localizarea ecranului, denumit Vizualizare. Dacă nu este deschis, se deschide făcând dublu clic pe Vizualizare în următorul ecran:

În vizualizare, trageți din paleta Bibliotecă un TextField deasupra, o Etichetă dedesubt și, în final, un Buton Rect Rond. Ne uităm la el, dacă avem un control precum TextField selectat, putem muta dimensiunea acestui control, îl putem muta pe ecran ... iar în paleta Inspector îi putem avea proprietățile. Selectând butonul putem pune un titlu cu valoarea «Schimbă!». În cele din urmă vom avea așa ceva:

Cu aceasta am definit interfața aplicației noastre. Se conformează cu ceea ce aveam planificat: o casetă de text (în continuare, TextField) în care vom introduce informații. O etichetă (text fix) și un buton. Când apăsăm butonul, Eticheta va arăta ceea ce am scris în TextField. Pentru a face acest lucru, va trebui să creăm variabilele care se referă la Etichetă și TextField în ViewController și va trebui să indicăm Interface Builder relația dintre Etichetă și TextField cu aceste variabile. De asemenea, va trebui să creăm o metodă în ViewController care este responsabilă pentru actualizarea valorii etichetei cu ceea ce am introdus în TextField și să raportăm butonul la acea metodă în Interface Builder. Toate acestea vor fi pașii 3, 4 și 5 din scriptul nostru inițial și vor fi explicate în următoarea postare.

Desigur, înainte de finalizare vă recomand să vă uitați la ceea ce apare în paleta Bibliotecă atunci când ați selectat, de exemplu, un TextField pentru ao adăuga la vizualizare:

Puteți vedea că explică ce face controlul TextField, dar scrie și „UITextField” dedesubt. Acest lucru este important, deoarece ne spune care clasă din cadrul Cocoa UIKit corespunde acestui control. Acest lucru ne oferă un indiciu: pentru a crea variabila care gestionează acest control în ViewController, va trebui să fie de tip UITextField.